/* ============================================================
   INVENTAPP — PALETA DE COLORES CENTRALIZADA
   Modifica solo este archivo para cambiar los colores en toda la web.
   ============================================================

   COLORES PRINCIPALES
   --color-primary   : Color principal (botones, links, acciones, logos)
   --color-secondary : Color secundario (textos, iconos, fondos gris-azulado)
   --color-tertiary  : Color terciario (hover, variantes del principal)
   --color-white     : Blanco para texto sobre fondos de color

   COLORES DE ESTADO
   --color-success   : Éxito / disponible / confirmado
   --color-warning   : Advertencia / atención
   --color-danger    : Error / peligro / eliminación
   --color-orange    : Naranja (avisos intermedios)
   --color-info      : Información / destacado neutro
   --color-cyan      : Cian (complementario)
   ============================================================ */

:root {
    /* === COLORES PRINCIPALES === */
    --color-primary:            #2561AC;
    --color-primary-hover:      #204c86;   /* = terciario, usado en hover */
    --color-primary-active:     #1a3d6e;   /* más oscuro para active/pressed */
    --color-primary-light:      #e8f0fb;   /* fondo suave del color principal */
    --color-primary-text:       #FFFFFF;   /* texto sobre fondo primary */

    --color-secondary:          #585858;
    --color-secondary-hover:    #424242;
    --color-secondary-light:    #f0f0f0;
    --color-secondary-text:     #FFFFFF;

    --color-tertiary:           #204c86;
    --color-white:              #FFFFFF;

    /* === COLORES DE ESTADO === */
    --color-success:            #49B170;
    --color-success-hover:      #3a9059;
    --color-success-light:      #edfbf1;
    --color-success-text:       #FFFFFF;

    --color-warning:            #EEC216;
    --color-warning-hover:      #c9a20f;
    --color-warning-light:      #fffbe8;
    --color-warning-text:       #1a1a1a;

    --color-danger:             #C52739;
    --color-danger-hover:       #a41e2f;
    --color-danger-light:       #fdeef0;
    --color-danger-text:        #FFFFFF;

    --color-orange:             #CA4F1C;
    --color-orange-hover:       #a83f16;
    --color-orange-light:       #fdf0eb;
    --color-orange-text:        #FFFFFF;

    --color-info:               #2561AC;   /* igual que primary para consistencia */
    --color-info-hover:         #204c86;
    --color-info-light:         #e8f0fb;
    --color-info-text:          #FFFFFF;

    --color-cyan:               #6DB6C3;
    --color-cyan-hover:         #519aaa;
    --color-cyan-light:         #edf7f9;
    --color-cyan-text:          #FFFFFF;
}


/* ============================================================
   INVENTAPP — TIPOGRAFÍA CENTRALIZADA
   Modifica solo este archivo para cambiar la fuente en toda la web.
   Fuente: Source Sans 3 (Google Fonts)

   VARIACIONES DISPONIBLES
   --font-weight-light      : 300  — Light (textos auxiliares, metainfo)
   --font-weight-regular    : 400  — Regular (body text, párrafos, tablas)
   --font-weight-semibold   : 600  — SemiBold (subtítulos, labels destacados)
   --font-weight-extrabold  : 800  — ExtraBold (títulos H1/H2 principales)

   USO SEMÁNTICO
   --font-weight-heading    : ExtraBold (800) — H1, H2
   --font-weight-subheading : SemiBold  (600) — H3, H4, th, labels
   --font-weight-body       : Regular   (400) — p, td, inputs, texto general
   --font-weight-secondary  : Light     (300) — captions, helper text, muted
   Italic + Light                             — blockquote, cite, comentarios
   ============================================================ */

:root {
    /* === FAMILIA === */
    --font-family-base: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Override de la variable de Tailwind para que font-sans use nuestra fuente */
    --font-sans: var(--font-family-base);

    /* === PESOS DISPONIBLES === */
    --font-weight-light:     300;
    --font-weight-regular:   400;
    --font-weight-semibold:  600;
    --font-weight-extrabold: 800;

    /* === ROLES SEMÁNTICOS === */
    --font-weight-heading:    var(--font-weight-extrabold);
    --font-weight-subheading: var(--font-weight-semibold);
    --font-weight-body:       var(--font-weight-regular);
    --font-weight-secondary:  var(--font-weight-light);

    /* === TAMAÑOS BASE === */
    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */
}

