/* ==========================================================================
   Tablón · TC Group. Identidad visual v3.1 (oscuro, tema único).
   Fuente: Identidad-Visual.md de TC Group, secciones 2 (tokens), 3 (tipografía),
   4 (layout y radios), 5 (componentes) y 8 (reglas), y la maqueta aprobada del Tablón.
   Este fichero (P3) lleva la base: tokens, controles, login, shell, navegación,
   hojas, menús, toast, estados vacíos y de error. Las reglas de Tareas viven en
   tareas.css (P4); las de Mensajes (bandeja y conversación), Más y sus páginas, abajo (P5).
   ========================================================================== */

/* Inter en local (sección 3 de la identidad; la CSP no admite Google Fonts). Dos archivos variables; el
   navegador solo baja el de latin-ext si aparece algún carácter fuera de latin. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fuentes/inter-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fuentes/inter-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Contrato de tokens de la identidad TC Group (sección 2). Copiado entero, sin editar ni añadir. */
:root {
  /* — Base (14 tokens; idénticos a la casa hermana salvo los tres de acento) — */
  --bg: #000; --bg-elevated: #060608; --bg-card: #0f1014; --bg-deep: #050507;
  --border: #1c1c1f; --border-strong: #2a2a2e;
  --text: #f5f5f7; --text-dim: #98989d; --text-faint: #6e6e73;
  --accent: #F5C518; --accent-2: #FFA826; --accent-3: #FF8A3D;
  --gradient: linear-gradient(135deg, #F5C518 0%, #FFA826 50%, #FF8A3D 100%);
  --gradient-text: linear-gradient(135deg, #F5C518 0%, #FFA826 100%);
  /* — Semánticos de estado · SOLO significado, nunca decoración — */
  --green: #4ade80; --red: #ff3b30; --amber: #fbbf24; --cyan: #5ec8ff;
  /* — Gráficos — */
  --chart-grid: rgba(255,255,255,0.06); --chart-axis: #6e6e73;
  --chart-muted: rgba(255,255,255,0.14);
  /* — Glows (alfa rebajada respecto a la casa hermana · ver abajo) — */
  --glow-sm: 0 0 16px rgba(245,197,24,0.30);
  --glow-md: 0 0 32px rgba(245,197,24,0.35);
  --glow-lg: 0 24px 80px -12px rgba(245,197,24,0.35);
  /* — Movimiento — */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Uso de los semánticos en la app: --green solo para «Entregada»; --red solo para el triángulo del Aviso
   (tareas.css); --amber y --cyan quedan definidos y sin uso. Errores, anular y cerrar sesión van en neutro. */

/* Medidas propias de la app (no son tokens de la identidad: geometría táctil y zonas seguras). Las zonas seguras
   de arriba y abajo solo cuentan en modo app (data-standalone): en el navegador ya las gestiona Safari. */
:root {
  --alto-tactil: 2.75rem;
  --alto-nav: 3.5rem;
  --margen: 16px;
  --seguro-arriba: 0px;
  --seguro-abajo: 0px;
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
html[data-standalone="1"] {
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 100%; background: var(--bg); }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(245,197,24,0.85); color: #000; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--text-dim); }
.texto-largo { white-space: pre-wrap; overflow-wrap: anywhere; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Texto recortado al degradado: con tracking negativo lleva su compensación (identidad §3). */
.texto-firma {
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 0.08em; margin-right: -0.08em;
}

/* ---------- Controles ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto-tactil); padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.boton:active:not(:disabled) { transform: scale(0.97); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
/* Botón fuerte: pastilla en degradado con tinta negra (maqueta .btn-pedir). */
.boton-primario { background: var(--gradient); color: #000; font-weight: 800; box-shadow: var(--glow-sm); }
.boton-primario:disabled { box-shadow: none; }
/* Botón de contorno (maqueta .pill). «Peligro» es igual: lo dice la palabra, no el color. */
.boton-secundario, .boton-peligro { background: transparent; color: var(--text); border-color: var(--border-strong); }
.boton-ancho { width: 100%; }
.boton-mini { min-height: var(--alto-tactil); padding: 0 14px; font-size: 0.875rem; }
@media (hover: hover) {
  .boton-primario:hover:not(:disabled) { box-shadow: var(--glow-md); }
  .boton-secundario:hover:not(:disabled), .boton-peligro:hover:not(:disabled) { border-color: var(--text-faint); }
}

.boton-icono {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--alto-tactil); height: var(--alto-tactil); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
}
.boton-icono .ico { width: 1.5rem; height: 1.5rem; }
.boton-icono:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pastilla (maqueta .pill): filtros, opciones y acciones pequeñas. La elegida, con aria-pressed o aria-checked. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: var(--alto-tactil); padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease);
}
.pill:active:not(:disabled) { transform: scale(0.97); }
.pill:disabled { opacity: 0.45; cursor: not-allowed; }
.pill[aria-pressed="true"], .pill[aria-checked="true"], .pill.activo { background: rgba(245,197,24,0.10); border-color: rgba(245,197,24,0.20); }
.pill .n { font-weight: 400; color: var(--text-dim); }
.pill .ico { width: 0.9375rem; height: 0.9375rem; }
.pill-pequena { min-height: 2rem; padding: 0 12px; font-size: 0.8125rem; gap: 6px; position: relative; }
.pill-pequena::after { content: ''; position: absolute; inset: -6px 0; }

/* Fila de pastillas con rótulo a la izquierda (maqueta .orden): «Ordenar por», «Proyecto». */
.orden { display: flex; align-items: center; gap: 10px; min-width: 0; }
.orden-rot { flex: none; min-width: 78px; color: var(--text-faint); font-size: 0.8125rem; font-weight: 400; }
.orden-btns { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

::placeholder { color: var(--text-faint); opacity: 1; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: var(--alto-tactil); padding: 10px 16px;
  border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-deep); color: var(--text);
  font: inherit; font-size: 1rem; /* 16 px evita el zoom automático de iOS al enfocar */ line-height: 1.4;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }
textarea { resize: none; }
select option { background: var(--bg-card); color: var(--text); }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-weight: 600; font-size: 0.875rem; color: var(--text); }
.ayuda { color: var(--text-dim); font-size: 0.8125rem; line-height: 1.45; }

/* Chips antiguos: mismo aspecto que .pill (los usan pantallas que aún no se han rehecho). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--alto-tactil); padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text);
  font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.chip.activo, .chip[aria-pressed="true"] { background: rgba(245,197,24,0.10); border-color: rgba(245,197,24,0.20); }

/* Segmentos: fila de pastillas (sin el carril gris del tema claro). */
.segmentos { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px calc(var(--lado) + var(--margen)); }
.segmento {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alto-tactil); padding: 0 16px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text);
  font: inherit; font-size: 0.875rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.segmento.activo { background: rgba(245,197,24,0.10); border-color: rgba(245,197,24,0.20); }

/* Contadores: pastilla en degradado con cifra negra. */
.cuenta, .contador {
  display: inline-block; min-width: 1.375rem; height: 1.375rem; padding: 0 6px; border-radius: 999px;
  background: var(--gradient); color: #000; font-size: 0.75rem; font-weight: 800; line-height: 1.375rem; text-align: center;
}

.enlace-boton { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; padding: 0; min-height: var(--alto-tactil); text-align: left; cursor: pointer; }
.enlace-pequeno { align-self: center; min-height: var(--alto-tactil); padding: 0 12px; border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; }

/* Pastillas e insignias (maqueta .estado-pill y .badge). Caja de frase, 12 px 700. */
.estado-pill, .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: transparent; color: var(--text); font-size: 0.75rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.estado-pill.tenue { color: var(--text-dim); }
.badge .ico { width: 0.75rem; height: 0.75rem; }
/* «Entregada»: el único verde de la app. */
.badge-conciliado { color: var(--green); border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
/* Pastilla amarilla tenue: «Para revisar», «Pendiente», hora de un recordatorio. Siempre con su palabra. */
.pastilla-tenue { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid rgba(245,197,24,0.20); border-radius: 999px; background: rgba(245,197,24,0.10); color: var(--accent); font-size: 0.75rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }

/* Escala de 3 segmentos (identidad .evidence-bar). Encendidos en degradado. */
.evidence-bar { display: flex; gap: 4px; width: 46px; flex: none; }
.evidence-seg { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid var(--border); }
.evidence-seg.on { background: var(--gradient); border-color: transparent; box-shadow: 0 0 12px rgba(245,197,24,0.26); }

/* Tarjeta (identidad .card, maqueta .entregas-card): radio 22, de --bg-card a --bg-elevated. */
.tarjeta, .tarjeta-info, .lista-mas {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%); border: 1px solid var(--border); border-radius: 22px;
}

/* ---------- Mensajes de estado: neutros, con su palabra ---------- */

.mensaje-error, .mensaje-aviso, .mensaje-ok {
  position: relative; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--bg-card);
  color: var(--text); font-size: 0.9375rem; font-weight: 600; line-height: 1.45;
}
/* Aviso: familia «callout» de la identidad, barra izquierda de 4 px en degradado. */
.mensaje-aviso { padding-left: 20px; border-color: var(--border); overflow: hidden; }
.mensaje-aviso::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gradient); }
.mensaje-ok { color: var(--green); border-color: var(--border); }
.lista-errores { margin-top: 6px; padding-left: 18px; list-style: disc; font-weight: 400; }

