/* ============================================================
	 Sistema de diseño FET — Paleta, Tipografías y Componentes
	 ------------------------------------------------------------
	 Paleta (RGB provista):
	 - PANTONE 141 - 16U  => R:21 G:37 B:21   (#152515)
	 - PANTONE 154 - 16U  => R:121 G:163 B:61 (#79A33D)
	 - PANTONE 167 - 7U   => R:189 G:195 B:56 (#BDC338)

	 Tipografías institucionales:
	 - Titulares: "Palatino Linotype Bold"
	 - Documentos/UI: "Segoe UI"
	 - Publicidad: "Roboto"

	 Nota: Este archivo define variables CSS y utilidades reutilizables.
============================================================ */

/* Opcional: carga Roboto desde Google Fonts (requiere internet) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Variables del sistema */
:root {
    /* Colores base de la paleta institucional */
    --color-primary-900: #152515;
    /* PANTONE 141 - 16U (oscuro) */
    --color-primary-600: #79A33D;
    /* PANTONE 154 - 16U (principal) */
    --color-primary-400: #BDC338;
    /* PANTONE 167 - 7U (acento) */

    /* Soportes neutros */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-neutral-900: #1a1a1a;
    --color-neutral-700: #3d3d3d;
    --color-neutral-500: #6b7280;
    --color-neutral-300: #d1d5db;
    --color-neutral-200: #e5e7eb;
    --color-neutral-100: #f3f4f6;

    /* Texto según contraste */
    --text-on-dark: #ffffff;
    --text-on-light: #152515;
    /* Verde profundo para destacar sobre claro */

    /* Tipografías */
    --font-display: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    /* Titulares */
    --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', 'DejaVu Sans', sans-serif;
    /* Documentos/UI */
    --font-ad: Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    /* Publicidad */

    /* Escalas tipográficas (basadas en 16px) */
    --fs-xs: 0.75rem;
    /* 12px */
    --fs-sm: 0.875rem;
    /* 14px */
    --fs-base: 1rem;
    /* 16px */
    --fs-lg: 1.125rem;
    /* 18px */
    --fs-xl: 1.25rem;
    /* 20px */
    --fs-2xl: 1.5rem;
    /* 24px */
    --fs-3xl: 1.875rem;
    /* 30px */
    --fs-4xl: 2.25rem;
    /* 36px */
    --fs-5xl: 3rem;
    /* 48px */

    --line-tight: 1.2;
    --line-normal: 1.5;
    --line-relaxed: 1.7;

    /* Radios y sombras */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-2: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);

    /* Botones */
    --btn-padding-y: .625rem;
    --btn-padding-x: 1rem;
    --btn-font-weight: 600;
    --focus-ring: 0 0 0 3px rgba(121, 163, 61, 0.35);
    /* anillo acorde al primario */
}

/* Reset y fundamentos */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-100);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--line-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
    .object-fit-cover { object-fit: cover; }
    .badge.bg-success-subtle { background: #eaf7ef; color: #2e7d32; }

/* Enlaces */
a {
    color: var(--color-primary-900);
    text-decoration: none;
}

a:hover {
    color: #6C9237;
    text-decoration: underline;
}

/* Tipografías por rol */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-ad);
    font-weight: 700;
    /* Palatino Linotype Bold */
    color: var(--color-primary-900);
    line-height: var(--line-tight);
    margin: 0 0 .5em 0;
}

h1 {
    font-size: clamp(2rem, 4vw, var(--fs-5xl));
}

h2 {
    font-size: clamp(1.75rem, 3vw, var(--fs-4xl));
}

h3 {
    font-size: clamp(1.5rem, 2.5vw, var(--fs-3xl));
}

h4 {
    font-size: var(--fs-2xl);
}

h5 {
    font-size: var(--fs-xl);
}

h6 {
    font-size: var(--fs-lg);
}

p {
    margin: 0 0 1em 0;
}

/* Utilidades tipográficas */
.font-palatino {
    font-family: var(--font-display);
}

.font-segoe {
    font-family: var(--font-ui);
}

