/* public/assets/css/base/variables.css */
/* FUENTE PRINCIPAL: INTER (Variable Font) */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

/* FUENTE SECUNDARIA: MONTSERRAT */
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

:root {
  --color-negro: #000000;
  --color-blanco: #ffffff;

  /* Tipografías */
  --fuente-principal: "Inter", sans-serif;
  --fuente-secundaria: "Montserrat", sans-serif;

  /* Colores base */
  --color-principal: #000000;
  --color-acento: #005a2c; /* acento principal */
  --color-secundario: #1f1a17;
  --color-fondo-body: #cfe9dc;
  --color-fondo: #f5f5f5;
  --color-tarjeta: #ffffff;
  --color-fondo-tarjeta-tabs: #afafaf;

  /* Colores auxiliares */
  --color-exito: #28a745;
  --color-exito-2: #2e8b57;
  --color-peligro: #dc3545;
  --color-advertencia-importante: #ff9800;
  --color-advertencia: #ffc107;
  --color-info: #17a2b8;
  --color-campo-ayuda: #745c1a;
  --color-badge-descuento: #aa5830;

  /* Colores específicos UI header */
  --color-texto-idioma: #767676; /* texto selector idiomas */
  --color-texto-boton: #0a0a0a; /* texto botones Acceso / Registrarse */
  --color-placeholder: #767676; /* texto placeholders del buscador */
  --color-borde-input: #afafaf; /* bordes de inputs / select */
  --color-texto-menu: #0a0a0a; /* enlaces del menú (en bold en CSS) */

  /* Colores de bordes */
  --color-borde-1: #e0e0e0;
  --color-borde-2: #d3d3d3;
  --color-borde-3: #cccccc;

  /* Colores de texto */
  --color-texto-principal: #000000;
  --color-texto-secundario: #6c757d;
  --color-texto-terciario: #bbbbbb;
  --color-texto-claro: #ffffff;

  /* Color botones */
  --color-acento-hover: #004c24;

  /* Colores auxiliares para badges / estados */
  --color-badge-neutral-bg: #f0f0f0;

  /* Estados genéricos */
  --color-positivo: #006b2a;
  --color-error: #b30000;
  --color-error-suave: rgba(204, 0, 0, 0.1);

  /* ===== GRISES JERÁRQUICOS (dashboard categorías) ===== */
  --cat-bg-depth-0: #ffffff; /* categoría padre */
  --cat-bg-depth-1: #f0f0f0; /* subcategoría (más gris) */
  --cat-bg-depth-2: #eaeaea; /* sub-subcategoría */
  --cat-bg-depth-3: #e4e4e4; /* profundidad 3+ */
  --cat-bg-atributos: #dedede; /* bloque atributos (más gris) */
  --cat-bg-atributo-row: #d8d8d8; /* fila atributo (la más gris) */

  /* ===== COLORES ROLES DE USUARIO (CLIENTE / EDITOR / GESTOR / ADMIN / SUPER ADMIN) ===== */

  /* CLIENTE – Nivel 1, externo */
  --rol-cliente-bg: #e8f5e9;
  --rol-cliente-text: #1b5e20;
  --rol-cliente-border: #c8e6c9;

  /* EDITOR – Nivel 2, interno */
  --rol-editor-bg: #e3f2fd;
  --rol-editor-text: #0d47a1;
  --rol-editor-border: #bbdefb;

  /* GESTOR – Nivel 3, interno */
  --rol-gestor-bg: #f3e5f5;
  --rol-gestor-text: #4a148c;
  --rol-gestor-border: #e1bee7;

  /* ADMIN – Nivel 4, interno */
  --rol-admin-bg: #fff3e0;
  --rol-admin-text: #e65100;
  --rol-admin-border: #ffe0b2;

  /* SUPER ADMIN – máximo nivel */
  --rol-superadmin-bg: #ffebee;
  --rol-superadmin-text: #b71c1c;
  --rol-superadmin-border: #ffcdd2;

  /* Estados pedidos */
  --pedido-aceptado-bg: rgba(0, 153, 51, 0.14);
  --pedido-aceptado-text: #006b2a;
  --pedido-aceptado-border: rgba(0, 153, 51, 0.22);

  --pedido-en-proceso-bg: rgba(11, 90, 166, 0.12);
  --pedido-en-proceso-text: #0b5aa6;
  --pedido-en-proceso-border: rgba(11, 90, 166, 0.2);

  --pedido-enviado-bg: rgba(106, 27, 154, 0.12);
  --pedido-enviado-text: #6a1b9a;
  --pedido-enviado-border: rgba(106, 27, 154, 0.2);

  --pedido-espera-recogida-bg: rgba(255, 193, 7, 0.16);
  --pedido-espera-recogida-text: #8a6d00;
  --pedido-espera-recogida-border: rgba(255, 193, 7, 0.24);

  --pedido-entregado-bg: rgba(46, 125, 50, 0.12);
  --pedido-entregado-text: #2e7d32;
  --pedido-entregado-border: rgba(46, 125, 50, 0.2);

  --pedido-cancelado-bg: rgba(204, 0, 0, 0.12);
  --pedido-cancelado-text: #b30000;
  --pedido-cancelado-border: rgba(204, 0, 0, 0.22);

  /* Estados pago */
  --pago-pagado-bg: rgba(0, 153, 51, 0.14);
  --pago-pagado-text: #006b2a;
  --pago-pagado-border: rgba(0, 153, 51, 0.22);

  --pago-pendiente-bg: rgba(120, 120, 120, 0.12);
  --pago-pendiente-text: #555;
  --pago-pendiente-border: rgba(120, 120, 120, 0.2);

  --pago-devuelto-bg: rgba(204, 0, 0, 0.12);
  --pago-devuelto-text: #b30000;
  --pago-devuelto-border: rgba(204, 0, 0, 0.22);

  /* Tamaños de texto base */
  --tamano-texto-base: 16px;
  --tamano-titulo: 2rem;
  --tamano-nav: 1.8rem;
  --tamano-subtitulo: 5rem;
  --tamano-sub-subtitulo: 3rem;
  --tamano-parrafo: 2rem;
  --tamano-parrafo-medio: 1.3rem;
  --tamano-parrafo-pequeno: 1rem;
  --tamano-mini: 1.6rem;

  /* Tamaños de texto detallados */
  --texto-10: 1rem; /* 10px */
  --texto-12: 1.2rem; /* 12px */
  --texto-14: 1.4rem; /* 14px */
  --texto-16: 1.6rem; /* 16px */
  --texto-18: 1.8rem; /* 18px */
  --texto-20: 2rem; /* 20px */
  --texto-24: 2.4rem; /* 24px */
  --texto-32: 3.2rem; /* 32px */
  --texto-48: 4.8rem; /* 48px */

  /* Bordes redondeados */
  --border-radius-0: 0; /* sin redondeo */
  --border-radius-4: 0.4rem; /* 4px */
  --border-radius-6: 0.6rem; /* 6px */
  --border-radius-10: 1rem; /* 10px */
  --border-radius-12: 1.2rem; /* 12px */
  --border-radius-20: 2rem; /* 20px */
  --border-radius-total: 9999px; /* redondeo total de formas */
  --border-radius-circular: 50%; /* para círculos */

  /* Tamaños de íconos */
  --icono-12: 1.2rem; /* 12px */
  --icono-16: 1.6rem; /* 16px */
  --icono-20: 2rem; /* 20px */
  --icono-24: 2.4rem; /* 24px */
  --icono-32: 3.2rem; /* 32px */
  --icono-40: 4rem; /* 40px */
  --icono-56: 5.6rem; /* 56px */
  --icono-80: 8rem; /* 80px */
  --icono-120: 12rem; /* 120px */

  /* Tamaños de logos */
  --logo-24: 2.4rem; /* 24px */
  --logo-32: 3.2rem; /* 32px */
  --logo-48: 4.8rem; /* 48px */
  --logo-64: 6.4rem; /* 64px */
  --logo-80: 8rem; /* 80px */
  --logo-100: 10rem; /* 100px */
  --logo-120: 12rem; /* 120px */
  --logo-160: 16rem; /* 160px */
  --logo-250: 25rem; /* 250px */

  /* Sombras */
  --sombra-base: 0 0 4px 0 rgba(0, 0, 0, 0.25);

  /* Estados visuales descuentos por categoría */
  --descuento-0-bg: #ffffff;
  --descuento-0-border: var(--color-borde-input);
  --descuento-0-text: var(--color-texto-principal);

  --descuento-low-bg: #fff9db;
  --descuento-low-border: #f2d56b;
  --descuento-low-text: #6b5200;

  --descuento-mid-bg: #ffe7b8;
  --descuento-mid-border: #f0b85c;
  --descuento-mid-text: #7a4700;

  --descuento-high-bg: #ffd2a8;
  --descuento-high-border: #eb9348;
  --descuento-high-text: #7b3100;

  --descuento-max-bg: #ffd6d6;
  --descuento-max-border: #df6b6b;
  --descuento-max-text: #8f1111;
}