/* ==========================================================================
   enviale.css · base del panel (app.enviale.com)
   Fuente de verdad visual: docs/06-sistema-visual.md y panel/referencias/.
   Sin frameworks. Clases en español, cortas y planas. Vista de ejemplo: panel/assets/componentes.html
   Fuentes (en el <head> de cada vista):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --tinta: #121212;
  --papel: #F6F5F1;
  --blanco: #FFFFFF;
  --lila: #CBB8FF;
  --lila-claro: #E6DDFF;
  --lila-fondo: #F1ECFF;
  --lila-texto: #8B6CFF;     /* solo títulos de 24 px o más */
  --violeta: #6B4FE0;
  --violeta-oscuro: #4B32A8;
  --naranja: #FF5A1F;
  --naranja-texto: #C2410C;
  --borde: #E7E6E2;
  --borde-fuerte: #D9D6CE;
  --gris-texto: #52525B;
  --gris-suave: #EFEDE7;
  --gris-seg: #EAE8E2;
  --burbuja-mia: #F2F1EC;
  --escenario: #ECEBE7;     /* fondo de la vista previa del editor (Editor.dc.html) */

  --chip-curso: #CBB8FF;
  --chip-programada: #E6DDFF;
  --chip-aprobar: #FFD24D;
  --chip-lista: #9BE3BF;
  --chip-alerta: #FFC7A8;
  --chip-borrador: #EDEDEA;

  --ok-fondo: #EAF8F0;  --ok-texto: #1F7A4D;
  --aviso-fondo: #FFF4EC; --aviso-texto: #A3410B;
  --error-fondo: #FDECEC; --error-texto: #B42318;

  --f-titulo: Outfit, "Helvetica Neue", Arial, sans-serif;
  --f-texto: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --r-tarjeta: 22px;
  --r-destacada: 26px;
  --r-campo: 14px;
  --r-capsula: 999px;
  --sombra-suave: 0 1px 2px rgba(18, 18, 18, .08);
  --sombra-flotante: 0 20px 44px rgba(18, 18, 18, .16);

  --menu-ancho: 248px;
  --gutter: 24px;
}