/* Estado de una lista (cargando, error) y vacíos */
.lista-estado { padding: 8px var(--margen); color: var(--text-faint); font-size: 0.9375rem; }
.lista-estado:empty { display: none; }
.lista-estado.con-error {
  margin: 8px var(--margen); padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--bg-card);
  color: var(--text); font-weight: 600;
}
.reintentar { margin: 0 var(--margen) 8px; }
.vacio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 24px; text-align: center; }
.vacio-texto { color: var(--text-dim); font-size: 1rem; font-weight: 600; }
.vacio-compacto { padding: 16px; }

/* ---------- Login ---------- */

.pantalla-login {
  position: fixed; inset: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--margen) + var(--seguro-arriba)) calc(var(--margen) + var(--seguro-der)) calc(var(--margen) + var(--seguro-abajo)) calc(var(--margen) + var(--seguro-izq));
  background: var(--bg);
}
.tarjeta-login {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%); border: 1px solid var(--border); border-radius: 22px;
}
/* El wordmark lleva aire a los lados dentro de su viewBox: se compensa para alinearlo con el título. */
.login-logo { width: 140px; height: auto; align-self: flex-start; margin-left: -17px; }
.login-titulo {
  font-size: 2.5rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-right: 0.08em; margin-right: -0.08em; align-self: flex-start;
}

