/* CargaMail · hoja única de estilos.
   Dirección visual aprobada el 09/10/2026 (docs/18, fase 1): estilo nativo de Apple, estructura azul
   marino y acentos turquesa, fondo blanco, fuente del sistema, espacio generoso, tarjetas sutiles con
   esquinas suaves y sombras muy ligeras, iconos de trazo fino; rojo y ámbar solo para alertas.
   Sin compilación, sin fuentes externas y sin estilos en línea en las vistas.

   Los colores de marca son los oficiales de docs/identidad/v1 con un único cambio de nombre: el tono
   ámbar, que la identidad llama «aviso», aquí es --cm-atencion, porque «aviso» es un concepto del
   dominio (la comunicación al transportista). Ajustes de legibilidad aprobados: texto secundario
   #4A5D73, enlaces y texto turquesa en #087F78 (contraste ≥ 4,5:1 sobre blanco), botones ≥ 44 px.

   Tamaños en rem: en iOS el tamaño base sale del ajuste de texto del sistema (-apple-system-body). */

:root {
  /* Marca CargaMail */
  --cm-marca: #0B9C93;
  --cm-marca-accion: #087F78;
  --cm-marca-oscura: #06625D;
  --cm-marca-luz: #3FD1C6;
  --cm-marca-suave: #CFF1EE;

  /* Familia EtiQali */
  --cm-noche: #0B2340;
  --cm-texto: #0B2340;
  --cm-texto-2: #4A5D73;             /* ajuste aprobado (oficial #5B7089): legibilidad */
  --cm-fondo: #F4F7FA;
  --cm-superficie: #FFFFFF;
  --cm-niebla: #E7ECF2;
  --cm-borde: #D5DDE6;
  --cm-borde-control: #7B8794;

  /* Semánticos (no son marca): solo para estados y alertas */
  --cm-exito: #1E7A3C;
  --cm-exito-suave: #E3F3E6;
  --cm-atencion: #8A5A00;
  --cm-atencion-suave: #FFF4D6;
  --cm-error: #B42318;
  --cm-error-suave: #FDECEA;

  /* Exclusivo MODO SOMBRA */
  --cm-sombra: #5B2A86;
  --cm-sombra-suave: #F2EAF9;

  /* Tipografía */
  --cm-fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cm-fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Forma y medidas */
  --cm-radio: 12px;                  /* ajuste aprobado (oficial 8px): esquinas suaves */
  --cm-radio-tarjeta: 18px;          /* ajuste aprobado (oficial 12px) */
  --cm-radio-pildora: 999px;         /* ajuste aprobado (oficial 12px): píldora completa */
  --cm-alto-cabecera: 56px;
  --cm-alto-boton: 36px;
  --cm-alto-boton-tactil: 44px;
  --cm-alto-campo: 40px;
  --cm-foco: 2px solid #0B9C93;

  /* Añadidos de la dirección aprobada (no sustituyen a ningún token oficial) */
  --cm-marca-fondo: #E8F7F6;         /* círculo de los iconos de acción */
  --cm-texto-3: #5B7089;             /* iconos y etiquetas pasivas (5,1:1 con blanco) */
  --cm-borde-suave: #E3E8EE;         /* contorno de tarjetas */
  --cm-borde-tenue: #EEF1F4;         /* separadores de cabecera y barras */
  --cm-icono-pasivo: #A6B3C2;        /* flecha decorativa de las acciones */
  --cm-elevacion: 0 0 0 1px var(--cm-borde-suave), 0 2px 8px rgba(11, 35, 64, .05);
  --cm-elevacion-menu: 0 0 0 1px var(--cm-borde-suave), 0 12px 32px rgba(11, 35, 64, .14);
  --cm-alto-barra-inferior: 58px;
  --cm-margen: 16px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}
body {
  margin: 0;
  padding: env(safe-area-inset-top) 0 0;
  background: var(--cm-superficie);
  color: var(--cm-texto);
  font-family: var(--cm-fuente);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* Una palabra más larga que su línea (nombres, traducciones) se parte en vez de ensanchar la página. */
  overflow-wrap: break-word;
}
h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 20px; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 28px 0 10px; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
a { color: var(--cm-marca-accion); text-underline-offset: 2px; }
a:hover { color: var(--cm-marca-oscura); }
code, pre { font-family: var(--cm-fuente-mono); font-size: .875rem; }
pre {
  background: var(--cm-fondo);
  border-radius: var(--cm-radio);
  padding: 16px;
  overflow-x: auto;
  white-space: pre-wrap;
}
:focus-visible { outline: var(--cm-foco); outline-offset: 2px; }
.secundario { color: var(--cm-texto-2); font-size: .9375rem; }
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.icono { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }

/* Cabecera: en el flujo normal del documento (ni fija ni pegajosa). */
.cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px max(var(--cm-margen), env(safe-area-inset-right)) 8px max(var(--cm-margen), env(safe-area-inset-left));
  background: var(--cm-superficie);
  border-bottom: 1px solid var(--cm-borde-tenue);
}
.cabecera__logo { display: flex; align-items: center; flex: none; min-height: var(--cm-alto-boton-tactil); }
.cabecera__logo img { display: block; height: 30px; width: auto; }

/* Barra superior (≥ 1024 px). Por debajo, la barra inferior. */
.navegacion { display: none; }
.navegacion a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--cm-radio-pildora);
  color: #3B4E66;
  font-size: .96875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.navegacion a:hover { background: var(--cm-fondo); color: var(--cm-texto); }
/* Activa: turquesa oscuro sobre el fondo de marca (6,4:1); #087F78 sobre ese fondo se queda en 4,4:1. */
.navegacion a[aria-current="page"] { background: var(--cm-marca-fondo); color: var(--cm-marca-oscura); font-weight: 600; }

/* Persona: etiqueta del módulo y avatar con el menú de la cuenta. */
.persona { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.modulo {
  display: inline-block;
  min-width: 0;
  max-width: 14rem;
  padding: 7px 14px;
  border-radius: var(--cm-radio-pildora);
  background: var(--cm-fondo);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cuenta { position: relative; flex: none; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cm-alto-boton-tactil);
  height: var(--cm-alto-boton-tactil);
  border-radius: 50%;
  background: var(--cm-noche);
  color: #FFFFFF;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--cm-marca-suave);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.avatar::-webkit-details-marker { display: none; }
.avatar::marker { content: ""; }
.cuenta[open] .avatar { box-shadow: 0 0 0 3px var(--cm-marca); }
.cuenta__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  min-width: 15rem;
  max-width: min(20rem, calc(100vw - 2 * var(--cm-margen)));
  padding: 8px;
  border-radius: 16px;
  background: var(--cm-superficie);
  box-shadow: var(--cm-elevacion-menu);
}
.cuenta__nombre {
  margin: 0;
  padding: 8px 12px 4px;
  font-weight: 600;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cuenta__menu > .estado { margin: 0 12px 8px; }
.cuenta__menu a, .cuenta__menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--cm-alto-boton-tactil);
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cm-texto);
  font: inherit;
  font-weight: 500;
  justify-content: flex-start;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cuenta__menu a:hover, .cuenta__menu button:hover { background: var(--cm-fondo); color: var(--cm-texto); }
.cuenta__menu .icono { color: var(--cm-texto-3); }
.cuenta__menu form { margin: 0; border-top: 1px solid var(--cm-borde-tenue); padding-top: 4px; margin-top: 4px; }

/* Barra inferior (< 1024 px): cuatro destinos fijos, sobre la zona segura del iPhone. */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  padding: 6px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--cm-borde-tenue);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.barra-inferior a {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--cm-alto-barra-inferior);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 4px;
  border-radius: 12px;
  color: var(--cm-texto-3);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}
.barra-inferior a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-inferior .icono { width: 26px; height: 26px; }
.barra-inferior a[aria-current="page"] { color: var(--cm-marca-accion); font-weight: 600; }
.barra-inferior__hueco { height: calc(var(--cm-alto-barra-inferior) + 14px + env(safe-area-inset-bottom)); }

@media (min-width: 1024px) {
  .cabecera { min-height: 76px; gap: 28px; padding-left: max(40px, env(safe-area-inset-left)); padding-right: max(40px, env(safe-area-inset-right)); }
  .cabecera__logo img { height: 32px; }
  .navegacion { display: flex; gap: 4px; }
  .barra-inferior, .barra-inferior__hueco { display: none; }
}