/* ============================================================
   APLICACIÓN GLOBAL DE TIPOGRAFÍA
   Cubre tanto el catálogo público como el panel admin.
   ============================================================ */

html, body,
.font-sans {
    font-family: var(--font-family-base) !important;
    font-weight: var(--font-weight-body);
}

/* Encabezados principales — ExtraBold (800) */
h1, h2 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-heading);
}

/* Subtítulos — SemiBold (600) */
h3, h4 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-subheading);
}

/* Encabezados menores — SemiBold (600) */
h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
}

/* Texto navegación y menús */
nav, nav a, nav button,
header, header a, header button,
.navbar, .navbar a,
.menu, .menu a,
[role="navigation"], [role="navigation"] a {
    font-family: var(--font-family-base);
}

/* Filtros, etiquetas, badges, botones */
button, .btn, label,
select, input, textarea,
.badge, .tag, .filter,
[class*="badge-"], [class*="btn-"] {
    font-family: var(--font-family-base);
}

/* Textos de tabla */
table, th, td, caption {
    font-family: var(--font-family-base);
}
th {
    font-weight: var(--font-weight-subheading);
}

/* Textos secundarios — Light (300) */
small, .small, .text-muted,
.form-text, .helper-text,
figcaption {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-secondary);
}

/* Citas y comentarios — Light Italic */
blockquote, cite, .quote, .comment-text {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-light);
    font-style: italic;
}


/* ============================================================
   OVERRIDE DE VARIABLES DE TAILWIND / METRONIC (PANEL ADMIN)
   Las clases del tema admin usan --tw-primary, --tw-success, etc.
   Las sobrescribimos aquí para que apunten a nuestra paleta.
   ============================================================ */

/* Modo claro */
:root,
.light {
    --tw-primary:              var(--color-primary);
    --tw-primary-active:       var(--color-primary-hover);
    --tw-primary-light:        var(--color-primary-light);
    --tw-primary-inverse:      var(--color-primary-text);
    --tw-primary-clarity:      rgba(37, 97, 172, 0.2);        /* primary con 20% opacidad */

    --tw-success:              var(--color-success);
    --tw-success-active:       var(--color-success-hover);
    --tw-success-light:        var(--color-success-light);
    --tw-success-inverse:      var(--color-success-text);
    --tw-success-clarity:      rgba(73, 177, 112, 0.2);

    --tw-danger:               var(--color-danger);
    --tw-danger-active:        var(--color-danger-hover);
    --tw-danger-light:         var(--color-danger-light);
    --tw-danger-inverse:       var(--color-danger-text);
    --tw-danger-clarity:       rgba(197, 39, 57, 0.2);

    --tw-warning:              var(--color-warning);
    --tw-warning-active:       var(--color-warning-hover);
    --tw-warning-light:        var(--color-warning-light);
    --tw-warning-inverse:      var(--color-warning-text);
    --tw-warning-clarity:      rgba(238, 194, 22, 0.2);

    --tw-info:                 var(--color-cyan);
    --tw-info-active:          var(--color-cyan-hover);
    --tw-info-light:           var(--color-cyan-light);
    --tw-info-inverse:         var(--color-cyan-text);
    --tw-info-clarity:         rgba(109, 182, 195, 0.2);

    /* Secundario del admin (usa fondo gris claro) — no alteramos la gama de grises */
}

/* Modo oscuro — variantes oscuras que también deben respetar la paleta */
.dark {
    --tw-primary:              #3a7acf;      /* ligeramente más claro para legibilidad en dark */
    --tw-primary-active:       #2561AC;
    --tw-primary-light:        #1a2d4a;
    --tw-primary-inverse:      #FFFFFF;
    --tw-primary-clarity:      rgba(37, 97, 172, 0.2);

    --tw-success:              #5bcb84;
    --tw-success-active:       #49B170;
    --tw-success-light:        #1a2e24;
    --tw-success-inverse:      #FFFFFF;
    --tw-success-clarity:      rgba(73, 177, 112, 0.2);

    --tw-danger:               #e0445a;
    --tw-danger-active:        #C52739;
    --tw-danger-light:         #2e1a1d;
    --tw-danger-inverse:       #FFFFFF;
    --tw-danger-clarity:       rgba(197, 39, 57, 0.2);

    --tw-warning:              #f5d040;
    --tw-warning-active:       #EEC216;
    --tw-warning-light:        #2e2b1a;
    --tw-warning-inverse:      #1a1a1a;
    --tw-warning-clarity:      rgba(238, 194, 22, 0.2);

    --tw-info:                 #87cad5;
    --tw-info-active:          #6DB6C3;
    --tw-info-light:           #1a2c2f;
    --tw-info-inverse:         #FFFFFF;
    --tw-info-clarity:         rgba(109, 182, 195, 0.2);
}