/* ---------- Estructura: el shell mide el viewport visual (--vvh) ---------- */

.app {
  position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100dvh); z-index: 1;
  display: flex; flex-direction: column; background: var(--bg);
  padding-left: var(--seguro-izq); padding-right: var(--seguro-der);
}
/* .vistas es el contenedor de referencia: las reglas de dos columnas usan @container vistas (min-width: 760px). */
.vistas { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; container-type: inline-size; container-name: vistas; }
/* --lado centra el contenido de cada vista: 1160 px en Tareas, 760 px en la bandeja de Mensajes y en las de lectura. */
.vista {
  --ancho-max: 1160px;
  --lado: max(0px, calc((100cqw - var(--ancho-max)) / 2));
  position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg);
}
#v-canales, #v-mas, #v-chat, #v-tarea, #v-avisos, #v-programados, #v-recordatorios, #v-historico { --ancho-max: 760px; }
/* Las vistas raíz se ocultan, no se destruyen: así conservan su posición de scroll. */
.vista.oculta { visibility: hidden; pointer-events: none; }
.scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-left: var(--lado); padding-right: var(--lado);
}

/* Cabecera negra de una línea */
.cab {
  flex: none; display: flex; align-items: center; gap: 4px; min-height: calc(3.5rem + var(--seguro-arriba));
  padding: var(--seguro-arriba) calc(var(--lado) + 8px) 0; background: var(--bg); border-bottom: 1px solid var(--border);
}
.cab-marca { width: 28px; height: 28px; margin: 0 8px; flex: none; border-radius: 22%; }
.cab-titulos { flex: 1 1 auto; min-width: 0; }
.cab-titulo { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-sub { font-size: 0.75rem; line-height: 1.2; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barra de acción fija al pie de una vista (detalle de tarea) */
.barra-accion {
  flex: none; padding: 10px calc(var(--lado) + var(--margen)) calc(10px + var(--seguro-abajo));
  background: rgba(0,0,0,0.65); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid var(--border);
}

/* ---------- Navegación: barra inferior (< 1100 px) ---------- */

.navegacion {
  position: relative; z-index: 5; flex: none; display: flex;
  background: rgba(0,0,0,0.65); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-top: 1px solid var(--border); padding-bottom: var(--seguro-abajo);
}
.sidebar-header, .nav-section { display: none; }
.nav-enlace {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--alto-nav); color: var(--text-dim); font-size: 0.75rem; font-weight: 600; text-decoration: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.nav-enlace svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-enlace[aria-current="page"] { color: var(--text); font-weight: 800; }
.nav-enlace[aria-current="page"] .nav-texto {
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: 0.08em; margin-right: -0.08em;
}
/* Indicador de la pestaña activa: raya en degradado arriba */
.nav-enlace[aria-current="page"]::before {
  content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; border-radius: 2px;
  background: var(--gradient); box-shadow: 0 0 14px rgba(245,197,24,0.42);
}
.nav-icono { position: relative; display: inline-flex; }
.nav-insignia {
  position: absolute; top: -6px; left: 13px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--gradient); color: #000; font-size: 0.6875rem; font-weight: 800; line-height: 18px; text-align: center;
  -webkit-text-fill-color: #000;
}
/* El punto de Más es firma (no semántico): amarillo de marca */
.nav-punto { position: absolute; top: -2px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #000; }
/* Con el teclado en pantalla se oculta la barra inferior; la lateral (≥ 1100 px) nunca */
@media (max-width: 1099.98px) { html.teclado .navegacion { display: none; } }

/* ---------- Hojas inferiores ---------- */

.hoja-capa {
  position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100dvh); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s var(--ease);
}
.hoja-capa.abierta { opacity: 1; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
.hoja {
  position: relative; width: 100%; max-width: 36rem; max-height: calc(100% - 12px - var(--seguro-arriba)); display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; outline: none;
  transform: translateY(100%); transition: transform .28s var(--ease);
}
.hoja-capa.abierta .hoja { transform: translateY(0); }
.hoja.arrastrando { transition: none; }
.hoja-asa { flex: none; display: flex; justify-content: center; align-items: center; height: 1.5rem; touch-action: none; }
.hoja-asa span { width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); }
.hoja-cabecera { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 20px; touch-action: none; }
.hoja-titulo { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 12px; -webkit-overflow-scrolling: touch; }
.hoja-pie { flex: none; padding: 10px 20px calc(12px + var(--seguro-abajo)); border-top: 1px solid var(--border); }
.hoja-texto { display: flex; flex-direction: column; gap: 12px; }
.hoja-contexto, .hoja-aviso { margin: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-deep); color: var(--text-dim); font-size: 0.9375rem; line-height: 1.45; }
.hoja-aviso { font-size: 0.875rem; }
.etiqueta-grupo { margin-bottom: -6px; font-size: 0.875rem; font-weight: 700; }
.confirmacion-hora { color: var(--text-dim); font-size: 0.875rem; }
.fila-fecha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pie-botones { display: flex; gap: 8px; }
.pie-botones .boton { flex: 1 1 0; }
.pie-vertical { flex-direction: column; align-items: stretch; }
.pie-vertical .enlace-pequeno { align-self: center; }
.mas-opciones > summary { display: flex; align-items: center; min-height: var(--alto-tactil); color: var(--accent); font-weight: 700; cursor: pointer; }
.mas-opciones > * + * { margin-top: 10px; }