/* MODO SOMBRA: siempre visible en las pantallas de trabajo, bajo la cabecera, en el flujo normal. */
.franja-sombra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px max(var(--cm-margen), env(safe-area-inset-right)) 10px max(var(--cm-margen), env(safe-area-inset-left));
  background: var(--cm-sombra);
  color: #FFFFFF;
  font-size: .9375rem;
}
.franja-sombra__etiqueta {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: rgba(255, 255, 255, .16);
  padding: 3px 8px;
  border-radius: 6px;
}
.franja-sombra__texto { font-weight: 500; }

/* STAGING (D-125): franja permanente en todas las pantallas, la primera de la página y en el flujo
   normal (como MODO SOMBRA). Color exclusivo de staging, fuera de los tokens oficiales de la
   identidad: el mismo de IdentidadDeEntorno::COLOR_STAGING y de los iconos de staging. */
.franja-entorno {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px max(var(--cm-margen), env(safe-area-inset-right)) 6px max(var(--cm-margen), env(safe-area-inset-left));
  background: #B54708;
  color: #FFFFFF;
  font-size: .875rem;
}
.franja-entorno__etiqueta {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: rgba(0, 0, 0, .22);   /* oscurece: blanco sobre la etiqueta ≥ 4,5:1 */
  padding: 2px 8px;
  border-radius: 6px;
}

/* Contenido y pie */
.contenido {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px max(var(--cm-margen), env(safe-area-inset-right)) 28px max(var(--cm-margen), env(safe-area-inset-left));
}
.tarjeta {
  background: var(--cm-superficie);
  border-radius: var(--cm-radio-tarjeta);
  box-shadow: var(--cm-elevacion);
  padding: 20px;
  margin-bottom: 16px;
}
.tarjeta > h2:first-child { margin-top: 0; }
.pie { padding: 16px var(--cm-margen) 24px; text-align: center; color: var(--cm-texto-2); font-size: .8125rem; }
/* El pie corporativo, discreto donde hay barra inferior: sigue identificando a EtiQali. */
@media (max-width: 1023px) {
  .pie { padding: 4px var(--cm-margen) 12px; font-size: .75rem; }
}

/* Campos: la etiqueta va encima. 16 px como mínimo para que iOS no amplíe al enfocar. */
label { display: block; margin: 0 0 14px; font-size: .9375rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="file"],
input[type="number"], input[type="search"], select, textarea {
  display: block;
  width: 100%;
  min-height: var(--cm-alto-boton-tactil);
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--cm-borde-control);
  border-radius: var(--cm-radio);
  background: var(--cm-superficie);
  color: var(--cm-texto);
  font: inherit;
  font-size: max(1rem, 16px);
  font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: none; border: 2px solid var(--cm-marca); padding: 8px 11px; }
textarea { min-height: 88px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--cm-marca-accion); }
.casilla { font-size: 1rem; font-weight: 400; }
form { margin: 0 0 16px; }
input[type="date"] { max-width: 260px; }
form > input + button { margin-top: 10px; }

/* Botones: 16 px y al menos 44 px de alto (zona táctil). */
button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cm-alto-boton-tactil);
  padding: 0 18px;
  border: 1px solid var(--cm-marca-accion);
  border-radius: var(--cm-radio);
  background: var(--cm-marca-accion);
  color: #FFFFFF;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .boton:hover { background: var(--cm-marca-oscura); border-color: var(--cm-marca-oscura); color: #FFFFFF; }
