/* Sistema visual de Ámbar. Los valores salen del panel navegable
   (`Concepto apps/Panel navegable Ámbar/`), no de una paleta inventada acá:
   fondo crema tipo papel, acento terracota con moderación, serif editorial
   para los títulos y sans neutra para la interfaz.

   Regla de tono que manda sobre cualquier impulso de "dashboard": esto se lee
   como una carta sobre alguien que querés, no como un tablero. Nada de
   gráficos, porcentajes ni medidores. */
:root {
  --papel:#f6f0e6; --lateral:#f1e9db; --superficie:#fffcf7;
  --tinta:#211c17; --tinta-2:#5e5044; --apagado:#7a6e62; --tenue:#9c8f7f;
  --linea:#e4d8c4; --linea-2:#e7dcc9; --linea-3:#efe2d2;
  --acento:#b9502c; --acento-oscuro:#a0431f; --acento-suave:#f3e3da;
  --verde:#4e7a45; --ambar:#c99a5b; --naranja:#c97f3f;
  --alarma:#a8331a; --alarma-tinta:#8e2c15;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  color:var(--tinta); background:var(--papel);
  font:15px/1.5 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--acento); text-decoration:none; }
a:hover { color:var(--acento-oscuro); text-decoration:underline; }

/* **Esto tiene que ir antes que cualquier `display`.**
   El atributo `hidden` del HTML apaga un elemento con `display:none` desde la
   hoja del navegador, y **cualquier regla de clase le gana**. `.dashboard` y
   `.login-shell` declaran `display:grid`, así que los dos se veían siempre: al
   entrar al panel sin sesión aparecía el login Y abajo el panel entero.
   Con `!important` el atributo vuelve a mandar, que es lo que uno espera al
   escribirlo, y protege a cualquier elemento que se marque `hidden` de acá en
   adelante. */
[hidden] { display:none !important; }