/* 2 · Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 14px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titulo); letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 30px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0; }
a { color: var(--violeta); text-decoration: none; }
a:hover { color: var(--violeta-oscuro); text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.secundario { color: var(--gris-texto); }
.chico { font-size: 12px; }
.num-tab { font-variant-numeric: tabular-nums; }

/* 3 · Estructura (app shell) --------------------------------------------- */
.app { display: grid; grid-template-columns: var(--menu-ancho) minmax(0, 1fr); min-height: 100vh; }
.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 14px; border-right: 1px solid var(--borde); background: var(--blanco);
}
.marca { display: flex; align-items: center; gap: 8px; padding: 0 8px 18px; color: var(--tinta); }
.marca:hover { color: var(--tinta); text-decoration: none; }
.firma { display: block; height: 24px; width: auto; flex-shrink: 0; fill: currentColor; }  /* marca/svg/firma.svg en línea */
.isotipo { display: block; height: 24px; width: auto; flex-shrink: 0; fill: currentColor; } /* marca/svg/isotipo.svg en línea */
.icono-app { display: block; width: 32px; height: 32px; flex-shrink: 0; }                     /* marca/svg/icono-app.svg */
.menu-titulo { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texto); }
.nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--r-capsula);
  color: var(--tinta); font-weight: 500;
}
.nav-item:hover { background: var(--gris-suave); color: var(--tinta); text-decoration: none; }
.nav-item[aria-current="page"], .nav-item.activo { background: var(--gris-suave); border-color: var(--borde-fuerte); font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .contador { margin-left: auto; }

.principal { min-width: 0; padding: 22px 32px 48px; }
.barra-sup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.barra-sup .espacio { flex: 1; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera p { margin-top: 6px; color: var(--gris-texto); }
.saludo { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }

.grilla { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-inicio { grid-template-columns: 1.25fr 1fr 1fr; }  /* Mía · En curso · Para atender */
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila .espacio { flex: 1; }

/* 4 · Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 18px;
  border: 1.5px solid transparent; border-radius: var(--r-capsula);
  background: var(--tinta); color: var(--blanco);
  font: 600 14px/1 var(--f-titulo); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { background: #2A2A2A; color: var(--blanco); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.desactivado { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-sec { background: var(--blanco); color: var(--tinta); border-color: var(--borde-fuerte); }
.btn-sec:hover { background: var(--gris-suave); color: var(--tinta); }
.btn-lila { background: var(--lila); color: var(--tinta); }
.btn-lila:hover { background: #BBA3FF; color: var(--tinta); }
.btn-peligro { background: var(--blanco); color: var(--error-texto); border-color: #F3C4C0; }
.btn-peligro:hover { background: var(--error-fondo); color: var(--error-texto); }
.btn-chico { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-grande { min-height: 48px; padding: 0 24px; font-size: 16px; }
/* Botón naranja con círculo negro y flecha (demo, acción principal destacada) */
.btn-flecha { background: var(--naranja); color: var(--tinta); padding: 0 5px 0 18px; }
.btn-flecha:hover { background: #FF6D38; color: var(--tinta); }
.btn-flecha .circulo { width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
.btn-flecha .circulo svg { width: 13px; height: 13px; stroke: var(--blanco); }
.btn-flecha:hover .circulo { transform: translateX(3px); }
.btn-icono { width: 38px; padding: 0; }
@media (pointer: coarse) { .btn { min-height: 44px; } .btn-icono { width: 44px; } }

/* 5 · Cápsulas, numeradas y chips --------------------------------------- */
.num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; min-width: 40px; padding: 0 9px;
  border: 1.5px solid var(--tinta); border-radius: var(--r-capsula);
  font: 500 12px/1 var(--f-titulo); color: var(--tinta); white-space: nowrap;
}
.num-titulo { display: flex; align-items: center; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-capsula); background: var(--chip-borrador);
  font-size: 12px; font-weight: 600; color: var(--tinta); white-space: nowrap;
}
.chip-curso { background: var(--chip-curso); }
.chip-programada { background: var(--chip-programada); }
.chip-aprobar { background: var(--chip-aprobar); }
.chip-lista { background: var(--chip-lista); }
.chip-alerta { background: var(--chip-alerta); }
.chip-borrador { background: var(--chip-borrador); }
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill {  /* cápsula neutra con borde, para filtros y etiquetas */
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-capsula);
  background: var(--blanco); font-size: 13px; font-weight: 500; color: var(--tinta);
}
.pill.activo { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.contador { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-capsula); background: var(--naranja); color: var(--tinta); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* 6 · Tarjetas e indicadores -------------------------------------------- */
.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 20px; min-width: 0; }
.card-destacada { border-radius: var(--r-destacada); padding: 24px; }
.card-negra { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.card-lila { background: var(--lila); border-color: var(--lila); }
.card-suave { background: var(--gris-suave); border-color: var(--gris-suave); }
.card-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-relativa { position: relative; overflow: hidden; }  /* para alojar un .trazo */

.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi-etiqueta { font-size: 13px; color: var(--gris-texto); font-weight: 500; }
.kpi-valor { font: 600 34px/1 var(--f-titulo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi-nota { font-size: 12px; color: var(--gris-texto); }
.kpi-nota .sube { color: var(--ok-texto); font-weight: 600; }
.kpi-nota .baja { color: var(--error-texto); font-weight: 600; }

.barra-avance { height: 8px; border-radius: var(--r-capsula); background: var(--gris-suave); overflow: hidden; }
.barra-avance > span { display: block; height: 100%; border-radius: inherit; background: var(--violeta); }

/* 7 · Tablas ------------------------------------------------------------- */
.tabla-caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  padding: 12px 16px; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--gris-texto);
  border-bottom: 1px solid var(--borde); background: #FBFAF8;
}
.tabla td { padding: 14px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #FBFAF8; }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .principal-celda { font-weight: 600; }
.tabla .secundario { font-size: 12px; }

/* 8 · Formularios -------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .etiqueta { font-size: 13px; font-weight: 600; }
.ayuda { font-size: 12px; color: var(--gris-texto); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-campo);
  background: var(--blanco); color: var(--tinta);
  font: 400 14px/1.4 var(--f-texto);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 120px; resize: vertical; }
.textarea.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(107, 79, 224, .18); }
.input[aria-invalid="true"] { border-color: var(--error-texto); }
.error-campo { font-size: 12px; color: var(--error-texto); font-weight: 500; }
/* Fecha y hora: el campo con la tipografía y los íconos del sistema. La ventanita del calendario es la del
   navegador (en el celular, la rueda de iOS y Android es la más cómoda) y toma el violeta con accent-color. */
.input[type="date"], .input[type="time"] { color-scheme: light; accent-color: var(--violeta); font-variant-numeric: tabular-nums; }
.input::-webkit-datetime-edit { padding: 0; }
.input::-webkit-calendar-picker-indicator {
  width: 16px; height: 16px; margin-left: 8px; padding: 4px; border-radius: 8px; cursor: pointer; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.input[type="time"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.input::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--gris-suave); }
.pin-input { letter-spacing: .5em; text-align: center; font: 600 26px/1 var(--f-titulo); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinta); }

/* Control segmentado */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-capsula); background: var(--gris-seg); }
.seg button, .seg a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 0; border-radius: var(--r-capsula); background: transparent;
  font: 500 13px/1 var(--f-texto); color: var(--tinta); cursor: pointer;
}
.seg button:hover, .seg a:hover { text-decoration: none; color: var(--tinta); }
.seg [aria-pressed="true"], .seg [aria-current="page"], .seg .activo { background: var(--blanco); box-shadow: var(--sombra-suave); font-weight: 600; }