/* Menús (hoja de acciones) */
.menu-lista { margin: 0 -20px; padding-bottom: 8px; }
.menu-grupo { padding: 12px 20px 4px; font-size: 0.8125rem; font-weight: 400; color: var(--text-faint); }
.menu-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; min-height: 3.25rem; padding: 8px 20px;
  border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer;
}
.menu-item:last-child { border-bottom: 0; }
.menu-sub { font-size: 0.8125rem; font-weight: 500; color: var(--text-dim); }
.menu-item.elegido .menu-sub { color: var(--accent); font-weight: 700; }
.menu-desc { flex-basis: 100%; font-size: 0.8125rem; font-weight: 400; color: var(--text-dim); }
.menu-item.peligro { color: var(--text); }
@media (hover: hover) { .menu-item:hover { background: rgba(245,197,24,0.04); } }

/* ---------- Aviso breve (toast) ---------- */

.toast {
  position: fixed; left: 50%; top: calc(var(--vvtop, 0px) + var(--vvh, 100dvh) - var(--alto-nav) - var(--seguro-abajo) - 4.25rem);
  z-index: 80; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(92vw, 26rem); min-height: var(--alto-tactil); padding: 6px 18px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); color: var(--text); font-size: 0.9375rem; font-weight: 600;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.con-accion { pointer-events: auto; }
html[data-pantalla="tarea"] .toast { margin-top: -4rem; }
html[data-pantalla="chat"] .toast { margin-top: -6.5rem; }
.toast-accion { min-height: var(--alto-tactil); padding: 0 4px; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }

/* ---------- Pantallas anchas ---------- */

@media (min-width: 760px) {
  .hoja-capa { align-items: center; }
  .hoja { border-radius: 22px; border-bottom: 1px solid var(--border); max-height: min(44rem, calc(100% - 32px)); }
}

/* ≥ 1100 px: la barra de pestañas pasa a barra lateral de 280 px (identidad .sidebar, maqueta :52-64). */
@media (min-width: 1100px) {
  .app { flex-direction: row; }
  .navegacion {
    order: -1; flex: 0 0 280px; width: 280px; flex-direction: column; align-items: stretch; overflow-y: auto;
    padding: calc(48px + var(--seguro-arriba)) 32px 32px; border-top: 0; border-right: 1px solid var(--border);
  }
  .sidebar-header { display: block; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .sidebar-logo { display: block; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 22%; }
  .sidebar-eyebrow {
    display: inline-block; margin-bottom: 10px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .sidebar-title { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
  .sidebar-meta { margin-top: 8px; font-size: 0.75rem; color: var(--text-dim); }
  .nav-section {
    display: block; position: relative; margin: 8px 0; padding-left: 16px;
    font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
  }
  .nav-section::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 1px; background: var(--gradient); }
  .nav-enlace {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 44px;
    margin-left: -16px; padding-left: 16px; border-left: 1px solid transparent;
    font-size: 0.875rem; font-weight: 400; color: var(--text-dim); transition: color .2s ease;
  }
  .nav-enlace:hover { color: var(--text); }
  .nav-enlace svg { display: none; }
  /* El logo ya está en la barra lateral: fuera el de las cabeceras */
  .cab-marca { display: none; }
  .cab { padding-left: calc(var(--lado) + var(--margen)); }
  .nav-icono { order: 2; }
  .nav-insignia, .nav-punto { position: static; display: inline-block; }
  .nav-punto { width: 8px; height: 8px; border: 0; }
  .nav-enlace[aria-current="page"] { border-left-color: var(--accent); font-weight: 700; background: linear-gradient(90deg, rgba(245,197,24,0.1), transparent); }
  .nav-enlace[aria-current="page"]::before { display: none; }
  .toast { left: calc(280px + (100% - 280px) / 2); top: calc(var(--vvtop, 0px) + var(--vvh, 100dvh) - var(--seguro-abajo) - 5.5rem); }
}

/* Movimiento reducido (bloque de la maqueta): sin desplazamientos ni transiciones largas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hoja { transform: none; opacity: 0; }
  .hoja-capa.abierta .hoja { opacity: 1; }
  .toast, .toast.visible { transform: translate(-50%, 0); }
  .boton:active:not(:disabled), .pill:active:not(:disabled) { transform: none; }
}

/* ==========================================================================
   Mensajes, Más y sus páginas (P5). Componentes de la sección 5.2 de la especificación y
   tabla 5.5: filas oscuras, tarjetas radio 22, pastillas, nombre del canal en amarillo
   (como el rótulo de proyecto de la maqueta), sin ningún rojo y sin colores fuera de la firma.
   Todo va dentro de .scroll, que ya aplica --lado: aquí solo se suma --margen.
   ========================================================================== */

/* ---------- Mensajes · bandeja ---------- */

/* Filtros Todos · No leídos · Pendientes: un poco más estrechos para que quepan en una fila a 375 px. */
#v-canales .segmento { padding: 0 13px; gap: 6px; }

/* Rótulo de cada línea (maqueta .rotulo): pequeño y apagado; se queda arriba al hacer scroll. */
.bandeja-linea { padding-bottom: 6px; }
.grupo-linea {
  position: sticky; top: 0; z-index: 2; margin: 0; padding: 14px calc(var(--margen) + 2px) 8px; background: var(--bg);
  font-size: 0.8125rem; font-weight: 400; color: var(--text-faint);
}
/* Los canales de una línea, en una tarjeta (maqueta .entregas-card) con una fila por canal. */
.filas-canal {
  margin: 0 var(--margen); overflow: hidden; isolation: isolate;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px;
}
.fila-canal { position: relative; overflow: hidden; border-top: 1px solid var(--border); }
.fila-canal:first-child { border-top: 0; }

/* Acciones al deslizar: neutras; la activa (Pendiente puesto) en degradado con tinta negra. */
.fila-acc { position: absolute; top: 0; right: 0; bottom: 0; width: 228px; display: flex; visibility: hidden; }
.fila-canal.abierta .fila-acc, .fila-canal.desliza .fila-acc { visibility: visible; }
.acc-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0;
  border: 0; border-left: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.acc-btn .ico { width: 1.125rem; height: 1.125rem; }
.acc-pendiente, .acc-leido, .acc-recordar { background: var(--bg-elevated); color: var(--text); }
.acc-btn.activo { background: var(--gradient); color: #000; }
.acc-btn:focus-visible { outline-offset: -3px; }

/* Capa de arriba: opaca para tapar las acciones mientras no se desliza. */
.fila-sup { position: relative; display: flex; align-items: stretch; background: var(--bg-card); touch-action: pan-y; transition: transform .22s var(--ease); }
.fila-sup.arrastrando { transition: none; }
.fila-canal.abierta .fila-sup { transform: translateX(-228px); }
.fila-enlace {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 3px; align-items: center;
  min-height: 4.25rem; padding: 12px 6px 12px 16px; color: inherit; text-decoration: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.fila-enlace:focus-visible { outline-offset: -3px; border-radius: 20px; }
/* Nombre del canal: amarillo de marca, como el proyecto en las tarjetas de Tareas. */
.fila-nombre {
  grid-column: 1; grid-row: 1; min-width: 0; color: var(--accent); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  overflow-wrap: anywhere;
}
.etiqueta-pendiente {
  grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px;
  border: 1px solid rgba(245,197,24,0.20); border-radius: 999px; background: rgba(245,197,24,0.10); color: var(--accent);
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.etiqueta-pendiente .ico { width: 0.8125rem; height: 0.8125rem; }
.fila-hora { grid-column: 3; grid-row: 1; justify-self: end; font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; }
.fila-vista { grid-column: 1 / 3; grid-row: 2; min-width: 0; font-size: 0.9375rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-marcas { grid-column: 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; min-height: 1.375rem; }
.fila-programados { grid-column: 1 / 4; grid-row: 3; font-size: 0.8125rem; color: var(--text-faint); }
/* Sin leer: nombre más pesado, vista previa en blanco, hora en blanco 700 y la pastilla con la cifra. */
.fila-canal.no-leido .fila-nombre { font-weight: 800; }
.fila-canal.no-leido .fila-vista { color: var(--text); }
.fila-canal.no-leido .fila-hora { color: var(--text); font-weight: 700; }
.punto-no-leido { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
/* Canal sin mensajes: una línea compacta y apagada. */
.fila-canal.sin-mensajes .fila-enlace { min-height: var(--alto-tactil); padding-top: 6px; padding-bottom: 6px; }
.fila-canal.sin-mensajes .fila-nombre { color: var(--text-dim); font-weight: 500; letter-spacing: -0.005em; }
.fila-canal.sin-mensajes .fila-vista { grid-column: 3; grid-row: 1; font-size: 0.75rem; color: var(--text-faint); }
.mas-tres {
  flex: none; display: flex; align-items: center; justify-content: center; width: var(--alto-tactil); padding: 0;
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
}
.mas-tres .ico { width: 1.25rem; height: 1.25rem; }
.mas-tres:focus-visible { outline-offset: -4px; border-radius: 50%; }
@media (hover: hover) {
  .fila-enlace:hover { background: rgba(245,197,24,0.04); }
  .mas-tres:hover { color: var(--text); }
}

/* ---------- Conversación ---------- */

/* Nombre del canal en la cabecera: amarillo (la línea va debajo, apagada). */
#v-chat .cab-titulo { color: var(--accent); }
.chat-zona { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-lista { padding: 8px calc(var(--lado) + var(--margen)) 16px; }
.boton-anteriores { display: flex; margin: 4px auto 8px; }
.mensajes { display: flex; flex-direction: column; gap: 4px; }
.mensaje-fila { display: flex; scroll-margin: 16px; }
.mensaje-fila.propio { justify-content: flex-end; }
/* Burbujas: ajena en --bg-card con borde; propia en amarillo tenue. Esquina del lado de quien habla, más cerrada. */
.burbuja {
  max-width: min(84%, 34rem); min-width: 0; padding: 8px 14px 5px;
  border: 1px solid var(--border); border-radius: 20px 20px 20px 6px; background: var(--bg-card);
  -webkit-touch-callout: none;
}
.propio .burbuja { border-radius: 20px 20px 6px 20px; background: rgba(245,197,24,0.10); border-color: rgba(245,197,24,0.20); }
.burbuja .texto-largo { font-size: 1rem; line-height: 1.45; }
.mensaje-fila.resaltado .burbuja { border-color: var(--accent); box-shadow: var(--glow-sm); }
.burbuja-autor { margin-bottom: 1px; font-size: 0.8125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--accent); }
.burbuja-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; font-size: 0.75rem; color: var(--text-faint); }
.mas-mini {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-dim); cursor: pointer;
}
.mas-mini::after { content: ''; position: absolute; inset: -10px -8px; }
.mas-mini .ico { width: 1.125rem; height: 1.125rem; }
/* Recordatorio sobre un mensaje: pastilla amarilla tenue con su hora escrita. */
.chip-recordatorio {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px;
  border: 1px solid rgba(245,197,24,0.20); border-radius: 999px; background: rgba(245,197,24,0.10); color: var(--accent);
  font: inherit; font-size: 0.75rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.chip-recordatorio::after { content: ''; position: absolute; inset: -10px -4px; }
.chip-recordatorio .ico { width: 0.8125rem; height: 0.8125rem; }
/* Separadores: día en pastilla neutra; «Sin leer» en amarillo con líneas tenues. */
.separador-dia { display: flex; justify-content: center; margin: 12px 0 6px; }
.separador-dia span {
  padding: 2px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg);
  color: var(--text-dim); font-size: 0.75rem; font-weight: 700;
}
.separador-hueco span { text-align: center; }
.separador-sinleer { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--accent); font-size: 0.8125rem; font-weight: 700; }
.separador-sinleer::before, .separador-sinleer::after { content: ''; flex: 1; height: 1px; background: rgba(245,197,24,0.4); }
/* Envíos programados al final del hilo: borde discontinuo, sin relleno amarillo (aún no son mensajes). */
.programados-canal { margin-top: 12px; }
.burbuja.programada { border-style: dashed; border-color: var(--border-strong); background: var(--bg-elevated); }
.burbuja.programada .programado-cabecera { margin-bottom: 4px; }
.programado-cabecera { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--text-dim); }
.programado-cabecera .ico { width: 0.9375rem; height: 0.9375rem; color: var(--accent); }
.acciones-programado { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acciones-programado .boton { min-height: 2.25rem; padding: 0 14px; font-size: 0.875rem; position: relative; }
.acciones-programado .boton::after { content: ''; position: absolute; inset: -4px 0; }
/* Botón «ir al final»: pastilla neutra flotante. */
.flotante {
  position: absolute; right: calc(var(--lado) + var(--margen)); bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--alto-tactil); padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card);
  color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.flotante .ico { width: 1.125rem; height: 1.125rem; }
.flotante-texto:empty { display: none; }
/* Compositor: barra negra translúcida como la de navegación; enviar en degradado. */
.compositor {
  flex: none; padding: 8px calc(var(--lado) + var(--margen)) 8px;
  background: rgba(0,0,0,0.65); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid var(--border);
}
.compositor-fila { display: flex; align-items: flex-end; gap: 8px; }
.compositor textarea {
  flex: 1 1 auto; min-width: 0; min-height: var(--alto-tactil); max-height: 8.75rem; padding: 10px 16px;
  border-radius: 22px; line-height: 1.35; overflow-y: auto;
}
.boton-enviar { background: var(--gradient); color: #000; box-shadow: var(--glow-sm); }
.boton-enviar:disabled { background: var(--bg-elevated); color: var(--text-faint); box-shadow: none; opacity: 1; }
.boton-programar { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.boton-enviar .ico, .boton-programar .ico { width: 1.25rem; height: 1.25rem; }
/* «Avisar a»: pastillas pequeñas en una fila que se desliza si no caben. */
.chips-avisar { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 0 0 8px; scrollbar-width: none; }
.chips-avisar::-webkit-scrollbar { display: none; }
.chips-avisar .chip { flex: none; min-height: 2rem; padding: 0 12px; font-size: 0.8125rem; position: relative; }
.chips-avisar .chip::after { content: ''; position: absolute; inset: -6px 0; }
.compositor-error {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 4px 6px 4px 14px;
  border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-card); color: var(--text); font-size: 0.875rem; font-weight: 600;
}
/* Mensaje que no salió: burbuja propia sin relleno amarillo, borde discontinuo y su texto en neutro. */
.mensaje-fallido .burbuja-fallida { border-style: dashed; border-color: var(--border-strong); background: var(--bg-elevated); }
.mensaje-fallido .burbuja-fallida > .texto-largo { color: var(--text-dim); }
.fallido-estado { margin: 4px 0 8px; color: var(--text); font-size: 0.8125rem; font-weight: 700; line-height: 1.4; }
.fallido-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-bottom: 6px; }
.fallido-acciones .boton-mini { min-height: 2.25rem; position: relative; }
.fallido-acciones .boton-mini::after { content: ''; position: absolute; inset: -4px 0; }

/* ---------- Más ---------- */

.lista-mas { margin: 16px var(--margen); overflow: hidden; }
.fila-mas {
  display: flex; width: 100%; align-items: center; gap: 12px; min-height: 3.75rem; padding: 10px 16px 10px 20px;
  border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.lista-mas li:last-child .fila-mas { border-bottom: 0; }
.fila-mas:focus-visible { outline-offset: -3px; border-radius: 20px; }
.fila-mas-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fila-mas-titulo { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.fila-mas-sub { font-size: 0.8125rem; color: var(--text-dim); }
/* Notificaciones sin activar: la frase en amarillo (firma, no alarma), igual que el punto de la pestaña. */
.fila-mas-sub.aviso { color: var(--accent); font-weight: 600; }
.fila-mas .ico { width: 1rem; height: 1rem; color: var(--text-faint); }
/* Cerrar sesión: neutro; lo dice la palabra. Un poco más apagado que el resto de filas. */
.fila-mas.peligro .fila-mas-titulo { color: var(--text-dim); font-weight: 600; }
@media (hover: hover) {
  .fila-mas:hover { background: rgba(245,197,24,0.04); }
  .fila-mas.peligro:hover .fila-mas-titulo { color: var(--text); }
}

/* ---------- Páginas de Más: Programados, Recordatorios, Notificaciones ---------- */

.lista-pagina { padding-bottom: 24px; }
.lista-pagina > .tarjeta { margin: 12px var(--margen) 0; }
.tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 16px; }
/* Canal de un programado: amarillo, como el proyecto de una tarjeta de tarea. */
.lista-pagina > .tarjeta > .enlace-boton {
  align-self: flex-start; min-height: 2rem; position: relative;
  color: var(--accent); font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3;
}
.lista-pagina > .tarjeta > .enlace-boton::after { content: ''; position: absolute; inset: -6px 0; }
/* Hora de un programado o recordatorio en las páginas: pastilla amarilla tenue con su hora escrita. */
.lista-pagina .programado-cabecera {
  align-self: flex-start; display: inline-flex; gap: 4px; padding: 2px 9px 2px 7px;
  border: 1px solid rgba(245,197,24,0.20); border-radius: 999px; background: rgba(245,197,24,0.10); color: var(--accent);
  font-size: 0.75rem; font-weight: 700; line-height: 1.4;
}
.lista-pagina .programado-cabecera .ico { width: 0.8125rem; height: 0.8125rem; }
.programado-texto { font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.tarjeta-abrir {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 3rem; padding: 2px 0 0;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tarjeta-abrir:focus-visible { outline-offset: 4px; border-radius: 12px; }
/* Recordatorio: el mensaje en blanco 700 y su canal debajo en amarillo. */
.tarjeta-abrir .tarea-titulo { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; overflow-wrap: anywhere; }
.tarjeta-abrir .tarea-meta { color: var(--accent); font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* Notificaciones (#/mas/avisos): tarjetas de información oscuras. */
.avisos-contenido { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.tarjeta-info { display: flex; flex-direction: column; gap: 12px; margin: 16px var(--margen) 0; padding: 20px 22px; }
.tarjeta-info h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
/* «Activados»: sin verde (el verde es solo de «Entregada»); el título lo dice. */
.tarjeta-info h2.ok { color: var(--text); }
.tarjeta-info p { color: var(--text-dim); font-size: 0.9375rem; line-height: 1.5; }
.tarjeta-info .boton { align-self: flex-start; }
.pasos { padding-left: 20px; list-style: decimal; display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: 0.9375rem; }
.pasos li::marker { color: var(--accent); font-weight: 700; }
.avisos-contenido > .mensaje-ok, .avisos-contenido > .mensaje-error, .otros-dispositivos { margin: 0 var(--margen); }
.otros-dispositivos { font-size: 0.875rem; }