.font-roboto {
    font-family: var(--font-ad);
}

.text-xs {
    font-size: var(--fs-xs);
}

.text-sm {
    font-size: var(--fs-sm);
}

.text-base {
    font-size: var(--fs-base);
}

.text-lg {
    font-size: var(--fs-lg);
}

.text-xl {
    font-size: var(--fs-xl);
}

.text-2xl {
    font-size: var(--fs-2xl);
}

.text-3xl {
    font-size: var(--fs-3xl);
}

.text-4xl {
    font-size: var(--fs-4xl);
}

.text-5xl {
    font-size: var(--fs-5xl);
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Utilidades de color de texto */
.text-primary {
    color: var(--color-primary-600) !important;
}

.text-accent {
    color: var(--color-primary-400) !important;
}

.text-dark {
    color: var(--color-primary-900) !important;
}

.text-light {
    color: var(--color-white) !important;
}

.text-muted {
    color: var(--color-neutral-500) !important;
}

/* Utilidades de fondo */
.bg-primary {
    background-color: var(--color-primary-600) !important;
    color: var(--text-on-dark) !important;
}

.bg-accent {
    background-color: var(--color-primary-400) !important;
    color: var(--color-primary-900) !important;
}

.bg-dark {
    background-color: var(--color-primary-900) !important;
    color: var(--text-on-dark) !important;
}

.bg-light {
    background-color: var(--color-neutral-100) !important;
    color: var(--text-on-light) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
    color: var(--text-on-light) !important;
}

/* Botones base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: inherit;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .02s ease;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:active {
    transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"],
.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Variantes rellenas */
.btn-primary {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #6C9237;
    border-color: #6C9237;
}

.btn-accent {
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
    color: var(--color-primary-900);
}

.btn-accent:hover {
    background-color: #A9B43B;
    border-color: #A9B43B;
}

.btn-dark {
    background-color: var(--color-primary-900);
    border-color: var(--color-primary-900);
    color: var(--color-white);
}

.btn-dark:hover {
    background-color: #0F1B0F;
    border-color: #0F1B0F;
}

/* Variantes outline */
.btn-outline-primary {
    background: transparent;
    color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.btn-outline-primary:hover {
    background: rgba(121, 163, 61, .08);
}

.btn-outline-accent {
    background: transparent;
    color: var(--color-primary-400);
    border-color: var(--color-primary-400);
}

.btn-outline-accent:hover {
    background: rgba(189, 195, 56, .12);
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-primary-900);
    border-color: var(--color-primary-900);
}

.btn-outline-dark:hover {
    background: rgba(21, 37, 21, .08);
}

/* Tamaños de botón */
.btn-sm {
    padding: .45rem .75rem;
    font-size: var(--fs-sm);
    border-radius: calc(var(--radius-sm) - 2px);
}


.btn-lg {
    padding: .85rem 1.25rem;
    font-size: var(--fs-lg);
    border-radius: var(--radius-md);
}

.btn-block {
    width: 100%;
    display: inline-flex;
}

/* Iconos dentro de botón */
.btn .icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
}

.btn .icon.leading {
    margin-right: .35rem;
}

.btn .icon.trailing {
    margin-left: .35rem;
}

/* Componentes adicionales ligeros */
.card {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
}

.badge-primary {
    background: rgba(121, 163, 61, .12);
    color: var(--color-primary-900);
}

.badge-accent {
    background: rgba(189, 195, 56, .18);
    color: var(--color-primary-900);
}

/* Helpers de espaciado mínimos */
.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

/* Tablas y formularios básicos (colores institucionales) */
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--color-neutral-200);
    text-align: left;
}

thead th {
    background: rgba(121, 163, 61, .08);
    color: var(--color-primary-900);
    font-family: var(--font-ui);
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-neutral-900);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: var(--focus-ring);
}

/* Secciones con fondos marca */
.section--brand {
    background: linear-gradient(180deg, rgba(121, 163, 61, .12) 0%, rgba(189, 195, 56, .12) 100%);
}

.section--dark {
    background: var(--color-primary-900);
    color: var(--text-on-dark);
}