/* Pasos del asistente (01 / Contenido · 02 / Destinatarios …) */
.pasos { display: flex; gap: 8px; flex-wrap: wrap; }
.paso { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: var(--r-capsula); background: var(--blanco); border: 1px solid var(--borde); font-weight: 500; color: var(--gris-texto); }
.paso .num { height: 24px; min-width: 36px; border-color: var(--borde-fuerte); color: var(--gris-texto); }
.paso.activo { color: var(--tinta); border-color: var(--tinta); }
.paso.activo .num { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.paso.hecho .num { background: var(--chip-lista); border-color: var(--chip-lista); color: var(--tinta); }

/* 9 · Conversación con Mía ---------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: 10px; }
.burbuja { max-width: 86%; padding: 11px 15px; font-size: 14px; line-height: 1.5; }
.burbuja-mia { align-self: flex-start; background: var(--burbuja-mia); border-radius: 18px 18px 18px 6px; }
.burbuja-yo { align-self: flex-end; background: var(--tinta); color: var(--blanco); border-radius: 18px 18px 6px 18px; }
.burbuja-voz::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.mia-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lila); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-entrada { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-capsula); background: var(--blanco); }
.chat-entrada input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: transparent; }
.aparece { animation: aparece .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 10 · Alertas y avisos -------------------------------------------------- */
.alerta { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.alerta svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alerta-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.alerta-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.alerta-error { background: var(--error-fondo); color: var(--error-texto); }
.alerta-info { background: var(--lila-fondo); color: var(--violeta-oscuro); }
.alerta strong { color: inherit; }
.alerta > p { flex: 1; margin: 0; }  /* el texto va siempre dentro de un <p> */
.chequeo { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-capsula); font-size: 12px; font-weight: 600; }
.chequeo-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chequeo-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chequeo-error { background: var(--error-fondo); color: var(--error-texto); }

.vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--gris-texto); }

/* 11 · El trazo ---------------------------------------------------------- */
/* Uso: dentro de una .card-relativa, al final del contenido:
   <svg class="trazo trazo-abajo-der" viewBox="0 0 300 120" aria-hidden="true"><path d="…" /></svg>
   Reglas: 1 o 2 por pantalla, sin cruzarse, nunca detrás de texto, botones ni campos. */
.trazo { position: absolute; pointer-events: none; z-index: 0; overflow: visible; }
.trazo path { fill: none; stroke: var(--lila); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.trazo-naranja path { stroke: var(--naranja); }
.trazo-fino path { stroke-width: 14; }
.trazo-grueso path { stroke-width: 26; }
.trazo-abajo-der { right: -10px; bottom: -14px; width: 60%; max-width: 340px; }
.trazo-abajo-izq { left: -10px; bottom: -14px; width: 60%; max-width: 340px; }
.card-relativa > *:not(.trazo) { position: relative; z-index: 1; }
.con-trazo { padding-bottom: 104px; }  /* reserva el lugar del trazo: nunca queda detrás del contenido */
.trazo-dibuja path { stroke-dasharray: 1; animation: dibuja 2s .3s cubic-bezier(.6, .05, .25, 1) both; } /* requiere pathLength="1" en el path */
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 12 · Modal ------------------------------------------------------------- */
.modal-fondo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(18, 18, 18, .42); }
.modal { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--blanco); border-radius: var(--r-destacada); padding: 26px; box-shadow: var(--sombra-flotante); }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* 12b · Acceso (login con PIN, Login.dc.html) ---------------------------- */
.acceso {
  position: relative; overflow: hidden; isolation: isolate; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 40px 16px; background: var(--papel);
}
.acceso-trazo { position: absolute; z-index: -1; pointer-events: none; }
.acceso-trazo path { fill: none; stroke-linecap: round; }
.acceso-trazo-izq { left: -221px; bottom: -141px; width: 620px; height: 410px; }
.acceso-trazo-izq path { stroke: var(--lila); stroke-width: 34; }
.acceso-trazo-der { right: -50px; top: -30px; width: 520px; height: 330px; }
.acceso-trazo-der path { stroke: var(--naranja); stroke-width: 30; }
.acceso .marca { padding: 0; gap: 10px; }
.acceso .firma { height: 29px; }
.acceso-tarjeta {
  width: 100%; max-width: 420px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 10px 30px rgba(24, 24, 27, .05);
}
.acceso-tarjeta form { display: flex; flex-direction: column; gap: 18px; }
.acceso-cabeza { display: flex; flex-direction: column; gap: 6px; }
.acceso-cabeza h1 { font-size: 30px; font-weight: 500; letter-spacing: -0.025em; }
.acceso-cabeza .chip { align-self: flex-start; }
.acceso-cabeza p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris-texto); }
.acceso .input { min-height: 46px; font-size: 15px; }
.acceso .btn { min-height: 46px; width: 100%; }
.acceso-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--gris-texto); }
.acceso-nota { max-width: 420px; font-size: 12px; line-height: 1.5; color: var(--gris-texto); text-align: center; }
.acceso-clave {
  padding: 12px; border-radius: var(--r-campo); background: var(--gris-suave);
  font: 600 17px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em; text-align: center; word-break: break-all; user-select: all;
}
.acceso-qr { display: flex; justify-content: center; }
.acceso-qr svg { width: 184px; height: 184px; color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--r-campo); }
.acceso-pasos { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--gris-texto); }
.btn-texto { border: 0; background: none; padding: 0; font: 500 13px var(--f-texto); color: var(--violeta); cursor: pointer; }
.btn-texto:hover { color: var(--violeta-oscuro); text-decoration: underline; }