@keyframes ambarPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.serif-xl { font:400 40px/1.15 "Newsreader", serif; letter-spacing:-.01em; margin:0 0 6px; }
.serif-l  { font:400 38px/1.15 "Newsreader", serif; margin:0 0 6px; }
.serif-m  { font:400 24px/1.2  "Newsreader", serif; margin:0 0 18px; }
.bajada { margin:0 0 28px; color:var(--apagado); font-size:15px; }
.rotulo { margin:0 0 10px; color:var(--tenue); font-size:11px; font-weight:700; letter-spacing:.12em; }
.ayuda { margin:0 0 14px; color:var(--tinta-2); font-size:14.5px; }
.al-margen { margin:22px 0 0; color:var(--apagado); font-size:14px; }
.feedback { min-height:20px; margin:10px 0 0; color:var(--tinta-2); font-size:14px; }
.feedback.error { color:#9f321b; }
.feedback-confirmacion { min-height:0; margin:0; padding:11px 13px; border-left:3px solid var(--linea);
                         border-radius:9px; background:var(--lateral); }
.feedback-confirmacion:empty { display:none; }
.feedback-confirmacion.confirmada { color:#315f38; border-color:var(--verde); background:#e7efe1; }
.feedback-confirmacion.error { border-color:var(--alarma); background:var(--acento-suave); }
.tarjeta > .resumen-titulo { margin:28px 0 8px; color:var(--tinta);
                             font:500 15px/1.4 "DM Sans", sans-serif; }
.vacio { margin:0; padding:20px; color:var(--apagado);
         border:1px dashed #d8c8b0; border-radius:14px; background:var(--lateral); }

/* ── Botones ──────────────────────────────────────────────────────────── */
button {
  min-height:40px; padding:9px 15px; border-radius:10px; font-size:14px;
  color:var(--tinta-2); background:transparent; border:1px solid #dccbb4;
}
button:hover:not(:disabled) { background:#efe7da; }
button:disabled { opacity:.5; cursor:default; }
button.primario { color:#fff8ee; background:var(--acento); border:0; font-weight:500; }
button.primario:hover:not(:disabled) { background:var(--acento-oscuro); }
button.enlace { min-height:0; padding:0; border:0; background:none; color:var(--acento); }
button.enlace:hover { background:none; text-decoration:underline; }
button.redondo { display:grid; place-items:center; width:34px; height:34px; min-height:0;
                 padding:0; border-radius:50%; color:#fff8ee; background:var(--acento); border:0; }

.marca { display:flex; align-items:center; gap:10px; margin:0;
         font:400 21px "Newsreader", serif; letter-spacing:.01em; }
.avatar { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
          border-radius:50%; color:#fff8ee; background:var(--acento);
          font:400 18px "Newsreader", serif; }

/* ── Entrar ───────────────────────────────────────────────────────────── */
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); padding:34px; border:1px solid var(--linea-2);
              border-radius:18px; background:var(--superficie); }
.login-card h1 { margin:20px 0 6px; font:400 34px/1.08 "Newsreader", serif; }
.login-card form { display:grid; gap:14px; margin-top:24px; }
.login-card label { display:grid; gap:7px; font-size:14px; color:var(--tinta-2); }
input, select { width:100%; min-height:44px; padding:8px 11px; border:1px solid #dccbb4;
                border-radius:9px; background:#fff; }
.campo-clave { display:flex; align-items:stretch; width:100%; border:1px solid #dccbb4;
               border-radius:9px; background:#fff; overflow:hidden; }
.campo-clave:focus-within { outline:2px solid color-mix(in srgb, var(--acento) 45%, transparent);
                           outline-offset:1px; }
.campo-clave input { min-width:0; border:0; border-radius:0; outline:0; }
button.mostrar-clave { min-height:44px; padding:8px 12px; border:0; border-left:1px solid var(--linea);
                       border-radius:0; color:var(--acento); background:#fff; font-weight:600; }
button.mostrar-clave:hover:not(:disabled) { background:var(--acento-suave); }
input[type="checkbox"], input[type="radio"] {
  width:18px; height:18px; min-height:18px; flex:0 0 18px; margin:2px 0 0; padding:0;
  accent-color:var(--acento);
}
textarea { width:100%; min-height:44px; padding:8px 11px; border:1px solid #dccbb4;
           border-radius:9px; background:#fff; font:inherit; color:inherit; }

/* ── Primera vez: el alta ──────────────────────────────────────────────── */
.alta-shell { min-height:100vh; padding:44px 24px 64px; }
.alta-shell .ancho > .marca { margin-bottom:22px; }
.alta-shell .tarjeta form { display:grid; gap:14px; margin-top:16px; }
.alta-shell .tarjeta label { display:grid; gap:7px; font-size:14px; color:var(--tinta-2); }
.alta-shell .tarjeta label.opcion-binaria,
.contacto-form label.opcion-binaria { display:flex; align-items:flex-start; gap:10px; }
.alta-tarjeta { overflow:hidden; }
.alta-encabezado { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:28px;
                   align-items:end; padding-bottom:20px; border-bottom:1px solid var(--linea-2); }
.alta-encabezado h2 { margin:0; font:400 27px/1.15 "Newsreader", serif; }
.alta-encabezado .rotulo { margin-bottom:4px; color:var(--acento); }
.alta-progreso { display:flex; align-items:flex-start; gap:5px; margin:0; padding:0; list-style:none; }
.alta-progreso li { position:relative; display:grid; justify-items:center; gap:4px; min-width:49px;
                    color:var(--tenue); font-size:11px; }
.alta-progreso li:not(:last-child)::after { content:""; position:absolute; top:13px; left:calc(50% + 14px);
                                           width:calc(100% - 23px); height:1px; background:var(--linea); }
.alta-progreso span { z-index:1; display:grid; place-items:center; width:27px; height:27px;
                      border:1px solid var(--linea); border-radius:50%; background:var(--superficie);
                      font-size:12px; font-weight:700; }
.alta-progreso li.actual { color:var(--acento); }
.alta-progreso li.actual span { color:#fff8ee; border-color:var(--acento); background:var(--acento); }
.alta-progreso li.completo span { color:var(--verde); border-color:#9ab693; background:#eef4ea; }
.alta-paso { display:grid; gap:14px; animation:altaEntrada .2s ease-out; }
.alta-paso-intro { margin:0 0 3px; color:var(--tinta-2); font-size:15px; }
.alta-navegacion { display:flex; justify-content:flex-end; gap:9px; padding-top:4px; }
.alta-resumen { padding:4px 0; }
.alta-resumen-lista { display:grid; gap:0; margin:0; border:1px solid var(--linea);
                      border-radius:13px; background:#fff; overflow:hidden; }
.alta-resumen-lista div { display:grid; grid-template-columns:145px 1fr; gap:18px;
                          padding:13px 15px; border-bottom:1px solid var(--linea-3); }
.alta-resumen-lista div:last-child { border-bottom:0; }
.alta-resumen-lista dt { color:var(--apagado); font-size:13px; }
.alta-resumen-lista dd { margin:0; font-weight:500; }
@keyframes altaEntrada { from { opacity:.35; transform:translateY(4px); } to { opacity:1; transform:none; } }
.codigo { margin:0; padding:14px 16px; border:1px dashed var(--acento); border-radius:12px;
          color:var(--acento); font:600 26px/1.2 "DM Sans", sans-serif; letter-spacing:.18em;
          text-align:center; }
.fila-horario { display:flex; align-items:center; gap:12px; padding:11px 0;
                border-bottom:1px solid var(--linea); }
.fila-horario .hora { font-weight:700; }
.fila-horario button { margin-left:auto; min-height:34px; padding:5px 12px; }

@media (max-width:620px) {
  .alta-shell { padding:26px 14px 48px; }
  .alta-encabezado { grid-template-columns:1fr; gap:16px; align-items:start; }
  .alta-progreso { justify-content:space-between; width:100%; }
  .alta-progreso li { min-width:44px; }
  .alta-resumen-lista div { grid-template-columns:1fr; gap:2px; }
  .alta-navegacion button { flex:1; }
}

/* ── Estructura ───────────────────────────────────────────────────────── */
.dashboard { min-height:100vh; display:flex; }
.lateral { width:272px; flex:0 0 272px; display:flex; flex-direction:column;
           padding:22px 18px 18px; background:var(--lateral);
           border-right:1px solid var(--linea); }
.lateral .marca { padding:0 4px 20px; }
.columnas { flex:1; min-width:0; display:flex; }
.principal { flex:1; min-width:0; overflow:auto; padding:34px 36px 44px; }
.ancho { margin:0 auto; }
.ancho-720 { max-width:720px; } .ancho-760 { max-width:760px; } .ancho-820 { max-width:820px; }

.nav-conversacion {
  display:flex; align-items:center; gap:10px; width:100%; margin-bottom:18px;
  padding:11px 12px; border:0; border-radius:12px; font-size:15px; font-weight:500;
  color:var(--tinta-2); background:transparent; text-align:left;
}
.nav-conversacion.activa { color:var(--tinta); background:var(--superficie); }
.pulso { margin-left:auto; display:flex; align-items:center; gap:5px;
         font-size:10px; letter-spacing:.09em; font-weight:700; color:var(--verde); }
.pulso i { width:6px; height:6px; border-radius:50%; background:currentColor;
           animation:ambarPulse 2.4s ease-in-out infinite; }
.pulso em { font-style:normal; }
.pulso.caido { color:var(--alarma); }
.pulso.caido i { animation:none; }

.tarjeta-hoy { display:flex; flex-direction:column; gap:11px; margin-bottom:22px;
               padding:12px 13px; border:1px solid var(--linea-2); border-radius:14px;
               background:var(--superficie); }
.vineta { display:flex; align-items:baseline; gap:8px; }
.vineta > i { width:7px; height:7px; flex:0 0 7px; margin-top:5px; border-radius:50%;
              background:var(--ambar); }
.vineta.bien > i { background:var(--verde); }
.vineta.mal  > i { background:var(--alarma); }
.vineta b { display:block; font-size:13.5px; font-weight:500; }
.vineta span { display:block; font-size:12.5px; color:var(--apagado); }
.tarjeta-hoy .vacio { padding:2px 0; border:0; background:none; font-size:13px; }

.lateral nav { display:flex; flex-direction:column; gap:2px; }
.lateral nav button { display:flex; align-items:center; gap:10px; min-height:0;
  padding:9px 12px; border:0; border-radius:10px; font-size:14.5px;
  color:var(--tinta-2); background:transparent; text-align:left; }
.lateral nav button.activa { color:var(--tinta); background:var(--superficie); }
.globo { margin-left:auto; padding:2px 7px; border-radius:20px; font-size:11px;
         font-weight:700; color:var(--acento); background:var(--acento-suave); }

/* Realtime: aparece cuando la pantalla se repintó sola. Pequeño y discreto;
   es un aviso, no un banner. */
.aviso-realtime { margin:10px 0 0; padding:8px 12px; border-radius:10px;
                  background:var(--acento-suave); color:var(--acento-oscuro);
                  font-size:12.5px; text-align:center; }

.quien-sos { display:flex; align-items:center; gap:10px; margin-top:auto;
             padding:10px 12px; border-top:1px solid var(--linea); }
.quien-sos .inicial { display:grid; place-items:center; width:28px; height:28px;
  flex:0 0 28px; border-radius:50%; background:#dccbb4; color:var(--tinta-2);
  font-size:12.5px; font-weight:700; }
.quien-sos-texto { min-width:0; font-size:13px; }
.quien-sos-texto b { display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.quien-sos-texto i { display:block; font-style:normal; color:var(--apagado); font-size:12px; }
.quien-sos button { margin-left:auto; min-height:0; padding:5px 9px; font-size:12.5px; }

.titulo-fila { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.elder-selector { min-width:170px; color:var(--apagado); font-size:13px; }

/* ── Inicio: la charla ────────────────────────────────────────────────── */
.charla { display:flex; flex-direction:column; gap:20px; }
.dicho-vos { align-self:flex-end; max-width:78%; padding:12px 16px; font-size:15px;
             background:#eae0ce; border-radius:18px 18px 4px 18px; }
.dicho-ambar { display:flex; gap:11px; align-items:flex-start; }
.dicho-ambar > .avatar { margin-top:2px; font-size:16px; }
.globo-ambar { max-width:88%; padding:16px 18px; background:var(--superficie);
               border:1px solid var(--linea-2); border-radius:4px 18px 18px 18px; }
.globo-ambar > p { margin:0; font-size:15.5px; }
.pensando { color:var(--tenue); animation:ambarPulse 1.4s ease-in-out infinite; }

/* Una prueba puntual: se lee como confirmaci\u00f3n, no como una charla ajena. */
.prueba-citada { margin:14px 0 0; padding:0 0 0 14px; border-left:3px solid #b9a58c; }
.prueba-citada p { margin:0; color:#5d5043; font-size:14px; line-height:1.55; }

.acciones-ambar { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.sugerencias { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.sugerencias button { min-height:0; padding:7px 13px; border-radius:20px;
                      font-size:13.5px; background:var(--superficie); }
.preguntar { display:flex; align-items:center; gap:12px; margin-top:14px;
             padding:10px 12px 10px 18px; background:var(--superficie);
             border:1px solid var(--linea-2); border-radius:16px; }
.preguntar input { min-height:34px; padding:0; border:0; background:none; font-size:15px; }
.preguntar input:focus { outline:none; }

/* ── Señales ──────────────────────────────────────────────────────────── */
.senales-resumen { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) 2fr;
                   gap:10px; margin:0 0 30px; padding:14px; border:1px solid var(--linea-2);
                   border-radius:16px; background:var(--lateral); }
.senales-resumen-item { display:flex; flex-direction:column; justify-content:center;
                        min-height:58px; padding:0 14px; border-right:1px solid var(--linea); }
.senales-resumen-item strong { font:400 30px/1 "Newsreader",serif; }
.senales-resumen-item span { margin-top:3px; color:var(--apagado); font-size:12.5px; }
.senales-resumen-item.en-curso strong { color:var(--naranja); }
.senales-resumen-item.resueltas strong { color:var(--verde); }
.senales-resumen > p { align-self:center; margin:0; padding:0 8px; color:var(--tinta-2); font-size:13.5px; }
.senal { margin-bottom:14px; padding:22px 24px; background:var(--superficie);
         border:1px solid var(--linea-2); border-radius:18px; }
.senal.abierta { border-color:#e6cdbe; }
.senal.techo { background:#fbf1ec; border-color:#dfb49f; }
.senal-titulo { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.senal-titulo > i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--verde); }
.senal.abierta .senal-titulo > i { background:var(--naranja); animation:ambarPulse 2.4s ease-in-out infinite; }
.senal.techo .senal-titulo > i { background:var(--alarma); }
.senal-titulo h3 { flex:1; margin:0; font:400 23px "Newsreader", serif; }
.senal.cerrada .senal-titulo h3 { font:500 16px "DM Sans", sans-serif; }
.senal.techo .senal-titulo h3 { color:var(--alarma-tinta); }
.estado { padding:4px 11px; border-radius:20px; font-size:12.5px; font-weight:500;
          color:#8b5a32; background:var(--acento-suave); white-space:nowrap; }
.senal-cuando { margin:0 0 20px; color:var(--apagado); font-size:14px; }
.senal.cerrada .senal-cuando { margin:0; font-size:13px; }

.linea-tiempo { display:flex; flex-direction:column; }
.hito { display:flex; gap:14px; }
.hito > time { width:52px; flex:0 0 52px; padding-top:1px; text-align:right;
               font-size:13.5px; color:var(--apagado); }
.hito-marca { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; }
.hito-marca i { width:9px; height:9px; margin-top:6px; border-radius:50%; background:var(--ambar); }
.hito-marca span { width:1px; flex:1; background:var(--linea); }
.hito > p { margin:0; padding-bottom:18px; font-size:15px; }
.hito:last-child > p { padding-bottom:0; }
.hito.futuro > time, .hito.futuro > p { color:var(--tenue); }
.hito.futuro .hito-marca i { background:var(--papel); border:1px solid #dccbb4; }
.hito.logro .hito-marca i { background:var(--verde); }

.senal-pie { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:22px;
             padding-top:18px; border-top:1px solid var(--linea-3); }
.senal-pie > p { flex:1; margin:0; font-size:13.5px; color:var(--apagado); }
.resumen-hitos { display:flex; flex-wrap:wrap; gap:6px 20px; margin:12px 0 0; font-size:14.5px; color:var(--tinta-2); }
.resumen-hitos b { font-weight:500; color:var(--apagado); }
.resumen-hitos .fin b { color:var(--verde); }

/* ── Tarjetas ─────────────────────────────────────────────────────────── */
.tarjeta { margin-top:14px; padding:20px 22px; background:var(--superficie);
           border:1px solid var(--linea-2); border-radius:18px; }
.tarjeta.suave { background:var(--lateral); border-color:var(--linea); }
.tarjeta > h2 { display:flex; align-items:baseline; margin:0 0 6px;
                font:500 16px "DM Sans", sans-serif; }
.tarjeta > h2 a, .tarjeta > h2 button { margin-left:auto; font-size:13.5px; }
.tarjeta > p { margin:0; color:var(--tinta-2); font-size:14.5px; }
.grilla-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.grilla-2 .tarjeta { margin-top:0; }
.filas { display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:var(--tinta-2); }
.filas > div { display:flex; gap:10px; align-items:baseline; }
.filas .clave { color:var(--tenue); }
.filas .hora { width:52px; flex:0 0 52px; font-size:13.5px; color:var(--tenue); }
.contacto-form { display:grid; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--linea-3); }
.contacto-form h3 { margin:0; font-size:15px; font-weight:500; }
.contacto-form label { display:grid; gap:6px; color:var(--tinta-2); font-size:14px; }
.contacto-fila { margin-top:14px; padding:14px; border:1px solid var(--linea); border-radius:12px; }
.contacto-fila.inactivo { background:var(--lateral); }
.contacto-campos { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.contacto-fila input { min-height:38px; }
.contacto-estado { margin:8px 0 0; color:var(--tinta-2); font-size:13px; }
.contacto-fila .acciones { margin-top:10px; }
.contacto-fila .feedback { margin:0; }
.agenda-fila { margin-top:14px; padding:14px; border:1px solid var(--linea); border-radius:12px; }
.agenda-fila.inactivo { background:var(--lateral); }
.agenda-tipo { margin:0 0 10px; font-weight:500; }
.agenda-campos { display:grid; grid-template-columns:140px 1fr; gap:8px; }
.agenda-fila input { min-height:38px; }
.agenda-fila .acciones { margin-top:10px; }

.perfil-encabezado { display:flex; gap:22px; align-items:center; margin-bottom:30px; }
.retrato { display:grid; place-items:center; width:104px; height:104px; flex:0 0 104px;
           border-radius:50%; background:#dccbb4; color:var(--tinta-2);
           font:400 40px "Newsreader", serif; }
.perfil-encabezado .bajada { margin:0; }

/* ── Configuración ────────────────────────────────────────────────────── */
.presets { display:flex; flex-direction:column; gap:12px; }
.preset { display:flex; gap:16px; align-items:flex-start; width:100%; min-height:0;
          padding:20px 22px; text-align:left; color:var(--tinta);
          background:var(--lateral); border:1px solid var(--linea); border-radius:18px; }
.preset:hover:not(:disabled) { background:var(--lateral); border-color:#c6b49a; }
.preset.activo { background:var(--superficie); border-color:var(--ambar); }
.preset .radio { width:20px; height:20px; flex:0 0 20px; margin-top:3px; border-radius:50%;
                 border:1px solid #c6b49a; box-shadow:inset 0 0 0 3px var(--superficie); }
.preset.activo .radio { background:var(--acento); }
.preset-cuerpo { flex:1; }
.preset-titulo { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:4px;
                 font:400 22px "Newsreader", serif; }
.insignia { padding:3px 9px; border-radius:20px; font:700 11px "DM Sans", sans-serif;
            letter-spacing:.06em; color:var(--acento); background:var(--acento-suave); }
.preset-detalle { margin-bottom:12px; color:var(--tinta-2); font-size:14.5px; }
.fichas { display:flex; flex-wrap:wrap; gap:6px; }
.ficha { padding:4px 10px; border-radius:20px; font-size:12.5px;
         color:var(--tinta-2); background:#efe7da; }

.opciones-canal, .acciones { display:flex; flex-wrap:wrap; gap:8px; }
.acciones { margin-top:16px; }
.opciones-canal button { min-height:38px; background:#efe7da; }
.opciones-canal button.elegido { color:var(--acento); border-color:var(--acento); background:#fff6ef; }
.orden-canal { display:grid; gap:8px; margin:16px 0; padding:0; list-style:none; }
.orden-canal li { display:flex; align-items:center; gap:9px; padding:9px 0;
                  border-top:1px solid var(--linea-2); }
.orden-canal li:first-child { border-top:0; }
.orden-canal .numero { display:grid; place-items:center; width:24px; height:24px;
  border-radius:50%; font-size:12px; font-weight:700;
  color:var(--acento); background:var(--acento-suave); }
.orden-canal button { min-height:30px; padding:4px 8px; font-size:13px; }
.orden-canal .sacar { margin-left:auto; }

.learning-list { display:grid; gap:14px; }
.learning-card { padding:18px; border:1px solid var(--linea-2); border-radius:14px; background:#fff; }
.learning-card.propuesto { border-color:#c98e72; }
.learning-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.learning-card h3 { margin:0; font:400 21px "Newsreader", serif; }
.learning-status { padding:4px 8px; border-radius:12px; font-size:11px; font-weight:700;
                   text-transform:uppercase; color:#7b4b32; background:var(--acento-suave); }
.learning-meta { margin:6px 0 12px; color:var(--apagado); font-size:13px; }
.learning-evidence { display:grid; gap:8px; }
.learning-evidence blockquote { margin:0; padding:10px 12px; color:#4b4037;
                                background:#fff8ee; border-left:3px solid #c98e72; }
.learning-evidence cite { display:block; margin-top:5px; color:var(--apagado);
                          font-size:12px; font-style:normal; }
.learning-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.learning-actions input { grid-column:1 / -1; }
.learning-correction { margin:12px 0 0; padding:10px 12px; color:#7b3924; background:#f8e9df; }

/* ── Conectar ─────────────────────────────────────────────────────────── */
.pastilla { padding:4px 11px; border-radius:20px; font-size:12.5px; font-weight:500;
            color:#3f6b37; background:#e7efe1; white-space:nowrap; }
.pastilla.gris { color:var(--apagado); background:#efe7da; }
.pastilla.roja { color:var(--alarma-tinta); background:var(--acento-suave); }
.pastilla.verde { color:#2d6a4f; background:#d8f3dc; }
.gente { display:flex; flex-direction:column; gap:12px; }
.gente > div { display:flex; align-items:center; gap:13px; padding-bottom:12px;
               border-bottom:1px solid var(--linea-3); }
.gente > div:last-child { padding-bottom:0; border-bottom:0; }
.gente .inicial { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px;
  border-radius:50%; background:#dccbb4; color:var(--tinta-2); font-size:14px; font-weight:700; }
.gente b { display:block; font-weight:500; font-size:14.5px; }
.gente span { display:block; color:var(--apagado); font-size:13.5px; }

/* ── Rail derecho ─────────────────────────────────────────────────────── */
.rail { width:326px; flex:0 0 326px; padding:34px 26px; overflow:auto;
        background:var(--lateral); border-left:1px solid var(--linea); }
.rail .tarjeta { margin-top:0; margin-bottom:14px; padding:15px 16px; border-radius:16px; }
.rail .tarjeta > h2 { font-size:15px; }
.rail .tarjeta > p { font-size:14px; }
.rail-pie { margin-top:22px; padding-top:20px; border-top:1px solid var(--linea); }
.rail-pie p { margin:0 0 14px; color:var(--tinta-2); font-size:14px; }

/* ── Angosto ──────────────────────────────────────────────────────────── */
@media (max-width:1100px) { .rail { display:none; } }
@media (max-width:820px) {
  .dashboard { flex-direction:column; }
  .lateral { width:auto; flex:none; padding:16px; border-right:0;
             border-bottom:1px solid var(--linea); }
  .lateral nav { flex-direction:row; flex-wrap:wrap; }
  .principal { padding:26px 20px 36px; }
  .titulo-fila { flex-direction:column; gap:12px; }
  .grilla-2 { grid-template-columns:1fr; }
  .senales-resumen { grid-template-columns:1fr 1fr; }
  .senales-resumen > p { grid-column:1 / -1; padding:8px 0 0; border-top:1px solid var(--linea); }
  .senales-resumen-item:nth-child(2) { border-right:0; }
  .learning-actions { grid-template-columns:1fr; }
  .serif-xl { font-size:32px; } .serif-l { font-size:30px; }
}