/* ============================================================
   UTILIDADES SEMÁNTICAS PARA EL CATÁLOGO PÚBLICO
   El catálogo usa clases Tailwind hardcoded como "bg-indigo-600",
   "text-indigo-600", etc. Aquí las sobrescribimos mediante CSS
   para que respeten la paleta centralizada sin editar los HTMLs.
   ============================================================ */

/* --- Fondo (bg-indigo-*) → color principal --- */
.bg-indigo-50  { background-color: var(--color-primary-light) !important; }
.bg-indigo-100 { background-color: color-mix(in srgb, var(--color-primary) 12%, white) !important; }
.bg-indigo-200 { background-color: color-mix(in srgb, var(--color-primary) 25%, white) !important; }
.bg-indigo-400 { background-color: color-mix(in srgb, var(--color-primary) 65%, white) !important; }
.bg-indigo-500 { background-color: var(--color-primary) !important; }
.bg-indigo-600 { background-color: var(--color-primary) !important; }
.bg-indigo-700 { background-color: var(--color-primary-hover) !important; }

/* --- Texto (text-indigo-*) → color principal --- */
.text-indigo-400 { color: color-mix(in srgb, var(--color-primary) 65%, white) !important; }
.text-indigo-500 { color: var(--color-primary) !important; }
.text-indigo-600 { color: var(--color-primary) !important; }
.text-indigo-700 { color: var(--color-primary) !important; }
.text-indigo-800 { color: var(--color-primary-hover) !important; }

/* --- Borde (border-indigo-*) → color principal --- */
.border-indigo-200 { border-color: color-mix(in srgb, var(--color-primary) 30%, white) !important; }
.border-indigo-500 { border-color: var(--color-primary) !important; }
.border-indigo-600 { border-color: var(--color-primary) !important; }

/* --- Ring (ring-indigo-*) → color principal --- */
.ring-indigo-500 { --tw-ring-color: var(--color-primary) !important; }

/* --- Hover bg-indigo-* --- */
.hover\:bg-indigo-100:hover { background-color: color-mix(in srgb, var(--color-primary) 12%, white) !important; }
.hover\:bg-indigo-200:hover { background-color: color-mix(in srgb, var(--color-primary) 25%, white) !important; }
.hover\:bg-indigo-500:hover { background-color: var(--color-primary) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--color-primary-hover) !important; }

/* --- Hover text-indigo-* --- */
.hover\:text-indigo-600:hover,
.group:hover .group-hover\:text-indigo-600 { color: var(--color-primary) !important; }
.hover\:text-indigo-800:hover,
.group:hover .group-hover\:text-indigo-800 { color: var(--color-primary-hover) !important; }

/* --- Focus ring-indigo-* --- */
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--color-primary) !important; }
.focus\:border-indigo-500:focus { border-color: var(--color-primary) !important; }

/* --- Colores de estado: verde → success --- */
.bg-green-50   { background-color: var(--color-success-light) !important; }
.bg-green-100  { background-color: color-mix(in srgb, var(--color-success) 15%, white) !important; }
.text-green-600 { color: var(--color-success) !important; }
.text-green-700 { color: var(--color-success-hover) !important; }
.text-green-800 { color: var(--color-success-hover) !important; }
.border-green-200 { border-color: color-mix(in srgb, var(--color-success) 30%, white) !important; }
.border-green-400 { border-color: var(--color-success) !important; }