/* 12c · Panel: clientes y remitentes (Clientes.dc.html, Remitente.dc.html) -- */
.barra-movil { display: none; }
.menu-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; border-top: 1px solid var(--borde); }
.menu-usuario-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.menu-usuario-texto span { font-size: 12px; color: var(--gris-texto); }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--chip-aprobar); font-size: 13px; font-weight: 700; }
.avatar-lila { background: var(--lila-claro); font-size: 12px; }
.avatar-cliente { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--tinta); }
.avatar-0 { background: var(--lila-claro); } .avatar-1 { background: var(--chip-lista); } .avatar-2 { background: var(--chip-aprobar); }
.avatar-3 { background: var(--lila); } .avatar-4 { background: var(--chip-alerta); } .avatar-5 { background: var(--chip-borrador); }

.migas { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; color: var(--gris-texto); flex-wrap: wrap; }
.migas a { color: var(--gris-texto); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 500; }
.migas .separador { color: #A1A1AA; }
.migas-volver { display: inline-flex; }
.migas-linea { width: 1px; height: 16px; background: var(--borde-fuerte); }
.cabecera h1 { font-weight: 500; letter-spacing: -0.025em; }
.aviso-pantalla { margin-bottom: 16px; }

.herramientas { margin-bottom: 16px; }
.buscador { display: flex; align-items: center; gap: 8px; height: 38px; width: 280px; max-width: 100%; padding: 0 12px; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-capsula); background: var(--blanco); color: var(--gris-texto); }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13px var(--f-texto); color: var(--tinta); }
.buscador:focus-within { border-color: var(--violeta); }
.seg-cuenta { margin-left: 4px; color: var(--gris-texto); font-weight: 500; }
.tabla-clientes { min-width: 900px; }
.celda-cliente { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinta); }
.recortar { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texto-ok { color: var(--ok-texto); font-weight: 500; }
.texto-aviso { color: var(--aviso-texto); font-weight: 500; }
.celda-nota { display: block; margin-top: 4px; }
.modo { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid; border-radius: var(--r-capsula); font-size: 12px; font-weight: 500; white-space: nowrap; }
.modo-sin-dns { border-color: var(--lila-claro); background: var(--lila-fondo); color: var(--violeta-oscuro); }
.modo-propio { border-color: var(--lila); background: var(--blanco); color: var(--violeta); }
.explicacion-modos { margin-top: 16px; }
.fila-arriba { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.tarjeta-enlace { display: flex; flex-direction: column; gap: 10px; color: var(--tinta); }
.tarjeta-enlace:hover { text-decoration: none; color: var(--tinta); border-color: var(--borde-fuerte); }

.formulario-angosto { max-width: 620px; gap: 18px; }
.dato-fijo { min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--borde); border-radius: var(--r-campo); background: #FAFAF8; color: var(--gris-texto); }

.columnas { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.columna-principal { flex: 2 1 520px; min-width: 0; gap: 14px; }
.columna-lateral { flex: 1 1 300px; max-width: 380px; min-width: 0; gap: 14px; }
.opciones-modo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opcion-modo { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--r-tarjeta); background: var(--blanco); color: var(--tinta); font-size: 13px; line-height: 1.5; }
a.opcion-modo:hover { text-decoration: none; color: var(--tinta); border-color: var(--borde-fuerte); }
.opcion-modo.elegida { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.opcion-modo.apagada { opacity: .5; }
.opcion-modo-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; }
.opcion-modo-punto { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tinta); flex-shrink: 0; }
.elegida .opcion-modo-punto { background: radial-gradient(var(--tinta) 0 4px, var(--blanco) 5px); }
.opcion-modo-nota { font-size: 12px; font-weight: 600; color: var(--violeta-oscuro); }
.pila-amplia { display: flex; flex-direction: column; gap: 18px; }
.etiqueta-num { display: flex; align-items: center; gap: 8px; }
.num-chico { height: 22px; min-width: 0; padding: 0 8px; font-size: 11px; }
.direccion-envio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.direccion-envio > .input { flex: 1 1 160px; width: auto; }
.direccion-dominio { flex: 2 1 260px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.direccion-dominio .input { flex: 1; width: auto; min-width: 0; }
.arroba { font-weight: 600; color: var(--gris-texto); }
.dominio-fijo { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--borde); border-radius: var(--r-campo); background: #FAFAF8; color: var(--gris-texto); overflow-wrap: anywhere; }
.campo-flexible { flex: 1 1 240px; width: auto; }
.estado-respuesta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-campo); font-size: 13px; font-weight: 600; }
.estado-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.estado-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.card-cabecera.sin-margen { margin-bottom: 0; }
.titulo-chico { font: 600 14px/1.3 var(--f-texto); letter-spacing: 0; }
.tabla-interna { border-radius: 12px; }
.tabla-registros { min-width: 620px; font-size: 13px; }
.tabla-registros td { padding: 10px 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #3F3F46; }
.vista-bandeja { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; }
.vista-bandeja-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.vista-bandeja-texto strong { font-size: 14px; }
.datos-envio { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; margin: 0; font-size: 12px; }
.datos-envio dt { color: var(--gris-texto); }
.datos-envio dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acceso-direccion { font-size: 15px; letter-spacing: 0; }
.acceso-ayuda { font-size: 12px; line-height: 1.5; color: var(--gris-texto); }

/* 12d · Panel: contactos e importación (Contactos.dc.html) ------------------ */
.seg-chico a, .seg-chico button { height: 28px; padding: 0 11px; font-size: 12px; }
.tabla-contactos { min-width: 720px; }
.celda-contacto { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 340px; }
.celda-contacto .secundario { font-size: 12px; }
.paginas { justify-content: flex-end; margin-top: 12px; }
.paginas .secundario { margin-right: auto; }
.input-archivo { padding: 10px 12px; height: auto; cursor: pointer; }
.input-archivo::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-capsula); background: var(--blanco); font: 600 13px var(--f-texto); color: var(--tinta); cursor: pointer; }
.tabla-vista-previa { min-width: 100%; font-size: 13px; }
.tabla-vista-previa th { vertical-align: bottom; min-width: 150px; }
.tabla-vista-previa td { max-width: 240px; }
.titulo-columna { display: block; margin-bottom: 6px; font-size: 12px; color: var(--gris-texto); font-weight: 600; }
.select-chico { min-height: 36px; padding: 0 10px; font-size: 13px; }
.campo-sangria { margin-left: 28px; }
.titulo-seccion { margin: 6px 0 -8px; }
.zona-archivo {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 120px; padding: 22px;
  border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-tarjeta); background: #FAFAF8; cursor: pointer;
  transition: border-color .18s, background-color .18s, transform .18s cubic-bezier(.2, .8, .3, 1.4), box-shadow .18s;
}
.zona-archivo:hover, .zona-archivo:focus-within { border-color: var(--violeta); background: var(--lila-fondo); }
.zona-archivo:focus-within { box-shadow: 0 0 0 3px rgba(107, 79, 224, .18); }
.zona-archivo-icono {
  flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--blanco); border: 1px solid var(--borde); color: var(--tinta);
  transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), background-color .18s, color .18s;
}
.zona-archivo-vacio, .zona-archivo-elegido { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zona-archivo-elegido strong { overflow-wrap: anywhere; }
.zona-archivo-enlace { color: var(--violeta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* arrastrando un archivo por la página: la zona se ofrece */
.arrastrando-archivo .zona-archivo { border-color: var(--violeta); background: var(--lila-fondo); }
.arrastrando-archivo .zona-archivo-icono { animation: zona-flota 1s ease-in-out infinite; }
/* encima de la zona: se abre para recibirlo */
.zona-archivo.encima { transform: scale(1.02); border-style: solid; background: var(--lila-claro); box-shadow: 0 10px 30px rgba(107, 79, 224, .18); }
.zona-archivo.encima .zona-archivo-icono { animation: none; transform: translateY(-6px) scale(1.12); background: var(--violeta); color: var(--blanco); border-color: var(--violeta); }
/* soltado: confirma con un salto */
.zona-archivo.con-archivo { border-style: solid; border-color: var(--tinta); background: var(--blanco); animation: zona-recibe .45s cubic-bezier(.2, .8, .3, 1.4); }
.zona-archivo.con-archivo .zona-archivo-icono { background: var(--chip-lista); border-color: var(--chip-lista); }
.zona-archivo.con-error { border-color: var(--error-texto); }
.zona-archivo-icono .icono-listo, .zona-archivo.con-archivo .icono-subir { display: none; }
.zona-archivo.con-archivo .icono-listo { display: block; animation: zona-tilde .35s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes zona-tilde { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.zona-archivo.sacude { animation: zona-sacude .35s; }
@keyframes zona-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes zona-recibe { 0% { transform: scale(1.03); } 55% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes zona-sacude { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* 12e · Tareas en curso (tarjeta flotante, public/app/assets/tareas.js) ------ */
.tareas { position: fixed; z-index: 30; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; }
.tarea {
  position: relative; overflow: hidden; padding: 14px 14px 16px; border: 1px solid var(--borde); border-radius: var(--r-tarjeta);
  background: var(--blanco); box-shadow: var(--sombra-flotante); animation: tarea-entra .35s cubic-bezier(.2, .8, .3, 1.2) both;
}
.tarea > :not(.trazo) { position: relative; z-index: 1; }
.tarea-cabeza { display: flex; align-items: center; gap: 10px; }
.tarea-icono { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.tarea-icono svg { width: 30px; height: 30px; }
.tarea.activa .tarea-icono svg { animation: tarea-vuela 1.6s ease-in-out infinite; }
.tarea-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tarea-titulo { font: 600 14px/1.3 var(--f-texto); }
.tarea-sub { font-size: 12px; color: var(--gris-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarea-cerrar { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--gris-texto); cursor: pointer; }
.tarea-cerrar:hover { background: var(--gris-suave); color: var(--tinta); }
.tarea-cuerpo { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tarea-barra { height: 10px; }
.tarea-barra > span { transition: width .6s cubic-bezier(.3, .7, .3, 1); }
.barra-avance.indeterminada > span { width: 35%; animation: barra-va 1.3s ease-in-out infinite; }
.tarea-datos { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.tarea-cuenta { font-weight: 600; color: var(--tinta); }
.tarea-resumen { font-size: 13px; line-height: 1.45; }
.tarea .btn { align-self: flex-start; }
.tarea.se-va { animation: tarea-sale .25s ease-in both; }
.texto-error { color: var(--error-texto); }
/* al terminar: el trazo se dibuja saliendo por el borde y la e despega */
.tarea.celebra { padding-bottom: 64px; animation: tarea-celebra .5s cubic-bezier(.2, .8, .3, 1.4); }
.tarea-trazo { left: -10px; right: -10px; bottom: -18px; width: calc(100% + 20px); height: auto; }
.tarea-trazo path { stroke-dasharray: 1; animation: dibuja 1.4s .1s cubic-bezier(.6, .05, .25, 1) both; }
.tarea-trazo-2 path { animation-delay: .7s; animation-duration: .9s; }
.tarea.celebra .tarea-icono svg { animation: tarea-despega 1.1s .2s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes tarea-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tarea-sale { to { opacity: 0; transform: translateY(12px); } }
@keyframes tarea-vuela { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(2px, -3px) rotate(-4deg); } }
@keyframes tarea-celebra { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes tarea-despega { 0% { transform: none; opacity: 1; } 45% { transform: translate(26px, -22px) rotate(-12deg) scale(.8); opacity: 0; }
  46% { transform: translate(-18px, 14px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes barra-va { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
@media (max-width: 640px) { .tareas { right: 16px; bottom: 16px; } }

/* 12f · Panel: plantillas y editor (Editor.dc.html) ------------------------ */
.tabla-plantillas { min-width: 640px; }
.celda-plantilla { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--tinta); }
.celda-plantilla:hover { text-decoration: none; }
.celda-plantilla:hover strong { text-decoration: underline; }
.lista-avisos { flex: 1; margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
/* pantalla completa, sin menú: barra arriba, vista previa a la izquierda y el JSON a la derecha */
.editor { min-height: 100vh; display: flex; flex-direction: column; background: var(--papel); }
.editor-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.editor-icono { width: 26px; height: 26px; }
.editor-titulos { display: flex; flex-direction: column; flex-grow: 1; min-width: 200px; gap: 2px; }
.editor-titulos .fila { gap: 8px; }
.editor-nombre { font-weight: 600; font-size: 15px; }
.editor-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.editor-cuerpo { display: flex; flex-wrap: wrap; flex-grow: 1; }
.editor-principal { flex: 999 1 560px; min-width: 0; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.editor-lateral { flex: 1 1 340px; max-width: 440px; min-width: 0; background: var(--blanco); border-left: 1px solid var(--borde); padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.editor-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.editor-campo { display: flex; align-items: center; gap: 10px; height: 42px; background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 0 12px; }
.editor-campo span { font-size: 12px; font-weight: 600; color: var(--gris-texto); }
.editor-campo input { border: 0; outline: none; background: transparent; font: 500 13px var(--f-texto); flex-grow: 1; min-width: 0; color: var(--tinta); }
.editor-campo:focus-within { border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(107, 79, 224, .18); }
.editor-campo.aviso { border-color: var(--chip-alerta); }
.editor-campo.aviso span { color: var(--aviso-texto); }
.editor-herramientas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.editor-chequeos { flex: 1 1 360px; min-width: 0; gap: 10px; }
.editor-chequeos .fila { gap: 6px; }
.editor-escenario { flex-grow: 1; background: var(--escenario); border-radius: 16px; padding: 24px 12px; display: flex; justify-content: center; align-items: flex-start; overflow-x: auto; }
.editor-marco { display: block; width: 680px;  /* el email de 600 px más su fondo: con menos, el email pasa a su versión de celular */
   max-width: 100%; height: 900px; border: 0; border-radius: 12px; background: var(--blanco); box-shadow: 0 10px 30px rgba(24, 24, 27, .08); transition: width .25s, border-radius .25s; }
.editor-marco.movil { border-radius: 28px; }
.editor-sin-vista { margin: 60px 0; color: var(--gris-texto); }
.editor-json { min-height: 440px; font-size: 12px; line-height: 1.55; tab-size: 2; white-space: pre; overflow: auto; }
.editor-json[aria-invalid="true"] { border-color: var(--error-texto); }
.imagenes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.imagen-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--borde); border-radius: 12px; }
.imagen-item img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--gris-suave); }
.imagen-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imagen-datos .recortar { max-width: 100%; }

/* 12g · Panel: campañas (Campanas.dc.html, Crear.dc.html y Envio.dc.html) ---- */
.tabla-campanas { min-width: 760px; }
.tabla-campanas .celda-cliente { font-weight: 400; }
.nota-pie { margin-top: 12px; }
.opciones-origen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.opcion-origen { cursor: pointer; padding: 14px; }
.opcion-origen .opcion-modo-titulo { font-size: 14px; }
.opcion-origen:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.opcion-origen:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(107, 79, 224, .3); }
.opcion-origen.apagada { cursor: not-allowed; }
/* Cada lista aparece solo con su tarjeta elegida (sin :has, se ven las dos y el servidor usa la que corresponde) */
.card:not(:has(input[name="origen"][value="plantilla"]:checked)) > .origen-plantilla,
.card:not(:has(input[name="origen"][value="anterior"]:checked)) > .origen-anterior { display: none; }
.lista-control { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; }
.lista-control li { display: flex; align-items: flex-start; gap: 8px; }
.lista-control svg { flex: none; margin-top: 1px; }
.lista-control .ok svg { color: var(--ok-texto); }
.lista-control .falta { color: var(--aviso-texto); }
.pasos-chicos .paso { height: 32px; font-size: 13px; }
.pasos-chicos a.paso:hover { text-decoration: none; color: var(--tinta); border-color: var(--borde-fuerte); }
.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pila-chica { gap: 4px; }
.input-chico { min-height: 36px; padding: 6px 10px; font-size: 13px; width: auto; }
.tabla-tandas td { vertical-align: middle; }
.tabla-tandas .dia-semana { display: block; margin-top: 4px; }
.tabla-tandas .fila-total td { font-weight: 600; background: #FBFAF8; }
.kpis-audiencia .kpi { padding: 14px; }
.kpis-audiencia .kpi-valor { font-size: 28px; }
.kpi-destacado { border-color: #CDEFDC; background: #F3FBF6; }
.selector-lista { max-width: 360px; }
.lista-avance { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lista-avance li { display: flex; flex-direction: column; gap: 6px; }
/* Cierre después de aprobar (campanas/programada.php): el trazo dibuja la «e», que aterriza y flota */
.logrado { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: var(--papel); }
.logrado-tarjeta { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px 32px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r-destacada); box-shadow: 0 10px 30px rgba(24, 24, 27, .05); text-align: center; }
.logrado-marca { width: 150px; height: auto; overflow: visible; }
.logrado-trazo { fill: none; stroke: var(--lila); stroke-width: 34; stroke-linecap: round; stroke-dasharray: 1; animation: logrado-dibuja 1.3s cubic-bezier(.6, .05, .25, 1) both; }
.logrado-e { fill: var(--tinta); transform-box: fill-box; transform-origin: center; animation: logrado-aterriza .5s 1.1s cubic-bezier(.2, .8, .2, 1) both, logrado-flota 3.4s 1.8s ease-in-out infinite; }
.logrado-texto { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; animation: logrado-sube .6s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.logrado-texto h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.025em; }
.logrado-texto .datos-envio { width: 100%; text-align: left; margin: 6px 0; }
.logrado-texto .alerta { text-align: left; }
.logrado-acciones { justify-content: center; flex-wrap: wrap; margin-top: 6px; }
@keyframes logrado-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logrado-aterriza { from { opacity: 0; transform: translate(-14px, 14px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes logrado-flota { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4px, -6px) rotate(-4deg); } }
@keyframes logrado-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logrado-trazo, .logrado-e, .logrado-texto { animation: none; } }
@media (max-width: 480px) { .logrado-tarjeta { padding: 28px 20px; } .logrado-texto h1 { font-size: 24px; } .logrado-acciones .btn { width: 100%; } }

/* H7: acciones que se abren en el lugar (reprogramar tandas) y motivo de reanudar */
.desplegable { border-top: 1px solid var(--borde); padding-top: 14px; }
.desplegable > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font: 600 14px/1.4 var(--f-titulo); }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: ""; width: 7px; height: 7px; margin: 0 2px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.desplegable[open] > summary { margin-bottom: 12px; }
.desplegable[open] > summary::before { transform: rotate(45deg); }
.textarea-chica { min-height: 76px; }
/* Resumen antes de aprobar: lo de la izquierda se lee pero no se toca, el foco queda en la aprobación */
.atenuado { opacity: .6; transition: opacity .2s; }
.atenuado:hover { opacity: .8; }
.alerta .alerta-accion { flex: none; margin: -4px 0; }

/* H9 · Reporte (Reporte.dc.html): indicadores, clics por tanda, enlaces, dispositivo y contactos por resultado */
.kpis-reporte { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpis-reporte .kpi { padding: 14px 16px; }
.kpis-reporte .kpi-valor { font-size: 30px; }
.g-reporte { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.grafico-tandas { display: flex; align-items: flex-end; gap: 18px; height: 180px; padding: 0 8px; border-bottom: 1px solid var(--borde); }
.grafico-tandas > div { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.grafico-valor { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico-valor.pendiente { color: var(--gris-texto); font-weight: 500; }
.grafico-barra { width: 100%; max-width: 64px; min-height: 4px; border-radius: 6px 6px 0 0; background: var(--violeta); }
.grafico-barra.pendiente { background: #E2E1DD; }
.grafico-etiquetas { display: flex; gap: 18px; padding: 0 8px; }
.grafico-etiquetas > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 12px; color: var(--gris-texto); }
.grafico-etiquetas strong { font-weight: 500; color: var(--tinta); }
.enlace-clics { display: flex; flex-direction: column; gap: 5px; }
.enlace-clics .fila { flex-wrap: nowrap; justify-content: space-between; font-size: 13px; }
.enlace-clics .fila > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace-clics .fila > strong { font-variant-numeric: tabular-nums; }
.reparto { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--gris-suave); }
.reparto > span { display: block; height: 100%; }
.reparto-leyenda { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #3F3F46; }
.reparto-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.color-1 { background: var(--violeta); }
.color-2 { background: var(--naranja); }
.color-3 { background: var(--lila); }
.color-4 { background: #D4D2CC; }
.separada { border-top: 1px solid var(--borde); padding-top: 12px; }
.tabla-resultados { min-width: 640px; }
.seg-desliza { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-desliza::-webkit-scrollbar { display: none; }
.seg-desliza a, .seg-desliza button { flex: none; white-space: nowrap; }

/* H10 · Inicio (Main.dc.html): «En curso» y Mía próximamente */
.lista-curso { display: flex; flex-direction: column; margin: 0 -20px -20px; }
.lista-curso > a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid #F0EFEC; color: var(--tinta); }
.lista-curso > a:hover { background: #FBFAF8; text-decoration: none; }
.lista-curso .textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lista-curso .textos > strong { font-size: 13px; }
.lista-curso .textos > span { font-size: 12px; color: var(--gris-texto); }
.lista-curso .chip { align-self: flex-start; margin-top: 3px; }
.card-mia { display: flex; flex-direction: column; gap: 14px; }
.card-mia .chat-entrada { margin-top: auto; background: #FAFAF8; }
.card-mia .chat-entrada input:disabled { color: var(--gris-texto); cursor: not-allowed; }
@media (max-width: 900px) { .g-reporte { grid-template-columns: minmax(0, 1fr); } .lista-curso { margin: 0 -16px -16px; } .lista-curso > a { padding: 12px 16px; } }

/* 13 · Responsive -------------------------------------------------------- */
.menu-boton { display: none; }
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-inicio > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform .25s; box-shadow: var(--sombra-flotante); }
  .menu:not(.abierto) { box-shadow: none; visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .menu.abierto { transform: none; }
  .menu-boton { display: inline-flex; }
  .barra-movil { display: flex; margin-bottom: 14px; }
  .principal { padding: 16px 16px 40px; }
  .columna-lateral { max-width: none; }
  .editor-lateral { max-width: none; border-left: 0; border-top: 1px solid var(--borde); }
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g-4, .g-inicio { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 26px; }
  .saludo { font-size: 28px; }
  .kpi-valor { font-size: 28px; }
  .card { padding: 16px; }
  .con-trazo { padding-bottom: 96px; }
  .acceso-trazo-der { right: -120px; top: -90px; width: 380px; height: 240px; }
  .acceso-trazo-izq { left: -250px; bottom: -170px; }
  .tabla th, .tabla td { padding: 12px; }
  .opciones-modo { grid-template-columns: minmax(0, 1fr); }
  .g-4.resumen-importacion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-sangria { margin-left: 0; }
  .editor-barra { padding: 10px 14px; gap: 10px; }
  .editor-acciones { width: 100%; }
  .editor-principal { padding: 14px; }
  .editor-escenario { padding: 14px 6px; }
  .kpis-audiencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabla-tandas { min-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}