button:disabled { background: var(--cm-niebla); border-color: var(--cm-niebla); color: #5F6B78; cursor: not-allowed; }
.boton--secundario { background: var(--cm-superficie); border-color: var(--cm-borde-control); color: var(--cm-texto); }
.boton--secundario:hover { background: var(--cm-fondo); border-color: var(--cm-borde-control); color: var(--cm-texto); }
.boton--texto { background: transparent; border-color: transparent; color: var(--cm-marca-accion); padding: 0 10px; }
.boton--texto:hover { background: var(--cm-fondo); border-color: var(--cm-fondo); color: var(--cm-marca-oscura); }
.boton--sombra { background: var(--cm-sombra); border-color: var(--cm-sombra); }
.boton--sombra:hover { background: #46206A; border-color: #46206A; }

/* Mensajes de interfaz: sin franja lateral, icono circular */
.mensaje {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: var(--cm-fondo);
  color: var(--cm-noche);
}
.mensaje__icono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
}
.mensaje__icono span { color: #FFFFFF; }
.mensaje__cuerpo > :last-child { margin-bottom: 0; }
.mensaje__titulo { display: block; font-weight: 600; }
.mensaje--exito { background: var(--cm-exito-suave); color: var(--cm-exito); }
.mensaje--atencion { background: var(--cm-atencion-suave); color: var(--cm-atencion); }
.mensaje--error { background: var(--cm-error-suave); color: var(--cm-error); }

/* Píldoras de estado: siempre con texto, 14 px seminegrita */
.estado {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 12px;
  border-radius: var(--cm-radio-pildora);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  background: var(--cm-fondo);
  color: var(--cm-texto-2);
}
.estado--exito { background: var(--cm-exito-suave); color: var(--cm-exito); }
.estado--atencion { background: var(--cm-atencion-suave); color: var(--cm-atencion); }
.estado--error { background: var(--cm-error-suave); color: var(--cm-error); }

/* Acciones (Añadir, accesos de Hoy): bloque genérico alimentado por una lista de entradas. */
.acciones { display: grid; gap: 12px; list-style: none; margin: 0 0 16px; padding: 0; }
.accion {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px;
  border-radius: var(--cm-radio-tarjeta);
  background: var(--cm-superficie);
  box-shadow: var(--cm-elevacion);
  color: var(--cm-texto);
  text-decoration: none;
}
.accion:hover { color: var(--cm-texto); box-shadow: 0 0 0 1px var(--cm-marca-suave), 0 4px 14px rgba(11, 35, 64, .08); }
.accion__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cm-marca-fondo);
  color: var(--cm-marca-accion);
}
.accion__icono .icono { width: 24px; height: 24px; }
.accion__texto { flex: 1; min-width: 0; }
.accion__titulo { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.accion__detalle { display: block; margin-top: 2px; color: var(--cm-texto-2); font-size: .9375rem; line-height: 1.35; }
.accion__seguir { width: 18px; height: 18px; color: var(--cm-icono-pasivo); }
@media (min-width: 640px) {
  .acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Estado vacío */
.vacio { text-align: center; padding: 28px 20px; }
.vacio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EEF3F8;
  color: #3D6A96;
  margin-bottom: 10px;
}
.vacio__icono .icono { width: 28px; height: 28px; }
.vacio p { margin: 0; color: var(--cm-texto-2); }

/* Hoy del Cargador (docs/18 §2.2, fase 2) */
.saludo { margin: 0 0 20px; }
.saludo__fecha { margin: 0; color: var(--cm-texto-2); font-size: 1rem; }
.saludo__titulo {
  margin: 2px 0 0;
  font-size: 2.25rem;
  letter-spacing: -.03em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.saludo__subtitulo { margin: 4px 0 0; color: var(--cm-texto-2); font-size: 1.03125rem; }
.hoy { display: grid; gap: 8px; }
.hoy__columna { min-width: 0; }
.hoy__columna > h2:first-child, .hoy__columna > .seccion-cabeza:first-child h2 { margin-top: 0; }
@media (min-width: 1024px) {
  .hoy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
}

/* Bloque de resumen: el número es el protagonista; los indicadores, más ligeros. */
.resumen-dia {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 22px;
  border-radius: 22px;
  background: var(--cm-noche);
  color: #FFFFFF;
}
.resumen-dia__arcos { position: absolute; right: -70px; bottom: -96px; width: 230px; height: 230px; opacity: .08; color: var(--cm-marca-luz); pointer-events: none; }
.resumen-dia__cabeza { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resumen-dia__titulo { margin: 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: #E3EAF2; }
.resumen-dia__ir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cm-alto-boton-tactil);
  height: var(--cm-alto-boton-tactil);
  margin: -6px -6px -6px 0;
  border-radius: 50%;
  color: #FFFFFF;
}
.resumen-dia__ir .icono { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.resumen-dia__ir:hover { color: #FFFFFF; }
.resumen-dia__ir:focus-visible { outline-color: var(--cm-marca-luz); }
.resumen-dia__cuerpo { position: relative; display: flex; margin-top: 4px; }
.resumen-dia__principal { flex: none; max-width: 45%; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, .14); }
.resumen-dia__cuerpo--vacio { align-items: flex-end; gap: 16px; }
.resumen-dia__cuerpo--vacio .resumen-dia__principal { border-right: 0; padding-right: 0; }
.resumen-dia__numero { margin: 0; font-size: 4.75rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.resumen-dia__detalle { margin: 8px 0 0; color: #9FB3C8; font-size: .8125rem; line-height: 1.35; }
.resumen-dia__vacio { position: relative; min-width: 0; margin: 0; padding-bottom: 8px; overflow-wrap: anywhere; color: #B8C6D6; font-size: .9375rem; line-height: 1.4; }
.resumen-dia__indicadores {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 16px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
.resumen-dia__indicadores li:nth-child(2n) { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14); }
.resumen-dia__valor { display: block; font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.resumen-dia__etiqueta { display: block; margin-top: 2px; color: #C9D5E2; font-size: .84375rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.resumen-dia__indicadores .resaltado .resumen-dia__valor, .resumen-dia__indicadores .resaltado .resumen-dia__etiqueta { color: var(--cm-marca-luz); font-weight: 600; }
.boton--principal { display: flex; width: 100%; min-height: 52px; margin: 14px 0 0; font-size: 1.0625rem; border-radius: 14px; }
form.hoy__principal { margin: 0; }
.nota { margin: 12px 0 0; color: var(--cm-texto-2); font-size: .875rem; line-height: 1.45; }
.nota p { margin: 0 0 4px; }

.seccion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 10px; }
.seccion-cabeza h2 { margin: 0; }
.seccion-cabeza h2 + .contador { margin-right: auto; }
.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  background: var(--cm-error);
  color: #FFFFFF;
  font-size: .875rem;
  font-weight: 700;
}

/* Requiere atención: el tipo siempre escrito; rojo y ámbar solo aquí. */
.atencion { list-style: none; margin: 0 0 8px; padding: 0; }
.atencion__elemento { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 14px 14px 16px; border-radius: 18px; }
.atencion__elemento:first-child { margin-top: 0; }
.atencion__elemento--error { background: var(--cm-error-suave); }
.atencion__elemento--atencion { background: var(--cm-atencion-suave); }
.atencion__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 700;
}
.atencion__elemento--error .atencion__icono { background: var(--cm-error); color: #FFFFFF; }
.atencion__elemento--atencion .atencion__icono { background: #F5B731; color: #5A3B00; }
.atencion__texto { flex: 1; min-width: 0; }
.atencion__tipo { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.atencion__elemento--error .atencion__tipo { color: var(--cm-error); }
.atencion__elemento--atencion .atencion__tipo { color: var(--cm-atencion); }
.atencion__titulo { display: block; margin-top: 2px; font-size: 1.03125rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.atencion__detalle { display: block; margin-top: 2px; color: var(--cm-texto-2); font-size: .875rem; line-height: 1.4; }
.atencion__accion {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--cm-alto-boton-tactil);
  padding: 0 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .9);
  color: var(--cm-texto);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.atencion__accion:hover { background: #FFFFFF; color: var(--cm-texto); }

/* Filas (avisos de hoy): título, detalle y estado; en móvil, el estado bajo el detalle. */
.filas { list-style: none; margin: 0 0 8px; padding: 0; overflow: hidden; }
.filas li + li { border-top: 1px solid var(--cm-borde-suave); }
.fila {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas: "icono texto seguir" "icono estado seguir";
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  padding: 14px 14px 14px 16px;
  color: var(--cm-texto);
  text-decoration: none;
}
a.fila:hover { background: var(--cm-fondo); color: var(--cm-texto); }
.fila__icono {
  grid-area: icono;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #EEF3F8;
  color: #3D6A96;
}
.fila__icono .icono { width: 24px; height: 24px; }
.fila__texto { grid-area: texto; min-width: 0; }
.fila__titulo, .fila__detalle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__titulo { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.fila__detalle { margin-top: 2px; color: var(--cm-texto-2); font-size: .875rem; }
.fila .estado { grid-area: estado; justify-self: start; }
.fila__seguir { grid-area: seguir; width: 18px; height: 18px; color: var(--cm-icono-pasivo); }
@media (min-width: 1024px) {
  .fila { grid-template-columns: 48px minmax(0, 1fr) auto 18px; grid-template-areas: "icono texto estado seguir"; }
}
.estado--marca { background: var(--cm-marca-fondo); color: var(--cm-marca-oscura); }

.vacio--fila { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px 16px; }
.vacio--fila .vacio__icono { margin: 0; flex: none; }
.vacio__icono--marca { background: var(--cm-marca-fondo); color: var(--cm-marca-accion); }
.vacio .vacio__titulo { margin: 0 0 2px; color: var(--cm-texto); font-weight: 600; font-size: 1.0625rem; }

/* Enviar N avisos (P-18.6): selección de avisos, confirmación y aviso destacado de ficheros. */
.seleccion { list-style: none; margin: 0 0 8px; padding: 0; overflow: hidden; }
.seleccion li + li { border-top: 1px solid var(--cm-borde-suave); }
.seleccion__fila {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}
.seleccion__fila input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 2px 0 0; }
.seleccion__texto { flex: 1; min-width: 0; }
.seleccion__destinatarios { display: block; margin-top: 4px; color: var(--cm-texto-2); font-size: .875rem; overflow-wrap: anywhere; }
.seleccion__destinatarios span { display: block; }
.contador--marca { background: var(--cm-marca-fondo); color: var(--cm-marca-oscura); }
.casilla--confirmacion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cm-fondo);
  font-size: 1rem;
  font-weight: 600;
}
.casilla--confirmacion input, .advertencia-destacada .casilla input { flex: none; margin-top: 2px; }
.advertencia-destacada { margin: 20px 0 0; padding: 16px; border-radius: 18px; background: var(--cm-atencion-suave); }
.advertencia-destacada__titulo { margin: 0 0 4px; color: var(--cm-atencion); font-weight: 700; }
.advertencia-destacada ul { margin: 8px 0; }
.advertencia-destacada .casilla { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; font-weight: 600; }

/* Acceso (login y doble factor sin sesión) */
.acceso { display: flex; flex-direction: column; align-items: center; padding: 56px var(--cm-margen) 24px; }
.acceso__tarjeta {
  width: 100%;
  max-width: 400px;
  background: var(--cm-superficie);
  border-radius: 22px;
  box-shadow: var(--cm-elevacion);
  padding: 32px;
}
.acceso__logo { display: block; height: 44px; width: auto; margin-bottom: 24px; }
.acceso__tarjeta h1 { font-size: 1.625rem; }
.acceso__tarjeta button { width: 100%; }
.acceso__respaldo { margin-top: 16px; color: var(--cm-texto-2); font-size: .8125rem; }

/* Ficha del aviso y revisión del día */
.barra { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.barra form { margin: 0; display: flex; align-items: center; gap: 8px; }
.barra label { margin: 0; }
.barra input[type="date"] { margin-top: 0; }
.barra form > input + button { margin-top: 0; }
.resumen { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; margin: 0; }
.correo { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.correo dt { color: var(--cm-texto-2); font-size: .9375rem; }
.correo dd { margin: 0; overflow-wrap: anywhere; }
.destinatarios-sombra {
  background: var(--cm-sombra-suave);
  border-radius: var(--cm-radio);
  padding: 12px 16px;
}
.destinatarios-sombra__titulo { margin: 0 0 4px; font-weight: 600; color: var(--cm-sombra); }
.destinatarios-sombra ul:last-child { margin-bottom: 0; }
del { color: var(--cm-texto-2); }
/* relative: lo que va oculto para lectores de pantalla queda dentro del desplazamiento. */
.tabla-desplazable { overflow-x: auto; position: relative; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--cm-borde); }
.tabla th { color: var(--cm-texto-2); font-weight: 600; font-size: .875rem; }
.tabla tr:last-child td { border-bottom: 0; }
/* Palabras enteras: una tabla más ancha que la pantalla se desplaza dentro de .tabla-desplazable
   (D-125, 360 px); solo se parte una palabra que no cabe ni en una línea entera de la celda. */
.tabla code { font-size: .8125rem; overflow-wrap: break-word; }
.tabla td { overflow-wrap: break-word; }
.tabla a { white-space: nowrap; }
.tabla td.fecha { overflow-wrap: normal; white-space: nowrap; }
.tabla .estado { min-height: 0; padding: 2px 10px; overflow-wrap: normal; }

/* Móvil: de 360 px en adelante, sin desplazamiento horizontal de la página. Las tablas anchas se
   desplazan dentro de su contenedor (.tabla-desplazable). */
@media (max-width: 640px) {
  /* Franjas de entorno compactas: la advertencia completa, en menos alto (la etiqueta, en línea). */
  .franja-entorno, .franja-sombra { display: block; padding-top: 5px; padding-bottom: 5px; font-size: .8125rem; line-height: 1.4; }
  .franja-entorno__etiqueta, .franja-sombra__etiqueta { display: inline-block; margin-right: 6px; font-size: .6875rem; line-height: 1.5; padding: 0 6px; }
  .saludo__titulo { font-size: 1.875rem; }
  .resumen-dia__numero { font-size: 4rem; }
  .cabecera { gap: 10px; }
  .cabecera__logo img { height: 28px; }
  .modulo { max-width: 9.5rem; padding: 6px 12px; font-size: .875rem; }
  .contenido { padding-top: 20px; }
  .tarjeta { padding: 16px; }
  h1 { font-size: 1.625rem; }
  .barra { gap: 12px; }
  .barra form { flex-wrap: wrap; }
  .acceso { padding: 28px var(--cm-margen) 24px; }
  .acceso__tarjeta { padding: 24px 20px; }
  .correo { grid-template-columns: 1fr; gap: 0 0; }
  .correo dd { margin-bottom: 8px; }
  input[type="date"] { max-width: none; }
}
/* Tabla apilada (Documentos): en móvil cada fila es un bloque y el resultado se ve sin desplazar.
   Las cabeceras siguen en el HTML para los lectores de pantalla. */
@media (max-width: 640px) {
  .tabla--apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla--apilada, .tabla--apilada tbody, .tabla--apilada tr, .tabla--apilada td { display: block; width: 100%; }
  .tabla--apilada tr { padding: 12px 0; border-bottom: 1px solid var(--cm-borde); }
  .tabla--apilada tr:last-child { border-bottom: 0; }
  .tabla--apilada td { padding: 2px 0; border: 0; }
  .tabla--apilada td:first-child { font-weight: 600; overflow-wrap: anywhere; }
  .tabla--apilada td.fecha, .tabla--apilada td code { color: var(--cm-texto-2); font-size: .875rem; }
  .tabla--apilada td .estado { margin: 4px 0; }
}

/* Ficha del envío por grupos (bloque 1): cada grupo se lee en su tarjeta y se edita aparte. */
.grupos-de-datos { display: grid; gap: 0 16px; }
@media (min-width: 1024px) { .grupos-de-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grupo-de-datos__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.grupo-de-datos__cabecera h3 { margin: 0; font-size: 1.0625rem; }
.grupo-de-datos__cabecera .boton { flex: none; }
.grupo-de-datos__lista { margin: 0; }
.grupo-de-datos__lista div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--cm-niebla); }
.grupo-de-datos__lista dt { color: var(--cm-texto-2); font-size: .9375rem; }
.grupo-de-datos__lista dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.campo-en-conflicto { margin: -6px 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--cm-atencion-suave); color: var(--cm-atencion); font-size: .9375rem; }
.edicion-grupo__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 640px) { .edicion-grupo__acciones > * { flex: 1 1 100%; } }

/* D5 · revisar y generar el DeCA. «Propuesto» marca lo que propone CargaMail sin haberlo confirmado nadie. */
.propuesto { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--cm-atencion-suave); color: var(--cm-atencion); font-size: .75rem; font-weight: 600; }
.revision-deca dd { font-weight: 500; }
.confirmacion-deca { margin-top: 16px; }
.documento-deca__qr { width: min(220px, 70vw); margin: 8px auto 12px; }
.documento-deca__qr svg { display: block; width: 100%; height: auto; }
.acciones-deca { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .acciones-deca > * { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Datos legales desde el móvil: bloque NIF + domicilio, listas de «Mis datos» y pendientes del DeCA. */
.grupo-legal { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.grupo-legal legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.lista-datos { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-datos li { padding: 8px 0; border-bottom: 1px solid var(--cm-borde); overflow-wrap: anywhere; }
/* Bloque 1 · rutas del cliente: acciones pequeñas junto a cada entrega. */
.ruta-recogida h3 { margin: 16px 0 4px; font-size: 1rem; }
.en-linea { display: inline-block; margin: 4px 0 0 6px; }
.en-linea button { min-height: var(--cm-alto-boton-tactil); }
.pendientes-deca { list-style: none; margin: 0; padding: 0; }
.pendientes-deca li { padding: 6px 0; }
.pendientes-deca a { display: inline-block; margin-top: 4px; font-weight: 600; }
/* Alta con ruta: con una ruta marcada, el origen y el destino salen de ella (alta-con-ruta.js). */
.campo--por-ruta { opacity: .55; }