/* RingPago · colores de las pantallas (DATOS.md, apartados 10 y 54).
 *
 * Es el ÚNICO archivo con colores: los demás estilos y el JavaScript solo usan estas variables (lo comprueba la prueba de
 * pantallas). Salen de la muestra aprobada de la v3 (ringpago-simulador/docs/identidad/lamina-app-real-v3.html; DATOS.md,
 * 53.12 y 53.13): negro de base y un solo color de acento, el naranja, con letra negra encima. Los tres estados (bien, en
 * curso y problema) son una familia: el mismo brillo y la misma fuerza, más suaves que el naranja.
 * Tema oscuro por defecto (data-tema="oscuro" en <html>) y claro (data-tema="claro"), que se elige en el perfil
 * (js/tema.js). Los colores de las tarjetas son provisionales hasta que Adrián dé su tipología.
 */

:root {
  /* ---- el acento (igual en los dos temas) */
  --naranja: #FF6A1A;        /* el botón principal, la insignia de lo pendiente, dónde estás en el menú */
  --sobre-naranja: #0A0A0B;  /* la letra encima del naranja: 6,91 */

  /* ---- tarjetas que no cambian con el tema (provisionales) */
  --t-laboral-eur: linear-gradient(140deg, #2A2A2F 0%, #1C1C20 60%, #141416 100%);
  --t-laboral-usd: linear-gradient(140deg, #1F2024 0%, #141518 60%, #0C0C0E 100%);
  --t-negocios-eur: linear-gradient(140deg, #FFFFFF 0%, #F1F2F4 100%);
  --t-negocios-usd: linear-gradient(140deg, #F1F2F4 0%, #DADDE2 100%);
  --t-texto: #F4F4F5;            /* en la Laboral y en la de Operador */
  --t-texto-negocios: #0E0E10;
  --t-borde-negocios: #C9CDD3;
  --t-filo: #8F96A1;             /* el filo de la Laboral y de la de Operador: plata */
  --t-mini-eur: linear-gradient(135deg, #1C1C20 35%, #FF6A1A 100%);
  --t-mini-usd: linear-gradient(135deg, #1C1C20 35%, #A9B6CF 100%);
  /* el brillo de la esquina de la Personal, con los efectos: el de la muestra, igual en los dos temas (bloques 3 y 6) */
  --t-brillo-eur: rgba(255, 96, 24, 0.4);
  --t-brillo-usd: rgba(170, 180, 200, 0.22);

  /* ---- la moneda de la invitación a recargar (con la R en plata dentro) */
  --promo-moneda: radial-gradient(circle at 35% 30%, #2E2F35, #121214 70%);
}

/* ---------------------------------------------------------------- tema oscuro (por defecto) */
/* Siempre sobre <html> (:root): un botón con data-tema dentro de la página no debe cambiar sus colores. */
:root,
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0A0A0B;
  --superficie: #121214;
  --superficie-2: #18181B;
  --borde: #26262B;              /* decorado: los recuadros (no hace falta contraste) */
  --borde-campo: #64646C;        /* el borde de un campo: 3,0 o más sobre todos los fondos */
  --texto: #F4F4F5;
  --suave: #A1A1AA;
  --tenue: #808088;
  --acento-texto: #FF8A4C;       /* la letra naranja pequeña */
  --elegido-borde: #FF6A1A;      /* el borde de lo elegido (producto, opción, país) */
  --lado: #08080A;               /* el menú de la izquierda, en el ordenador */
  --activo: #18181B;             /* dónde estás, en ese menú */
  --barra: #18181B;
  --barra-icono: #A1A1AA;
  --barra-activa-fondo: #F4F4F5;
  --barra-activa-icono: #0A0A0B;
  --boton-fondo: #18181B;
  --boton-texto: #F4F4F5;
  --principal-fondo: var(--naranja);
  --principal-texto: var(--sobre-naranja);
  --fuerte-fondo: #F4F4F5;       /* el segmento elegido, el aviso de arriba, la píldora «Ver» */
  --fuerte-texto: #0A0A0B;
  --gris-fondo: #111113;
  --gris-texto: #5C5C64;         /* lo que no se puede usar (WCAG no pide mínimo; el motivo va en --suave) */
  --tecla: #18181B;
  --exito-texto: #70DCB6;
  --exito-fondo: #0B3326;
  --aviso-texto: #E9BD68;
  --aviso-fondo: #38290A;
  --error-texto: #FEA9B0;
  --error-fondo: #412024;
  --foco: #F4F4F5;
  --velo: rgba(0, 0, 0, 0.6);
  --sombra-barra: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --sombra-hoja: 0 -20px 50px -20px rgba(0, 0, 0, 0.8);

  /* ---- la tarjeta Personal sigue al tema (provisional) */
  --t-personal-eur: linear-gradient(140deg, #1C1C20 0%, #141416 60%, #101012 100%);
  --t-personal-usd: linear-gradient(140deg, #1A1B1F 0%, #131417 60%, #0F1013 100%);
  --t-texto-personal: #F4F4F5;
  --t-pildora-fondo: #F4F4F5;    /* «En el inicio» */
  --t-pildora-texto: #0A0A0B;

  /* ---- los efectos: solo en lo de los clientes (base.css; DATOS.md, 54.6) */
  --cristal-fondo: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --cristal-borde: rgba(255, 255, 255, 0.11);
  --cristal-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --barra-cristal: rgba(24, 24, 27, 0.86);  /* la --barra de la muestra, tal cual */
  --brillo: rgba(255, 96, 24, 0.34);        /* más fuerte, la letra --suave baja de 4,5 en su centro */
  --brillo-ancho: rgba(255, 96, 24, 0.16);  /* el del inicio en el ordenador, el de la muestra */
}

/* ---------------------------------------------------------------- tema claro (se elige en el perfil) */
:root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #F6F6F4;
  --superficie: #FFFFFF;
  --superficie-2: #EFEFEC;
  --borde: #DEDEDA;
  --borde-campo: #85858D;
  --texto: #0E0E10;
  --suave: #55555C;
  --tenue: #68686F;
  --acento-texto: #B84300;
  --elegido-borde: #B84300;      /* el naranja sobre blanco da 2,87: aquí, el oscuro */
  --lado: #FFFFFF;
  --activo: #EFEFEC;
  --barra: #0E0E10;              /* la barra sigue oscura, como en la muestra */
  --barra-icono: #A1A1AA;
  --barra-activa-fondo: #F4F4F5;
  --barra-activa-icono: #0A0A0B;
  --boton-fondo: #EFEFEC;
  --boton-texto: #0E0E10;
  --principal-fondo: var(--naranja);
  --principal-texto: var(--sobre-naranja);
  --fuerte-fondo: #0E0E10;
  --fuerte-texto: #F4F4F5;
  --gris-fondo: #EDEDEA;
  --gris-texto: #9A9AA0;
  --tecla: #FFFFFF;
  --exito-texto: #046E53;
  --exito-fondo: #D9F7EA;
  --aviso-texto: #795702;
  --aviso-fondo: #FAEDD5;
  --error-texto: #993847;
  --error-fondo: #FFE8E9;
  --foco: #0E0E10;
  --velo: rgba(14, 14, 16, 0.45);
  --sombra-barra: 0 10px 30px -10px rgba(14, 14, 16, 0.45);
  --sombra-hoja: 0 -20px 50px -20px rgba(14, 14, 16, 0.35);

  --t-personal-eur: linear-gradient(140deg, #FFFFFF 0%, #F7F7F5 100%);
  --t-personal-usd: linear-gradient(140deg, #FBFBFC 0%, #F1F2F4 100%);
  --t-texto-personal: #0E0E10;
  --t-pildora-fondo: #0E0E10;
  --t-pildora-texto: #F4F4F5;

  --cristal-fondo: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --cristal-borde: rgba(0, 0, 0, 0.07);
  --cristal-sombra: 0 10px 30px -18px rgba(0, 0, 0, 0.25);
  --barra-cristal: rgba(14, 14, 16, 0.92);
  --brillo: rgba(255, 106, 26, 0.18);
  --brillo-ancho: rgba(255, 106, 26, 0.08);
}

/* ---------------------------------------------------------------- al imprimir (el comprobante de una devolución) */
/* En blanco y negro, con cualquier tema (DATOS.md, 46.3). */
@media print {
  :root,
  :root[data-tema="oscuro"],
  :root[data-tema="claro"] {
    color-scheme: light;
    --fondo: #FFFFFF;
    --superficie: #FFFFFF;
    --superficie-2: #FFFFFF;
    --lado: #FFFFFF;
    --borde: #000000;
    --texto: #000000;
    --suave: #000000;
    --tenue: #000000;
    --acento-texto: #000000;
    --exito-texto: #000000;
    --exito-fondo: #FFFFFF;
    --aviso-texto: #000000;
    --aviso-fondo: #FFFFFF;
    --error-texto: #000000;
    --error-fondo: #FFFFFF;
  }
}