/* public/style.css */

/* Variables de color y tipografía de ucamcert.site */
:root {
    /* Colores base */
    --background: hsl(0 0% 100%); /* Blanco */
    --foreground: hsl(82 46% 20%); /* Verde Oscuro/Marrón verdoso */

    /* Colores de componentes y tipografía */
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(82 46% 20%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(82 46% 20%);

    /* Colores primarios y de acento */
    --primary: hsl(82 46% 20%); /* Verde Oscuro/Marrón verdoso */
    --primary-foreground: hsl(0 0% 100%); /* Blanco */
    --secondary: hsl(323 31% 37%); /* Púrpura/Malva oscuro */
    --secondary-foreground: hsl(0 0% 100%); /* Blanco */
    --muted: hsl(35 21% 67%); /* Grisáceo/Verde muy claro */
    --muted-foreground: hsl(82 46% 20%); /* Verde Oscuro/Marrón verdoso */
    --accent: hsl(35 21% 67%); /* Grisáceo/Verde muy claro */
    --accent-foreground: hsl(82 46% 20%); /* Verde Oscuro/Marrón verdoso */
    --destructive: hsl(0 84.2% 60.2%); /* Rojo brillante */
    --destructive-foreground: hsl(0 0% 100%); /* Blanco */

    /* Bordes y otros */
    --border: hsl(35 21% 80%); /* Gris claro/Beige */
    --input: hsl(35 21% 80%);
    --ring: hsl(82 46% 20%);
    --radius: .5rem; /* Radio de borde: 8px */

    /* Colores específicos de sidebar (si usas una, puedes ignorarlos si no) */
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(82 46% 20%);
    --sidebar-primary: hsl(82 46% 20%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(35 21% 67%);
    --sidebar-accent-foreground: hsl(82 46% 20%);
    --sidebar-border: hsl(35 21% 80%);
    --sidebar-ring: hsl(82 46% 20%);
}

/* Aplicar tipografía */
html, body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
}

/* Fondo general y color de texto */
body {
    background-color: var(--background);
    color: var(--foreground);
    margin: 0; /* Asegura que no haya margen predeterminado */
    line-height: 1.6; /* Mejora la legibilidad */
}

/* Anular colores de texto de Bootstrap con tus variables */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--primary) !important; } /* Usaremos primary para success */
.text-info { color: var(--secondary) !important; } /* Usaremos secondary para info */
.text-dark { color: var(--foreground) !important; } /* Dark será tu foreground */
.text-light { color: var(--background) !important; } /* Light será tu background */
.text-muted { color: var(--muted) !important; }

/* Anular botones de Bootstrap */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius); /* Aplicar el radio */
}
.btn-primary:hover {
    background-color: hsl(82 46% 15%); /* Un poco más oscuro para hover */
    border-color: hsl(82 46% 15%);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius); /* Aplicar el radio */
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-success { /* Si quieres que el botón "success" tenga el color primary */
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius); /* Aplicar el radio */
}
.btn-success:hover {
    background-color: hsl(82 46% 15%);
    border-color: hsl(82 46% 15%);
}
.btn-outline-success {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius); /* Aplicar el radio */
}
.btn-outline-success:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Anular Barra de Navegación */
.navbar.bg-primary {
    background-color: var(--primary) !important;
}
.navbar-brand, .navbar-nav .nav-link {
    color: var(--primary-foreground);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
    color: var(--primary-foreground);
    text-decoration: underline; /* O algún otro estilo para activo/hover */
}

/* Anular Fondos de Bootstrap */
.bg-light { background-color: hsl(0 0% 98%) !important; } /* Un blanco casi puro para light */
.bg-dark { background-color: var(--primary) !important; } /* Dark podría ser tu primary */
.bg-primary { background-color: var(--primary) !important; }

/* Anular Bordes */
.border-bottom { border-color: var(--border) !important; }
.card {
    border-color: var(--border);
    border-width: 1px; /* Asegurar que el borde sea visible */
    border-style: solid; /* Asegurar que el borde sea sólido */
    border-radius: var(--radius); /* Aplicar el radio de borde general */
    /* Este box-shadow es un ejemplo, puedes ajustarlo para que sea más sutil o marcado */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Estilos para las secciones que usan bg-light, bg-white para que se integren */
.section {
    background-color: var(--card); /* Usar el color de card como default para secciones */
    border-radius: var(--radius);
}
.section.hero-section {
    background-color: var(--card); /* Fondo para la hero section */
}
.section .lead {
    color: var(--foreground); /* Asegurar que el texto lead sea el color principal */
}

/* Ajustes generales para elementos de formulario */
.form-control, .form-select {
    border-color: var(--input);
    border-radius: var(--radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 .25rem hsla(var(--ring-h), var(--ring-s), var(--ring-l), .25); /* Efecto de enfoque */
}