/* P2 · Suave. La forma de la propuesta pastel (tarjetas sueltas, bordes
   redondeados, mucho aire) con los colores clásicos del correo: azul, blanco y
   gris azulado. Tiene modo noche, azul marino profundo. Detalle propio: el
   saludo con el resumen del día arriba de Recibidos. */
:root {
  --fuente: 'Figtree', system-ui, sans-serif;
  --fuente-titulo: 'Fraunces', Georgia, serif;
  --fuente-mono: 'DM Mono', ui-monospace, monospace;
  --peso-titulo: 600;

  --bg: #EEF2F8;
  --sup: #FFFFFF;
  --sup2: #E9EEF6;
  --tinta: #1A2332;
  --suave: #5B6678;
  --linea: #DCE2EB;
  --linea-suave: #E9EDF3;
  --acento: #1B5FD6;
  --acento-hover: #174FB5;
  --acento-tinta: #FFFFFF;
  --acento-suave: #E1EBFC;
  --acento-fuerte: #1550B8;
  --peligro: #C8322F;
  --peligro-suave: #FCE8E6;
  --ok: #1E7F4E;
  --ok-suave: #E3F4EA;
  --estrella: #E3A008;

  --ta-bg: #E1EDFF; --ta-fg: #1D58B0;
  --tb-bg: #E3F3E8; --tb-fg: #1E7340;
  --tc-bg: #FEF0D9; --tc-fg: #945700;
  --td-bg: #FCE8E6; --td-fg: #B42D2A;

  --av-s: 72%; --av-l: 90%; --av-ts: 55%; --av-tl: 32%;
  --radio-av: 13px;
  --radio: 20px;
  --radio-chico: 12px;
  --radio-panel: 24px;
  --radio-nav: 14px;
  --radio-redactar: 18px;
  --radio-fab: 20px;
  --hueco: 12px;
  --panel-linea: transparent;
  --lista-bg: transparent;
  --hover: #F4F7FB;
  --seleccion: #E6EEFC;
  --sombra: 0 2px 6px rgba(26, 35, 50, .05), 0 18px 40px -20px rgba(26, 35, 50, .22);
  --sombra-alta: 0 22px 60px -18px rgba(26, 35, 50, .35);
  --sombra-redactar: 0 8px 20px -8px rgba(27, 95, 214, .55);
  --buscar-bg: #FFFFFF;
  --buscar-linea: #DCE2EB;
  --aviso-bg: #1A2332;
  --aviso-accion: #8AB4F8;
  --velo: rgba(26, 35, 50, .38);
  --acceso-bg: radial-gradient(60% 50% at 15% 10%, #DCE8FC 0, transparent 70%), radial-gradient(50% 45% at 90% 85%, #E3F3E8 0, transparent 70%), radial-gradient(45% 40% at 85% 15%, #FCE8E6 0, transparent 70%), #EEF2F8;

  /* Tonos propios de esta propuesta (cambian con el modo noche). */
  --fila-hover: #FAFCFF;
  --fila-sombra: rgba(26, 35, 50, .05);
  --fila-sombra-hover: rgba(26, 35, 50, .28);
  --fila-abierta: #C9DAF8;
  --resumen-bg: linear-gradient(120deg, #DCE8FC 0%, #E8F0FB 55%, #E3F3E8 100%);
  --resumen-chip: rgba(255, 255, 255, .78);
  --resumen-chip-hover: #FFFFFF;
  --sello-bg: linear-gradient(135deg, #4F8BF0, #1B5FD6 60%, #174FB5);
  --tabs-sombra: rgba(26, 35, 50, .35);
  color-scheme: light;
}

/* Modo noche: azul marino, paneles un poco más claros que el fondo y el azul
   subido de tono para que se lea bien. */
:root[data-tema="oscuro"] {
  --bg: #0B1220;
  --sup: #131C2E;
  --sup2: #1A2438;
  --tinta: #E6ECF5;
  --suave: #93A1B8;
  --linea: #243049;
  --linea-suave: #1C2740;
  --acento: #4C8DFF;
  --acento-hover: #6A9FFF;
  --acento-tinta: #FFFFFF;
  --acento-suave: rgba(76, 141, 255, .16);
  --acento-fuerte: #8AB4FF;
  --peligro: #FF7A73;
  --peligro-suave: rgba(255, 122, 115, .14);
  --ok: #5FD394;
  --ok-suave: rgba(95, 211, 148, .13);
  --estrella: #F5C04A;

  --ta-bg: rgba(76, 141, 255, .18);  --ta-fg: #9DC1FF;
  --tb-bg: rgba(95, 211, 148, .15);  --tb-fg: #8FE3B4;
  --tc-bg: rgba(245, 192, 74, .15);  --tc-fg: #F7D27E;
  --td-bg: rgba(255, 122, 115, .15); --td-fg: #FFA8A2;

  --av-s: 40%; --av-l: 26%; --av-ts: 75%; --av-tl: 80%;
  --hover: #172136;
  --seleccion: rgba(76, 141, 255, .14);
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -22px rgba(0, 0, 0, .7);
  --sombra-alta: 0 24px 60px -18px rgba(0, 0, 0, .8);
  --sombra-redactar: 0 8px 22px -8px rgba(76, 141, 255, .55);
  --buscar-bg: #131C2E;
  --buscar-linea: #243049;
  --aviso-bg: #E6ECF5;
  --aviso-tinta: #0B1220;
  --aviso-accion: #1B5FD6;
  --velo: rgba(3, 7, 15, .6);
  --campo: #0F1728;
  --pista: #243049;
  --inv-bg: #172136;
  --fuera: #0E1626;
  --tabs-bg: #111A2B;
  --acceso-bg: radial-gradient(60% 50% at 15% 10%, rgba(76, 141, 255, .20) 0, transparent 70%), radial-gradient(50% 45% at 90% 85%, rgba(95, 211, 148, .10) 0, transparent 70%), #0B1220;

  --fila-hover: #17213A;
  --fila-sombra: rgba(0, 0, 0, .3);
  --fila-sombra-hover: rgba(0, 0, 0, .6);
  --fila-abierta: rgba(76, 141, 255, .45);
  --resumen-bg: linear-gradient(120deg, #16284A 0%, #152238 55%, #13302A 100%);
  --resumen-chip: rgba(255, 255, 255, .07);
  --resumen-chip-hover: rgba(255, 255, 255, .13);
  --sello-bg: linear-gradient(135deg, #6A9FFF, #4C8DFF 60%, #2F6FE0);
  --tabs-sombra: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Tema: el sol se ve de noche (para volver al día) y la luna de día. */
:root:not([data-tema="claro"]) .si-claro, :root[data-tema="claro"] .si-oscuro { display: none; }

/* La lista es una columna de tarjetas sueltas sobre el fondo. */
.wm-lista { padding-right: .2rem; }
.wm-hilos { display: flex; flex-direction: column; gap: 6px; padding: 0 .1rem 1rem; }
.hilo { border: 0; border-radius: 16px; background: var(--sup); box-shadow: 0 1px 2px var(--fila-sombra); }
.hilo:hover { background: var(--fila-hover); box-shadow: 0 6px 16px -10px var(--fila-sombra-hover); }
.hilo.abierto { background: var(--seleccion); box-shadow: inset 0 0 0 1.5px var(--fila-abierta); }
.hilo.no-leido .hilo-de::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .45rem; border-radius: 50%; background: var(--acento); vertical-align: 1px; }
.wm-lista-cab, .wm-chips { padding-left: .4rem; }
.wm-lista-cab h1 { font-size: 1.45rem; }
.wm-lector { box-shadow: var(--sombra); }
.wm-hilo-cab h2 { font-size: 1.7rem; font-variation-settings: "SOFT" 100, "WONK" 0; }
.wm-msj { border-bottom-style: dashed; }
.wm-nav a { font-weight: 500; }
.wm-nav a.activo { background: var(--sup); color: var(--acento-fuerte); box-shadow: 0 2px 8px -4px var(--fila-sombra-hover); }
.wm-redactar { box-shadow: var(--sombra-redactar); }
.wm-marca-sello { border-radius: 14px; background: var(--sello-bg); }
.filtro { border-color: transparent; background: var(--sup); }
.filtro[aria-pressed="true"] { background: var(--acento); color: #fff; }
.wm-cal-cuerpo, .wm-tabla-env, .kpi, .wm-tarjeta { box-shadow: var(--sombra); border-color: transparent; }
.wm-cal-cuerpo { border-top: 0; }
.ev { border-radius: 8px; }
.wm-agenda-ev { border-left-width: 0; box-shadow: inset 4px 0 0 var(--t-fg); }
.wm-acceso-caja { border-color: transparent; box-shadow: var(--sombra-alta); }

/* Saludo y resumen del día. */
.wm-resumen { margin: .3rem .1rem .6rem; padding: 1.1rem 1.2rem 1rem; border-radius: 22px; background: var(--resumen-bg); }
.wm-resumen-saludo { margin: 0; font: 600 1.5rem/1.15 var(--fuente-titulo); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; }
.wm-resumen-fecha { margin: .15rem 0 .8rem; color: var(--suave); font-size: 13px; }
.wm-resumen-fecha::first-letter { text-transform: uppercase; }
.wm-resumen-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wm-resumen-chips button { display: inline-flex; align-items: baseline; gap: .3rem; padding: .35rem .75rem; border: 0; border-radius: 99px; background: var(--resumen-chip); font-size: 12.5px; font-weight: 600; color: var(--tinta); cursor: pointer; }
.wm-resumen-chips button:hover { background: var(--resumen-chip-hover); }
.wm-resumen-chips b { font-size: 14px; }
.wm-resumen-chips .r-a b { color: var(--acento-fuerte); }
.wm-resumen-chips .r-b b { color: var(--ta-fg); }
.wm-resumen-chips .r-c b { color: var(--tb-fg); }
.wm-resumen-chips .r-d b { color: var(--td-fg); }

@media (max-width: 759px) {
  :root { --hueco: 0; --radio-panel: 0; }
  .wm-lista { padding: 0 .6rem; }
  .wm-lector { box-shadow: none; }
  .wm-tabs { border-top: 0; box-shadow: 0 -8px 24px -18px var(--tabs-sombra); }
}