/* --- Colores de estado: rojo → danger --- */
.bg-red-50    { background-color: var(--color-danger-light) !important; }
.bg-red-100   { background-color: color-mix(in srgb, var(--color-danger) 12%, white) !important; }
.bg-red-600   { background-color: var(--color-danger) !important; }
.text-red-500 { color: var(--color-danger) !important; }
.text-red-600 { color: var(--color-danger) !important; }
.text-red-700 { color: var(--color-danger-hover) !important; }
.text-red-800 { color: var(--color-danger-hover) !important; }
.border-red-200 { border-color: color-mix(in srgb, var(--color-danger) 25%, white) !important; }
.hover\:bg-red-50:hover  { background-color: var(--color-danger-light) !important; }
.hover\:text-red-700:hover { color: var(--color-danger-hover) !important; }

/* --- Colores de estado: naranja → orange --- */
.bg-orange-50  { background-color: var(--color-orange-light) !important; }
.bg-orange-100 { background-color: color-mix(in srgb, var(--color-orange) 12%, white) !important; }
.text-orange-600 { color: var(--color-orange) !important; }
.text-orange-800 { color: var(--color-orange-hover) !important; }
.border-orange-200 { border-color: color-mix(in srgb, var(--color-orange) 25%, white) !important; }

/* --- Colores de estado: amarillo → warning --- */
.text-yellow-400 { color: var(--color-warning) !important; }
.bg-yellow-100   { background-color: var(--color-warning-light) !important; }

/* --- Formularios: radio & checkbox accent --- */
input[type="radio"].text-indigo-600,
input[type="checkbox"].text-indigo-600 {
    accent-color: var(--color-primary) !important;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
    accent-color: var(--color-primary);
}

/* ============================================================
   CLASES PERSONALIZADAS GLOBALES
   Reutilizables en cualquier vista del proyecto.
   ============================================================ */

/* Botón principal */
.btn-app-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-app-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-text);
}
.btn-app-primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

/* Botón secundario */
.btn-app-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
    border: 1px solid var(--color-secondary);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-app-secondary:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-secondary-text);
}

/* Badge / tag de estado */
.badge-app-success { background-color: var(--color-success-light); color: var(--color-success-hover); border: 1px solid color-mix(in srgb, var(--color-success) 30%, white); }
.badge-app-danger  { background-color: var(--color-danger-light);  color: var(--color-danger-hover);  border: 1px solid color-mix(in srgb, var(--color-danger)  30%, white); }
.badge-app-warning { background-color: var(--color-warning-light); color: var(--color-warning-hover); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, white); }
.badge-app-orange  { background-color: var(--color-orange-light);  color: var(--color-orange-hover);  border: 1px solid color-mix(in srgb, var(--color-orange)  30%, white); }
.badge-app-info    { background-color: var(--color-cyan-light);    color: var(--color-cyan-hover);    border: 1px solid color-mix(in srgb, var(--color-cyan)    30%, white); }
.badge-app-primary { background-color: var(--color-primary-light); color: var(--color-primary);       border: 1px solid color-mix(in srgb, var(--color-primary) 25%, white); }

/* Texto de color principal */
.text-app-primary   { color: var(--color-primary) !important; }
.text-app-secondary { color: var(--color-secondary) !important; }
.text-app-success   { color: var(--color-success) !important; }
.text-app-danger    { color: var(--color-danger) !important; }
.text-app-warning   { color: var(--color-warning) !important; }
.text-app-orange    { color: var(--color-orange) !important; }
.text-app-info      { color: var(--color-cyan) !important; }

/* Fondo de color principal */
.bg-app-primary   { background-color: var(--color-primary) !important; color: var(--color-primary-text) !important; }
.bg-app-secondary { background-color: var(--color-secondary) !important; color: var(--color-secondary-text) !important; }
.bg-app-success   { background-color: var(--color-success) !important; color: var(--color-success-text) !important; }
.bg-app-danger    { background-color: var(--color-danger) !important; color: var(--color-danger-text) !important; }
.bg-app-warning   { background-color: var(--color-warning) !important; color: var(--color-warning-text) !important; }
.bg-app-orange    { background-color: var(--color-orange) !important; color: var(--color-orange-text) !important; }
.bg-app-info      { background-color: var(--color-cyan) !important; color: var(--color-cyan-text) !important; }

/* Borde de color principal */
.border-app-primary { border-color: var(--color-primary) !important; }
.border-app-success { border-color: var(--color-success) !important; }
.border-app-danger  { border-color: var(--color-danger) !important; }
.border-app-warning { border-color: var(--color-warning) !important; }