/* Marez · Asuntos. Sistema visual de la app:
   letra del sistema, una sola tinta con jerarquía por opacidad, gris #F4F4F6,
   tarjetas blancas con borde de 1 px y sin sombra, chips sin caja, azul #0F33C1.
   El rojo, el ámbar y el verde sólo dicen urgencia. */

:root {
  --fondo: #F4F4F6; --tarjeta: #fff; --tarjeta-2: #F9F9FB; --lado: #fff;
  --linea: #E9E9EC; --linea-2: #F0F0F3; --linea-h: #D5D5DA;
  --texto: #051733; --sutil: rgba(5, 23, 51, .62); --tenue: rgba(5, 23, 51, .45); --tenue-2: rgba(5, 23, 51, .32);
  --chipon: rgba(5, 23, 51, .07);
  --acento: #0F33C1; --acento-2: #3D5BE0; --acento-medio: #1958f4; --acento-suave: #E8EEFF; --acento-tx: #3D5BE0;
  --grad: linear-gradient(135deg, #1958f4, #0F33C1);
  --rojo: #D93B3A; --rojo-suave: rgba(226, 75, 74, .1); --ambar: #B97A16; --ambar-suave: rgba(226, 160, 63, .13); --verde: #0B8A60; --verde-suave: rgba(14, 159, 110, .11);
  --radio: 18px; --radio-r: 12px;
  --sombra: none; --sombra-menu: 0 14px 40px rgba(16, 26, 48, .18); --sombra-ventana: 0 18px 50px rgba(15, 23, 66, .25);
  --f: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;

  /* Colores de cada abogado y materia (sólo en puntos y avatares). */
  --gray-solido: #8A8F99; --brown-solido: #A5764B; --orange-solido: #E07B39; --yellow-solido: #D9A520;
  --green-solido: #0E9F6E; --blue-solido: #1958f4; --purple-solido: #7A5AF0; --pink-solido: #D6487E; --red-solido: #E24B4A;
  --gray-bg: var(--chipon); --brown-bg: rgba(165, 118, 75, .13); --orange-bg: rgba(224, 123, 57, .13); --yellow-bg: rgba(217, 165, 32, .15);
  --green-bg: rgba(14, 159, 110, .11); --blue-bg: #E8EEFF; --purple-bg: rgba(122, 90, 240, .11); --pink-bg: rgba(214, 72, 126, .11); --red-bg: rgba(226, 75, 74, .1);
  --gray-tx: var(--sutil); --brown-tx: #7E5530; --orange-tx: #A9531A; --yellow-tx: #8A6400; --green-tx: #0B7A55;
  --blue-tx: #0F33C1; --purple-tx: #5A3DC4; --pink-tx: #A8335F; --red-tx: #C93837;
}
:root[data-tema="oscuro"] {
  --fondo: #000; --tarjeta: #000; --tarjeta-2: #0A0A0A; --lado: #0A0A0A;
  --linea: #1B1B1B; --linea-2: #141414; --linea-h: #333;
  --texto: #fff; --sutil: rgba(255, 255, 255, .6); --tenue: rgba(255, 255, 255, .4); --tenue-2: rgba(255, 255, 255, .3);
  --chipon: rgba(255, 255, 255, .09);
  --acento: #4D79FF; --acento-2: #6b8dff; --acento-suave: #131C3A; --acento-tx: #8FA9FF;
  --rojo: #FF6B6A; --rojo-suave: rgba(255, 107, 106, .14); --ambar: #E2A03F; --ambar-suave: rgba(226, 160, 63, .16); --verde: #34D39E; --verde-suave: rgba(52, 211, 158, .13);
  --sombra-menu: 0 14px 40px rgba(0, 0, 0, .6); --sombra-ventana: 0 18px 50px rgba(0, 0, 0, .7);
  --blue-bg: #131C3A; --gray-tx: var(--sutil); --brown-tx: #D9A87C; --orange-tx: #F0A065; --yellow-tx: #E8C45A; --green-tx: #34D39E;
  --blue-tx: #8FA9FF; --purple-tx: #B8A3FF; --pink-tx: #F08DB4; --red-tx: #FF8A89;
  color-scheme: dark;
}

/* ─── base ─── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }
.oculto { display: none !important; }
.sutil { color: var(--sutil); }
.error { color: var(--rojo); font-size: 15px; font-weight: 600; }
.mono { font-family: var(--f-mono); font-size: 12px; color: var(--tenue); }
.texto-rojo { color: var(--rojo) !important; }
.cargando { padding: 60px 0; text-align: center; color: var(--tenue); }
h1 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
/* El rótulo de sección: 11 px, versalitas, tinta tenue. */
.saludo-fecha, .nav-titulo, .br-grupo, .tabla th, .subgrupo-cabeza, .carga-cabeza, .mesa-cabeza {
  font-size: 12px; font-weight: 650; color: var(--tenue);
}

input, select, textarea {
  width: 100%; padding: 10px 13px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 15px;
  border: 1.5px solid var(--linea); border-radius: 12px; transition: border-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--tenue-2); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento-2); }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; accent-color: var(--acento); }
input[type="file"] { padding: 7px; font-size: 13px; color: var(--tenue); cursor: pointer; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 12px; background: none; color: var(--sutil); font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 899px) { input, select, textarea { font-size: 16px; } }

/* Botones: contorno que se vuelve azul; el principal, degradado azul. */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--linea); background: none; color: var(--sutil); transition: border-color .15s, color .15s; }
.boton:hover { border-color: var(--acento-2); color: var(--acento-2); }
.boton svg { width: 14px; height: 14px; stroke-width: 1.9; }
.boton.azul { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; padding: 8px 16px; }
.boton.azul:hover { color: #fff; filter: brightness(1.08); }
.enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--acento-tx); cursor: pointer; }
.enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.enlace.peligro { color: var(--tenue); }
.enlace.peligro:hover { color: var(--rojo); }
.mini-boton { border: 1px solid var(--linea); background: none; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--tenue); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.mini-boton:hover { border-color: var(--acento-2); color: var(--acento-2); }
.mini-boton.verde { border-color: transparent; background: var(--grad); color: #fff; }
.mini-boton.verde:hover { color: #fff; filter: brightness(1.08); }

/* ─── acceso ─── */
.acceso { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--fondo); }
.acceso-caja { width: 100%; max-width: 380px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px 28px 24px; }
.acceso-logo { display: none; }
.marca { font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--acento-2); }
#acceso .sutil:first-of-type { margin-top: 4px; font-size: 13px; color: var(--tenue); }
#form-acceso { display: grid; gap: 10px; margin-top: 24px; }
#form-acceso .boton { padding: 11px; margin-top: 4px; font-size: 15px; border-radius: 999px; background: var(--texto); color: var(--fondo); }
.pie-acceso { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--tenue) !important; }

/* ─── estructura ─── */
#app { display: flex; min-height: 100vh; }
.lateral { display: none; }
.contenido { flex: 1; min-width: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(84px + var(--seguro-abajo)); outline: none; }
.ancho { max-width: 1160px; margin: 0 auto; }
.angosto { max-width: 960px; margin: 0 auto; }

/* Barra de abajo en el teléfono. */
.barra-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: center; padding: 9px 10px calc(9px + var(--seguro-abajo)); background: var(--lado); border-top: 1px solid var(--linea); }
.barra-abajo a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; font-size: 11px; font-weight: 600; color: var(--tenue); }
.barra-abajo a svg { width: 20px; height: 20px; stroke-width: 1.8; }
.barra-abajo a.activo { color: var(--texto); }

/* Barra lateral. */
@media (min-width: 900px) {
  .barra-abajo { display: none; }
  .contenido { padding: 24px 28px 60px; }
  .lateral { display: flex; flex-direction: column; gap: 4px; width: 230px; flex: 0 0 230px; background: var(--lado); border-right: 1px solid var(--linea); position: sticky; top: 0; height: 100vh; padding: 22px 16px; overflow-y: auto; scrollbar-width: none; }
  .lateral-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 0 12px; }
  
  .lateral-marca b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--acento-2); line-height: 1.1; }
  .lateral-marca small { display: block; font-size: 12px; color: var(--tenue); margin-top: 3px; }
  .lateral-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .nav-titulo { padding: 16px 12px 6px; }
  .nav-item { display: flex; align-items: center; gap: 11px; font-size: 15px; padding: 9px 12px; border-radius: 12px; color: var(--sutil); }
  .nav-item svg { width: 18px; height: 18px; stroke-width: 1.8; opacity: .8; }
  .nav-item .av { width: 20px; height: 20px; font-size: 8.5px; }
  .nav-item:hover { color: var(--texto); }
  .nav-item.activo { background: var(--chipon); color: var(--texto); font-weight: 500; }
  .nav-item .cuenta { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--tenue-2); }
  .nav-sub { padding-left: 16px; font-size: 13px; }
  
  .lateral-pie { display: flex; align-items: center; gap: 9px; padding: 12px 4px 0; margin-top: 12px; border-top: 1px solid var(--linea); }
  .lateral-pie .quien { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--sutil); }
  .lateral-pie .quien b { display: block; color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lateral-pie .quien span { display: block; color: var(--tenue); font-size: 12px; }
  .lateral-pie .enlace { color: var(--tenue); font-size: 13px; font-weight: 500; }
}
.busca-lateral { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--linea); background: none; color: var(--tenue); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.busca-lateral:hover { border-color: var(--linea-h); color: var(--sutil); }
.busca-lateral svg { width: 15px; height: 15px; }
.busca-lateral kbd, .buscador-caja kbd { margin-left: auto; font: inherit; font-size: 12px; color: var(--tenue-2); }
/* "Nuevo": la pastilla de tinta. */
.boton-nuevo { width: 100%; margin: 0 0 12px; padding: 11px 0; border-radius: 999px; border: 0; background: var(--texto); color: var(--fondo); font-size: 15px; font-weight: 600; }
.boton-nuevo:hover { color: var(--fondo); opacity: .9; }
.boton-nuevo svg { width: 15px; height: 15px; }

/* ─── encabezados de página ─── */
.pagina-cabeza { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 18px; }
.pagina-cabeza > div { min-width: 0; }
.pagina-cabeza .sutil { font-size: 13px; margin-top: 5px; color: var(--sutil); }
.pagina-cabeza .sutil b { color: var(--texto); }
.saludo-fecha { margin-bottom: 6px; }
.saludo-fecha a:hover { color: var(--texto); }
.migas { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: var(--tenue); margin-bottom: 14px; flex-wrap: wrap; }
.migas a:hover { color: var(--texto); }
.icono-pagina { display: none; }
.pagina-cabeza > .avatar-grande:has(svg) { display: none; }
.pagina-cabeza > .av { width: 44px !important; height: 44px !important; font-size: 15px !important; margin-top: 2px; }

.acciones-pagina { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }

@media (max-width: 760px) {
  h1 { font-size: 22px; }
  
  
  
  
  
  
}

/* ─── hojas ─── */
.panel, .panel-cuerpo { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.panel { padding: 4px 20px; margin: 14px 0; }
.panel-cuerpo { padding: 8px 20px 16px; margin-top: 14px; }
.panel-cuerpo:has(.lista-terminos) { background: none; border: 0; padding: 0; }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 20px 10px; }
.tarjeta-cabeza h2, .tarjeta-cabeza h3 { font-size: 15px; font-weight: 700; margin: 0; }

/* ─── cifras ─── */
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
@media (min-width: 900px) { .contadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } .contadores:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contador { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 14px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); transition: border-color .15s; }
a.contador:hover { border-color: var(--linea-h); }
.contador .ico { display: none; }
.contador b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.contador span { font-size: 13px; color: var(--tenue); }
.contador.rojo b { color: var(--rojo); } .contador.ambar b { color: var(--ambar); }
@media (max-width: 760px) { .contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .contadores:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contador { padding: 12px 12px; } .contador b { font-size: 22px; } .contador span { font-size: 12px; } }

/* ─── la semana ─── */
.semana-tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 16px; }
.semana-tarjeta .tarjeta-cabeza .sutil { font-size: 13px; color: var(--tenue); }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 12px 14px; }
.dia { padding: 8px 2px 9px; text-align: center; display: grid; gap: 3px; border-radius: 12px; }
.dia .dsem { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.dia .dnum { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dia .dcuenta { font-size: 11px; color: var(--tenue); }
.dia .dcuenta em { font-style: normal; }
.dia.rojo .dnum, .dia.rojo .dcuenta { color: var(--rojo); }
.dia.ambar .dnum, .dia.ambar .dcuenta { color: var(--ambar); }
.dia.hoy { background: var(--chipon); }
.dia.hoy .dsem { color: var(--texto); }
.dia.finde .dnum { color: var(--tenue-2); }
.dia.con { cursor: pointer; }
.dia.con:hover { background: var(--chipon); }
.puntos { display: flex; justify-content: center; gap: 3px; min-height: 6px; flex-wrap: wrap; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; }
@media (max-width: 760px) { .semana { padding: 0 6px 10px; gap: 2px; } .dia .dnum { font-size: 17px; } .dia .dsem { font-size: 11px; } .dia .dcuenta em { display: none; } .puntos i { width: 5px; height: 5px; } }

/* ─── chips (pestañas y filtros): sin caja si no están activos ─── */
.pestanas { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0 0 14px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 6px 13px; border-radius: 999px; color: var(--tenue); }
.pestanas a:hover { color: var(--texto); }
.pestanas a svg { width: 15px; height: 15px; stroke-width: 1.8; }
.pestanas a.activo { color: var(--texto); background: var(--chipon); }
.pestanas a b { font-size: 11px; font-weight: 600; color: var(--tenue-2); }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; align-items: center; }
.filtro { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--tenue); cursor: pointer; }
.filtro:hover { color: var(--texto); }
.filtro.activo { color: var(--texto); background: var(--chipon); border-color: transparent; }
@media (max-width: 760px) { .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; } .filtro { flex: none; } .pestanas { margin-inline: -14px; padding-inline: 14px; } }
.buscar { max-width: 420px; margin: 0 0 14px; padding-left: 36px; background: var(--tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%2393989f' stroke-width='1.9' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; }
.vistas, .conmutador { display: inline-flex; gap: 4px; margin: 0 0 14px; }
.vistas button, .conmutador button { border: 0; background: none; font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; color: var(--tenue); cursor: pointer; }
.vistas button.activo, .conmutador button.activo { background: var(--chipon); color: var(--texto); }

/* ─── etiquetas: un punto de color y texto; nada de pastillas de colores ─── */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--sutil); }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--gray-solido); }
.tag.c-brown::before { background: var(--brown-solido); } .tag.c-orange::before { background: var(--orange-solido); } .tag.c-yellow::before { background: var(--yellow-solido); }
.tag.c-green::before { background: var(--green-solido); } .tag.c-blue::before { background: var(--blue-solido); } .tag.c-purple::before { background: var(--purple-solido); }
.tag.c-pink::before { background: var(--pink-solido); } .tag.c-red::before { background: var(--red-solido); }
.tag.contorno::before { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.chip-num { font-family: var(--f-mono); font-size: 12px; color: var(--tenue); white-space: nowrap; }
/* Ficha de metadatos, como .g-fc. */
.g-fc { display: inline-flex; align-items: baseline; gap: 7px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.g-fc .k { color: var(--tenue); font-size: 12px; font-weight: 700; }

/* Lo que falta: texto con su color; lo vencido, en recuadro rojo suave. */
.pill { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tenue); }
.pill.rojo { color: var(--rojo); }
.pill.negro { color: var(--rojo); background: var(--rojo-suave); padding: 2px 9px; border-radius: 999px; }
.pill.ambar { color: var(--ambar); }
.pill.verde { color: var(--verde); }
.pill.gris { color: var(--tenue-2); font-weight: 500; }

.av { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
.persona { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sutil); white-space: nowrap; }
.persona .av { width: 22px; height: 22px; font-size: 8.5px; }
.s-gray { background: var(--gray-solido); } .s-brown { background: var(--brown-solido); } .s-orange { background: var(--orange-solido); }
.s-yellow { background: var(--yellow-solido); } .s-green { background: var(--green-solido); } .s-blue { background: var(--blue-solido); }
.s-purple { background: var(--purple-solido); } .s-pink { background: var(--pink-solido); } .s-red { background: var(--red-solido); }
.av-gray { background: var(--gray-bg); color: var(--gray-tx); } .av-brown { background: var(--brown-bg); color: var(--brown-tx); } .av-orange { background: var(--orange-bg); color: var(--orange-tx); }
.av-yellow { background: var(--yellow-bg); color: var(--yellow-tx); } .av-green { background: var(--green-bg); color: var(--green-tx); } .av-blue { background: var(--blue-bg); color: var(--blue-tx); }
.av-purple { background: var(--purple-bg); color: var(--purple-tx); } .av-pink { background: var(--pink-bg); color: var(--pink-tx); } .av-red { background: var(--red-bg); color: var(--red-tx); }
.avatar, .avatar-grande { display: grid; place-items: center; flex: none; font-weight: 700; border-radius: 50%; }
.avatar { width: 38px; height: 38px; font-size: 13px; }
.avatar-grande { width: 48px; height: 48px; font-size: 15px; }
.avatar-grande svg { width: 22px; height: 22px; }

/* ─── términos: renglones sueltos, como .g-ai ─── */
.lista-terminos { display: grid; gap: 22px; }
.tarjeta-grupo { display: grid; gap: 8px; }
.grupo-titulo { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 15px; font-weight: 650; color: var(--texto); }
.grupo-titulo .marca-g { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue-2); }
.grupo-titulo b { font-weight: 600; letter-spacing: 0; color: var(--tenue-2); }
.tarjeta-grupo.rojo .grupo-titulo { color: var(--rojo); } .tarjeta-grupo.rojo .marca-g { background: var(--rojo); }
.tarjeta-grupo.ambar .grupo-titulo { color: var(--ambar); } .tarjeta-grupo.ambar .marca-g { background: var(--ambar); }
.tarjeta-grupo.verde .marca-g { background: var(--verde); }
.tarjeta-grupo[class*="m-"] .marca-g { background: var(--color-materia); }
.item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 84px; gap: 14px; align-items: center; padding: 13px 18px 13px 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); cursor: pointer; transition: border-color .15s; }
.item:hover { border-color: var(--acento-2); }
.item.sin-clic { cursor: default; }
.item.sin-clic:hover { border-color: var(--linea); }
.item-cuerpo { min-width: 0; }
.item-resp { overflow: hidden; }

.item-titulo { font-size: 15px; font-weight: 600; line-height: 1.3; }
.item-linea { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13px; color: var(--tenue); min-width: 0; }
.item-linea .punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.item-linea span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; }

.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 12px; }

/* La fecha: el día en grande y el mes abajo, del color de su urgencia. */
.hoja { width: 44px; text-align: center; line-height: 1; }
.hoja b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hoja span { display: block; font-size: 12px; font-weight: 700; color: var(--tenue); margin-top: 3px; }
.hoja.rojo, .hoja.rojo span, .hoja.negro, .hoja.negro span { color: var(--rojo); }
.hoja.ambar, .hoja.ambar span { color: var(--ambar); }
.hoja.gris b { color: var(--tenue-2); font-size: 17px; }

.meta-tipo { font-size: 12px; font-weight: 600; color: var(--tenue); }
.meta-tipo.c-yellow { color: var(--ambar); } .meta-tipo.c-blue { color: var(--blue-tx); } .meta-tipo.c-green { color: var(--verde); }
.meta-compromiso { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tenue); }
.meta-compromiso svg { width: 13px; height: 13px; stroke-width: 1.8; }
.meta-compromiso.tarde { color: var(--rojo); font-weight: 600; }
/* El avance: ficha con su punto. */
.meta-avance { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea); background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--sutil); cursor: pointer; white-space: nowrap; }
.meta-avance::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-solido); }
button.meta-avance:hover { border-color: var(--acento-2); }
.meta-avance.av-blue::before { background: var(--blue-solido); } .meta-avance.av-purple::before { background: var(--purple-solido); }
.meta-avance.av-orange::before { background: var(--orange-solido); } .meta-avance.av-green::before { background: var(--green-solido); }
.meta-acciones { display: inline-flex; gap: 6px; margin-left: auto; }

@media (hover: hover) and (min-width: 900px) {
  .meta-acciones { opacity: 0; transition: opacity .15s; }
  .item:hover .meta-acciones, .meta-acciones:focus-within { opacity: 1; }
}
@media (max-width: 760px) {
  .item { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "hoja tit dias" "hoja lin lin" "hoja meta meta" "hoja resp resp"; gap: 3px 12px; padding: 12px 14px 12px 10px; align-items: start; }
  .item > .hoja { grid-area: hoja; width: 40px; } .item > .hoja b { font-size: 17px; }
  .item-cuerpo { display: contents; }
  .item .item-titulo { grid-area: tit; font-size: 15px; }
  .item .item-linea, .item .item-chips { grid-area: lin; }
  .item .item-meta { grid-area: meta; margin-top: 6px; }
  .item .item-resp { grid-area: resp; margin-top: 4px; }
  
  .meta-acciones { margin-left: 0; }
}

/* ─── galerías (asuntos y clientes): la tarjeta .gcd ─── */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; margin-top: 4px; }
.ficha { position: relative; display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: border-color .15s; }
.ficha:hover { border-color: var(--linea-h); }
.ficha-banda { display: none; }
.ficha-cuerpo { padding: 16px 20px 14px; display: grid; gap: 8px; flex: 1; align-content: start; }
.ficha-arriba { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ficha-cliente { font-size: 12px; font-weight: 650; color: var(--tenue); }
.ficha-titulo { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ficha-cabeza { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ficha-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--linea-2); font-size: 13px; color: var(--tenue); }

 

.banda-gray, .banda-brown, .banda-orange, .banda-yellow, .banda-green, .banda-blue, .banda-purple, .banda-pink, .banda-red { display: none; }

/* ─── abogados ─── */
.abogados { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.abogado { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; display: grid; gap: 12px; transition: border-color .15s; }
.abogado:hover { border-color: var(--linea-h); }
.abogado-cabeza { display: flex; align-items: center; gap: 12px; }
.abogado-cabeza .av { width: 36px; height: 36px; font-size: 12px; }
.abogado-cabeza b { display: block; font-size: 15px; font-weight: 600; }
.abogado-cabeza span { font-size: 12px; color: var(--tenue); }
.abogado-cabeza .total { margin-left: auto; text-align: right; }
.abogado-cabeza .total b { font-size: 22px; font-weight: 700; }
.carga { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--chipon); gap: 2px; }
.carga i { display: block; height: 100%; }
.carga .r { background: var(--rojo); } .carga .a { background: #E2A03F; } .carga .v { background: var(--verde); } .carga .g { background: var(--tenue-2); }
.carga-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tenue); }
.carga-leyenda span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.carga-leyenda .r::before { background: var(--rojo); } .carga-leyenda .a::before { background: #E2A03F; } .carga-leyenda .v::before { background: var(--verde); }
.abogado .siguiente { font-size: 13px; color: var(--tenue); padding-top: 11px; border-top: 1px solid var(--linea-2); }
.abogado .siguiente b { color: var(--texto); font-weight: 600; }

/* ─── tablas ─── */
.tabla-tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-top: 4px; }
.tabla-caja { overflow-x: auto; }
table.tabla { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabla th { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.fila { cursor: pointer; }
.tabla tr.fila:hover td { background: var(--tarjeta-2); }
.tabla td.titulo { font-weight: 600; min-width: 240px; }
.tabla td.c-asunto { color: var(--tenue); }
.tabla .grupo-fila td { padding: 14px 16px 8px; background: var(--tarjeta-2); }
@media (max-width: 760px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--linea-2); }
  .tabla tr.fila td { border: 0; padding: 0; min-width: 0; background: none !important; }
  .tabla td.titulo { grid-column: 1; }
  .tabla td.c-sem { grid-column: 2; grid-row: 1; text-align: right; }
  .tabla td.c-asunto { grid-column: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabla td.c-resp { grid-column: 2; grid-row: 2; text-align: right; }
  .tabla td.ancho-solo { display: none; }
}

/* ─── ficha del asunto ─── */
.props { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 14px; margin: 0; font-size: 15px; }
.props dt { color: var(--tenue); padding: 11px 0; border-bottom: 1px solid var(--linea-2); font-size: 13px; }
.props dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--linea-2); min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-weight: 500; word-break: break-word; }
.props dt:last-of-type, .props dd:last-of-type { border-bottom: 0; }
.props dd.vacio { color: var(--tenue-2); font-weight: 400; }
.props dd a { color: var(--acento-tx); }
@media (max-width: 560px) { .props { grid-template-columns: 110px minmax(0, 1fr); } }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radio-r); margin: 12px 0; font-size: 15px; background: var(--tarjeta); border: 1px solid var(--linea); line-height: 1.5; }
.callout .ico { display: grid; place-items: center; flex: none; color: var(--acento-2); margin-top: 1px; }
.callout .ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
.callout.rojo { background: var(--rojo-suave); border-color: transparent; } .callout.rojo .ico { color: var(--rojo); }
.callout.azul { background: var(--acento-suave); border-color: transparent; }
.callout.c-yellow { background: var(--ambar-suave); border-color: transparent; } .callout.c-yellow .ico { color: var(--ambar); }
.callout.c-green { background: var(--verde-suave); border-color: transparent; } .callout.c-green .ico { color: var(--verde); }
.callout a { font-weight: 600; color: var(--acento-tx); }
.etapa { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linea-2); flex-wrap: wrap; }
.etapa:last-of-type { border-bottom: 0; }
.etapa.concluida { opacity: .5; }

.bloque { padding: 14px 0; border-bottom: 1px solid var(--linea-2); }
.bloque:last-child { border-bottom: 0; }

.formulario { display: grid; gap: 10px; margin: 12px 0; }
.formulario .fila { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.fuente-rubro { color: var(--sutil); font-size: 13px; margin-top: 2px; }
details > summary { list-style: none; cursor: pointer; display: inline-flex; }
details > summary::-webkit-details-marker { display: none; }
.vacio-txt { color: var(--tenue); padding: 24px 0; text-align: center; font-size: 15px; }

/* ─── calendario ─── */
.cal-cabeza { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.cal-cabeza b { font-size: 17px !important; font-weight: 700; min-width: 160px; text-transform: capitalize; }
.cal-cabeza .boton { padding: 5px 11px; }
.cal-cabeza .conmutador { margin: 0; }
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .55fr) minmax(0, .55fr); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.cal-dsem { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); padding: 8px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cal-dsem.inhabil { color: var(--tenue-2); }
.cal-dia { min-height: 110px; background: var(--tarjeta); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 6px; font-size: 12px; min-width: 0; }
.cal-dia.fuera > * { opacity: .35; }
.cal-num { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 5px; font-weight: 600; color: var(--sutil); }
.cal-num em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue-2); }
.cal-dia.hoy .cal-num span { background: var(--acento); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-dia.inhabil { background: var(--tarjeta-2); }
.cal-dia.con { cursor: pointer; }
.cal-dia.con:hover { background: var(--tarjeta-2); }
.cal-ev { display: grid; gap: 1px; padding: 5px 7px; margin-bottom: 4px; border-radius: 12px; background: var(--chipon); min-width: 0; }
.cal-ev.rojo, .cal-ev.negro { background: var(--rojo-suave); } .cal-ev.ambar { background: var(--ambar-suave); }
.cal-ev b { font-size: 12px; font-weight: 650; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.rojo b, .cal-ev.negro b { color: var(--rojo); } .cal-ev.ambar b { color: var(--ambar); }
.cal-ev span { font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-ev small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tenue); margin-top: 2px; }
.cal-ev small .av { width: 15px; height: 15px; font-size: 7px; }
.punto-av { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; }
.cal-mas { font-size: 12px; font-weight: 600; color: var(--acento-tx); padding: 2px 4px; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--tenue); }
.cal-leyenda i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
@media (max-width: 760px) { .cal-dia { min-height: 58px; padding: 3px; } .cal-num em { display: none; } .cal-ev { padding: 2px 4px; border-radius: 8px; } .cal-ev span, .cal-ev small { display: none; } .cal-ev b { font-size: 11px; letter-spacing: 0; } }

/* ─── buscador ─── */
.buscador { position: fixed; inset: 0; z-index: 100; display: grid; align-items: start; justify-items: center; padding: 11vh 16px 16px; background: rgba(244, 244, 246, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[data-tema="oscuro"] .buscador, [data-tema="oscuro"] .modal { background: rgba(0, 0, 0, .55); }
.buscador-caja { width: 100%; max-width: 640px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-ventana); overflow: hidden; }
.buscador-campo { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.buscador-campo svg { width: 20px; height: 20px; color: var(--tenue); }
.buscador-campo input { border: 0; padding: 2px 0; font-size: 22px; background: none; }
.buscador-campo input::placeholder { color: var(--tenue-2); }
.buscador-resultados { max-height: 60vh; overflow-y: auto; padding: 4px 8px 10px; }
.br-grupo { padding: 14px 12px 6px; }
.br-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; }
.br-item.activo, .br-item:hover { background: var(--chipon); }
.br-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; }
.br-ico svg { width: 15px; height: 15px; }
.br-texto { min-width: 0; flex: 1; }
.br-texto b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-texto span { display: block; font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-vacio { padding: 26px 10px; text-align: center; color: var(--tenue); }
.br-ayuda { display: flex; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--tenue-2); }
@media (max-width: 760px) { .buscador { padding: 12px; } .buscador-resultados { max-height: 70vh; } .buscador-caja kbd { display: none; } .buscador-campo input { font-size: 17px; } }

/* ─── materias ─── */
.materias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.materia { position: relative; display: grid; gap: 2px; padding: 14px 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); transition: border-color .15s; }
.materia:hover { border-color: var(--linea-h); }
.materia.activo { border-color: var(--acento-2); }
.materia-ico { display: none !important; }
.materia b { font-size: 22px; font-weight: 700; line-height: 1.1; }
.materia span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--sutil); }
.materia span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-materia); flex: none; }
.materia small { font-size: 12px; color: var(--tenue); }
.materia small.urge { color: var(--rojo); }
.m-green { --color-materia: var(--green-solido); } .m-blue { --color-materia: var(--blue-solido); } .m-orange { --color-materia: var(--orange-solido); }
.m-purple { --color-materia: var(--purple-solido); } .m-pink { --color-materia: var(--pink-solido); } .m-brown { --color-materia: var(--brown-solido); }
.seccion-materia { margin-top: 28px; }
.seccion-materia:first-child { margin-top: 8px; }
.seccion-cabeza { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; }
.seccion-cabeza::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-materia); flex: none; }
.seccion-cabeza h2 { font-size: 17px; }
.seccion-cabeza .sutil { color: var(--tenue) !important; }
.seccion-cabeza .cuenta { margin-left: auto; font-size: 12px; color: var(--tenue); background: none !important; }
@media (max-width: 760px) { .materias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .seccion-cabeza .sutil { display: none; } }

.subgrupo { margin-top: 20px; }
.subgrupo-cabeza { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.subgrupo-cabeza .num { color: var(--tenue-2); }
.subgrupo .galeria { margin-top: 10px; }

/* ─── ventanas: ligeras, sobre el fondo desenfocado (nada de pantalla oscura) ─── */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; align-items: start; justify-items: center; padding: 7vh 16px 16px; background: rgba(244, 244, 246, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; animation: aparece .16s ease; }
@keyframes aparece { from { opacity: 0; } }
.modal-caja { width: 100%; max-width: 700px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-ventana); }
.modal-caja.ancha { max-width: 1020px; }
.modal-cabeza { display: flex; align-items: center; gap: 12px; padding: 18px 22px 8px; }
.modal-cabeza h2 { flex: 1; font-size: 17px; }
.modal-cerrar { border: 0; background: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; color: var(--tenue); font-size: 22px; line-height: 1; }
.modal-cerrar:hover { color: var(--texto); background: var(--chipon); }
.modal-cuerpo { padding: 8px 22px 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.modal-pie { display: flex; align-items: center; gap: 8px; padding: 14px 22px 20px; }
.modal-pie .izq { margin-right: auto; }
.campo { display: grid; gap: 6px; grid-column: span 2; }
.campo.medio { grid-column: span 1; }
.campo > label { font-size: 12px; font-weight: 700; color: var(--tenue); }
.campo .ayuda { font-size: 12px; color: var(--tenue); }
.campo.check { display: flex; align-items: center; gap: 8px; }
.campo.check input { width: auto; }
.campo.check label { font-size: 13px; color: var(--texto); font-weight: 500; text-transform: none; letter-spacing: 0; }
.modal-error { grid-column: span 2; color: var(--rojo); font-weight: 600; font-size: 13px; }
.ventana-cuerpo { padding: 6px 22px 22px; }
.ventana-cuerpo .lista-terminos { margin-top: 8px; }
@media (max-width: 760px) {
  .modal { padding: 0; align-items: end; }
  .modal-caja { border-radius: 18px 18px 0 0; max-height: 94vh; overflow-y: auto; }
  .modal-cuerpo { grid-template-columns: 1fr; } .campo, .campo.medio { grid-column: span 1; }
}
.avance-actual { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.avance-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
.avance-op { border: 1px solid var(--linea); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: none !important; color: var(--sutil) !important; display: inline-flex; align-items: center; gap: 7px; }
.avance-op::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-solido); }
.avance-op.av-blue::before { background: var(--blue-solido); } .avance-op.av-purple::before { background: var(--purple-solido); }
.avance-op.av-orange::before { background: var(--orange-solido); } .avance-op.av-green::before { background: var(--green-solido); }
.avance-op:hover { border-color: var(--acento-2); }
.avance-op.activo { border-color: var(--texto); color: var(--texto) !important; background: var(--chipon) !important; }
.historia { display: grid; gap: 2px; }
.historia-paso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea-2); font-size: 13px; }
.historia-paso:last-child { border-bottom: 0; }

/* Menú de crear, como el menú anclado de "+ Guardar". */
.menu-nuevo { display: grid; gap: 2px; }
.menu-nuevo button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--sutil); font: inherit; cursor: pointer; }
.menu-nuevo button:hover { background: var(--chipon); color: var(--texto); }
.menu-nuevo button span { width: 20px; height: 20px; display: grid; place-items: center; background: none !important; color: inherit !important; }
.menu-nuevo button span svg { width: 18px; height: 18px; stroke-width: 1.8; }
.menu-nuevo b { font-size: 15px; font-weight: 600; color: var(--texto); }
.menu-nuevo small { margin-left: auto; color: var(--tenue); font-size: 12px; }

/* ─── editor Markdown y texto con formato ─── */
.editor { border: 1.5px solid var(--linea); border-radius: var(--radio-r); overflow: hidden; background: var(--tarjeta); }
.editor:focus-within { border-color: var(--acento-2); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--linea); }
.editor-barra button { border: 0; background: none; min-width: 30px; height: 28px; padding: 0 8px; border-radius: 8px; font: inherit; font-weight: 700; font-size: 13px; color: var(--tenue); cursor: pointer; }
.editor-barra button:hover { background: var(--chipon); color: var(--texto); }
.editor-barra .sep { width: 1px; background: var(--linea); margin: 4px; }
.editor-barra .modo { margin-left: auto; display: none; }

@media (max-width: 760px) {  .editor-barra .modo { display: inline-flex; } .editor[data-modo="ver"] textarea { display: none; }  }
.md { font-size: 15px; line-height: 1.65; word-break: break-word; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { margin: 14px 0 6px; font-weight: 800; } .md h1 { font-size: 17px; } .md h2 { font-size: 15px; } .md h3 { font-size: 15px; }
.md h2, .md h3 { padding-left: 9px; border-left: 3px solid var(--acento-medio); line-height: 1.3; }
.md p { margin: 0 0 9px; } .md ul, .md ol { margin: 0 0 9px; padding-left: 20px; } .md li { margin: 2px 0; }
.md blockquote { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--acento-2); background: var(--acento-suave); border-radius: 0 12px 12px 0; }
.md a { color: var(--acento-tx); font-weight: 600; }
.md code { font-family: var(--f-mono); font-size: 13px; background: var(--chipon); padding: 1px 5px; border-radius: 5px; }
.md hr { border: 0; border-top: 1px solid var(--linea); margin: 14px 0; }
.md table { border-collapse: collapse; margin: 0 0 10px; } .md th, .md td { border: 1px solid var(--linea); padding: 5px 9px; }
.md li:has(> input[type="checkbox"]), .md li:has(> p > input[type="checkbox"]) { list-style: none; margin-left: -1.15em; }
.md li > input[type="checkbox"], .md li > p > input[type="checkbox"] { margin: 0 7px 0 0; vertical-align: -2px; }

/* ─── notas, criterios y biblioteca ─── */
.notas-lista { display: grid; gap: 12px; margin-top: 4px; }
.nota-tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 20px; }
.nota-tarjeta h3 { font-size: 15px; margin: 0 0 6px; }
.nota-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-2); font-size: 12px; color: var(--tenue); }
.nota-meta .derecha { margin-left: auto; display: flex; gap: 12px; }
.contenido-criterio { margin-top: 10px; }
.contenido-criterio summary { font-weight: 700; font-size: 13px; color: var(--acento-tx); }
.contenido-criterio[open] summary { margin-bottom: 10px; }
.contenido-criterio .md { background: var(--tarjeta-2); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; max-height: 420px; overflow-y: auto; }
.biblio-cabeza { margin-bottom: 4px; }
.biblio-cabeza .buscar { max-width: 640px; width: 100%; font-size: 15px; padding-top: 12px; padding-bottom: 12px; margin-top: 12px; }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; margin-top: 10px; align-items: start; }
.mosaico > * { display: block; }
.carta { position: relative; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 20px 18px; cursor: pointer; min-height: 200px; transition: border-color .15s; }
.carta:hover { border-color: var(--linea-h); }
.carta-tipo { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tenue); margin-bottom: 8px; }
.carta-tipo i { width: 7px; height: 7px; border-radius: 50%; }
.carta h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; }
.carta .md { font-size: 13px; line-height: 20px; color: var(--sutil); max-height: 140px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.carta-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; font-size: 12px; color: var(--tenue); }
.carta-nueva { border-style: dashed; background: none; display: grid; gap: 10px; text-align: left; cursor: default; min-height: 0; }
.carta-nueva:hover { border-color: var(--linea); }
.carta-nueva b { font-size: 12px; font-weight: 700; color: var(--acento-2); }
.carta-nueva .sutil { color: var(--tenue) !important; font-size: 15px; }
.carta-nueva .acciones-pagina { margin: 0; }
.etiqueta { display: inline-flex; align-items: center; font-size: 12px; color: var(--tenue); }
.etiqueta::before { content: '#'; margin-right: 1px; }

/* Bitácora. */
.cambio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 20px; border-top: 1px solid var(--linea-2); }
.cambio:first-child { border-top: 0; }
.cambio .av { width: 30px; height: 30px; font-size: 10.5px; grid-row: span 2; }
.cambio-que { font-size: 15px; } .cambio-que b { font-weight: 600; }
.cambio-que a { color: var(--acento-tx); }
.cambio-cuando { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.cambio-detalle { grid-column: 2 / -1; display: grid; gap: 3px; font-size: 13px; }
.cambio-campo { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cambio-campo .k { font-weight: 600; color: var(--tenue); min-width: 110px; }
.cambio-campo del { color: var(--rojo); background: var(--rojo-suave); text-decoration: line-through; padding: 0 5px; border-radius: 4px; }
.cambio-campo ins { color: var(--verde); background: var(--verde-suave); text-decoration: none; padding: 0 5px; border-radius: 4px; }

/* Visor de documentos. */
.visor { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin: 14px 0; }
.visor-cabeza { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea-2); }
.visor-cabeza .doc-ico { width: 30px; height: 36px; border: 1.5px solid #E24B4A; border-radius: 5px; position: relative; flex: none; background: none !important; color: transparent !important; }
.visor-cabeza .doc-ico::after { content: 'PDF'; position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: #E24B4A; }
.visor-cabeza .doc-ico svg { display: none; }
.visor-cabeza .txt { flex: 1; min-width: 0; }
.visor-cabeza .txt b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-cabeza .txt span { font-size: 12px; color: var(--tenue); }
.visor iframe { display: block; width: 100%; height: 640px; border: 0; background: #525659; }
.visor.plegado iframe { display: none; }
@media (max-width: 760px) { .visor iframe { height: 70vh; } }

.modal-caja.visor-modal { max-width: 900px; overflow: hidden; }
.modal-caja.visor-modal iframe { display: block; width: 100%; height: 78vh; border: 0; background: #525659; }
.item-dias { font-size: 12px; font-weight: 600; color: var(--tenue); }
.item-dias.rojo { color: var(--rojo); }

/* Interruptor de modo noche: el ícono solo, sin círculo detrás. */
.interruptor { display: inline-grid; place-items: center; width: 21px; height: 21px; border: 0; background: none; padding: 0; color: var(--sutil); cursor: pointer; flex: none; }
.interruptor:hover { color: var(--texto); }
.interruptor svg { width: 19px; height: 19px; }
.interruptor .luna, [data-tema="oscuro"] .interruptor .sol { display: none; }
[data-tema="oscuro"] .interruptor .luna { display: block; }

/* ─── el día: atender hoy, mesa de trabajo, lo que llegó y lo que viene ─── */
.bloque-dia { margin-top: 26px; }
.bloque-dia:first-child { margin-top: 0; }
.bd-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 2px; font-size: 15px; font-weight: 650; color: var(--texto); }
.bd-titulo svg { display: none; }
.bd-titulo b { font-weight: 600; letter-spacing: 0; color: var(--tenue-2); }
.bloque-dia.urge .bd-titulo { color: var(--rojo); }

.lista-dia { display: flex; flex-direction: column; gap: 8px; }
.dia-fila, .lista-fila, .carga-fila { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); cursor: pointer; transition: border-color .15s; }
.dia-fila:hover, .lista-fila:hover, .carga-fila:hover { border-color: var(--acento-2); }
.dia-fila > .pill { flex: none; width: 76px; }
.df-texto, .lf-texto { flex: 1; min-width: 0; }
.df-texto b, .lf-texto b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-texto span, .lf-texto span { display: block; font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.df-acciones { flex: none; display: flex; gap: 6px; }

.todo-bien { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radio-r); border: 1px solid var(--linea); background: var(--tarjeta); color: var(--sutil); font-size: 15px; }
.todo-bien svg { width: 18px; height: 18px; color: var(--verde); flex: none; }
.todo-bien b { color: var(--texto); }

/* La mesa de trabajo. */
.mesa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mesa-col { display: grid; gap: 8px; align-content: start; }
.mesa-cabeza { display: flex; align-items: center; gap: 8px; padding: 0 4px 2px; }
.mesa-cabeza b { font-weight: 600; letter-spacing: 0; color: var(--tenue-2); }
.mesa-tarjeta { display: grid; gap: 4px; padding: 13px 15px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); cursor: pointer; transition: border-color .15s; }
.mesa-tarjeta:hover { border-color: var(--acento-2); }
.mesa-tarjeta b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mt-cliente { font-size: 12px; color: var(--tenue); }
.mt-fechas { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--sutil); margin-top: 2px; }
.mt-fechas .tarde { color: var(--rojo); font-weight: 600; }
.mt-espera { font-size: 12px; color: var(--tenue); }
.mt-aviso { justify-self: start; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ambar-suave); color: var(--ambar); }
.mesa-tarjeta .mini-boton { justify-self: start; margin-top: 6px; }
.mesa-vacia { padding: 12px 14px; border: 1px dashed var(--linea); border-radius: var(--radio-r); font-size: 13px; color: var(--tenue-2); }
@media (max-width: 980px) { .mesa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* La carga del equipo. */
.carga-cabeza { display: grid; grid-template-columns: 28px minmax(0, 1fr) 62px 62px 62px; gap: 6px; padding: 0 18px 4px; text-align: center; }
.carga-cabeza span:nth-child(2) { grid-column: 3; } .carga-cabeza span:nth-child(3) { grid-column: 4; } .carga-cabeza span:nth-child(4) { grid-column: 5; }
.carga-fila { display: grid; grid-template-columns: 28px minmax(0, 1fr) 62px 62px 62px; gap: 6px; padding: 10px 18px; }
.carga-fila b { font-size: 15px; font-weight: 600; }
.carga-fila .av { width: 26px; height: 26px; }
.cf-num { text-align: center; font-weight: 700; color: var(--tenue-2); font-variant-numeric: tabular-nums; }
.cf-num.rojo { color: var(--rojo); } .cf-num.ambar { color: var(--ambar); }
/* La agenda. */
.agenda { display: grid; gap: 18px; }
.ag-dia { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; }
.ag-fecha { display: grid; align-content: start; justify-items: start; gap: 3px; padding-top: 10px; }
.ag-fecha b { font-size: 22px; font-weight: 700; line-height: 1; }
.ag-fecha small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.ag-pastilla { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--texto); color: var(--fondo); font-size: 12px; font-weight: 700; }
.ag-pastilla.rojo { background: var(--rojo); color: #fff; }
.ag-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.bloque-ag { --p: var(--gray-solido); display: grid; gap: 3px; padding: 13px 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); transition: border-color .15s; }
.bloque-ag:hover { border-color: var(--acento-2); }
.b-violeta { --p: var(--blue-solido); } .b-orquidea { --p: var(--purple-solido); } .b-naranja { --p: var(--orange-solido); }
.b-cielo { --p: var(--green-solido); } .b-mantequilla { --p: var(--pink-solido); } .b-perla { --p: var(--brown-solido); } .b-rojo { --p: var(--rojo); }
.bloque-ag.b-rojo { background: var(--rojo-suave); border-color: transparent; }
.bloque-ag.interno { border-style: dashed; }
.ba-arriba { display: flex; align-items: flex-start; gap: 8px; }
.ba-arriba b { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; display: flex; gap: 8px; }
.ba-arriba b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--p); flex: none; margin-top: 6px; }
.ba-avance { flex: none; border: 1px solid var(--linea); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--tenue); background: none; cursor: pointer; white-space: nowrap; }
.ba-avance:hover { border-color: var(--acento-2); }
.ba-sub { font-size: 12px; color: var(--tenue); padding-left: 15px; }
.ba-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; padding-left: 15px; font-size: 12px; color: var(--tenue); }
.ba-hora { display: inline-flex; align-items: center; gap: 5px; }
.ba-hora svg { width: 13px; height: 13px; }
.ba-quien { display: inline-flex; align-items: center; gap: 6px; color: var(--sutil); }
.ba-quien .av { width: 20px; height: 20px; font-size: 8px; }

@media (max-width: 760px) {
  .dia-fila { flex-wrap: wrap; padding: 12px 14px; gap: 8px 12px; }
  .dia-fila > .pill { width: auto; }
  .df-texto { flex-basis: 100%; order: 2; }
  .df-texto b, .df-texto span { white-space: normal; }
  .df-acciones { order: 4; width: 100%; } .df-acciones .boton { flex: 1; }
  
  .mesa { grid-template-columns: minmax(0, 1fr); }
  .ag-dia { grid-template-columns: 1fr; gap: 8px; } .ag-fecha { display: flex; align-items: baseline; gap: 8px; padding-top: 0; }
  .ag-bloques { grid-template-columns: 1fr; }
}

/* ─── equipo y permisos ─── */
.clave-caja { display: flex; gap: 10px; align-items: center; margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--acento-2); border-radius: 12px; background: var(--acento-suave); }
.clave-caja code { flex: 1; font-family: var(--f-mono); font-size: 17px; font-weight: 700; letter-spacing: .5px; word-break: break-all; }
.roles-leyenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.roles-leyenda div { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-r); background: var(--tarjeta); }
.roles-leyenda b { display: block; font-size: 15px; margin-bottom: 3px; }
.roles-leyenda span { color: var(--tenue); font-size: 13px; line-height: 1.45; }
.persona-fila { display: grid; grid-template-columns: 36px 1fr 150px 300px; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--linea-2); }
.persona-fila:last-child { border-bottom: 0; }
.persona-fila .av { width: 36px; height: 36px; font-size: 12px; }
.persona-fila.inactivo { opacity: .5; }
.pf-nombre { min-width: 0; }
.pf-nombre b { display: block; font-size: 15px; font-weight: 600; }
.pf-nombre span { color: var(--tenue); font-size: 13px; }
.persona-fila select { padding: 7px 10px; font-size: 13px; }
.pf-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) { .persona-fila { grid-template-columns: 36px 1fr 150px; } .pf-acciones { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 760px) { .roles-leyenda { grid-template-columns: 1fr; } .persona-fila { grid-template-columns: 36px 1fr; } .persona-fila select, .pf-acciones { grid-column: 1 / -1; justify-content: flex-start; } }
.ficha-cuerpo, .ficha-cuerpo > * { min-width: 0; }

/* ═══ El morado del estilo inicial, con más contraste (decisión de Dirección, 13 oct) ═══ */
:root {
  --fondo: #f4f5f9; --texto: #0f172a; --sutil: rgba(15, 23, 42, .72); --tenue: rgba(15, 23, 42, .52); --tenue-2: rgba(15, 23, 42, .36);
  --chipon: rgba(79, 70, 229, .08);
  --acento: #4f46e5; --acento-2: #6366f1; --acento-medio: #6366f1; --acento-suave: #eef0ff; --acento-tx: #4f46e5;
  --grad: linear-gradient(135deg, #6366f1, #4f46e5);
  --blue-solido: #3b82f6; --purple-solido: #8b5cf6; --blue-bg: #e6f0ff; --blue-tx: #1d4ed8;
}
:root[data-tema="oscuro"] {
  --fondo: #0b0f1a; --tarjeta: #121828; --tarjeta-2: #171e31; --lado: #0e1322; --linea: #232b42; --linea-2: #1b2235; --linea-h: #3a4566;
  --texto: #e7eaf3; --sutil: rgba(231, 234, 243, .72); --tenue: rgba(231, 234, 243, .5); --tenue-2: rgba(231, 234, 243, .34);
  --chipon: rgba(129, 140, 248, .14);
  --acento: #818cf8; --acento-2: #a5b4fc; --acento-suave: #1d2147; --acento-tx: #a5b4fc;
  --grad: linear-gradient(135deg, #818cf8, #6366f1);
}
/* Lo activo, en morado suave con texto morado. */
.nav-item.activo, .pestanas a.activo, .filtro.activo, .vistas button.activo, .conmutador button.activo { background: var(--acento-suave); color: var(--acento-tx); font-weight: 600; }
.nav-item.activo svg, .pestanas a.activo svg { color: var(--acento-tx); opacity: 1; }
.nav-item.activo .cuenta, .pestanas a.activo b { color: var(--acento-tx); }
.dia.hoy { background: var(--grad); }
.dia.hoy .dsem, .dia.hoy .dnum, .dia.hoy .dcuenta { color: #fff !important; }
/* "Nuevo" y el + del teléfono, en el degradado morado. */
.boton-nuevo { background: var(--grad); color: #fff; box-shadow: 0 6px 16px -8px rgb(79 70 229 / .7); }
.boton-nuevo:hover { color: #fff; opacity: 1; filter: brightness(1.06); }

.barra-abajo a.activo { color: var(--acento-tx); }
.boton.azul, .mini-boton.verde { box-shadow: 0 4px 12px -6px rgb(79 70 229 / .65); }
.lateral-marca b, .marca { color: var(--acento-tx); }
.item:hover, .dia-fila:hover, .lista-fila:hover, .carga-fila:hover, .mesa-tarjeta:hover, .bloque-ag:hover { border-color: var(--acento-2); }
.cal-dia.hoy .cal-num span { background: var(--grad); }

/* ═══ Mi biblioteca y el menú del teléfono, como estaban antes (v0.11) ═══ */
.biblio-cabeza { background: linear-gradient(135deg, var(--acento-suave), color-mix(in srgb, var(--purple-bg) 70%, transparent)); border: 1px solid var(--linea); border-radius: 18px; padding: 26px 24px 20px; margin-bottom: 8px; }
.biblio-cabeza .pagina-cabeza { margin-bottom: 0; align-items: center; }
.biblio-cabeza .icono-pagina { display: grid; width: 48px; height: 48px; border-radius: 12px; place-items: center; flex: none; background: var(--acento-suave); color: var(--acento-tx); }
.biblio-cabeza .icono-pagina svg { width: 24px; height: 24px; }
.biblio-cabeza h1 { font-size: 28px; font-weight: 800; letter-spacing: -.8px; }
.biblio-cabeza .buscar { max-width: 640px; width: 100%; font-size: 15px; padding-top: 13px; padding-bottom: 13px; margin-top: 14px; border-width: 1px; }
.mosaico { display: block; columns: 3 280px; column-gap: 14px; margin-top: 14px; }
.mosaico > * { break-inside: avoid; margin-bottom: 14px; display: block; }
.carta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 4px 16px -6px rgb(15 23 42 / .08); padding: 16px; min-height: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.carta:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(15 23 42 / .05), 0 12px 32px -10px rgb(15 23 42 / .18); border-color: var(--linea); }
.carta-tipo { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--tenue); margin-bottom: 8px; }
.carta-tipo i { width: 8px; height: 8px; border-radius: 3px; }
.carta h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; line-height: 1.35; }
.carta .md { font-size: 13px; color: var(--sutil); max-height: 190px; line-height: 1.6; }
.carta-pie { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; align-items: center; }
.carta-nueva { border: 2px dashed var(--linea); background: transparent; box-shadow: none; display: grid; gap: 10px; text-align: left; cursor: default; }
.carta-nueva:hover { border-color: var(--acento-2); transform: none; box-shadow: none; }
.carta-nueva b { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--texto); }
.carta-nueva .sutil { font-size: 13px; color: var(--sutil) !important; }
.carta-nueva .acciones-pagina { margin: 0; }
.etiqueta { display: inline-flex; height: 21px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--linea-2); color: var(--sutil); }
.etiqueta::before { content: '#'; opacity: .6; margin-right: 1px; }
[data-tema="oscuro"] .carta { box-shadow: none; }

/* Menú del teléfono: la barra flotante de antes, con su botón activo en morado suave. */
@media (max-width: 899px) {
  .contenido { padding-bottom: calc(96px + var(--seguro-abajo)); }
  .barra-abajo { left: 10px; right: 10px; bottom: calc(10px + var(--seguro-abajo)); justify-content: initial; align-items: stretch; padding: 6px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 10px 30px -12px rgb(15 23 42 / .25); }
  .barra-abajo a { flex: 1; min-width: 0; min-height: 50px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--tenue); font-size: 11px; font-weight: 600; border-radius: 12px; }
  .barra-abajo a svg { width: 21px; height: 21px; }
  .barra-abajo a.activo { color: var(--acento-tx); background: var(--acento-suave); }
}
/* El encabezado del teléfono: crear, modo noche y salir en botones, como antes. */

/* ═══ Lo activo en morado sólido, el mismo degradado de "+ Nuevo" (13 oct) ═══ */
.nav-item.activo, .pestanas a.activo, .filtro.activo, .vistas button.activo, .conmutador button.activo { background: var(--grad); color: #fff; font-weight: 600; box-shadow: 0 4px 12px -6px rgb(79 70 229 / .6); }
.nav-item.activo svg, .pestanas a.activo svg, .nav-item.activo .cuenta, .pestanas a.activo b { color: #fff; opacity: .9; }
.filtro.activo { border-color: transparent; }
@media (max-width: 899px) { .barra-abajo a.activo { background: var(--grad); color: #fff; } }

/* ═══ Morado liso, sin degradado ni sombra (13 oct) ═══ */
:root { --grad: #4f46e5; }
:root[data-tema="oscuro"] { --grad: #6366f1; }
.nav-item.activo, .pestanas a.activo, .filtro.activo, .vistas button.activo, .conmutador button.activo,
.boton-nuevo, .boton.azul, .mini-boton.verde { box-shadow: none; }
.boton.azul:hover, .boton-nuevo:hover, .mini-boton.verde:hover { filter: none; background: #4338ca; }

/* ═══ Lo activo en el lavanda del encabezado de Mi biblioteca (decisión de Dirección, 13 oct) ═══ */
:root { --lavanda: linear-gradient(135deg, var(--acento-suave), color-mix(in srgb, var(--purple-bg) 70%, transparent)); }
.nav-item.activo, .pestanas a.activo, .filtro.activo, .vistas button.activo, .conmutador button.activo { background: var(--lavanda); color: var(--texto); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linea); }
.nav-item.activo svg, .pestanas a.activo svg { color: var(--acento-tx); opacity: 1; }
.nav-item.activo .cuenta, .pestanas a.activo b { color: var(--sutil); opacity: 1; }
@media (max-width: 899px) { .barra-abajo a.activo { background: var(--lavanda); color: var(--texto); } .barra-abajo a.activo svg { color: var(--acento-tx); } }

/* ─── el botón Atrás ─── */
.volver { display: inline-flex; align-items: center; gap: 3px; padding: 4px 11px 4px 6px; margin-right: 4px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--sutil); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.volver:hover { border-color: var(--acento-2); color: var(--acento-tx); }
.volver svg { width: 15px; height: 15px; stroke-width: 2.2; }
.migas:has(.volver) { margin-bottom: 14px; }
@media (max-width: 760px) { .volver { padding: 6px 13px 6px 8px; font-size: 13px; } }

/* ═══ El expediente: el asunto con su documento al lado ═══ */
.expediente { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 1160px; margin: 0 auto; align-items: start; }
.exp-main { min-width: 0; }
.panel-doc { display: none; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.con-panel .panel-doc { display: flex; }
@media (min-width: 1100px) {
  .expediente.con-panel { grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); }
  .expediente .panel-doc { position: sticky; top: 16px; height: calc(100vh - 36px); }
}
@media (max-width: 1099px) { .con-panel .panel-doc { position: fixed; inset: 0; z-index: 80; border: 0; border-radius: 0; } }
.pd-cabeza { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linea-2); }
.pd-cabeza .txt { flex: 1; min-width: 0; }
.pd-cabeza .txt b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cabeza .txt span { font-size: 12px; color: var(--tenue); }
.pd-cabeza .boton { padding: 5px 10px; }
.pd-cabeza [data-cerrar-doc] { font-size: 17px; line-height: 1; padding: 3px 9px; }
.panel-doc iframe { flex: 1; width: 100%; min-height: 60vh; border: 0; background: #525659; }

/* La ficha de datos: pastillas compactas. */
.g-ficha { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; align-items: center; }
button.g-fc { font: inherit; cursor: pointer; color: var(--texto); }
.g-fc .v { font-weight: 600; }
.g-fc .v .persona { font-size: 13px; }
a.g-fc:hover, button.g-fc:hover { border-color: var(--acento-2); }

/* Lo que sigue. */
.lo-que-sigue { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 0 0 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.lo-que-sigue.negro, .lo-que-sigue.rojo { border-color: color-mix(in srgb, var(--rojo) 40%, var(--linea)); }
.lo-que-sigue.ambar { border-color: color-mix(in srgb, var(--ambar) 40%, var(--linea)); }
.lqs-texto { flex: 1; min-width: 0; }
.lqs-etiqueta { display: block; font-size: 12px; font-weight: 650; color: var(--tenue); margin-bottom: 2px; }
.lqs-texto > b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.lqs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--sutil); margin-bottom: 8px; }

@media (max-width: 760px) { .lo-que-sigue { flex-wrap: wrap; }   }

/* Ligas a documentos dentro de renglones. */
.enlace-doc { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--acento-tx); cursor: pointer; text-align: left; }
.enlace-doc svg { width: 14px; height: 14px; flex: none; }
.enlace-doc:hover, .enlace-doc.activo { text-decoration: underline; text-underline-offset: 3px; }
.item-doc { margin-top: 6px; }
.doc-linea { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tenue); margin: 0 2px 14px; }
.doc-linea svg { width: 14px; height: 14px; }

/* Formularios: "Más datos". */
.campos-mas { grid-column: span 2; border-top: 1px solid var(--linea-2); padding-top: 8px; }
.campos-mas summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--acento-tx); padding: 4px 0 8px; }
.campos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (max-width: 760px) { .campos-mas { grid-column: span 1; } .campos-grid { grid-template-columns: 1fr; } }

/* Calendario en teléfono: lista del mes. */

  

.cal-cabeza { gap: 4px; }
@media (max-width: 760px) {
  .cal-cabeza b { min-width: 0; flex-basis: 100%; }
  .cal-cabeza .conmutador { margin-left: auto !important; }
  /* Las pastillas de datos del asunto, compactas y en dos columnas. */
  .g-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .g-fc { min-width: 0; padding: 5px 11px; font-size: 12px; gap: 5px; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; }
  .g-fc .k { font-size: 11px; }
  .g-fc .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .g-fc .chip-num { font-size: 12px; }
  .acciones-pagina { gap: 6px; }
  .acciones-pagina .boton { padding: 6px 10px; font-size: 12px; }
}
@media (min-width: 980px) and (max-width: 1099px) { .expediente.con-panel { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); } .expediente .panel-doc { position: sticky; top: 16px; height: calc(100vh - 36px); } }
@media (max-width: 979px) { .con-panel .panel-doc { position: fixed; inset: 0; z-index: 80; border: 0; border-radius: 0; } }
@media (max-width: 1199px) { .pd-cabeza { flex-wrap: wrap; } .pd-cabeza .txt { flex-basis: 100%; } .pd-cabeza [data-cerrar-doc] { margin-left: auto; } }
@media (max-width: 760px) {
  .item .meta-acciones { width: 100%; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .item .meta-acciones [data-termino-presentado] { display: none; }
  .item .meta-acciones .mini-boton { padding: 5px 12px; font-size: 13px; }
}

/* ═══ Mi día con color: avisos, cifras, mesa arrastrable ═══ */
/* La campana. */
.campana { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--sutil); cursor: pointer; flex: none; }
.campana:hover { border-color: var(--acento-2); color: var(--acento-tx); }
.campana svg { width: 17px; height: 17px; }
.campana .cuenta { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--tarjeta); }
.campana-lateral { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.campana-lateral .campana { width: 100%; height: 38px; justify-content: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; border-radius: 12px; }
.campana-lateral .campana::after { content: 'Notificaciones'; }
.campana-lateral .campana .cuenta { position: static; margin-left: auto; border: 0; }
@media (max-width: 899px) { .campana-lateral { display: none; } }

/* Banners de avisos: deslizables, con el color de su tono. */

.aviso { --c: var(--blue-solido); --cbg: var(--blue-bg); --ctx: var(--blue-tx); display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radio); background: var(--cbg); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: opacity .2s, transform .2s; }
.aviso.c-yellow { --c: var(--yellow-solido); --cbg: var(--yellow-bg); --ctx: var(--yellow-tx); }
.aviso.c-red { --c: var(--red-solido); --cbg: var(--red-bg); --ctx: var(--red-tx); }
.aviso.c-green { --c: var(--green-solido); --cbg: var(--green-bg); --ctx: var(--green-tx); }
.aviso.se-va { opacity: 0; transform: scale(.96); }
.aviso-cabeza { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.aviso-tono { font-weight: 650; color: var(--ctx); }
.aviso-para { color: var(--sutil); margin-left: auto; }
.aviso-texto { font-size: 15px; font-weight: 500; line-height: 1.4; }
.aviso-texto a { color: var(--ctx); text-decoration: underline; }
.aviso-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.aviso-acciones { display: flex; gap: 6px; margin-left: auto; }
.aviso .mini-boton { background: var(--tarjeta); }
.aviso .mini-boton.verde { background: var(--c); border-color: transparent; }

/* Cifras del día con su color. */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.tile { --c: var(--gray-solido); --cbg: var(--gray-bg); --ctx: var(--gray-tx); display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--radio-r); background: var(--cbg); color: var(--ctx); transition: transform .12s; }
.tile b { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tile span { font-size: 12px; font-weight: 600; opacity: .85; }
.tile:hover { transform: translateY(-1px); }
.tile.cero { background: var(--tarjeta); border: 1px solid var(--linea); color: var(--tenue); }
.t-red { --cbg: var(--red-bg); --ctx: var(--red-tx); } .t-orange { --cbg: var(--orange-bg); --ctx: var(--orange-tx); }
.t-yellow { --cbg: var(--yellow-bg); --ctx: var(--yellow-tx); } .t-purple { --cbg: var(--purple-bg); --ctx: var(--purple-tx); } .t-green { --cbg: var(--green-bg); --ctx: var(--green-tx); }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tile { padding: 10px 12px; } .tile b { font-size: 22px; } .tile span { font-size: 11px; } .tile:nth-child(4), .tile:nth-child(5) { grid-column: span 1; } }

/* Atender hoy: cada renglón con el tono de su urgencia. */
.dia-fila.negro, .dia-fila.rojo { background: color-mix(in srgb, var(--red-bg) 55%, var(--tarjeta)); border-color: color-mix(in srgb, var(--red-solido) 35%, var(--linea)); }
.dia-fila.ambar { background: color-mix(in srgb, var(--yellow-bg) 55%, var(--tarjeta)); border-color: color-mix(in srgb, var(--yellow-solido) 40%, var(--linea)); }
.dia-fila.negro:hover, .dia-fila.rojo:hover { border-color: var(--rojo); } .dia-fila.ambar:hover { border-color: var(--ambar); }
.dia-fila > .pill { font-size: 13px; }
.dia-fila > .pill.rojo, .dia-fila > .pill.negro { background: var(--rojo); color: #fff; padding: 3px 10px; border-radius: 999px; }
.dia-fila > .pill.ambar { background: var(--ambar); color: #fff; padding: 3px 10px; border-radius: 999px; }

/* La mesa de trabajo: columnas con color, arrastre y deslizable en teléfono. */
.mesa { gap: 12px; }
.mesa-col { --c: var(--gray-solido); --cbg: var(--gray-bg); background: var(--cbg); border: 1px solid transparent; border-radius: var(--radio); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; transition: border-color .15s, box-shadow .15s; }
.mc-blue { --c: var(--blue-solido); --cbg: var(--blue-bg); } .mc-purple { --c: var(--purple-solido); --cbg: var(--purple-bg); } .mc-green { --c: var(--green-solido); --cbg: var(--green-bg); }
.mesa-col.destino { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.mesa-cabeza { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 15px; font-weight: 650; color: var(--texto); }
.mesa-cabeza .punto { width: 8px; height: 8px; border-radius: 50%; }
.mesa-cabeza b { margin-left: auto; font-weight: 700; color: var(--sutil); background: var(--tarjeta); padding: 0 8px; border-radius: 999px; }
.mesa-cuerpo { display: grid; gap: 8px; flex: 1; align-content: start; }
.mesa-tarjeta { touch-action: none; user-select: none; -webkit-user-select: none; border-left: 3px solid var(--c); }
.mesa-tarjeta.arrastrando { position: relative; z-index: 5; box-shadow: 0 16px 30px -12px rgb(15 23 42 / .35); border-color: var(--acento-2); opacity: .95; }
.mt-cliente { display: flex; align-items: center; gap: 6px; }
.mt-cliente .punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mesa-vacia { border-color: color-mix(in srgb, var(--c) 40%, transparent); color: var(--sutil); text-align: center; }
@media (max-width: 980px) {
  .mesa { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 2px 2px 10px; margin-inline: -14px; padding-inline: 14px; scrollbar-width: none; }
  .mesa::-webkit-scrollbar { display: none; }
  .mesa-col { flex: 0 0 82%; scroll-snap-align: start; min-height: 200px; }
}

/* Encabezado de la página del abogado: avatar y texto alineados. */
.pagina-cabeza > .av { align-self: center; margin-top: 0; }
.pagina-cabeza { align-items: center; }
@media (max-width: 760px) { .pagina-cabeza { align-items: center; } .pagina-cabeza > .av { width: 40px !important; height: 40px !important; font-size: 13px !important; } }

/* ═══ v0.16 · El reloj del término como bloque de color, acciones discretas, expediente con lo urgente primero (13 oct) ═══ */

/* El reloj: un bloque de color, como la hoja de un calendario. Cifra arriba, unidad o fecha abajo.
   Rojo sólido: ya venció. Rosa: hoy a 2 días. Ámbar: la semana. Índigo: con tiempo. */
.reloj { --rb: var(--acento-suave); --rt: var(--acento-tx); flex: none; width: 66px; min-height: 54px; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: var(--rb); color: var(--rt); text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.reloj b { font-size: 22px; font-weight: 750; letter-spacing: -.03em; }
.reloj.palabra b { font-size: 15px; letter-spacing: -.01em; padding: 2px 0; }
.reloj span { font-size: 11px; font-weight: 650; opacity: .82; white-space: nowrap; }
.reloj.r-negro { --rb: var(--rojo); --rt: #fff; }
.reloj.r-negro span { opacity: .92; }
.reloj.r-rojo, .reloj.r-alerta { --rb: var(--red-bg); --rt: var(--red-tx); }
.reloj.r-ambar { --rb: var(--yellow-bg); --rt: var(--yellow-tx); }
.reloj.r-gris { --rb: var(--chipon); --rt: var(--tenue); }
.reloj.r-hecho { --rb: var(--green-bg); --rt: var(--green-tx); }
.reloj.chico { width: 56px; min-height: 48px; border-radius: 12px; } .reloj.chico b { font-size: 17px; } .reloj.chico.palabra b { font-size: 13px; }
.reloj.grande { width: 92px; min-height: 84px; border-radius: 18px; gap: 5px; } .reloj.grande b { font-size: 28px; } .reloj.grande.palabra b { font-size: 22px; } .reloj.grande span { font-size: 12px; }
.meta-vence { color: var(--sutil); font-weight: 600; }

/* Renglones de término con el bloque a la izquierda. */
.item { grid-template-columns: 66px minmax(0, 1fr) 120px; padding-left: 14px; }
.dia-fila, .lista-fila { gap: 16px; padding: 11px 18px 11px 12px; }
.lista-fila .reloj { width: 58px; min-height: 48px; border-radius: 12px; }
.lista-fila .reloj b { font-size: 17px; } .lista-fila .reloj.palabra b { font-size: 13px; }
@media (max-width: 760px) {
  .item { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "hoja tit" "hoja lin" "hoja meta" "hoja resp"; padding: 12px 14px 12px 12px; }
  .item > .reloj { grid-area: hoja; width: 58px; align-self: start; }
  .item > .reloj b { font-size: 17px; } .item > .reloj.palabra b { font-size: 13px; }
  .dia-fila { padding: 12px 14px 12px 12px; gap: 8px 12px; }
  .dia-fila > .reloj { width: 58px; align-self: flex-start; }
  .dia-fila > .reloj b { font-size: 17px; } .dia-fila > .reloj.palabra b { font-size: 13px; }
  .dia-fila > .df-texto { order: 0; flex: 1 1 0; flex-basis: calc(100% - 76px); }
  .dia-fila > .df-texto + * { margin-left: 70px; }
  .dia-fila > .df-acciones { order: 4; width: 100%; padding-left: 70px; }
  .dia-fila > .df-acciones .boton { flex: none; }
  .dia-fila > .df-texto + .df-acciones { margin-left: 0; }
  .lista-fila { padding-left: 12px; gap: 12px; }
}

/* Acciones de renglón: discretas; se encienden al pasar el cursor. La acción fuerte, una por pantalla. */
.boton.fila-accion, .mini-boton.fila-accion { background: none; border: 1px solid var(--linea); color: var(--sutil); box-shadow: none; filter: none; }
.item:hover .fila-accion, .dia-fila:hover .fila-accion, .mesa-tarjeta:hover .fila-accion { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); color: var(--acento-tx); }
.boton.fila-accion:hover, .mini-boton.fila-accion:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.fila-accion svg { opacity: .8; }

/* La tarjeta del asunto: el próximo término sin cajita, con su bloque. */
.ficha-sig { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; border-top: 1px solid var(--linea-2); }
.ficha-sig.vacio { color: var(--tenue); font-size: 13px; padding-left: 20px; }
.fs-texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fs-texto b { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-texto > span { font-size: 12px; color: var(--tenue); }
.av-texto { display: inline-flex; align-items: center; gap: 6px; }
.av-texto .punto { width: 6px; height: 6px; border-radius: 50%; }
.ficha-cuerpo { padding-bottom: 16px; }

/* El expediente: lo que sigue arriba, como pieza principal. */
.lo-que-sigue { align-items: flex-start; gap: 18px; padding: 18px 20px; margin: 4px 0 14px; border-color: var(--linea); }
.lqs-texto > b { font-size: 17px; }
.lqs-meta { margin-bottom: 10px; }
.lqs-mas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }
.lqs-mas .enlace { font-size: 13px; color: var(--tenue); }
.lqs-mas .enlace:hover { color: var(--acento-tx); }
@media (max-width: 760px) {
  .lo-que-sigue { flex-direction: column; gap: 12px; padding: 16px; }
  .lo-que-sigue > .reloj { width: auto; min-height: 0; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 12px; }
  .lo-que-sigue > .reloj b { font-size: 22px; } .lo-que-sigue > .reloj.palabra b { font-size: 17px; padding: 0; }
  .lo-que-sigue > .reloj span { font-size: 13px; }
  .lo-que-sigue .lqs-texto { width: 100%; }
  .lqs-mas .boton.azul { flex-basis: 100%; }
}

/* Los datos del expediente: una tarjeta; en el teléfono, cerrada con lo esencial a la vista. */
.exp-datos { margin: 0 0 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.exp-datos > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 18px; cursor: pointer; user-select: none; }
.exp-datos > summary::-webkit-details-marker { display: none; }
.exp-datos > summary > span { font-size: 12px; font-weight: 650; color: var(--tenue); flex: none; }
.exp-datos > summary > small { margin-left: auto; min-width: 0; font-size: 13px; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-datos > summary::after { content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 3px 4px; border-right: 1.8px solid var(--tenue); border-bottom: 1.8px solid var(--tenue); transform: rotate(45deg); transition: transform .15s; }
.exp-datos[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; margin-left: auto; }
.exp-datos[open] > summary > small { display: none; }
.exp-datos dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px 22px; margin: 0; padding: 2px 18px 16px; }
.ed-dato { min-width: 0; }
.ed-dato.entero { grid-column: 1 / -1; }
.ed-dato dt { font-size: 12px; color: var(--tenue); margin-bottom: 4px; }
.ed-dato dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ed-dato dd .persona { font-size: 13px; color: var(--texto); }
.ed-dato .enlace-doc { font-size: 13px; }
.mono-dato { font-family: var(--f-mono); font-size: 13px; font-weight: 500; }
.ed-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 11px 18px; border-top: 1px solid var(--linea-2); font-size: 13px; }
.ed-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
@media (max-width: 760px) {
  .exp-datos dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 2px 16px 14px; }
  .ed-acciones { margin-left: 0; }
}

/* ═══ v0.17 · Pestañas y controles en una pista; encabezados con su acción a la derecha (13 oct) ═══ */

/* Encabezado: título con más presencia; la acción principal a la derecha. */
h1 { font-size: 28px; letter-spacing: -.02em; }
.pagina-cabeza { margin-bottom: 20px; }
.pagina-cabeza .sutil { font-size: 15px; margin-top: 6px; }
.acciones-pagina.en-cabeza { margin: 0 0 0 auto; align-self: center; flex-wrap: nowrap; padding-left: 16px; }
@media (max-width: 760px) { h1 { font-size: 22px; } }

/* Pestañas: una pista blanca; lo activo en lavanda; el número en burbuja. */
.pestanas { display: flex; width: max-content; max-width: 100%; gap: 2px; padding: 4px; margin: 0 0 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; overflow-x: auto; }
.pestanas a { gap: 7px; padding: 7px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--sutil); transition: background .15s, color .15s; }
.pestanas a:hover { color: var(--texto); background: var(--tarjeta-2); }
.pestanas a.activo, .pestanas a.activo:hover { background: var(--lavanda); color: var(--texto); font-weight: 600; box-shadow: none; }
.pestanas a b { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--chipon); font-size: 11px; font-weight: 600; color: var(--sutil); text-align: center; }
.pestanas a.activo b { background: var(--tarjeta); color: var(--acento-tx); }
@media (max-width: 760px) { .pestanas { width: auto; margin-inline: 0; padding-inline: 4px; } }

/* Filtros y vistas: la misma pista, más chica. */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.pista, .vistas, .conmutador { display: inline-flex; gap: 2px; padding: 3px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pista::-webkit-scrollbar { display: none; }
.vistas, .conmutador { margin: 0 0 14px; }
.pista > a, .pista > button, .vistas button, .conmutador button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 8px; color: var(--sutil); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.pista > a:hover, .pista > button:hover, .vistas button:hover, .conmutador button:hover { color: var(--texto); background: var(--tarjeta-2); }
.pista > .activo, .pista > .activo:hover, .vistas button.activo, .conmutador button.activo { background: var(--lavanda); color: var(--texto); font-weight: 600; box-shadow: none; }
.pista b { font-size: 12px; font-weight: 600; color: var(--tenue); }
.pista > .activo b { color: var(--acento-tx); }
.pista > a.alerta b { color: var(--rojo); }
@media (max-width: 760px) { .barra-filtros { flex-direction: column; align-items: stretch; } .barra-filtros .pista { align-self: flex-start; } }

/* Las cifras de las demás pestañas, en los mismos tonos que las del día. */
.contador { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 12px 14px; border: 0; background: var(--gray-bg); }
.contador b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.contador span { font-size: 12px; font-weight: 600; color: inherit; opacity: .85; }
.contador.rojo { background: var(--red-bg); color: var(--red-tx); } .contador.ambar { background: var(--yellow-bg); color: var(--yellow-tx); }
.contador.azul { background: var(--blue-bg); color: var(--blue-tx); } .contador.morado { background: var(--purple-bg); color: var(--purple-tx); }
.contador.verde { background: var(--green-bg); color: var(--green-tx); }
.contador.rojo b, .contador.ambar b { color: inherit; }
.contador:hover { border: 0; transform: translateY(-1px); }
.contador.cero, .contador.cero:hover { background: var(--tarjeta); border: 1px solid var(--linea); color: var(--tenue); transform: none; }

/* ═══ v0.18 · Espacios con una sola escala (8 · 12 · 16 · 20 · 24 · 32) y el ancho de la pantalla grande aprovechado (13 oct) ═══ */

/* Más ancho útil en pantalla grande. */
@media (min-width: 900px) { .contenido { padding: 28px 36px 64px; } }
.ancho { max-width: 1440px; }
.expediente { max-width: 1440px; }
@media (min-width: 1100px) { .expediente.con-panel { grid-template-columns: minmax(0, 1fr) minmax(400px, 42%); gap: 24px; } }

/* La escala: migas 16 · encabezado 24 · pestañas 20 · cifras 28 · secciones 32 · rótulo 12 · renglones 8. */
.migas, .migas:has(.volver) { margin-bottom: 16px; }
.pagina-cabeza { margin-bottom: 24px; }
.pestanas { margin-bottom: 20px; }
.tiles, .contadores, .materias { margin: 0 0 28px; }
.semana-tarjeta { margin: 0 0 20px; }
.barra-filtros { margin-bottom: 20px; }
.panel { margin: 0 0 20px; }
.biblio-cabeza { margin-bottom: 20px; }
.bloque-dia { margin-top: 32px; }
.bloque-dia:first-child { margin-top: 0; }
.bd-titulo { margin-bottom: 12px; }
.lista-dia, .tarjeta-grupo { gap: 8px; }
.lista-terminos { display: grid; gap: 32px; }
.seccion-materia + .seccion-materia { margin-top: 32px; }
.callout { margin: 0 0 12px; }
.lo-que-sigue { margin: 0 0 16px; }
.exp-datos { margin-bottom: 24px; }

/* Hoy y Mi día: lo que se trabaja a la izquierda, lo que se consulta a la derecha. */
.tablero-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.col-main, .col-lado { min-width: 0; }
.tablero-dos + .bloque-dia { margin-top: 32px; }
@media (min-width: 1360px) {
  .tablero-dos { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 24px; align-items: start; }
  .col-lado .dia-fila { padding: 10px 14px 10px 10px; gap: 12px; }
  .col-lado .dia-fila .meta-avance { display: none; }
  .col-lado .lista-fila { padding: 10px 14px 10px 10px; gap: 12px; }
  .col-lado .carga-fila, .col-lado .carga-cabeza { grid-template-columns: 26px minmax(0, 1fr) 56px 56px 56px; padding-inline: 14px; }
}
@media (max-width: 1359px) { .col-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 24px; } .col-lado > .bloque-dia { margin-top: 0; } }

/* Renglón del día en dos líneas: título; cliente, fecha, avance y responsable. La acción a la derecha. */
.dia-fila { align-items: center; }
.df-texto b { margin-bottom: 4px; }
.df-linea { display: flex; align-items: center; gap: 10px; min-width: 0; }
.df-texto .df-linea span { display: inline; margin: 0; }
.df-linea .df-meta { display: block; flex: 0 1 auto; min-width: 0; font-size: 13px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-linea .meta-avance { flex: none; padding: 2px 9px; font-size: 12px; }
.df-linea .persona { flex: none; font-size: 13px; }
.df-linea .persona .av { width: 20px; height: 20px; font-size: 8px; }
.df-linea .persona > span { color: var(--sutil); }
.df-linea > .tag { flex: none; }
@media (max-width: 760px) {
  .df-linea { flex-wrap: wrap; gap: 6px 10px; }
  .df-linea .df-meta { flex-basis: 100%; white-space: normal; }
  .dia-fila > .df-acciones { padding-left: 70px; }
}

/* Lo que llegó: tarjetas en rejilla, no renglones estirados. */
.lista-dia.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lista-dia.rejilla .lista-fila { flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 14px 16px; }
.lista-dia.rejilla .lf-texto { width: 100%; }
.lista-dia.rejilla .lf-texto b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lista-dia.rejilla .tag { margin-top: auto; }

/* La lista de términos: en pantalla muy ancha, dos columnas dentro de cada grupo. */
@media (min-width: 1700px) {
  .lista-terminos .tarjeta-grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-terminos .grupo-titulo { grid-column: 1 / -1; }
}
@media (min-width: 1360px) {
  .col-lado .carga-fila, .col-lado .carga-cabeza { grid-template-columns: 26px minmax(0, 1fr) 62px 62px 62px; gap: 4px; }
  .col-lado .carga-cabeza span { font-size: 11px; letter-spacing: .05em; }
}
.df-linea { gap: 12px; }

/* ═══ v0.19 · Ilustraciones: íconos de materia, saludo y todo en orden (13 oct) ═══ */
.img-materia { flex: none; display: block; object-fit: contain; }
.img-materia.en-menu { width: 20px; height: 20px; margin: -2px 0; }
.nav-sub { gap: 10px; }
.img-materia.en-tarjeta { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; }
.materia { padding-right: 64px; min-height: 104px; align-content: start; }
.materia span::before { display: none; }
.img-materia.en-seccion { width: 40px; height: 40px; }
.seccion-cabeza { gap: 12px; }
.seccion-cabeza::before { display: none; }
.img-materia.en-cabeza { width: 56px; height: 56px; align-self: center; }

/* El saludo con su ilustración: una tarjeta clara, la ilustración a la derecha. */
@media (min-width: 761px) {
  .pagina-cabeza.con-hero { position: relative; overflow: hidden; align-items: center; min-height: 148px; padding: 26px 30px; background: linear-gradient(100deg, var(--tarjeta) 45%, var(--acento-suave)); border: 1px solid var(--linea); border-radius: var(--radio); }
  .pagina-cabeza.con-hero > div { position: relative; z-index: 1; max-width: 62%; }
  .hero-ilus { position: absolute; right: 18px; top: 50%; height: 168px; width: auto; transform: translateY(-50%); pointer-events: none; }
  .pagina-cabeza.con-hero > .av { position: relative; z-index: 1; }
}
@media (max-width: 760px) { .hero-ilus { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) { .hero-ilus { height: 130px; opacity: .9; } .pagina-cabeza.con-hero > div { max-width: 70%; } }
[data-tema="oscuro"] .pagina-cabeza.con-hero { background: linear-gradient(100deg, var(--tarjeta) 45%, var(--acento-suave)); }

/* Nada urgente: la ilustración tranquila. */
.todo-bien { gap: 18px; padding: 16px 22px; }
.todo-bien img { width: 92px; height: auto; flex: none; }
.materias { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.materia { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num ico" "txt txt" "sub sub"; align-items: center; gap: 4px 8px; padding: 14px 16px; min-height: 0; }
.materia > b { grid-area: num; }
.materia > span { grid-area: txt; }
.materia > small { grid-area: sub; }
.img-materia.en-tarjeta { position: static; grid-area: ico; width: 42px; height: 42px; margin: -4px -4px 0 0; }
.df-texto .df-linea .persona { display: inline-flex; align-items: center; gap: 6px; }

/* ═══ v0.20 · Pantalla de entrada y vacíos con ilustración (13 oct) ═══ */

/* Un vacío: ilustración, título y una línea que dice qué hacer. */
.vacio-ilus { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 36px 24px 32px; margin: 4px 0 0; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.vacio-ilus img { width: 132px; height: 112px; object-fit: contain; }
.vacio-ilus > div { display: grid; gap: 4px; max-width: 380px; }
.vacio-ilus b { font-size: 15px; font-weight: 700; color: var(--texto); }
.vacio-ilus span { font-size: 13px; color: var(--tenue); line-height: 1.45; }
.vacio-ilus.chico { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 14px; padding: 12px 18px 12px 12px; margin: 0; border-radius: var(--radio-r); }
.vacio-ilus.chico img { width: 56px; height: 48px; }
.vacio-ilus.chico b { font-size: 13px; font-weight: 600; color: var(--sutil); }
.galeria > .vacio-ilus, .tabla-tarjeta + .vacio-ilus { grid-column: 1 / -1; }

/* La entrada: ilustración a la izquierda, acceso a la derecha. */
.acceso { background: radial-gradient(1200px 600px at 20% 10%, var(--acento-suave), transparent 60%), var(--fondo); }
.acceso-marco { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); width: min(980px, 100%); min-height: 580px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
.acceso-arte { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 34px 36px 30px; background: linear-gradient(160deg, var(--acento-suave) 0%, color-mix(in srgb, var(--purple-bg) 90%, var(--tarjeta)) 100%); }
.acceso-arte img { display: block; width: 74%; max-width: 380px; height: auto; margin: 0 auto; }
.acceso-lema b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--acento-tx); }
.acceso-lema span { display: block; margin-top: 3px; font-size: 13px; color: var(--sutil); }
.acceso-arte p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sutil); max-width: 320px; }
.acceso-marco .acceso-caja { max-width: none; align-self: center; width: 100%; padding: 56px 52px; border: 0; border-radius: 0; background: none; }
.acceso-marco .marca { font-size: 28px; color: var(--texto); letter-spacing: -.02em; }
.acceso-marco #form-acceso { margin-top: 28px; gap: 12px; }
.acceso-marco #form-acceso .boton { background: var(--acento); color: #fff; border: 0; }
.acceso-marco #form-acceso .boton:hover { background: #4338ca; }
@media (max-width: 760px) {
  .acceso { padding: 16px; align-items: start; }
  .acceso-marco { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 18px; }
  .acceso-arte { flex-direction: row; align-items: center; padding: 20px 22px; gap: 14px; }
  .acceso-arte img { order: -1; width: 92px; margin: 0; }
  .acceso-arte p { display: none; }
  .acceso-marco .acceso-caja { padding: 28px 22px 22px; }
}
.acceso { z-index: 100; }

/* ═══ v0.21 · Íconos por tipo de documento y tarjetas de cliente con el reloj (13 oct) ═══ */
.img-doc { flex: none; display: block; width: 32px; height: 32px; object-fit: contain; }
.doc-celda { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-celda > span { min-width: 0; }
.btn-doc-img { flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; transition: transform .15s; }
.btn-doc-img:hover { transform: scale(1.08); }
.img-doc.en-cabeza { width: 60px; height: 60px; align-self: center; }
.img-doc.en-visor { width: 30px; height: 30px; }
.img-doc.en-llego { width: 38px; height: 38px; }
.lista-dia.rejilla .lista-fila { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.lista-dia.rejilla .lista-fila > .tag { grid-column: 2; }
.pd-cabeza .img-doc { margin-right: 2px; }
@media (max-width: 760px) { .img-doc { width: 28px; height: 28px; } .img-doc.en-cabeza { width: 48px; height: 48px; } }
@media (max-width: 760px) {
  .tabla tr.fila:has(.doc-celda) td.titulo { grid-column: 1 / -1; min-width: 0; }
  .tabla tr.fila:has(.doc-celda) td.c-sem { grid-row: auto; grid-column: 1 / -1; text-align: left; padding-left: 40px; }
  .tabla tr.fila:has(.doc-celda) td.c-sem:empty { display: none; }
  .tabla tr.fila:has(.doc-celda) td.c-asunto, .tabla tr.fila:has(.doc-celda) td.ancho-solo { padding-left: 40px; }
  .tabla tr.fila:has(.doc-celda) td.c-resp { grid-row: auto; }
}
@media (max-width: 760px) {
  .tabla tr.fila:has(.doc-celda) td.c-resp { grid-row: 2; grid-column: 2; }
  .tabla tr.fila:has(.doc-celda) td.c-asunto { grid-row: 2; grid-column: 1; }
  .tabla tr.fila:has(.doc-celda) td.c-sem { grid-row: 3; }
}
@media (max-width: 760px) {
  .visor-cabeza { flex-wrap: wrap; row-gap: 10px; }
  .visor-cabeza .txt { flex: 1 1 calc(100% - 44px); min-width: 0; }
  .visor-cabeza .txt b { white-space: normal; }
  .visor-cabeza .boton { flex: 1; justify-content: center; }
}

/* ═══ v0.22 · Lectura del documento: la transcripción dentro de la app; sin vista previa con su ilustración (13 oct) ═══ */
.pd-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.pd-cuerpo > iframe { flex: 1; width: 100%; min-height: 60vh; border: 0; background: #525659; }
.visor-cuerpo > iframe { display: block; width: 100%; height: 640px; border: 0; background: #525659; }
.visor.plegado .visor-cuerpo { display: none; }
.visor-modal-cuerpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.visor-modal-cuerpo > iframe { flex: 1; border: 0; min-height: 70vh; }

.lectura { padding: 18px 26px 28px; font-size: 15px; line-height: 1.7; color: var(--texto); max-width: 760px; }
.visor .lectura { margin: 0 auto; max-height: 720px; overflow-y: auto; }
.lectura-aviso { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 18px; padding: 9px 13px; border-radius: 12px; background: var(--ambar-suave); color: var(--yellow-tx); font-size: 13px; font-weight: 600; line-height: 1.4; }
.lectura h4 { margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--texto); }
.lectura p { margin: 0 0 12px; text-align: left; }
.lectura-original { margin-top: 14px; }
@media (max-width: 760px) { .lectura { padding: 16px 18px 24px; font-size: 15px; } }
.vacio-ilus > .boton { margin-top: 4px; }

/* ═══ v0.23 · El editor visual y la ficha del documento (13 oct) ═══ */
.editor.wys { display: flex; flex-direction: column; border: 1.5px solid var(--linea); border-radius: var(--radio-r); background: var(--tarjeta); overflow: hidden; }
.editor.wys:focus-within { border-color: var(--acento-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 12%, transparent); }
.wys .editor-barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 6px; overflow-x: auto; scrollbar-width: none; background: var(--tarjeta-2); border-bottom: 1px solid var(--linea); }
.wys .editor-barra::-webkit-scrollbar { display: none; }
.wys .editor-barra button { flex: none; height: 30px; min-width: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--sutil); cursor: pointer; white-space: nowrap; }
.wys .editor-barra button:hover { background: var(--chipon); color: var(--texto); }
.wys .editor-barra button.activo { background: var(--acento-suave); color: var(--acento-tx); }
.wys .editor-barra .sep { flex: none; width: 1px; height: 18px; background: var(--linea); margin: 0 4px; }
.wys .editor-barra .b-plazo { color: var(--red-tx); } .wys .editor-barra .b-ojo { color: var(--yellow-tx); } .wys .editor-barra .b-nota { color: var(--acento-tx); }
.wys .editor-barra .b-estructura { margin-left: auto; background: var(--acento); color: #fff; }
.wys .editor-barra .b-estructura:hover { background: #4338ca; color: #fff; }
.wys-area { flex: 1; padding: 16px 18px; outline: none; overflow-y: auto; max-height: 56vh; font-size: 15px; line-height: 1.6; cursor: text; }
.editor.wys.vacio .wys-area::before { content: attr(data-placeholder); color: var(--tenue-2); pointer-events: none; position: absolute; }
.wys-area > :first-child { margin-top: 0; }
.wys-area td, .wys-area th { min-width: 90px; }
@media (max-width: 760px) { .wys-area { max-height: 50vh; font-size: 15px; } }

/* El texto con formato (fichas, notas, editor): avisos, tablas de datos y títulos de sección. */
.md blockquote.aviso-md, .ficha-doc blockquote.aviso-md { margin: 12px 0; padding: 10px 14px; border: 0; border-radius: 12px; font-size: 15px; }
.md blockquote.aviso-md p { margin: 0; }
.aviso-md.a-plazo { background: var(--red-bg); color: var(--red-tx); }
.aviso-md.a-ojo { background: var(--yellow-bg); color: var(--yellow-tx); }
.aviso-md.a-nota { background: var(--acento-suave); color: var(--acento-tx); }
.aviso-md.a-ok { background: var(--green-bg); color: var(--green-tx); }
.aviso-md strong { color: inherit; }
.md table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; }
.md td, .md th { padding: 8px 10px; border-bottom: 1px solid var(--linea-2); text-align: left; vertical-align: top; }
.md thead:not(:has(th:not(:empty))) { display: none; }
.md td:first-child { width: 38%; color: var(--tenue); font-weight: 500; }
.md td:last-child { font-weight: 600; }
.md h2 { font-size: 15px; font-weight: 650; color: var(--texto); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--linea-2); }

/* La ficha del documento en el visor. */
.ficha-origen { margin: 0 0 14px; font-size: 12px; color: var(--tenue); }
.ficha-origen.ia::before { content: '✦ '; color: var(--acento-tx); }
.ficha-doc > p:first-child { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--texto); margin: 0 0 12px; }
.ficha-doc ul, .ficha-doc ol { padding-left: 20px; margin: 6px 0 10px; }
.ficha-doc li { margin: 4px 0; }
.transcripcion { margin-top: 22px; border-top: 1px solid var(--linea-2); padding-top: 12px; }
.transcripcion > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--acento-tx); padding: 4px 0 10px; }

/* ═══ v0.24 · Calendario del teléfono: la cuadrícula del mes y los términos del día (13 oct) ═══ */
.calm-caja { padding: 14px 12px 12px; }
.calm { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calm-dsem { text-align: center; font-size: 12px; font-weight: 700; color: var(--tenue); padding: 2px 0 8px; }
.calm-dsem.inhabil { color: var(--tenue-2); }
.calm-dia { display: grid; justify-items: center; align-content: start; gap: 3px; height: 50px; padding: 5px 0 0; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--texto); cursor: pointer; }
.calm-dia span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.calm-dia.inhabil span { color: var(--tenue); font-weight: 500; }
.calm-dia.fuera { opacity: .3; }
.calm-dia.hoy span { background: var(--acento); color: #fff; }
.calm-dia.elegido:not(.hoy) span { background: var(--acento-suave); color: var(--acento-tx); }
.calm-dia.elegido.hoy span { box-shadow: 0 0 0 3px var(--acento-suave); }
.calm-puntos { display: flex; gap: 3px; height: 6px; }
.calm-puntos em { width: 6px; height: 6px; border-radius: 50%; background: var(--acento-2); }
.calm-puntos em.negro, .calm-puntos em.rojo { background: var(--rojo); }
.calm-puntos em.ambar { background: var(--ambar); }
.calm-puntos em.gris { background: var(--tenue-2); }
.calm-del-dia { margin-top: 20px; }
.calm-del-dia h3 { margin: 0 2px 12px; font-size: 13px; font-weight: 700; color: var(--sutil); text-transform: capitalize; }

/* ═══ v0.25 · Cifras con su ícono, y el teléfono: pestañas que caben, filtros a lo ancho, cifras en un renglón (13 oct) ═══ */
.l-corto { display: none; }
.tile, .contador { position: relative; padding-right: 62px; }

@media (max-width: 760px) {
  .l-largo { display: none; }
  .l-corto { display: inline; }

  /* Las cifras: las cinco en un renglón, con su ícono arriba. */
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 22px; }
  .tile { padding: 10px 4px 9px; justify-items: center; text-align: center; gap: 2px; border-radius: 12px; }
  
  .tile b { font-size: 17px; }
  .tile span { font-size: 11px; line-height: 1.2; }
  .tile:nth-child(4), .tile:nth-child(5) { grid-column: auto; }
  .contador { padding-right: 52px; }
  

  /* Las pestañas: todas a la vista, ícono arriba y nombre corto abajo. */
  .pestanas { display: flex; width: 100%; gap: 2px; padding: 4px; margin-bottom: 18px; overflow: visible; }
  .pestanas a { flex: 1 1 0; min-width: 0; position: relative; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 2px 7px; font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
  .pestanas a > span, .pestanas a { overflow: hidden; text-overflow: ellipsis; }
  .pestanas a svg { width: 19px; height: 19px; }
  .pestanas a b { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 17px; padding: 0 5px; line-height: 16px; font-size: 11px; background: var(--chipon); }
  .pestanas a.activo b { background: var(--acento); color: #fff; }

  /* Filtros: a lo ancho, cada opción con el mismo peso. */
  .barra-filtros { gap: 8px; margin-bottom: 18px; }
  .barra-filtros .pista { display: flex; width: 100%; }
  .barra-filtros .pista > a, .barra-filtros .pista > button { flex: 1 1 auto; justify-content: center; padding: 7px 8px; }
  .vistas, .conmutador { display: flex; }
  .vistas button, .conmutador button { flex: 1; justify-content: center; }

  /* Encabezado del calendario en un renglón y el conmutador abajo. */
  .cal-cabeza { flex-wrap: wrap; gap: 6px; }
  .cal-cabeza b { flex: 1 1 auto !important; flex-basis: auto !important; min-width: 0 !important; font-size: 17px !important; }
  .cal-cabeza .conmutador { flex-basis: 100%; margin: 6px 0 0 !important; }
}

/* ═══ v0.26 · La historia del asunto: una línea de tiempo (13 oct) ═══ */
.linea-tiempo { position: relative; margin-top: 4px; padding: 6px 0 4px; }
.linea-tiempo::before { content: ''; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(var(--linea), var(--linea)); }
.lt-mes { position: relative; margin: 18px 0 8px 66px; font-size: 15px; font-weight: 650; color: var(--texto); }
.lt-mes:first-child { margin-top: 4px; }
.lt-ev { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 8px; }
.lt-nodo { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; min-height: 48px; }
.lt-nodo > img { width: 40px; height: 40px; object-fit: contain; background: var(--fondo); border-radius: 12px; padding: 2px; }
.lt-nodo > .av { width: 30px; height: 30px; font-size: 10px; box-shadow: 0 0 0 4px var(--fondo); }
.lt-nodo > .reloj { box-shadow: 0 0 0 4px var(--fondo); }
.lt-cuerpo { min-width: 0; display: grid; gap: 3px; padding: 11px 16px 12px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); }
.lt-doc .lt-cuerpo { cursor: pointer; transition: border-color .15s; }
.lt-doc:hover .lt-cuerpo, .lt-doc:focus-visible .lt-cuerpo { border-color: var(--acento-2); }
.lt-doc.activo .lt-cuerpo { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.lt-fecha { font-size: 12px; font-weight: 700; color: var(--tenue); }
.lt-cuerpo b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.lt-cuerpo b.lt-normal { font-weight: 500; color: var(--sutil); }
.lt-sub { font-size: 12px; color: var(--tenue); }
.lt-plazo { font-style: normal; font-weight: 700; color: var(--rojo); }
.lt-etapa .lt-cuerpo { background: var(--acento-suave); border-color: transparent; }
.lt-etapa .lt-cuerpo b { font-weight: 700; }
.lt-nota .lt-cuerpo { background: none; border-style: dashed; }
.lt-termino .lt-cuerpo { border-style: dashed; }
.lt-hoy { position: relative; display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; }
.lt-hoy::before { content: ''; position: relative; z-index: 1; width: 14px; height: 14px; margin-left: 21px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 5px var(--acento-suave); }
.lt-hoy::after { content: ""; order: 2; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acento), transparent); }
.lt-hoy span { order: 1; font-size: 12px; font-weight: 800; color: var(--acento-tx); white-space: nowrap; }
@media (max-width: 760px) {
  .linea-tiempo::before { left: 21px; }
  .lt-ev { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .lt-nodo { width: 44px; }
  .lt-nodo > img { width: 34px; height: 34px; }
  .lt-nodo > .reloj.chico { width: 44px; min-height: 44px; }
  .lt-mes { margin-left: 52px; }
  .lt-hoy::before { margin-left: 15px; }
  .lt-cuerpo { padding: 10px 13px 11px; }
}

/* ═══ v0.27 · Corroborar término (13 oct) ═══ */
.corr-ilus { width: 56px; height: 56px; object-fit: contain; align-self: center; }
.corr-letrero { display: flex; gap: 8px; align-items: baseline; margin: -6px 0 22px; padding: 11px 16px; border-radius: var(--radio-r); background: var(--yellow-bg); color: var(--yellow-tx); font-size: 13px; line-height: 1.45; }
.corr-letrero::before { content: '⚖'; }
.corr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .corr { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); } .corr-resultado { position: sticky; top: 20px; } }
.corr-form { display: grid; gap: 14px; }
.corr-desde { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--radio-r); background: var(--acento-suave); }
.corr-desde span { font-size: 12px; font-weight: 650; color: var(--acento-tx); }
.corr-desde b { font-size: 15px; }
.corr-desde small { font-size: 13px; color: var(--sutil); }
.corr-paso { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.corr-paso.apagado { opacity: .55; }
.corr-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 800; font-size: 15px; }
.corr-cuerpo { min-width: 0; }
.corr-cuerpo h3 { margin: 4px 0 14px; font-size: 15px; font-weight: 700; }
.corr-materias { margin-bottom: 12px; }
.corr-materias button { gap: 7px; }
.corr-plazos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.corr-plazo { display: grid; gap: 3px; text-align: left; padding: 11px 13px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.corr-plazo b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.corr-plazo span { font-size: 12px; color: var(--tenue); }
.corr-plazo:hover { border-color: var(--acento-2); }
.corr-plazo.activo { border-color: var(--acento); background: var(--acento-suave); }
.corr-plazo.activo b { color: var(--acento-tx); }
.corr-notifs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.corr-notif { padding: 9px 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font: inherit; font-size: 13px; font-weight: 600; color: var(--sutil); cursor: pointer; }
.corr-notif:hover { border-color: var(--acento-2); }
.corr-notif.activo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-tx); }
.corr-fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.corr-fechas .campo { display: grid; gap: 6px; margin: 0; }
.corr-fechas .campo span { font-size: 13px; font-weight: 600; color: var(--sutil); }
.corr-regla { margin: 12px 0 0; font-size: 13px; color: var(--tenue); line-height: 1.5; }

.corr-resultado { display: grid; gap: 12px; padding: 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.corr-resultado > .vacio-ilus { border: 0; padding: 24px 8px; margin: 0; }
.corr-vence { display: grid; gap: 2px; padding: 18px 20px; border-radius: 18px; background: var(--acento-suave); color: var(--acento-tx); }
.corr-vence span { font-size: 12px; font-weight: 650; opacity: .8; }
.corr-vence b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.corr-vence small { font-size: 13px; font-weight: 600; opacity: .85; }
.corr-vence.rojo { background: var(--red-bg); color: var(--red-tx); }
.corr-vence.negro { background: var(--rojo); color: #fff; }
.corr-vence.ambar { background: var(--yellow-bg); color: var(--yellow-tx); }
.corr-compara { padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.corr-compara.ok { background: var(--green-bg); color: var(--green-tx); }
.corr-compara.difiere { background: var(--red-bg); color: var(--red-tx); }
.corr-ruta { list-style: none; margin: 4px 0 0; padding: 0 0 0 22px; position: relative; }
.corr-ruta::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); border-radius: 2px; }
.corr-ruta li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 6px; }
.corr-ruta li::before { content: ''; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--tarjeta); border: 2.5px solid var(--acento-2); }
.corr-ruta .ruta-fecha { font-size: 12px; font-weight: 700; color: var(--tenue); }
.corr-ruta b { font-size: 15px; font-weight: 600; }
.corr-ruta small { font-size: 13px; color: var(--tenue); line-height: 1.45; }
.corr-ruta .ruta-saltos::before { border-style: dashed; border-color: var(--tenue-2); }
.corr-ruta .ruta-saltos b { font-weight: 500; color: var(--sutil); font-size: 13px; }
.corr-ruta .ruta-vence { padding-bottom: 0; }
.corr-ruta .ruta-vence::before { background: var(--acento); border-color: var(--acento); }
.corr-ruta .ruta-vence b { color: var(--acento-tx); font-weight: 800; }
.corr-margen, .corr-aviso { margin: 0; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.corr-nota { margin: 0; font-size: 13px; color: var(--sutil); line-height: 1.5; }
.corr-cita { margin: 0; padding: 12px 14px; border-left: 3px solid var(--acento-2); background: var(--tarjeta-2); border-radius: 0 12px 12px 0; font-size: 13px; line-height: 1.55; color: var(--sutil); font-style: italic; }
.corr-cita span { display: block; margin-bottom: 4px; font-style: normal; font-size: 12px; font-weight: 650; color: var(--acento-tx); }
@media (max-width: 760px) {
  .corr-paso { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .corr-num { width: 26px; height: 26px; font-size: 13px; }
  .corr-plazos { grid-template-columns: 1fr; }
  .corr-materias button { flex: 1; justify-content: center; }
  .corr-vence b { font-size: 22px; }
  .corr-resultado { padding: 16px; }
}
.corr-cuerpo h3 { display: flex; align-items: center; gap: 10px; }
.corr-cambiar { display: none; margin-left: auto; padding: 4px 12px; border: 1px solid var(--linea); border-radius: 999px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--acento-tx); cursor: pointer; }
@media (max-width: 760px) {
  .corr-letrero { display: block; }
  .corr-paso { position: relative; display: block; }
  .corr-num { position: absolute; top: 16px; left: 16px; }
  .corr-cuerpo h3 { padding-left: 36px; min-height: 26px; margin-top: 0; }
  .corr-cambiar { display: inline-flex; }
  .con-eleccion .corr-plazo:not(.activo), .con-eleccion .corr-materias { display: none; }
  .corr-resultado { scroll-margin-top: 12px; }
  #corr-paso2 { scroll-margin-top: 12px; }
}

/* ═══ v0.28 · El cómputo sobre el calendario, y Corroborar término en el teléfono (13 oct) ═══ */
.corr-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px 18px; padding: 14px; border: 1px solid var(--linea-2); border-radius: 18px; background: var(--tarjeta-2); }
.cc-mes h4 { margin: 0 0 8px 2px; font-size: 13px; font-weight: 800; text-transform: capitalize; color: var(--texto); }
.cc-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cc-rejilla > span { text-align: center; font-size: 11px; font-weight: 800; color: var(--tenue-2); padding-bottom: 3px; }
.cc-dia { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 30px; border-radius: 8px; font-variant-numeric: tabular-nums; color: var(--sutil); }
.cc-dia b { font-size: 13px; font-weight: 600; line-height: 1; }
.cc-dia small { position: absolute; top: 2px; right: 3px; font-size: 11px; font-weight: 800; color: var(--acento-tx); opacity: .75; }
.cc-dia em { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.cc-finde { color: var(--tenue-2); }
.cc-festivo { color: var(--tenue); background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--tenue-2) 35%, transparent) 4px 5px); }
.cc-saltado { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rojo) 55%, transparent); color: var(--red-tx); }
.cc-cuenta { background: var(--acento-suave); color: var(--acento-tx); }
.cc-cuenta b { font-weight: 700; }
.cc-aviso { box-shadow: inset 0 0 0 2px var(--tenue-2); }
.cc-notif { background: var(--orange-bg); color: var(--orange-tx); box-shadow: inset 0 0 0 2px var(--orange-solido); }
.cc-surte { background: var(--purple-bg); color: var(--purple-tx); box-shadow: inset 0 0 0 2px var(--purple-solido); }
.cc-vence { background: var(--acento); color: #fff; box-shadow: 0 6px 14px -6px rgb(79 70 229 / .6); }
.cc-vence b { font-weight: 800; }
.cc-margen:not(.cc-vence) { box-shadow: inset 0 0 0 2px var(--green-solido); border-style: dashed; color: var(--green-tx); }
.cc-hoy b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cc-dia.cc-notif em, .cc-dia.cc-surte em, .cc-dia.cc-aviso em, .cc-dia.cc-margen em { color: inherit; }
.cc-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 4px; font-size: 12px; color: var(--sutil); }
.cc-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cc-leyenda i { width: 12px; height: 12px; border-radius: 4px; }
.cc-l-notif { background: var(--orange-bg); box-shadow: inset 0 0 0 2px var(--orange-solido); }
.cc-l-surte { background: var(--purple-bg); box-shadow: inset 0 0 0 2px var(--purple-solido); }
.cc-l-cuenta { background: var(--acento-suave); }
.cc-l-festivo { background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--tenue-2) 45%, transparent) 3px 4px); box-shadow: inset 0 0 0 1px var(--linea); }
.cc-l-vence { background: var(--acento); }
.cc-l-margen { box-shadow: inset 0 0 0 2px var(--green-solido); }
.corr-pasos > summary { cursor: pointer; padding: 4px 2px; font-size: 13px; font-weight: 700; color: var(--acento-tx); list-style: none; }
.corr-pasos > summary::-webkit-details-marker { display: none; }
.corr-pasos > summary::after { content: ' ▾'; }
.corr-pasos[open] > summary::after { content: ' ▴'; }
.corr-pasos[open] > summary { margin-bottom: 10px; }

@media (max-width: 760px) {
  .corr-cal { grid-template-columns: 1fr; padding: 12px 10px; gap: 16px; }
  .cc-rejilla { gap: 4px; }
  .cc-dia { min-height: 40px; border-radius: 12px; }
  .cc-dia b { font-size: 15px; }
  .cc-dia small { font-size: 11px; }
  .cc-dia em { font-size: 11px; bottom: 2px; }
  .cc-mes h4 { font-size: 15px; margin-bottom: 10px; }
  .corr-resultado { gap: 14px; border-radius: 18px; }
  .corr-vence { padding: 18px; border-radius: 18px; }
  .corr-vence b { font-size: 22px; }
  .corr-letrero { margin-bottom: 16px; }
  .corr-desde { border-radius: 18px; }
  .corr-notifs { display: grid; grid-template-columns: 1fr; }
  .corr-notif { text-align: left; padding: 12px 14px; }
  .corr-fechas .campo input { font-size: 16px; }
  .corr-cita { font-size: 13px; }
}
@media (min-width: 761px) { .cc-dia { aspect-ratio: auto; height: 32px; min-height: 0; } .cc-dia em { display: none; } .corr-cal { padding: 14px 12px; } }

/* ═══ v0.30 · Ligas del equipo: sobrias, como una tabla de clasificación (14 oct) ═══ */
:root { --oro: #B8901E; --plata: #8C939E; --bronce: #A86A3D; }
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; margin: 0 0 24px; }
.podio-lugar { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 16px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); text-align: center; overflow: hidden; }
.podio-lugar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--linea); }
.podio-lugar.l-oro { padding-top: 30px; padding-bottom: 24px; }
.podio-lugar.l-oro::before { background: var(--oro); } .podio-lugar.l-plata::before { background: var(--plata); } .podio-lugar.l-bronce::before { background: var(--bronce); }
.podio-pos { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--tenue); }
.l-oro .podio-pos { color: var(--oro); } .l-plata .podio-pos { color: var(--plata); } .l-bronce .podio-pos { color: var(--bronce); }
.podio-lugar .av.grande { width: 52px; height: 52px; font-size: 17px; }
.l-oro .av.grande { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 5px var(--oro); }
.podio-nombre { font-size: 15px; font-weight: 700; }
.podio-pts { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.l-oro .podio-pts { font-size: 28px; }
.podio-pts small { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--tenue); letter-spacing: 0; }
.podio-res { font-size: 12px; color: var(--sutil); line-height: 1.4; }
.podio-lugar.yo { border-color: var(--acento-2); }

.liga-tuya { margin: 0 0 24px; padding: 16px 20px; background: var(--acento-suave); border-radius: var(--radio); }
.liga-tuya h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; color: var(--acento-tx); }
.liga-tuya-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.liga-tuya-datos div { display: grid; gap: 2px; padding: 10px 12px; background: var(--tarjeta); border-radius: 12px; }
.liga-tuya-datos b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.liga-tuya-datos span { font-size: 12px; color: var(--sutil); }
.liga-tuya p { margin: 10px 0 0; font-size: 12px; color: var(--sutil); }

.clasificacion h3 { margin: 0 0 12px 2px; font-size: 15px; font-weight: 650; color: var(--texto); }
.tabla-liga th.num, .tabla-liga td.num { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.tabla-liga td.pos { width: 1%; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tenue); }
.tabla-liga td.pos small { margin-left: 2px; font-weight: 700; color: var(--tenue-2); }
.tabla-liga tr.p-oro td.pos { color: var(--oro); } .tabla-liga tr.p-plata td.pos { color: var(--plata); } .tabla-liga tr.p-bronce td.pos { color: var(--bronce); }
.tabla-liga td.quien { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tabla-liga td.quien .av { width: 28px; height: 28px; font-size: 10px; }
.tabla-liga td.pts { font-size: 15px; font-weight: 800; }
.tabla-liga th.priv, .tabla-liga td.priv { color: var(--tenue); background: var(--tarjeta-2); }
.tabla-liga tr.yo td { background: var(--acento-suave); }
.liga-nota { margin: 8px 2px 0; font-size: 12px; color: var(--tenue); }
.liga-reglas { margin-top: 20px; padding: 14px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); }
.liga-reglas summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--acento-tx); }
.liga-reglas p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--sutil); }

@media (max-width: 760px) {
  .podio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .podio-lugar { padding: 16px 6px 14px; gap: 4px; }
  .podio-lugar.l-oro { padding-top: 22px; }
  .podio-lugar .av.grande { width: 40px; height: 40px; font-size: 13px; }
  .l-oro .av.grande { width: 48px; height: 48px; font-size: 15px; }
  .podio-nombre { font-size: 13px; }
  .podio-pts { font-size: 22px; } .l-oro .podio-pts { font-size: 28px; }
  .podio-res { display: none; }
  .tabla-liga tr.fila, .tabla-liga tbody tr { display: table-row; }
  .tabla-liga th, .tabla-liga td { padding: 10px 8px; }
  .tabla-liga th.priv, .tabla-liga td.priv { display: none; }
}
.podio-caras { display: flex; justify-content: center; }
.podio-caras .av + .av { margin-left: -10px; box-shadow: 0 0 0 3px var(--tarjeta); }
@media (max-width: 760px) {
  .tabla.tabla-liga { display: table; width: 100%; }
  .tabla.tabla-liga thead { display: table-header-group; }
  .tabla.tabla-liga tbody { display: table-row-group; }
  .tabla.tabla-liga tr { display: table-row; width: auto; }
  .tabla.tabla-liga td, .tabla.tabla-liga th { display: table-cell; width: auto; padding: 11px 6px; }
  .tabla.tabla-liga th { font-size: 11px; letter-spacing: .04em; }
  .tabla.tabla-liga td.quien { display: flex; padding-left: 4px; }
  .tabla.tabla-liga td.quien span { font-size: 13px; }
  .tabla.tabla-liga th.priv, .tabla.tabla-liga td.priv { display: none; }
  .tabla.tabla-liga td.pos { padding-left: 12px; }
  .tabla.tabla-liga td.pts { padding-right: 12px; font-size: 15px; }
}
@media (max-width: 760px) { .liga-nota { display: none; } }

/* ═══ v0.31 · Formación: novedades, Academia, quiz, actividades, artículos y políticas (14 oct) ═══ */
.icono-seccion { width: 56px; height: 56px; object-fit: contain; align-self: center; }
.seccion-titulo { margin: 28px 2px 12px; font-size: 15px; font-weight: 650; color: var(--texto); }
.nd-cat { display: inline-flex; font-size: 12px; font-weight: 650; }
.nd-cat.c-red { color: var(--red-tx); } .nd-cat.c-blue { color: var(--blue-tx); } .nd-cat.c-green { color: var(--green-tx); } .nd-cat.c-purple { color: var(--purple-tx); }
.barra-avance { display: inline-block; width: 100%; height: 6px; border-radius: 999px; background: var(--chipon); overflow: hidden; }
.barra-avance i { display: block; height: 100%; border-radius: 999px; background: var(--acento); transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* Novedad en Mi día. */
.novedad-dia { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; padding: 14px 20px 14px 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); transition: border-color .15s, transform .2s; }
.novedad-dia:hover { border-color: var(--acento-2); transform: translateY(-1px); }
.nd-ilus { width: 56px; height: 56px; object-fit: contain; flex: none; }
.nd-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nd-texto b { font-size: 15px; }
.nd-texto p { margin: 0; font-size: 13px; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-mas { flex: none; font-size: 13px; font-weight: 700; color: var(--acento-tx); }
.novedades { display: grid; gap: 10px; }
.novedad { padding: 16px 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.novedad.sin-leer { border-left: 3px solid var(--acento); }
.novedad.abierta { border-color: var(--acento-2); }
.nov-cabeza { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nov-cabeza small { color: var(--tenue); font-size: 12px; }
.novedad h3 { margin: 0 0 6px; font-size: 15px; }
.novedad p { margin: 0; font-size: 13px; color: var(--sutil); }
.nov-acciones { display: flex; gap: 14px; margin-top: 12px; }

/* Academia: catálogo. */
.academia-hero { display: flex; align-items: center; gap: 28px; padding: 28px 32px; margin-bottom: 8px; border-radius: 18px; background: linear-gradient(110deg, var(--acento-suave), color-mix(in srgb, var(--purple-bg) 90%, var(--tarjeta))); }
.ah-ilus { width: 130px; height: 130px; object-fit: contain; flex: none; }
.ah-marca { font-size: 12px; font-weight: 650; color: var(--acento-tx); }
.academia-hero h1 { margin: 4px 0 8px; font-size: 28px; }
.academia-hero p { margin: 0 0 16px; color: var(--sutil); max-width: 560px; line-height: 1.5; }
.ah-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.curso-tarjeta { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: transform .2s, border-color .15s, box-shadow .2s; }
.curso-tarjeta:hover { transform: translateY(-3px); border-color: var(--linea-h); box-shadow: 0 14px 30px -18px rgb(15 23 42 / .35); }
.ct-portada { position: relative; display: grid; place-items: center; height: 150px; }
.ct-portada img { width: 110px; height: 110px; object-fit: contain; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.curso-tarjeta:hover .ct-portada img { transform: scale(1.06) rotate(-2deg); }
.ct-borrador { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--tarjeta); font-size: 12px; font-weight: 700; color: var(--sutil); }
.ct-cuerpo { display: grid; gap: 8px; padding: 16px 18px 18px; flex: 1; align-content: start; }
.ct-cuerpo b { font-size: 15px; line-height: 1.3; }
.ct-cuerpo p { margin: 0; font-size: 13px; color: var(--sutil); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ct-chips, .ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chips span { padding: 2px 9px; border-radius: 999px; background: var(--chipon); font-size: 12px; font-weight: 600; color: var(--sutil); }
.ct-avance { display: grid; gap: 4px; margin-top: 4px; }
.ct-avance small { font-size: 12px; color: var(--tenue); }

/* Curso: banda de color con su ilustración, y el temario a la derecha. */
.curso-hero { margin: -28px -36px 24px; padding: 30px 36px; background: var(--cf); }
.ch-dentro { display: flex; align-items: center; gap: 24px; }
.ch-texto { flex: 1; min-width: 0; }
.curso-hero h1 { font-size: 28px; margin: 4px 0 8px; color: var(--ct); }
.curso-hero p { margin: 0 0 14px; max-width: 640px; color: var(--sutil); line-height: 1.5; }
.ch-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--tarjeta) 75%, transparent); font-size: 12px; font-weight: 600; color: var(--sutil); }
.ch-chips span svg { width: 13px; height: 13px; }
.ch-chips.claro span { background: var(--chipon); }
.ch-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.ch-avance { display: grid; gap: 4px; width: 180px; }
.ch-avance small { font-size: 12px; color: var(--sutil); }
.ch-ilus { width: 170px; height: 170px; object-fit: contain; flex: none; }
.curso-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.cc-main { display: grid; gap: 16px; }
.caja-aprender { padding: 16px 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.caja-aprender h3 { margin: 0; font-size: 15px; }
.caja-aprender > span { font-size: 13px; color: var(--tenue); }
.caja-aprender ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.caja-aprender li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.caja-aprender li::before { content: '›'; position: absolute; left: 4px; color: var(--acento-tx); font-weight: 800; }
.quiz-tarjeta { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.qt-ilus { width: 64px; height: 64px; object-fit: contain; flex: none; }
.quiz-tarjeta > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.quiz-tarjeta h3 { margin: 0; font-size: 15px; }
.quiz-tarjeta p { margin: 0; font-size: 13px; color: var(--sutil); }
.quiz-tarjeta small { font-size: 12px; color: var(--tenue); }
.cc-temario { position: sticky; top: 20px; padding: 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.cc-temario h4 { margin: 0 0 10px; font-size: 13px; }
.tm-modulo { display: grid; gap: 2px; margin-bottom: 12px; }
.tm-modulo > span { margin: 4px 6px 4px; font-size: 12px; font-weight: 650; color: var(--tenue); }
.tm-modulo a { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 12px; font-size: 13px; color: var(--sutil); }
.tm-modulo a:hover { background: var(--tarjeta-2); color: var(--texto); }
.tm-modulo a.actual { background: var(--acento-suave); color: var(--acento-tx); font-weight: 600; }
.tm-modulo a i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linea-h); }
.tm-modulo a.vista i { background: var(--verde); border-color: var(--verde); color: #fff; }
.tm-modulo a i svg { width: 11px; height: 11px; stroke-width: 3; }
.tm-modulo a small { font-size: 12px; color: var(--tenue); }
.tm-volver { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--acento-tx); }

/* Lección. */
.leccion { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; max-width: 1180px; }
.lc-main { min-width: 0; max-width: 760px; }
.lc-main h1 { font-size: 28px; margin: 4px 0 12px; }
.lc-main .caja-aprender { margin: 18px 0; }
.lc-video { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--radio-r); background: var(--cf); color: var(--ct); }
.lc-video svg { width: 30px; height: 30px; }
.lc-video span { display: grid; } .lc-video small { color: var(--sutil); }
.lc-cuerpo { font-size: 15px; line-height: 1.75; }
.lc-cuerpo h2 { margin-top: 30px; }
.lc-pie { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 10px; padding-top: 20px; border-top: 1px solid var(--linea); }

/* Quiz. */
.quiz { text-align: left; }
.qz-ilus { width: 96px; height: 96px; object-fit: contain; display: block; margin-bottom: 8px; }
.qz-reglas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 22px; font-size: 13px; color: var(--sutil); }
.qz-reglas span { display: inline-flex; gap: 6px; align-items: center; } .qz-reglas svg { width: 15px; height: 15px; }
.boton.grande { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
.qz-arriba { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--tenue); }
.qz-segmentos { display: flex; gap: 4px; margin: 10px 0 18px; }
.qz-segmentos i { flex: 1; height: 5px; border-radius: 999px; background: var(--chipon); transition: background .3s; }
.qz-segmentos i.hecha { background: var(--acento-2); } .qz-segmentos i.actual { background: var(--acento); }
.qz-reloj { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px 10px; padding: 12px 16px; border-radius: 12px; background: var(--acento-suave); color: var(--acento-tx); }
.qz-reloj #qz-seg { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.qz-reloj small { font-weight: 600; }
.qz-tiempo { align-self: center; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 20%, transparent); overflow: hidden; }
.qz-tiempo i { display: block; width: 100%; height: 100%; background: var(--acento); transition: width 1s linear; }
.qz-reloj.apurado { background: var(--red-bg); color: var(--red-tx); animation: latido 1s ease-in-out infinite; }
.qz-reloj.apurado .qz-tiempo i { background: var(--rojo); }
@keyframes latido { 50% { transform: scale(1.015); } }
.qz-enunciado { margin: 22px 0 16px; font-size: 17px; line-height: 1.4; }
.qz-opciones { display: grid; gap: 10px; }
.qz-opcion { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font: inherit; font-size: 15px; color: var(--texto); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.qz-opcion:hover { border-color: var(--acento-2); transform: translateX(2px); }
.qz-opcion b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--chipon); color: var(--sutil); font-size: 13px; }
.qz-opcion.elegida { border-color: var(--acento); background: var(--acento-suave); }
.qz-opcion.elegida b { background: var(--acento); color: #fff; }
.qz-pie { display: flex; justify-content: flex-end; margin-top: 20px; }
.qz-resultado { display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: 18px; background: var(--red-bg); }
.qz-resultado.aprobado { background: var(--green-bg); }
.qz-resultado h1 { margin: 0 0 4px; }
.qz-resultado p { margin: 0; color: var(--sutil); }
.qz-anillo { --p: 0; display: grid; place-items: center; width: 104px; height: 104px; flex: none; border-radius: 50%; background: conic-gradient(var(--acento) calc(var(--p) * 1%), var(--tarjeta) 0); animation: anillo 1s cubic-bezier(.2, .8, .2, 1) both; }
.qz-anillo b { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--tarjeta); font-size: 22px; font-weight: 800; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes anillo { from { --p: 0; } }
.qz-repaso { padding: 14px 18px; margin-bottom: 10px; background: var(--tarjeta); border: 1px solid var(--linea); border-left: 3px solid var(--verde); border-radius: 12px; }
.qz-repaso.mal { border-left-color: var(--rojo); }
.qz-marca { font-size: 12px; font-weight: 650; color: var(--green-tx); }
.qz-repaso.mal .qz-marca { color: var(--red-tx); }
.qz-repaso > b { display: block; margin: 4px 0 8px; font-size: 15px; }
.qz-repaso ul { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--sutil); }
.qz-repaso li.correcta { color: var(--green-tx); font-weight: 600; }
.qz-repaso li.tuya { color: var(--red-tx); }
.qz-repaso p { margin: 0 0 4px; font-size: 13px; }
.qz-repaso small { font-size: 12px; color: var(--tenue); }

/* Actividades. */
.actividades { display: grid; gap: 8px; }
.actividad-tarjeta { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); transition: border-color .15s, transform .2s; }
.actividad-tarjeta:hover { border-color: var(--acento-2); transform: translateY(-1px); }
.at-limite { display: grid; justify-items: center; width: 58px; padding: 8px 4px; border-radius: 12px; background: var(--acento-suave); color: var(--acento-tx); line-height: 1; }
.at-limite b { font-size: 22px; font-weight: 800; } .at-limite span { font-size: 12px; font-weight: 700; margin-top: 3px; }
.at-limite.rojo { background: var(--red-bg); color: var(--red-tx); } .at-limite.negro { background: var(--rojo); color: #fff; } .at-limite.ambar { background: var(--yellow-bg); color: var(--yellow-tx); } .at-limite.hecha { background: var(--green-bg); color: var(--green-tx); }
.at-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.at-texto b { font-size: 15px; } .at-texto span { font-size: 13px; color: var(--tenue); }
.at-lado { display: grid; justify-items: end; gap: 4px; }
.at-lado small { font-size: 12px; font-weight: 600; }
.texto-rojo, .texto-negro { color: var(--rojo); } .texto-ambar { color: var(--ambar); } .texto-verde { color: var(--verde); }
.limite-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 18px 22px; border-radius: 18px; background: var(--acento-suave); color: var(--acento-tx); }
.limite-tarjeta span { display: block; font-size: 12px; font-weight: 650; opacity: .8; }
.limite-tarjeta b { font-size: 22px; font-weight: 800; }
.limite-tarjeta em { font-style: normal; font-size: 15px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--tarjeta); }
.limite-tarjeta.rojo { background: var(--red-bg); color: var(--red-tx); } .limite-tarjeta.negro { background: var(--rojo); color: #fff; } .limite-tarjeta.negro em { color: var(--rojo); }
.limite-tarjeta.ambar { background: var(--yellow-bg); color: var(--yellow-tx); } .limite-tarjeta.hecha { background: var(--green-bg); color: var(--green-tx); }
.instrucciones { padding: 18px 22px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.caja-entrega { margin-top: 18px; padding: 18px 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.caja-entrega h3 { margin: 0 0 12px; font-size: 15px; }
#form-entrega { display: grid; gap: 12px; }
#form-entrega.reemplazo { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linea); }
.zona-archivo { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px; border: 2px dashed var(--linea-h); border-radius: 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.zona-archivo:hover { border-color: var(--acento-2); background: var(--acento-suave); }
.zona-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.za-ilus { width: 56px; height: 56px; object-fit: contain; }
.zona-archivo span { font-size: 13px; color: var(--tenue); }
.za-nombre { font-style: normal; font-weight: 700; color: var(--acento-tx); }
.entrega { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--green-bg); }
.entrega.tarde { background: var(--orange-bg); }
.en-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.en-texto span { font-size: 13px; color: var(--sutil); }
.en-texto em { font-style: normal; font-weight: 700; }
.en-texto p { margin: 4px 0 0; font-size: 13px; }
.revision { display: flex; gap: 16px; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--acento-suave); }
.rv-cal { display: grid; place-items: center; width: 70px; height: 70px; flex: none; border-radius: 50%; background: var(--tarjeta); }
.rv-cal b { font-size: 22px; font-weight: 800; line-height: 1; } .rv-cal span { font-size: 11px; color: var(--tenue); margin-top: -14px; }

/* Artículos: como revista. */
.buscar { max-width: 320px; }
.articulo-destacado { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; margin-bottom: 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.articulo-destacado:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgb(15 23 42 / .35); }
.ad-portada { display: grid; place-items: center; min-height: 240px; background: linear-gradient(135deg, var(--acento-suave), color-mix(in srgb, var(--green-bg) 80%, var(--tarjeta))); }
.ad-portada img { width: 170px; height: 170px; object-fit: contain; }
.ad-texto { padding: 28px 30px; display: grid; gap: 10px; align-content: center; }
.ad-texto h2 { margin: 0; font-size: 28px; line-height: 1.2; }
.ad-texto p { margin: 0; color: var(--sutil); line-height: 1.55; }
.ad-texto small, .articulo-tarjeta small { color: var(--tenue); font-size: 12px; }
.art-cat { font-size: 12px; font-weight: 650; color: var(--acento-tx); }
.articulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.articulo-tarjeta { display: grid; gap: 6px; align-content: start; padding: 0 0 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: transform .2s; }
.articulo-tarjeta:hover { transform: translateY(-2px); }
.art-portada { display: grid; place-items: center; height: 130px; margin-bottom: 6px; background: var(--tarjeta-2); }
.art-portada img { width: 90px; height: 90px; object-fit: contain; }
.articulo-tarjeta > :not(.art-portada) { padding: 0 16px; }
.articulo-tarjeta b { font-size: 15px; line-height: 1.3; }
.articulo-tarjeta p { margin: 0; font-size: 13px; color: var(--sutil); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lectura-articulo { max-width: 740px; margin: 0 auto; }
.la-portada { display: grid; place-items: center; height: 200px; margin: 6px 0 20px; border-radius: 18px; background: linear-gradient(135deg, var(--acento-suave), color-mix(in srgb, var(--green-bg) 80%, var(--tarjeta))); }
.la-portada img { width: 150px; height: 150px; object-fit: contain; }
.lectura-articulo h1 { margin: 6px 0 10px; font-size: 28px; line-height: 1.15; }
.la-resumen { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--sutil); }
.la-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--tenue); }
.la-meta .av { width: 26px; height: 26px; font-size: 9px; }
.la-cuerpo { font-size: 15px; line-height: 1.8; }

/* Políticas. */
.politicas { display: grid; gap: 10px; }
.politica-tarjeta { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); transition: border-color .15s; }
.politica-tarjeta:hover { border-color: var(--acento-2); }
.pt-ilus { width: 48px; height: 48px; object-fit: contain; }
.pt-texto { flex: 1; min-width: 0; display: grid; gap: 3px; } .pt-texto span { font-size: 13px; color: var(--tenue); }
.pt-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ambar); }
.politica-tarjeta.leida .pt-estado { color: var(--verde); } .pt-estado svg { width: 14px; height: 14px; }
.politica .la-cuerpo { padding: 22px 26px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.leido-caja { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 16px 20px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--acento-2); box-shadow: 0 16px 34px -22px rgb(79 70 229 / .6); }
.leido-caja p { flex: 1; margin: 0; font-size: 13px; color: var(--sutil); }
.leido-ok { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 18px; border-radius: 18px; background: var(--green-bg); color: var(--green-tx); font-weight: 600; }
.leido-ok svg { width: 18px; height: 18px; }
.lecturas { display: flex; flex-wrap: wrap; gap: 8px; }
.lecturas > span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--tarjeta-2); font-size: 13px; font-weight: 600; }
.lecturas > span.no { opacity: .6; } .lecturas small { font-weight: 500; color: var(--tenue); }
.lecturas .av { width: 24px; height: 24px; font-size: 9px; }

@media (max-width: 1000px) { .curso-cuerpo, .leccion { grid-template-columns: 1fr; } .cc-temario { position: static; } .lc-temario { order: -1; } }
@media (max-width: 760px) {
  .academia-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; }
  .ah-ilus { width: 84px; height: 84px; }
  .academia-hero h1 { font-size: 22px; }
  .curso-hero { margin: -12px -14px 18px; padding: 22px 18px; }
  .ch-dentro { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .ch-ilus { width: 90px; height: 90px; }
  .curso-hero h1, .lc-main h1 { font-size: 22px; }
  .quiz-tarjeta { flex-wrap: wrap; } .quiz-tarjeta .boton { width: 100%; }
  .qz-enunciado { font-size: 17px; }
  .articulo-destacado { grid-template-columns: 1fr; } .ad-portada { min-height: 160px; } .ad-texto { padding: 18px 20px; } .ad-texto h2 { font-size: 22px; }
  .lectura-articulo h1 { font-size: 28px; }
  .limite-tarjeta { flex-direction: column; align-items: flex-start; } .limite-tarjeta b { font-size: 17px; }
  .entrega { flex-wrap: wrap; }
  .leido-caja { flex-direction: column; align-items: stretch; } .leido-caja .boton { width: 100%; }
  .actividad-tarjeta { flex-wrap: wrap; } .at-lado { justify-items: start; width: 100%; padding-left: 74px; }
  .lc-temario .tm-modulo { max-height: 200px; overflow-y: auto; }
}

/* ═══ Movimiento: sólo al abrir hojas y ventanas. Las pantallas aparecen de inmediato,
   sin animaciones de entrada que dejen huecos al bajar (fase 2). ═══ */
@media (prefers-reduced-motion: no-preference) {
  .modal-caja { animation: ventana .18s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes ventana { from { opacity: 0; transform: translateY(8px) scale(.985); } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.lc-cuerpo h2, .la-cuerpo h2, .novedad .md h2, .instrucciones h2 { margin: 30px 0 10px; padding: 0; border: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--texto); }
.lc-cuerpo h2::before, .la-cuerpo h2::before { display: none; }

/* v0.31 · teléfono: la tabla de entregas del equipo se vuelve tarjetas y la política deja respirar su título */
.te-cal-txt { display: none; }
@media (max-width: 760px) {
  .tabla-liga.tabla-equipo thead { display: none; }
  .tabla-liga.tabla-equipo, .tabla-liga.tabla-equipo tbody { display: block; }
  .tabla-liga.tabla-equipo tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
  .tabla-liga.tabla-equipo tr:last-child { border-bottom: 0; }
  .tabla-liga.tabla-equipo td { display: block; padding: 0 !important; border: 0 !important; text-align: left; }
  .tabla-liga.tabla-equipo td.te-hora { grid-column: 1; font-size: 13px; color: var(--sutil); }
  .tabla-liga.tabla-equipo td.te-hora:empty, .tabla-liga.tabla-equipo td.te-cal:empty, .tabla-liga.tabla-equipo td.te-acc:empty { display: none; }
  .tabla-liga.tabla-equipo td.te-cal { grid-column: 2; text-align: right; font-size: 13px; font-weight: 700; }
  .tabla-liga.tabla-equipo .te-cal-txt { display: inline; font-weight: 500; color: var(--sutil); }
  .tabla-liga.tabla-equipo td.te-acc { grid-column: 1 / -1; display: flex; gap: 8px; }
  .politica-tarjeta { flex-wrap: wrap; }
  .politica-tarjeta .pt-texto { flex: 1 1 0; min-width: 0; }
  .politica-tarjeta .pt-estado { flex-basis: 100%; padding-left: 62px; }
}

/* ═══ v0.32 · Atrás en todas las páginas de detalle, e historial de novedades (14 oct) ═══ */
.migas:has(.volver) { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 18px; }
.volver { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px 0 9px; margin: 0 12px 0 0; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, color .15s, background .15s; }
.volver::after { content: ''; position: absolute; right: -11px; top: 8px; bottom: 8px; width: 1px; background: var(--linea); }
.volver svg { width: 17px; height: 17px; stroke-width: 2.3; color: var(--acento-tx); transition: transform .2s; }
.volver:hover { border-color: var(--acento-2); background: var(--acento-suave); color: var(--acento-tx); }
.volver:hover svg { transform: translateX(-2px); }
.migas:has(.volver) a { color: var(--sutil); font-weight: 500; }
.migas:has(.volver) a:hover { color: var(--acento-tx); }
@media (max-width: 760px) {
  .migas:has(.volver) { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; margin-bottom: 14px; }
  .migas:has(.volver) > :not(.volver) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .volver { height: 40px; padding: 0 16px 0 10px; font-size: 15px; border-radius: 12px; flex: none; }
}

.nov-grupo { margin-bottom: 26px; }
.nov-mes { margin: 0 0 10px; font-size: 15px; font-weight: 650; color: var(--texto); }
.nov-mes::first-letter { text-transform: uppercase; }
a.novedad { display: block; color: inherit; transition: border-color .15s, transform .2s; }
a.novedad:hover { border-color: var(--acento-2); transform: translateY(-1px); }
.punto-nuevo { display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--acento); vertical-align: middle; }
.novedad.sin-leer h3 { font-weight: 750; }
.mas-lista { display: block; margin: 8px auto 0; }
.nov-lectura { padding: 28px 32px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); }
.nov-lectura h1 { margin: 10px 0 6px; font-size: 28px; line-height: 1.25; letter-spacing: -.015em; }
.nov-lectura .sutil { font-size: 13px; }
.nov-lectura .md { margin-top: 20px; font-size: 15px; line-height: 1.65; }
.nov-acciones { display: flex; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea-2); }
.peligro-suave { color: var(--rojo, #c93837); }
.nov-pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.nov-pasos a { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tarjeta); transition: border-color .15s, transform .2s; }
.nov-pasos a:hover { border-color: var(--acento-2); transform: translateY(-1px); }
.nov-pasos a small { font-size: 12px; font-weight: 600; color: var(--acento-tx); }
.nov-pasos a span { font-size: 15px; font-weight: 650; color: var(--texto); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nov-pasos a.der { grid-column: 2; text-align: right; }
@media (max-width: 760px) { .nov-lectura { padding: 20px 18px; } .nov-lectura h1 { font-size: 22px; } .nov-pasos a { padding: 12px 14px; } }

/* ═══ v0.33 · Archivo de asuntos (activos, concluidos y archivados), reglas de orden y proyecto con versiones (14 oct) ═══ */
.lugares { margin: 0 0 18px; }
.lugares .pista > a svg { width: 15px; height: 15px; }
.ver-todos { display: inline-flex; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--acento-tx); }
.ver-todos:hover { text-decoration: underline; }

/* La franja del lugar donde vive el asunto. */
.cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 16px; padding: 14px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tarjeta); }
.cierre > .ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.cierre > .ico svg { width: 18px; height: 18px; }
.cierre > div:not(.cierre-acciones) { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.cierre b { font-size: 15px; }
.cierre span { font-size: 13px; color: var(--sutil); }
.cierre em { font-size: 13px; color: var(--sutil); font-style: normal; }
.cierre-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cierre.c-ambar { background: var(--ambar-suave); border-color: transparent; } .cierre.c-ambar > .ico { background: #fff; color: var(--ambar); }
.cierre.c-verde { background: var(--verde-suave); border-color: transparent; } .cierre.c-verde > .ico { background: #fff; color: var(--verde); }
.cierre.c-gris > .ico { background: var(--tarjeta-2); color: var(--sutil); }
.cierre.c-archivo { background: var(--tarjeta-2); } .cierre.c-archivo > .ico { background: var(--tarjeta); color: var(--sutil); }
@media (max-width: 760px) { .cierre-acciones { width: 100%; justify-content: stretch; } .cierre-acciones .boton { flex: 1; } }

/* La vista de concluidos y archivados. */
.archivo-filtros { display: grid; grid-template-columns: minmax(0, 1fr) 220px 200px; gap: 10px; margin: 0 0 16px; }
.archivo-filtros .buscar { margin: 0; }
.archivo-filtros select { height: 42px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 13px; }
.arch-asunto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.arch-asunto > div { display: grid; min-width: 0; }
.arch-asunto b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-asunto span { font-size: 12px; color: var(--tenue); font-weight: 400; }
.img-materia.en-fila { width: 30px; height: 30px; flex: none; }
.arch-motivo { display: block; font-size: 13px; margin-bottom: 4px; }
.tabla-archivo td.sel, .tabla-archivo th.sel { width: 1%; padding-right: 0; }
.tabla-archivo input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }
.archivo-masivo { position: sticky; top: 10px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 12px 10px 18px; border-radius: 12px; background: var(--lavanda); font-weight: 600; font-size: 13px; animation: aparecer .25s ease both; }
.paginas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 13px; color: var(--sutil); }
.paginas > :last-child { justify-self: end; }
@media (max-width: 760px) {
  .archivo-filtros { grid-template-columns: 1fr 1fr; } .archivo-filtros .buscar { grid-column: 1 / -1; }
  .tabla-archivo tr.fila { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .tabla-archivo tr.fila td.titulo { grid-row: 1; grid-column: 1 / -1; }
  .tabla-archivo tr.fila td.c-resp { grid-row: 2; grid-column: 1; text-align: left; padding-left: 42px !important; }
  .tabla-archivo tr.fila td.c-sem { grid-row: 2; grid-column: 2; justify-self: end; align-self: center; }
  .tabla-archivo tr.fila td.c-asunto { grid-row: 3; grid-column: 1 / -1; padding-left: 42px !important; font-size: 12px; color: var(--tenue); }
  .tabla-archivo .arch-motivo { display: inline; margin: 0 6px 0 0; font-size: 13px; }
  .tabla-archivo tr.fila td.sel { display: none; }
  .paginas { grid-template-columns: 1fr 1fr; } .paginas > span:nth-child(2) { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}

.bloque-nota { margin: 0 0 8px; font-size: 13px; color: var(--sutil); }

/* Búsqueda: lo cerrado va apagado; los archivados sólo si se piden. */
.br-item.apagado { opacity: .62; }
.br-archivados { display: block; width: 100%; margin: 6px 0 0; padding: 10px; border: 0; border-top: 1px solid var(--linea-2); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--acento-tx); cursor: pointer; }

/* El proyecto con sus versiones. */
.versiones { display: grid; gap: 8px; margin: 0 0 12px; }
.version { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); }
.version.ultima { border-color: var(--acento-2); background: var(--acento-suave); }
.version.revision .v-num { background: var(--verde-suave); color: var(--verde); }
.v-num { flex: none; display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--lavanda); color: var(--acento-tx); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.v-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.v-texto b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-texto span { font-size: 12px; color: var(--sutil); }
.v-texto em { font-size: 13px; font-style: normal; color: var(--texto); }
.proyecto-subir { display: grid; gap: 8px; margin: 4px 0 0; }
.proyecto-subir .zona-archivo { padding: 16px; justify-items: start; text-align: left; grid-template-columns: minmax(0, 1fr); }
.proyecto-subir .za-texto { display: grid; gap: 2px; }
.proyecto-subir .za-texto b { font-size: 13px; color: var(--texto); }
.proyecto-subir .za-nombre { font-weight: 600; color: var(--acento-tx) !important; }
.proyecto-subir input[name="nota"] { height: 40px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 12px; font: inherit; font-size: 13px; background: var(--tarjeta); color: var(--texto); }
.proyecto-subir .boton.azul { justify-self: start; }
.proyecto-subir .zona-archivo input { opacity: 0 !important; }
.proyecto-subir .zona-archivo:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.proyecto-subir .zona-archivo:has(input:disabled):hover { border-color: var(--linea-h); background: none; }
.proyecto-subir input[name="nota"]:disabled, .proyecto-subir .boton:disabled { opacity: .55; cursor: not-allowed; }
.version-link svg { width: 13px; height: 13px; margin-right: 3px; }

/* v0.33 · Mandar a revisión: la ventana que exige el archivo */
.mr-que { display: grid; gap: 2px; margin: 0 0 8px; }
.mr-que b { font-size: 15px; }
.mr-que span { font-size: 13px; color: var(--tenue); }
.mr-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.proyecto-subir .zona-archivo.lleno { border-style: solid; border-color: var(--acento-2); background: var(--acento-suave); }
.proyecto-subir .boton.azul:disabled { opacity: .5; cursor: not-allowed; }
[data-mandar-revision] { margin: 0 0 4px; }

/* ═══ v0.34 · Notificaciones (bandeja, panel, aviso emergente) y navegación del teléfono (14 oct) ═══ */
.campana-lateral .campana::after { order: 1; }
.campana-lateral .campana .cuenta { order: 2; }

/* Barra de arriba del teléfono: marca, buscar, campana y crear. */
.barra-arriba { display: none; }
@media (max-width: 899px) {
  .barra-arriba { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0; background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--linea-2); }
  .contenido { padding-top: calc(70px + env(safe-area-inset-top, 0px)); }
  .ba-marca { display: flex; align-items: center; gap: 9px; color: var(--texto); }
  
  .ba-marca b { font-size: 15px; letter-spacing: -.01em; }
  .ba-acciones { display: flex; align-items: center; gap: 8px; }
  .ba-boton, .barra-arriba .campana { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--sutil); cursor: pointer; }
  .ba-boton svg, .barra-arriba .campana svg { width: 19px; height: 19px; }
  .ba-nuevo { background: var(--grad); border-color: transparent; color: #fff; }
  .barra-abajo a[data-abrir-cajon] { cursor: pointer; }
}

/* El cajón "Más". */
.cajon-capa { position: fixed; inset: 0; z-index: 90; background: rgb(15 23 42 / 0); transition: background .25s; }
.cajon-capa.abierta { background: rgb(15 23 42 / .38); }
.cajon { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); display: flex; flex-direction: column; background: var(--lado); box-shadow: -20px 0 50px -20px rgb(15 23 42 / .4);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(14px + var(--seguro-abajo)); transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); overflow-y: auto; }
.cajon-capa.abierta .cajon { transform: none; }
.cj-cabeza { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--linea); }
.cj-cabeza .av { width: 42px; height: 42px; font-size: 14px; }
.cj-cabeza > div { flex: 1; min-width: 0; display: grid; }
.cj-cabeza b { font-size: 15px; } .cj-cabeza span { font-size: 13px; color: var(--tenue); }
.cj-rapidos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.cj-rapidos a { position: relative; display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); font-size: 13px; font-weight: 600; color: var(--texto); }
.cj-rapidos a svg { width: 20px; height: 20px; color: var(--acento-tx); }
.cj-cuenta { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11px; display: grid; place-items: center; }
.cj-cuenta:empty { display: none; }
.cj-nav { display: grid; gap: 2px; padding: 8px 0; flex: 1; }
.cj-nav .nav-titulo { margin: 12px 8px 4px; }
.cj-nav .nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 12px; color: var(--texto); font-size: 15px; }
.cj-nav .nav-item:active { background: var(--acento-suave); }
.cj-nav .nav-item svg { width: 18px; height: 18px; color: var(--sutil); }
.cj-nav .img-materia.en-menu { width: 22px; height: 22px; }
.cj-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
.cj-tema { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }

/* El panel de notificaciones. */
.notif-capa { position: fixed; inset: 0; z-index: 95; background: rgb(15 23 42 / 0); transition: background .25s; }
.notif-capa.abierta { background: rgb(15 23 42 / .3); }
.notif-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--fondo); box-shadow: -24px 0 60px -24px rgb(15 23 42 / .45);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.notif-capa.abierta .notif-panel { transform: none; }
.np-cabeza { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 10px; }
.np-cabeza h2 { margin: 0; font-size: 22px; }
.np-barra { padding: 0 20px; }
.np-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px 8px; font-size: 13px; }
.np-acciones .np-aviso { margin-left: auto; height: 32px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.np-acciones .np-aviso svg { width: 15px; height: 15px; }
.notif-panel .np-lista { flex: 1; overflow-y: auto; padding: 4px 14px 16px; }
.np-pie { display: block; padding: 14px 20px calc(14px + var(--seguro-abajo)); border-top: 1px solid var(--linea); text-align: center; font-weight: 600; font-size: 13px; color: var(--acento-tx); }
.np-mas { display: block; margin: 10px auto 0; }
.nt-grupo { margin: 14px 6px 6px; font-size: 15px; font-weight: 650; color: var(--texto); }
.notif { position: relative; display: flex; gap: 12px; padding: 12px 10px 12px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); cursor: pointer; transition: border-color .15s, opacity .2s, transform .2s; }
.notif:hover { border-color: var(--acento-2); }
.notif.sin-leer { background: color-mix(in srgb, var(--acento-suave) 55%, var(--tarjeta)); border-color: color-mix(in srgb, var(--acento-2) 45%, var(--linea)); }
.notif.se-va { opacity: 0; transform: translateX(16px); }
.nt-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.nt-ico svg { width: 18px; height: 18px; }
.nt-ico.c-blue { background: #e6f0ff; color: #1d4ed8; } .nt-ico.c-yellow { background: var(--ambar-suave); color: var(--ambar); }
.nt-ico.c-red { background: var(--rojo-suave); color: var(--rojo); } .nt-ico.c-green { background: var(--verde-suave); color: var(--verde); }
.nt-ico.c-purple { background: var(--lavanda); color: var(--acento-tx); } .nt-ico.c-orange { background: #fdeee2; color: #a9531a; }
.nt-cuerpo { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nt-cuerpo b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.notif.sin-leer .nt-cuerpo b { font-weight: 750; }
.nt-cuerpo p { margin: 0; font-size: 13px; color: var(--sutil); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--tenue); }
.nt-asunto { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-accion { justify-self: start; margin-top: 4px; }
.nt-botones { display: flex; flex-direction: column; gap: 2px; }
.nt-botones button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--tenue); cursor: pointer; }
.nt-botones button:hover { background: var(--tarjeta-2); color: var(--texto); }
.nt-botones svg { width: 16px; height: 16px; }
.nt-punto { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tenue); }
.nt-punto.lleno { background: var(--acento); border-color: var(--acento); }
.bandeja.pagina .np-lista { margin-top: 6px; }
@media (max-width: 760px) { .nt-botones button { width: 36px; height: 36px; } }

/* El aviso emergente. */
.tostada { position: fixed; z-index: 99; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 24px)); padding: 12px 12px 12px 14px; border-radius: 18px;
  background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: 0 18px 40px -16px rgb(15 23 42 / .45); transform: translate(-50%, 20px); opacity: 0; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.tostada.visible { transform: translate(-50%, 0); opacity: 1; }
.ts-texto { flex: 1; min-width: 0; display: grid; }
.ts-texto b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-texto span { font-size: 12px; color: var(--tenue); }
.ts-x { border: 0; background: none; font-size: 22px; color: var(--tenue); cursor: pointer; padding: 0 4px; }
@media (max-width: 899px) { .tostada { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -20px); } .tostada.visible { transform: translate(-50%, 0); } }

/* Avisos con título y botón; lo enviado con quién lo leyó. */
.aviso-titulo { display: block; margin: 2px 0 2px; font-size: 15px; }
.enviados { display: grid; gap: 10px; }
.enviado { display: grid; gap: 6px; padding: 16px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.enviado .aviso-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.enviado-accion { font-size: 13px; color: var(--sutil); }
.enviado-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--linea-2); font-size: 13px; }
.enviado-pie .mini-boton { margin-left: auto; }
.lectores { display: flex; }
.lectores .av { width: 26px; height: 26px; font-size: 9.5px; margin-right: -6px; border: 2px solid var(--tarjeta); opacity: .35; }
.lectores .av.leyo { opacity: 1; }

/* Formación: la puerta de entrada. */
.fm-pendiente { margin: 0 0 22px; }
.fm-pendiente h3 { margin: 0 0 10px; font-size: 15px; color: var(--texto); }
.fm-pendiente .dia-fila { align-items: center; }
.fm-al-dia { margin: 0 0 18px; }
.fm-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fm-tarjeta { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); color: var(--texto); transition: border-color .15s, transform .2s; }
.fm-tarjeta:hover { border-color: var(--acento-2); transform: translateY(-2px); }
.fm-ilus { width: 64px; height: 64px; object-fit: contain; flex: none; }
.fm-texto { display: grid; gap: 2px; min-width: 0; }
.fm-texto b { font-size: 15px; }
.fm-texto span { font-size: 13px; font-weight: 600; color: var(--acento-tx); }
.fm-texto span.alerta { color: var(--ambar); }
.fm-texto small { font-size: 12px; color: var(--tenue); }
@media (max-width: 1100px) { .fm-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fm-rejilla { grid-template-columns: 1fr; gap: 10px; } .fm-ilus { width: 52px; height: 52px; } }

/* v0.34 · teléfono: las materias en dos columnas compactas. */
@media (max-width: 760px) {
  .materias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  .materia { padding: 10px 12px; gap: 2px 6px; }
  .materia b { font-size: 22px; }
  .materia span { font-size: 12px; }
  .materia small { font-size: 12px; }
  .materia .img-materia.en-tarjeta { width: 30px; height: 30px; }
}
 

/* ═══ v0.35 · Carrusel de avisos, formación en el día, lecciones en carril, conversación y notas (14 oct) ═══ */
/* El carrusel: una tarjeta a lo ancho, se desliza con el dedo; puntos abajo. */
.carrusel { position: relative; margin: 0 0 18px; }
.cr-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; border-radius: var(--radio); }
.cr-pista::-webkit-scrollbar { display: none; }
.cr-pista > .aviso { flex: 0 0 100%; scroll-snap-align: start; margin: 0; min-width: 0; }
.cr-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.cr-puntos button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--linea-h); cursor: pointer; transition: width .25s, background .25s; }
.cr-puntos button.activo { width: 20px; background: var(--acento); }
.aviso.destacado { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acento-2) 55%, transparent); }

/* Tu formación en el día. */
.fd-cursos { display: grid; gap: 8px; margin: 0 0 10px; }
.fd-curso { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--cf); color: var(--ct); }
.fd-curso > div { display: grid; min-width: 0; }
.fd-curso b { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-curso small { font-size: 12px; font-weight: 600; }
.fd-anillo { flex: none; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--ct) calc(var(--p) * 1%), color-mix(in srgb, var(--ct) 18%, transparent) 0); }
.fd-anillo::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--cf); }
.fd-anillo b { position: relative; font-size: 12px; font-weight: 800; color: var(--ct); }
.fd-nov { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--acento-tx); }
.fd-nov svg { width: 15px; height: 15px; }
.lista-dia .dia-fila > .nt-ico { width: 32px; height: 32px; }

/* Lecciones en carril (teléfono). */
.solo-telefono { display: none; }
.lc-slider-caja h3 { margin: 18px 0 8px; font-size: 15px; color: var(--texto); }
.lc-slider { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 6px; scroll-behavior: smooth; }
.lc-slider::-webkit-scrollbar { display: none; }
.lcs-item { flex: 0 0 72%; max-width: 260px; scroll-snap-align: center; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num tit" "num sub"; align-items: center; gap: 2px 10px;
  padding: 12px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--texto); }
.lcs-item b { grid-area: tit; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcs-item small { grid-area: sub; font-size: 12px; color: var(--tenue); }
.lcs-num { grid-area: num; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tarjeta-2); border: 1px solid var(--linea); font-size: 13px; font-weight: 800; color: var(--sutil); }
.lcs-num svg { width: 15px; height: 15px; }
.lcs-item.vista .lcs-num { background: var(--verde-suave); border-color: transparent; color: var(--verde); }
.lcs-item.actual { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.lcs-item.actual .lcs-num { background: var(--acento); border-color: var(--acento); color: #fff; }
@media (max-width: 760px) {
  .solo-telefono { display: block; }
  .lc-temario, .curso-cuerpo .cc-temario { display: none; }
  .leccion .lc-slider-caja { margin: 0 -14px 14px; } .leccion .lc-slider { padding: 2px 14px 6px; }
}

/* Debajo de la lección: conversación y mis notas. */
.lc-extra { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--linea); }
.lc-pestanas { margin-bottom: 14px; }
.lc-pestanas svg { width: 15px; height: 15px; }
.cm-nuevo { display: grid; gap: 8px; margin: 0 0 16px; }
.cm-nuevo textarea, .cm-responder textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 15px; resize: vertical; }
.cm-nuevo .boton { justify-self: end; }
.comentarios { display: grid; gap: 12px; }
.cm { display: flex; gap: 10px; }
.cm > .av { flex: none; width: 32px; height: 32px; font-size: 11px; }
.cm.respuesta > .av { width: 26px; height: 26px; font-size: 9.5px; }
.cm-cuerpo { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 4px 12px 12px 12px; background: var(--tarjeta); border: 1px solid var(--linea); }
.cm.respuesta { margin-top: 10px; }
.cm.respuesta .cm-cuerpo { background: var(--tarjeta-2); }
.cm-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--tenue); }
.cm-cabeza b { font-size: 13px; color: var(--texto); }
.cm-rol { padding: 1px 7px; border-radius: 999px; background: var(--lavanda); color: var(--acento-tx); font-weight: 700; font-size: 12px; }
.cm-texto { margin: 4px 0 2px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.cm-acciones { display: flex; gap: 12px; font-size: 12px; }
.cm-responder { display: grid; gap: 8px; margin-top: 10px; }
.cm-responder > div { display: flex; justify-content: flex-end; gap: 8px; }
.lc-notas-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }

/* ═══ v0.36 · Consultas del equipo (el foro) (14 oct) ═══ */
.cs-filtros { grid-template-columns: minmax(0, 1fr) 220px; }
.cs-lista { display: grid; gap: 10px; }
.cs-fila { display: flex; gap: 14px; padding: 14px 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); transition: border-color .15s, transform .2s; }
.cs-fila:hover { border-color: var(--acento-2); transform: translateY(-1px); }
.cs-estado { flex: none; display: grid; place-items: center; align-content: center; width: 62px; min-height: 58px; border-radius: 12px; text-align: center; gap: 1px; }
.cs-estado b { font-size: 17px; line-height: 1; } .cs-estado small { font-size: 11px; font-weight: 600; }
.cs-estado svg { width: 20px; height: 20px; }
.cs-estado.ok { background: var(--verde-suave); color: var(--verde); }
.cs-estado.con { background: var(--ambar-suave); color: var(--ambar); }
.cs-estado.sin { background: var(--tarjeta-2); color: var(--tenue); border: 1px dashed var(--linea-h); }
.cs-texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cs-texto b { font-size: 15px; line-height: 1.35; }
.cs-texto p { margin: 0; font-size: 13px; color: var(--sutil); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--tenue); }
.cs-quien { display: inline-flex; align-items: center; gap: 6px; }
.cs-quien .av { width: 20px; height: 20px; font-size: 8.5px; }
.cs-utiles { font-weight: 700; color: var(--acento-tx); }

/* La ventana para preguntar. */
.cs-forma { display: grid; gap: 12px; }
.cs-forma label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--tenue); }
.cs-forma input, .cs-forma select, .cs-forma textarea { height: auto; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cs-forma input[name="titulo"] { font-size: 16px; font-weight: 600; }
.cs-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-parecidas { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--acento-suave); font-size: 13px; }
.cs-parecidas a { display: flex; align-items: center; gap: 8px; color: var(--acento-tx); font-weight: 600; }
.cs-aviso { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.cs-aviso svg { width: 16px; height: 16px; flex: none; color: var(--ambar); }
@media (max-width: 560px) { .cs-dos, .cs-filtros { grid-template-columns: 1fr; } .cs-estado { width: 52px; } }

/* La consulta y sus respuestas. */
.cs-pregunta { padding: 22px 24px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-r); }
.cs-pregunta h1 { margin: 10px 0 10px; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.cs-p-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-pregunta .md { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.cs-p-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; font-size: 13px; }
.cs-p-acciones .mini-boton { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.cs-p-acciones svg, .cs-resp-pie svg { width: 14px; height: 14px; }
.cs-resp-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.cs-resp-cabeza .av { width: 28px; height: 28px; font-size: 10px; }
.cs-cuantas { margin: 26px 0 10px; font-size: 15px; color: var(--texto); }
.cs-respuestas { display: grid; gap: 12px; }
.cs-resp { padding: 16px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.cs-resp.la-buena { border: 2px solid var(--verde); box-shadow: 0 8px 24px -16px rgb(11 138 96 / .5); }
.cs-buena { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--verde-suave); color: var(--verde); font-size: 12px; font-weight: 700; }
.cs-buena svg { width: 14px; height: 14px; }
.cs-resp-texto { margin: 10px 0 8px; font-size: 15px; line-height: 1.6; }
.cs-resp-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.cs-resp-pie .mini-boton { display: inline-flex; align-items: center; gap: 5px; }
.cs-util { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--sutil); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cs-util b { font-variant-numeric: tabular-nums; }
.cs-util.activo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-tx); }
.cs-util:disabled { opacity: .55; cursor: default; }
.cs-subs { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--tarjeta-2); font-size: 13px; }
.cs-nueva { margin-top: 22px; padding: 16px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); display: grid; gap: 10px; }
.cs-nueva h3 { margin: 0; font-size: 15px; }
.cs-nueva textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta-2); color: var(--texto); font: inherit; font-size: 15px; resize: vertical; }
@media (max-width: 760px) { .cs-pregunta { padding: 18px 16px; } .cs-pregunta h1 { font-size: 22px; } .cs-p-acciones .mini-boton { margin-left: 0; } }

/* ═══ v0.37 · Espacios: lo que se apretaba en anchos intermedios (laptop o con panel abierto) (14 oct) ═══ */
/* Las cifras: si cada una queda angosta, el ícono sube a la esquina y el texto usa todo el ancho. */
@media (min-width: 761px) {
  .tiles { container-type: inline-size; }
  @container (max-width: 900px) {
    .tile { padding: 12px 12px 12px 14px; min-height: 86px; align-content: start; }
    
    .tile b { padding-right: 34px; }
    .tile span { line-height: 1.25; }
  }
}
/* El carrusel y lo que sigue: aire parejo con el resto de bloques. */
.carrusel { margin-bottom: 24px; }
.cr-puntos { margin-top: 10px; }
.novedad-dia { margin-bottom: 24px; }
/* Los renglones de las bandejas de orden llevan su ícono como los demás. */
.dia-fila > .nt-ico { flex: none; }
.nt-ico.c-gray { background: var(--tarjeta-2); color: var(--sutil); border: 1px solid var(--linea); }
/* Los botones del encabezado no se parten en dos renglones. */
.pagina-cabeza .acciones-pagina .boton, .pagina-cabeza > .boton { white-space: nowrap; }
.pagina-cabeza .acciones-pagina.en-cabeza { flex: none; }
.ch-acciones { row-gap: 12px; }

/* v0.38 · El logo de Marez (vector en /img/logo-marez.svg): menú, barra del teléfono y entrada. */
.logo-marez { display: block; flex: none; width: 30px; height: auto; }
.lateral-marca { color: inherit; }
.lateral-marca .logo-marez { width: 32px; }
.ba-marca .logo-marez { width: 28px; }
.acceso-lema { display: flex; align-items: center; gap: 12px; }
.acceso-lema .logo-marez { width: 40px; }
.acceso-lema > div { display: grid; }
.acceso-logo { display: block; width: 46px; height: auto; margin: 0 0 14px; }
@media (min-width: 761px) { .acceso-caja .acceso-logo { display: none; } }
.lateral-marca { gap: 10px; padding: 0 8px; }
.lateral-marca .logo-marez { width: 28px; }
.lateral-marca b, .lateral-marca b.marca { font-size: 15px; white-space: nowrap; color: var(--texto); letter-spacing: -.01em; }
.lateral-marca small { margin-top: 2px; }
.acceso-lema b { color: var(--texto); }
.acceso-arte .acceso-lema { justify-content: flex-start; text-align: left; }
.acceso-arte .acceso-lema img.logo-marez { width: 40px; height: auto; margin: 0; max-width: none; flex: none; align-self: center; }
.acceso-caja .acceso-logo { display: none !important; }

/* ═══ v0.39 · Boletín del TFJA: lo que salió en los expedientes (14 oct) ═══ */
.bol-lista { display: grid; gap: 10px; }
.bol-fila { display: flex; gap: 14px; padding: 14px 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.bol-fila.resaltada { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.bol-fila.descartada { opacity: .7; }
.bol-fechas { flex: none; display: grid; align-content: start; gap: 1px; width: 92px; padding: 10px; border-radius: 12px; background: #e6f0ff; color: #1d4ed8; text-align: center; }
.bol-fechas span { font-size: 12px; font-weight: 700; opacity: .8; }
.bol-fechas b { font-size: 15px; }
.bol-fechas span.urge { margin-top: 4px; padding: 2px 4px; border-radius: 8px; background: var(--rojo-suave); color: var(--rojo); opacity: 1; letter-spacing: 0; text-transform: none; font-size: 12px; }
.bol-texto { flex: 1; min-width: 0; display: grid; gap: 6px; }
.bol-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.bol-cabeza b { font-size: 15px; } .bol-cabeza a { color: var(--texto); } .bol-cabeza a:hover { color: var(--acento-tx); }
.bol-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tenue); }
.bol-sintesis { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sutil); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bol-fila:hover .bol-sintesis { -webkit-line-clamp: unset; }
.bol-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 2px; font-size: 13px; }
.bol-acciones .boton { height: 34px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.bol-acciones svg { width: 15px; height: 15px; }
.bol-acciones .mini-boton { display: inline-flex; align-items: center; gap: 5px; }
.bol-estado { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
.bol-estado > div { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.bol-estado b { font-size: 15px; } .bol-estado span { font-size: 13px; color: var(--sutil); }
.bol-estado .boton { display: inline-flex; align-items: center; gap: 6px; }
.bol-estado .boton svg { width: 15px; height: 15px; }
.bol-vigilados { margin-top: 22px; font-size: 13px; }
.bol-vigilados summary { cursor: pointer; font-weight: 600; color: var(--sutil); }
.bol-vigilados > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.bol-vigilados a { padding: 3px 8px; border-radius: 8px; background: var(--tarjeta); border: 1px solid var(--linea); font-size: 12px; color: var(--texto); }
.bol-en-asunto { margin: 0 0 16px; padding: 14px; border-radius: var(--radio); background: var(--rojo-suave); }
.bol-en-asunto h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; color: var(--rojo); }
.bol-en-asunto h3 svg { width: 16px; height: 16px; }
.bol-en-asunto .bol-fila { border-color: transparent; }
@media (max-width: 560px) { .bol-fila { flex-direction: column; gap: 10px; } .bol-fechas { width: auto; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; } .bol-fechas span.urge { margin: 0; } }
.meta-cierre { font-size: 12px; color: var(--sutil); font-style: italic; }

/* ═══ Fase 1 · Orden: estados del plazo, Hoy y Términos (14 oct) ═══ */
/* El encabezado del día: una línea, sin ilustración. */
.hoy-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.hoy-cabeza .hc-fecha { display: block; font-size: 13px; font-weight: 600; color: var(--tenue); }
.hoy-cabeza h1 { margin: 2px 0 4px; font-size: 22px; letter-spacing: -.015em; }
.hoy-cabeza p { margin: 0; font-size: 15px; color: var(--sutil); }
.texto-ambar { color: var(--ambar); }

/* Las cifras: pocas, con nombre claro, y se tocan para filtrar. */
.cifras-plazo { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.cifras-plazo .cp { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--texto); min-height: 44px; transition: border-color .15s; }
.cifras-plazo .cp:hover { border-color: var(--acento-2); }
.cifras-plazo .cp b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cifras-plazo .cp span { font-size: 13px; font-weight: 600; color: var(--sutil); }
.cp-rojo { background: var(--rojo) !important; border-color: var(--rojo) !important; } .cp-rojo b, .cp-rojo span { color: #fff !important; }
.cp-naranja b { color: #c2410c; } .cp-indigo b { color: var(--acento-tx); } .cp-ambar b { color: var(--ambar); }
.cifras-plazo.vacias { align-items: center; gap: 8px; font-size: 13px; color: var(--verde); font-weight: 600; }
.cifras-plazo.vacias svg { width: 18px; height: 18px; }

/* Lo urgente sin leer: una franja fija, no un carrusel. */
.franja-urgente { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--rojo-suave); border: 1px solid color-mix(in srgb, var(--rojo) 30%, transparent); }
.franja-urgente .fu-ico { color: var(--rojo); display: grid; } .franja-urgente .fu-ico svg { width: 20px; height: 20px; }
.fu-texto { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; }
.fu-texto b { font-size: 15px; }
.fu-acc { display: flex; gap: 6px; flex-wrap: wrap; }

/* Los bloques del día y los grupos por fecha. */
.bloque-hoy { margin: 0 0 28px; }
.bloque-hoy > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.bloque-hoy > h2 b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--lavanda); color: var(--acento-tx); }
.grupo-plazo { margin: 0 0 16px; }
.grupo-plazo > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--sutil); }
.grupo-plazo > h3 b { font-size: 12px; color: var(--tenue); font-weight: 600; }
.grupo-plazo.g-rojo > h3 { color: var(--rojo); }
.grupo-plazo.g-naranja > h3 { color: #c2410c; }
.grupo-plazo.g-ambar > h3 { color: var(--ambar); }
.grupo-nota { margin: -4px 0 8px; font-size: 13px; color: var(--sutil); }
.lista-plazos { display: grid; gap: 8px; }
.reloj.r-falta { background: var(--ambar-suave); color: var(--ambar); }
.reloj.r-tarea { background: var(--tarjeta-2); color: var(--sutil); border: 1px solid var(--linea); }
.fila-accion.destaca { background: var(--acento); color: #fff; border-color: transparent; opacity: 1 !important; }
.fila-accion.destaca:hover { background: #4338ca; color: #fff; }

/* Tareas internas: casilla, nada de alarma. */
.lista-tareas { display: grid; gap: 2px; }
.tarea { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid var(--linea-2); }
.tarea:last-child { border-bottom: 0; }
.t-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--linea-h); background: var(--tarjeta); color: #fff; cursor: pointer; transition: background .15s, border-color .15s; }
.t-check svg { width: 15px; height: 15px; stroke-width: 3; }
.tarea.hecha .t-check { background: var(--verde); border-color: var(--verde); }
.t-texto { flex: 1; min-width: 0; display: grid; color: var(--texto); }
.t-texto b { font-size: 15px; font-weight: 600; }
.t-texto span { font-size: 13px; color: var(--tenue); }
.tarea.hecha .t-texto b { text-decoration: line-through; color: var(--tenue); }

/* "Requiere tu decisión": una sola lista, cada fila con su tipo y su acción. */
.decisiones { display: grid; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.decision { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea-2); cursor: pointer; }
.decision:last-child { border-bottom: 0; }
.decision:hover { background: var(--tarjeta-2); }
.dc-tipo { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.dc-tipo.c-red { background: var(--rojo-suave); color: var(--rojo); } .dc-tipo.c-blue { background: #e6f0ff; color: #1d4ed8; }
.dc-tipo.c-purple { background: var(--lavanda); color: var(--acento-tx); } .dc-tipo.c-green { background: var(--verde-suave); color: var(--verde); }
.dc-tipo.c-yellow { background: var(--ambar-suave); color: var(--ambar); }
.dc-texto { display: grid; min-width: 0; }
.dc-texto b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-texto span { font-size: 13px; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.boton.chico { height: 32px; padding: 0 12px; font-size: 13px; }
@media (max-width: 760px) {
  .decision { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 14px; }
  .decision .dc-tipo { grid-column: 1; grid-row: 1; }
  .decision .dc-texto { grid-column: 1 / -1; grid-row: 2; }
  .decision .dc-texto b, .decision .dc-texto span { white-space: normal; }
  .decision > .av, .decision > span:not(.dc-tipo) { grid-column: 2; grid-row: 1; justify-self: end; }
  .decision .dc-acciones { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .decision .dc-acciones .boton, .decision .dc-acciones .mini-boton { min-height: 40px; }
}

/* Términos: filtros en una fila. */
.term-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.term-filtros select { height: 38px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 13px; }
.term-filtros #f-tipo-t button { border: 0; background: none; font: inherit; cursor: pointer; }
.hc-acciones { display: flex; gap: 8px; }
@media (max-width: 760px) { .term-filtros { gap: 8px; } .term-filtros .pista { max-width: 100%; } .hoy-cabeza h1 { font-size: 22px; } .cifras-plazo .cp { flex: 1 1 auto; } }
@media (max-width: 760px) {
  .franja-urgente { padding: 10px 12px; gap: 10px; }
  .franja-urgente p, .franja-urgente .fu-texto span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cifras-plazo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-inline: -14px; padding-inline: 14px; }
  .cifras-plazo::-webkit-scrollbar { display: none; }
  .cifras-plazo .cp { flex: 0 0 auto; padding: 8px 12px; }
  .cifras-plazo .cp b { font-size: 17px; }
}

/* ═══ Fase 2 · Nativa (14 oct) ═══ */
/* Respuesta al toque: sin el destello gris del navegador, sin espera de doble toque,
   y cada cosa tocable se hunde un poco al presionarla. */
html { -webkit-tap-highlight-color: transparent; }
a, button, [data-ir], [role="button"], label, summary { touch-action: manipulation; }
.boton, .mini-boton, .ba-boton, .barra-abajo a, .volver, .ba-atras, .nav-item, .cp, .pista > a, .pista > button, .conmutador button { transition: transform .12s ease, background-color .15s, border-color .15s, color .15s; }
.boton:active, .mini-boton:active, .ba-boton:active, .barra-abajo a:active, .volver:active, .cp:active, .pista > a:active, .pista > button:active, .conmutador button:active { transform: scale(.96); }
.item:active, .tarea:active, .decision:active, .nav-item:active, [data-ir]:active { background-color: var(--chipon); }
@media (hover: none) { .tile:hover, .contador:hover { transform: none; } }

/* Diálogos propios (confirmar y preguntar). */
.modal-caja.chica { max-width: 420px; margin-top: 10vh; }
.dlg-cuerpo { display: grid; gap: 10px; padding: 22px 22px 4px; }
.dlg-cuerpo h2 { margin: 0; font-size: 17px; }
.dlg-cuerpo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto); }
.dlg-pregunta { font-size: 15px; font-weight: 600; color: var(--texto); }
.dlg-cuerpo input, .dlg-cuerpo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo); color: var(--texto); font: inherit; font-size: 15px; }
.dlg-cuerpo input:focus, .dlg-cuerpo textarea:focus { outline: 2px solid var(--acento-2); outline-offset: -1px; }
.dlg-cuerpo textarea { resize: vertical; min-height: 84px; }
.dlg-error { margin: 0; color: var(--rojo); font-size: 13px; font-weight: 600; }
.dlg-pie { display: flex; justify-content: flex-end; gap: 8px; }
.modal-caja.chica > .dlg-pie { padding: 16px 22px 20px; }
.dlg-cuerpo .dlg-pie { padding: 8px 0 18px; }
.dlg-pie .boton { min-height: 40px; padding: 0 18px; font-size: 15px; }
.boton.peligro { background: var(--rojo); border-color: transparent; color: #fff; font-weight: 700; }
.boton.peligro:hover { color: #fff; filter: brightness(1.06); }

/* Aviso breve abajo (en lugar de las alertas del navegador), con "Deshacer" cuando se puede. */
.aviso-rapido { position: fixed; left: 50%; bottom: 24px; z-index: 130; display: flex; align-items: center; gap: 6px; max-width: min(520px, calc(100vw - 28px)); padding: 8px 8px 8px 16px; border-radius: 12px; background: #1E1F33; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.4; box-shadow: 0 12px 32px rgb(15 23 42 / .28); opacity: 0; transform: translate(-50%, 14px); transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .2, 1); }
.aviso-rapido.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-rapido > span { flex: 1; padding: 4px 0; }
.aviso-rapido > span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 9px 1px 0; border-radius: 50%; background: #A5B4FC; }
.aviso-rapido.ar-exito > span::before { background: #34D39E; }
.aviso-rapido.ar-error > span::before { background: #FF6B6A; }
.aviso-rapido button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #C7D2FE; font: inherit; font-weight: 700; cursor: pointer; }
.aviso-rapido button:hover { background: rgb(255 255 255 / .08); }
.aviso-rapido .ar-x { color: rgb(255 255 255 / .55); font-size: 17px; font-weight: 400; }
[data-tema="oscuro"] .aviso-rapido { background: #2B2C44; }

/* Teléfono: las ventanas son hojas que suben desde abajo, con asa para cerrarlas
   deslizando; los botones del diálogo, a lo ancho y fáciles de tocar. */
@media (max-width: 760px) {
  .modal-caja { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal-caja::before { content: ''; display: block; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--linea); }
  .modal-caja.chica { max-width: none; margin: 0; }
  .dlg-cuerpo { padding: 14px 18px 4px; }
  .dlg-pie { flex-direction: column-reverse; }
  .modal-caja.chica > .dlg-pie { padding: 14px 18px 18px; }
  .dlg-pie .boton { width: 100%; min-height: 50px; font-size: 15px; border-radius: 12px; }
  .dlg-cuerpo input, .dlg-cuerpo textarea { font-size: 16px; }
  @media (prefers-reduced-motion: no-preference) {
    .modal-caja { animation: hoja .28s cubic-bezier(.2, .8, .2, 1) both; }
    @keyframes hoja { from { transform: translateY(100%); } }
  }
}
@media (max-width: 899px) { .aviso-rapido { bottom: calc(86px + var(--seguro-abajo, 0px)); } }

/* Teléfono: el regreso vive en la barra de arriba; las migas dentro de la página sobran. */
.ba-atras, .ba-titulo { display: none; }
@media (max-width: 899px) {
  .barra-arriba.en-detalle .ba-marca { display: none; }
  body:has(.barra-arriba.en-detalle) .migas:has(.volver) { display: none; }
  .ba-atras { display: inline-flex; align-items: center; gap: 0; min-width: 44px; max-width: 38vw; height: 44px; margin-left: -8px; padding: 0 6px 0 0; border: 0; background: none; color: var(--acento-tx); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
  .ba-atras svg { flex: none; width: 26px; height: 26px; stroke-width: 2.2; }
  .ba-atras span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ba-titulo { display: block; position: absolute; left: 50%; bottom: 0; height: 56px; line-height: 56px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); font-size: 15px; font-weight: 650; color: var(--texto); opacity: 0; transition: opacity .15s; pointer-events: none; }
  .barra-arriba.con-titulo .ba-titulo { opacity: 1; }
}

/* Dedo, no mouse: todo lo que se toca mide al menos 44 px. */
@media (pointer: coarse) {
  .boton, .volver, select, .campo input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  .boton { padding-inline: 16px; font-size: 15px; }
  .mini-boton { min-height: 40px; padding-inline: 14px; font-size: 13px; }
  .pista > a, .pista > button, .conmutador button { min-height: 40px; }
  .modal-cerrar { min-width: 44px; min-height: 44px; }
}
/* Lo que se ve chico (casillas, etiquetas de avance) agranda su zona de toque sin crecer. */
@media (pointer: coarse) {
  .t-check, .meta-avance, .fd-nov, .enlace { position: relative; }
  .t-check::after, .meta-avance::after, .enlace::after { content: ''; position: absolute; inset: -10px -6px; }
  .t-check::after { inset: -10px; }
  .fd-nov { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ═══ Fase 3 · Sistema visual (14 oct) ═══
   Escala de letra: 12 · 13 · 15 · 17 · 22 · 28 (11 sólo en contadores, barra de abajo y calendario).
   Radios: 8 (chico) · 12 (botones, campos, renglones) · 18 (tarjetas y hojas) · 999 (pastillas).
   Colores con nombre: --acento (acción), --rojo (peligro), --ambar (aviso), --verde (éxito), --tenue (neutro). */
:root { --t-micro: 11px; --t-1: 12px; --t-2: 13px; --t-3: 15px; --t-4: 17px; --t-5: 22px; --t-6: 28px; --r-1: 8px; --r-2: 12px; --r-3: 18px; }

/* Listas de términos agrupadas: una tarjeta con separadores, no una tarjeta por renglón. */
.lista-plazos { gap: 0; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.lista-plazos > .item { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--linea-2); }
.lista-plazos > .item:last-child { border-bottom: 0; }
.lista-plazos > .item:hover { border-color: var(--linea-2); background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.lista-plazos > .item:last-child:hover { border-color: transparent; }

/* Ícono de documento de línea, con el color de su tipo. */
.ico-doc { display: grid; place-items: center; border-radius: var(--r-1); background: var(--c-bg, var(--gray-bg)); color: var(--c-tx, var(--gray-tx)); }
.ico-doc svg { width: 56%; height: 56%; stroke-width: 1.9; }
.ico-doc.c-red { --c-bg: var(--red-bg); --c-tx: var(--red-tx); } .ico-doc.c-blue { --c-bg: var(--blue-bg); --c-tx: var(--blue-tx); }
.ico-doc.c-purple { --c-bg: var(--purple-bg); --c-tx: var(--purple-tx); } .ico-doc.c-orange { --c-bg: var(--orange-bg); --c-tx: var(--orange-tx); }
.ico-doc.c-green { --c-bg: var(--green-bg); --c-tx: var(--green-tx); } .ico-doc.c-gray { --c-bg: var(--gray-bg); --c-tx: var(--gray-tx); }

/* "···": las acciones secundarias. */
.mas-menu { display: inline-flex; }
.mm-abrir { padding-inline: 8px; }
.mm-abrir svg { width: 18px; height: 18px; }
.mm-pop { position: fixed; z-index: 120; min-width: 210px; padding: 6px; border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--tarjeta); box-shadow: var(--sombra-menu); display: grid; }
.mm-op { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-1); background: none; color: var(--texto); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.mm-op:hover, .mm-op:focus-visible { background: var(--chipon); outline: none; }
.mm-op.peligro { color: var(--rojo); }
/* En el teléfono, hoja de acciones como la del sistema. */
.hoja-acciones .modal-caja { padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: transparent; border: 0; box-shadow: none; }
.hoja-acciones .modal-caja::before { display: none; }
.ha-grupo { display: grid; overflow: hidden; border-radius: 14px; background: var(--tarjeta); }
.hoja-acciones .mm-op { min-height: 56px; border-radius: 0; text-align: center; font-size: 17px; color: var(--acento-tx); border-bottom: 1px solid var(--linea-2); }
.hoja-acciones .ha-grupo .mm-op:last-child { border-bottom: 0; }
.hoja-acciones .mm-op.peligro { color: var(--rojo); }
.hoja-acciones .ha-cancelar { margin-top: 8px; border-radius: 14px; background: var(--tarjeta); font-weight: 650; border: 0; }

/* Boletín: la síntesis en dos renglones (se abre al tocarla) y "surte" como dato principal. */
.bol-sintesis { -webkit-line-clamp: 2; cursor: pointer; }
.bol-fila:hover .bol-sintesis { -webkit-line-clamp: 2; }
.bol-sintesis.abierta, .bol-fila:hover .bol-sintesis.abierta { -webkit-line-clamp: unset; }
.bol-fechas span.urge { font-weight: 700; }
@media (min-width: 900px) and (max-width: 1180px) { .cifras-plazo { gap: 8px; } .cifras-plazo .cp { padding: 8px 13px; } }
.cal-num { gap: 4px; }
@media (max-width: 1199px) { .cal-num em { display: none; } }
.reloj.r-falta span { white-space: normal; line-height: 1.15; text-align: center; }

/* ═══ Fase 4 · Roles: Panorama del socio (14 oct) ═══ */
.pano-estado { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 16px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tarjeta); }
.pano-estado > svg { flex: none; width: 26px; height: 26px; }
.pano-estado b { display: block; font-size: 17px; }
.pano-estado span { font-size: 13px; color: var(--sutil); }
.pano-estado.ok > svg { color: var(--verde); }
.pano-estado.mal { background: var(--rojo-suave); border-color: color-mix(in srgb, var(--rojo) 30%, transparent); }
.pano-estado.mal > svg, .pano-estado.mal b { color: var(--rojo); }
.pano-vencidos { margin: -6px 0 18px; }
.pano-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; }
.pano-lista { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
.pano-fila { display: grid; grid-template-columns: minmax(0, 1fr) 70px 130px; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--linea-2); color: var(--texto); font-size: 15px; }
.pano-fila:last-child { border-bottom: 0; }
a.pano-fila:hover { background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.pano-cabeza { min-height: 36px; font-size: 12px; font-weight: 600; color: var(--tenue); background: var(--fondo); }
.pano-n { text-align: right; font-variant-numeric: tabular-nums; }
.pano-monto { text-align: right; font-variant-numeric: tabular-nums; color: var(--sutil); }
.pano-materia { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pano-materia i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
@media (max-width: 760px) { .pano-fila { grid-template-columns: minmax(0, 1fr) 44px 104px; padding: 8px 12px; font-size: 14px; } }

/* El socio sólo mira: sin botones de acción ni controles que cambien algo. */
.rol-socio .meta-acciones, .rol-socio .lqs-mas, .rol-socio .mas-menu, .rol-socio .bol-acciones, .rol-socio .dc-acciones,
.rol-socio .boton-nuevo, .rol-socio .ba-nuevo, .rol-socio .expediente .acciones-pagina, .rol-socio [data-nueva-nota], .rol-socio [data-nuevo-criterio], .rol-socio [data-borrar-nota], .rol-socio [data-borrar-fuente], .rol-socio [data-verificar], .rol-socio [data-agendar], .rol-socio [data-subir-acuse], .rol-socio [data-ya-presente] { display: none !important; }
.rol-socio [data-avance] { pointer-events: none; }
.pano-ver { display: inline-block; margin: -8px 0 18px 4px; }

/* ═══ Perfil, directorio y caras (v0.45) ═══ */
.av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av:has(img) { background: var(--chipon); }
.av.grande { width: 48px; height: 48px; font-size: 17px; }
.av.xl { width: 112px; height: 112px; font-size: 38px; box-shadow: 0 0 0 4px var(--tarjeta); }
.nw { white-space: nowrap; }

/* Hoy: la cara arriba a la derecha, como en las apps de Apple. */
.hoy-cabeza:has(.hc-cara) { flex-wrap: nowrap; align-items: flex-start; }
.hoy-cabeza .hc-texto { flex: 1; min-width: 0; }
.hc-cara { flex: none; display: block; border-radius: 50%; transition: transform .12s; }
.hc-cara:active { transform: scale(.94); }
.hoy-cabeza:has(.hc-acciones) .hc-cara { margin-left: 4px; }

/* Menú lateral y cajón: la persona lleva a su perfil. */
.lateral-pie a.quien { display: flex; align-items: center; gap: 10px; color: var(--sutil); border-radius: var(--r-2); }
.lateral-pie a.quien > div { min-width: 0; }
.lateral-pie a.quien:hover b { color: var(--acento-tx); }
.quien-cara .av { width: 32px; height: 32px; font-size: 12px; }
.cj-yo { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: inherit; }
.cj-yo > div { display: grid; min-width: 0; }

/* Perfil */
.pf-cabeza { margin: 0 0 24px; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
.pf-portada { position: relative; height: 180px; background: linear-gradient(135deg, #818CF8, #4F46E5 50%, #312E81); background-size: cover; background-position: center; }
.pf-portada-boton { position: absolute; right: 12px; bottom: 12px; }
.pf-portada-boton .mini-boton { border: 0; background: rgb(15 23 42 / .5); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pf-portada-boton .mini-boton svg { width: 16px; height: 16px; }
.pf-id { display: flex; align-items: flex-end; gap: 16px; margin-top: -52px; padding: 0 22px; }
.pf-foto { position: relative; flex: none; }
.pf-foto > button { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pf-camara { position: absolute; right: 2px; bottom: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tarjeta); color: var(--texto); box-shadow: 0 2px 8px rgb(15 23 42 / .2); }
.pf-camara svg { width: 17px; height: 17px; }
.pf-nombre { flex: 1; min-width: 0; padding-bottom: 6px; }
.pf-nombre h1 { margin: 0; font-size: 22px; letter-spacing: -.015em; }
.pf-nombre p { margin: 2px 0 0; font-size: 15px; color: var(--sutil); }
.pf-id > .boton { margin-bottom: 8px; }
.pf-acerca { margin: 0; padding: 14px 22px 0; font-size: 15px; line-height: 1.55; }
.pf-datos { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 22px 20px; font-size: 13px; color: var(--sutil); }
.pf-dato { display: inline-flex; align-items: center; gap: 6px; }
.pf-dato svg { width: 16px; height: 16px; color: var(--tenue); }
.pf-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pf-cifra { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--tarjeta); }
.pf-cifra b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.pf-cifra b small { font-size: 15px; color: var(--tenue); font-weight: 600; }
.pf-cifra span { font-size: 13px; color: var(--sutil); }
.pf-actividad { margin-top: 12px; }
.pf-act { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea-2); color: var(--texto); }
.pf-act:last-child { border-bottom: 0; }
.pf-act:hover { background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.pf-act-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-1); background: var(--acento-suave); color: var(--acento-tx); }
.pf-act-ico svg { width: 17px; height: 17px; }
.pf-act b, .pf-act span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-act b { font-size: 15px; font-weight: 600; }
.pf-act span { font-size: 13px; color: var(--sutil); }
.pf-act time { font-size: 12px; color: var(--tenue); }
.pf-privado h2 { display: flex; align-items: center; gap: 8px; }
.pf-privado h2 svg { width: 18px; height: 18px; color: var(--tenue); }
.pf-privado > .sutil { margin: -4px 0 12px; font-size: 13px; }
.pf-campo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea-2); font-size: 15px; }
.pf-campo:last-child { border-bottom: 0; }
.pf-campo span { font-size: 13px; color: var(--sutil); }
.pf-campo b { font-weight: 500; white-space: pre-line; }
.pf-campo em { font-style: normal; color: var(--tenue); }
.pf-privado > .boton { margin-top: 12px; }
.pf-avatares { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; padding: 4px 0 8px; }
.pf-avatar { aspect-ratio: 1; padding: 3px; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.pf-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.pf-avatar.activo, .pf-avatar:hover { border-color: var(--acento); }
@media (max-width: 760px) {
  .pf-cabeza { margin-inline: -14px; border-radius: 0; border-inline: 0; border-top: 0; }
  .pf-portada { height: 130px; }
  .pf-id { flex-wrap: wrap; gap: 10px 14px; margin-top: -44px; padding: 0 16px; }
  .av.xl { width: 92px; height: 92px; font-size: 32px; }
  .pf-nombre { padding-bottom: 2px; }
  .pf-id > .boton { width: 100%; margin: 4px 0 0; }
  .pf-acerca, .pf-datos { padding-inline: 16px; }
  .pf-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-campo { grid-template-columns: 1fr; gap: 2px; }
}

/* Directorio */
.dir-buscar { width: 100%; min-height: 44px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 15px; }
.dir-fila { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--linea-2); cursor: pointer; }
.dir-fila:last-child { border-bottom: 0; }
.dir-fila:hover { background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.dir-fila > .av { width: 40px; height: 40px; font-size: 14px; }
.dir-texto { flex: 1; min-width: 0; }
.dir-texto b { display: block; font-size: 15px; font-weight: 600; }
.dir-texto span { display: block; font-size: 13px; color: var(--sutil); }
.dir-contacto { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sutil); }
.dir-contacto .mini-boton svg { width: 16px; height: 16px; }

/* ═══ Hoy · avisos (v0.46) ═══
   Lo urgente en una franja fija; lo destacado en tarjetas blancas con su ícono de color.
   Sin tarjetas pastel ni bordes de dos colores. */
.franja-urgente { align-items: flex-start; gap: 12px; padding: 14px 16px; border: 0; border-radius: var(--radio); background: var(--rojo-suave); }
.franja-urgente .fu-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--rojo); color: #fff; }
.franja-urgente .fu-ico svg { width: 17px; height: 17px; stroke-width: 2.2; }
.fu-texto { gap: 2px; padding-top: 1px; font-size: 13px; color: var(--sutil); }
.fu-texto b { color: var(--texto); font-size: 15px; }
.fu-acc { align-self: center; flex-wrap: nowrap; }
.fu-boton { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-1); background: none; color: var(--rojo); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.fu-boton:hover { background: color-mix(in srgb, var(--rojo) 10%, transparent); }

.aviso { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border: 1px solid var(--linea); background: var(--tarjeta); box-shadow: none; }
.aviso.destacado { box-shadow: none; }
.av-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cbg); color: var(--ctx); }
.av-ico svg { width: 18px; height: 18px; }
.av-cuerpo { display: grid; gap: 4px; min-width: 0; }
.aviso-cabeza { min-width: 0; min-height: 22px; font-size: 13px; }
.aviso-tono { flex: none; }
.aviso-para { overflow: hidden; margin-left: 0; text-overflow: ellipsis; white-space: nowrap; color: var(--tenue); }
.aviso-para::before { content: '· '; }
.aviso-cabeza .mas-menu { margin-left: auto; }
.aviso-cabeza .mm-abrir { min-height: 0; padding: 2px 6px; border: 0; background: none; color: var(--tenue); }
.aviso-titulo { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.aviso-texto { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--sutil); }
.aviso-texto a { color: var(--acento-tx); }
.aviso-pie { flex-wrap: wrap; margin-top: 6px; }
.aviso-hasta { font-size: 13px; color: var(--tenue); }
.aviso .mini-boton { background: var(--tarjeta); }
.aviso .mini-boton.azul, .mini-boton.azul { border-color: transparent; background: var(--acento); color: #fff; }
.aviso .mini-boton.azul:hover, .mini-boton.azul:hover { background: #4338ca; color: #fff; }
.cr-pista { gap: 12px; }
@media (max-width: 760px) {
  .franja-urgente { flex-wrap: wrap; padding: 12px 14px; }
  .franja-urgente .fu-texto { flex: 1 1 calc(100% - 44px); }
  .franja-urgente .fu-acc { width: 100%; justify-content: flex-end; margin-top: -4px; }
  .aviso { gap: 10px; padding: 14px; }
  .av-ico { width: 32px; height: 32px; }
  .aviso-acciones { width: 100%; justify-content: flex-end; }
}
/* Lo urgente se lee completo; lo destacado se abre al tocar el texto. */
.franja-urgente .fu-texto span { display: block; -webkit-line-clamp: unset; overflow: visible; }
.aviso-cabeza { gap: 5px; }
.aviso-texto { cursor: pointer; }
.aviso-texto.abierta { -webkit-line-clamp: unset; }

/* ═══ Turnos con acuse (v0.47) ═══ */
.turno-pendiente { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radio); background: var(--ambar-suave); }
.turno-pendiente.mio { background: var(--acento-suave); }
.tp-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ambar); color: #fff; }
.turno-pendiente.mio .tp-ico { background: var(--acento); }
.tp-ico svg { width: 17px; height: 17px; }
.tp-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tp-texto b { font-size: 15px; }
.tp-texto span { font-size: 13px; color: var(--sutil); }
.tp-texto p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.turno-pendiente > .boton { align-self: center; flex: none; }
@media (max-width: 760px) { .turno-pendiente { flex-wrap: wrap; } .turno-pendiente > .boton { width: 100%; } }
.tn-fila { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea-2); cursor: pointer; }
.tn-fila:last-child { border-bottom: 0; }
.tn-texto { flex: 1; min-width: 0; }
.tn-texto b { display: block; font-size: 15px; font-weight: 600; }
.tn-texto span { font-size: 13px; color: var(--sutil); }
.tn-texto p { margin: 4px 0 0; font-size: 13px; color: var(--sutil); }
.lt-nota-entrega { display: block; margin-top: 4px; white-space: pre-line; }
.persona.baja { opacity: .55; }
.persona.baja > span::after { content: ' · ya no está'; font-size: 12px; color: var(--tenue); }
.salida > .sutil { margin: 0 0 14px; font-size: 14px; }
.salida-todos { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.salida-todos select, .salida-fila select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--r-1); background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 14px; }
.salida-lista { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.salida-fila { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-2); }
.sf-cabeza b { display: block; font-size: 15px; }
.sf-cabeza span { font-size: 13px; color: var(--sutil); }
.salida-fila textarea { grid-column: 1 / -1; width: 100%; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r-1); background: var(--fondo); color: var(--texto); font: inherit; font-size: 14px; resize: vertical; }
.salida-sueltos { margin: 12px 0 0; font-size: 13px; color: var(--sutil); }
.salida .modal-pie { padding: 16px 0 4px; justify-content: flex-end; }
@media (max-width: 760px) { .salida-fila { grid-template-columns: 1fr; } }
.salida-todos { white-space: nowrap; } .salida-todos select { flex: 1; min-width: 0; }

/* ═══ Feed del equipo (v0.48) · funcional; el diseño fino va después ═══ */
.seg-equipo { margin: 0 0 18px; }
.feed .feed-lista { display: grid; gap: 14px; }
.pub-nueva { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
.pn-fila { display: flex; gap: 12px; align-items: flex-start; }
.pn-fila > .av { width: 40px; height: 40px; font-size: 14px; flex: none; }
.pn-fila textarea { flex: 1; min-height: 40px; padding: 9px 2px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; resize: none; outline: none; }
.pn-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 52px; }
.pn-mini { position: relative; width: 84px; height: 84px; border-radius: var(--r-2); overflow: hidden; background: var(--chipon) center/cover; }
.pn-mini img { width: 100%; height: 100%; object-fit: cover; }
.pn-mini button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgb(15 23 42 / .6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.pn-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea-2); }
.pn-botones { display: flex; gap: 6px; }

.pub { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
.pub.fijada { border-color: color-mix(in srgb, var(--acento) 40%, var(--linea)); }
.pub-cabeza { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.pub-cabeza .av { width: 40px; height: 40px; font-size: 14px; }
.pub-cabeza .av svg { width: 18px; height: 18px; color: #fff; }
.pc-texto { flex: 1; min-width: 0; display: grid; }
.pc-texto b { font-size: 15px; color: var(--texto); }
.pc-texto span { font-size: 13px; color: var(--tenue); }
.pc-texto span a { color: inherit; }
.pub-cabeza .mm-abrir { border: 0; background: none; color: var(--tenue); }
.pub-texto { padding: 2px 16px 12px; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pub-texto a { color: var(--acento-tx); }
.pub-origen { display: flex; gap: 14px; align-items: center; margin: 2px 16px 14px; padding: 14px; border-radius: var(--r-2); background: var(--fondo); color: var(--texto); }
.po-ilus { flex: none; width: 64px; height: 64px; object-fit: contain; }
.po-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-2); background: var(--acento-suave); color: var(--acento-tx); }
.po-ico svg { width: 22px; height: 22px; }
.pub-origen > div { display: grid; gap: 2px; min-width: 0; }
.po-tipo { font-size: 12px; font-weight: 650; color: var(--acento-tx); }
.pub-origen b { font-size: 15px; }
.po-texto { font-size: 13px; color: var(--sutil); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pub-fotos { display: grid; gap: 2px; background: var(--linea-2); }
.pub-fotos.n2, .pub-fotos.n4 { grid-template-columns: 1fr 1fr; }
.pub-fotos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pub-fotos.n3 .pub-foto:first-child { grid-row: span 2; }
.pub-foto { display: block; padding: 0; border: 0; background: var(--chipon); cursor: zoom-in; }
.pub-foto img { display: block; width: 100%; height: 100%; max-height: 560px; object-fit: cover; }
.pub-fotos:not(.n1) .pub-foto img { aspect-ratio: 1; }
.pub-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000 center/cover; cursor: pointer; }
.pub-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; border-radius: 14px; background: rgb(15 15 15 / .8); transform: translate(-50%, -50%); }
.yt-play::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.pub-yt:hover .yt-play { background: #f00; }
.pub-resumen { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; font-size: 13px; color: var(--sutil); }
.pub-resumen .enlace { font-weight: 500; color: var(--sutil); }
.pub-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 12px 0; padding: 4px 0; border-top: 1px solid var(--linea-2); }
.pa-boton { min-height: 40px; border: 0; border-radius: var(--r-1); background: none; color: var(--sutil); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pa-boton:hover { background: var(--chipon); }
.pa-boton.activa { color: var(--acento-tx); }
.pub-reacciones { position: fixed; z-index: 140; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--tarjeta); box-shadow: var(--sombra-menu); }
.pub-reacciones button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 26px; cursor: pointer; transition: transform .12s; }
.pub-reacciones button:hover { transform: scale(1.25) translateY(-3px); }
.pub-comentarios { display: grid; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--linea-2); }
.cm-pub { display: flex; gap: 8px; align-items: flex-start; }
.cm-pub.resp { margin-left: 40px; }
.cm-pub > .av { width: 32px; height: 32px; font-size: 12px; }
.cmp-cuerpo { min-width: 0; }
.cmp-burbuja { padding: 8px 12px; border-radius: 16px; background: var(--fondo); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.cmp-burbuja b { display: block; font-size: 13px; }
.cmp-pie { display: flex; gap: 12px; padding: 3px 12px 0; font-size: 12px; color: var(--tenue); }
.cmp-pie .enlace { font-size: 12px; color: var(--sutil); }
.cmp-nuevo { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cmp-respondiendo { width: 100%; font-size: 12px; color: var(--sutil); }
.cmp-nuevo textarea { flex: 1; min-height: 40px; padding: 9px 14px; border: 1px solid var(--linea); border-radius: 20px; background: var(--fondo); color: var(--texto); font: inherit; font-size: 15px; resize: none; }
.feed-mas { padding: 18px; text-align: center; }
.pub-grande { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: var(--r-2); }
@media (max-width: 760px) {
  .feed .pub, .pub-nueva { margin-inline: -14px; border-inline: 0; border-radius: 0; }
  .feed .feed-lista { gap: 10px; }
  .pn-adjuntos { margin-left: 0; }
}
.boton:disabled { opacity: .45; cursor: default; }
/* Reacciones con íconos propios */
.rx { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; }
.rx-pila { display: inline-flex; margin-right: 4px; }
.rx-pila .rx { width: 20px; height: 20px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--tarjeta); }
.rx-pila .rx:first-child { margin-left: 0; }
.pub-resumen > span { display: inline-flex; align-items: center; }
.pa-boton { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.pa-boton svg { width: 19px; height: 19px; }
.pa-boton .rx { width: 22px; height: 22px; vertical-align: 0; }
.pub-reacciones button { display: grid; place-items: center; }
.pub-reacciones .rx { width: 38px; height: 38px; }
.pc-fijada { display: inline-flex; align-items: center; gap: 3px; font-style: normal; color: var(--acento-tx); font-weight: 600; }
.pc-fijada svg { width: 13px; height: 13px; }
.pn-boton { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-1); background: none; color: var(--sutil); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pn-boton:hover { background: var(--chipon); }
.pn-boton img { width: 24px; height: 24px; }

/* ═══ Feed en computadora: columnas a los lados con widgets (v0.49) ═══ */
.feed-rejilla { display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; gap: 24px; align-items: start; }
.feed-lado { display: none; }
@media (min-width: 1000px) {
  .feed-rejilla { grid-template-columns: minmax(0, 620px) 300px; }
  .feed-lado.der { display: grid; gap: 14px; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: none; }
  .tendencias-chips { display: none !important; }
}
@media (min-width: 1360px) {
  .feed-rejilla { grid-template-columns: 250px minmax(0, 620px) 300px; }
  .feed-lado.izq { display: grid; gap: 14px; position: sticky; top: 24px; }
  #w-tendencias-der { display: none; }
}
.widget { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
.w-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.w-cabeza h3 { margin: 0; font-size: 15px; font-weight: 650; }
.w-cabeza .enlace { font-size: 13px; }
.widget .sutil { margin: 0; font-size: 13px; }
.w-lista { display: grid; }
.wt-fila { display: grid; padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-1); color: var(--texto); }
.wt-fila:hover, .wt-fila.activo { background: var(--chipon); }
.wt-fila b { font-size: 14px; font-weight: 650; color: var(--acento-tx); }
.wt-fila span { font-size: 12px; color: var(--tenue); }
.wl-fila { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-1); color: var(--texto); font-size: 14px; }
.wl-fila:hover { background: var(--chipon); }
.wl-fila.yo { background: var(--acento-suave); }
.wl-pos { width: 18px; font-weight: 700; color: var(--tenue); text-align: center; font-variant-numeric: tabular-nums; }
.wl-fila .av { width: 28px; height: 28px; font-size: 11px; }
.wl-fila b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-pts { font-size: 13px; font-weight: 650; color: var(--sutil); font-variant-numeric: tabular-nums; }
.wc-fila, .wn-fila { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--linea-2); color: var(--texto); }
.w-cabeza + .wc-fila, .w-cabeza + .wn-fila { border-top: 0; padding-top: 2px; }
.wc-fila b, .wn-fila b { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wc-fila span, .wn-fila span { font-size: 12px; color: var(--tenue); }
.wc-fila:hover b, .wn-fila:hover b { color: var(--acento-tx); }
.wc-ok { font-style: normal; color: var(--verde); font-weight: 600; }
.wc-sin { font-style: normal; color: var(--ambar); font-weight: 600; }
.w-yo { padding: 0 0 12px; overflow: hidden; text-align: center; }
.wy-portada { height: 64px; background: linear-gradient(135deg, #818CF8, #4F46E5 50%, #312E81) center/cover; }
.wy-cara { display: inline-block; margin-top: -26px; border-radius: 50%; box-shadow: 0 0 0 3px var(--tarjeta); }
.w-yo > b { display: block; margin-top: 6px; font-size: 15px; }
.w-yo > span { display: block; font-size: 13px; color: var(--sutil); }
.wy-ligas { display: grid; margin-top: 10px; padding: 8px 8px 0; border-top: 1px solid var(--linea-2); text-align: left; }
.wy-ligas a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-1); color: var(--texto); font-size: 14px; font-weight: 500; }
.wy-ligas a:hover { background: var(--chipon); }
.wy-ligas svg { width: 18px; height: 18px; color: var(--tenue); }
/* Hashtags */
.hashtag { color: var(--acento-tx); font-weight: 600; }
.pub-temas { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0 16px 12px; font-size: 13px; }
.feed-tema { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.feed-tema h1 { margin: 0; font-size: 22px; color: var(--acento-tx); }
.tendencias-chips { display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.tendencias-chips:empty { display: none; }
.tendencias-chips::-webkit-scrollbar { display: none; }
.chip-tema { flex: none; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--acento-tx); font-size: 13px; font-weight: 600; }
.chip-tema.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
@media (max-width: 760px) { .tendencias-chips { margin-inline: -14px; padding-inline: 14px; } }

/* ═══ Artículos del equipo (v0.50) ═══ */
.art-autor { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; color: var(--sutil); }
.art-autor .av { width: 24px; height: 24px; font-size: 10px; }
.art-calif { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-weight: 650; color: var(--ambar); }
.art-calif svg { width: 14px; height: 14px; fill: currentColor; }
.art-autor-caja { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 14px 0; border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2); }
.art-autor-caja > div { flex: 1; min-width: 0; display: grid; }
.art-autor-caja .sutil { font-size: 12px; }
.art-autor-caja b { font-size: 15px; color: var(--texto); }
.aac-meta { font-size: 13px; color: var(--sutil); }
.aac-calif { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.aac-calif small { color: var(--tenue); }
.estrellas { display: inline-flex; gap: 1px; color: var(--ambar); }
.estrellas i { display: inline-grid; color: var(--linea-h, #CBD5E1); }
.estrellas i svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.estrellas i.llena, .estrellas i.media { color: var(--ambar); }
.estrellas i.media { opacity: .55; }
.art-obs { margin: 6px 0 0; white-space: pre-line; }
.callout.ambar { background: var(--ambar-suave); }
.callout.azul { background: var(--acento-suave); }
.art-calificar { display: grid; justify-items: center; gap: 8px; margin: 34px 0 0; padding: 22px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); text-align: center; }
.art-calificar > b { font-size: 17px; }
.ac-estrellas { display: flex; gap: 6px; }
.ac-estrellas button { padding: 4px; border: 0; background: none; color: var(--linea-h, #CBD5E1); cursor: pointer; transition: transform .12s, color .12s; }
.ac-estrellas button svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.ac-estrellas button.llena { color: var(--ambar); }
.ac-estrellas:hover button { color: var(--ambar); }
.ac-estrellas button:hover ~ button { color: var(--linea-h, #CBD5E1); }
.ac-estrellas button:active { transform: scale(.9); }
.ac-fila { display: flex; align-items: center; gap: 8px; }
.ac-fila .estrellas i svg { width: 22px; height: 22px; }
.art-sobre { display: flex; gap: 18px; align-items: center; margin: 18px 0 0; padding: 22px; border-radius: var(--radio); background: var(--acento-suave); }
.art-sobre > div { display: grid; gap: 2px; min-width: 0; }
.art-sobre b { font-size: 17px; }
.art-sobre p { margin: 6px 0; font-size: 15px; line-height: 1.5; }
.art-sobre .enlace { justify-self: start; }
.art-comentarios { margin: 30px 0 0; }
.art-comentarios h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.art-comentarios h2 b { font-size: 13px; color: var(--tenue); }
.hilo { display: grid; gap: 10px; }
#pf-articulos + .boton { margin-top: 12px; }
@media (max-width: 760px) { .art-sobre { flex-direction: column; text-align: center; } .art-sobre .enlace { justify-self: center; } .art-autor-caja { flex-wrap: wrap; } }
/* Dudas del artículo que viven en el foro */
.hilo-pregunta { display: flex; align-items: flex-start; gap: 8px; width: 100%; font-size: 13px; color: var(--sutil); cursor: pointer; }
.hilo-pregunta input { margin-top: 2px; }
.hilo-preguntas { display: grid; gap: 2px; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r-2); background: var(--acento-suave); }
.hp-titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--acento-tx); }
.hp-titulo svg { width: 16px; height: 16px; }
.hp-fila { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-1); color: var(--texto); }
.hp-fila:hover { background: rgb(255 255 255 / .5); }
.hp-fila .av { width: 28px; height: 28px; font-size: 11px; }
.hp-fila > div { flex: 1; min-width: 0; display: grid; }
.hp-fila b { font-size: 14px; font-weight: 600; }
.hp-fila span { font-size: 12px; color: var(--sutil); }
.cs-desde { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--acento-tx); }
.cs-desde svg { width: 16px; height: 16px; }

/* ═══ Rediseño por partes · 1. La fila de término (22 oct) ═══
   Dos renglones: título; cliente · etapa · fecha dominante · estado. El distintivo lleva los días.
   El rojo es sólo de la fecha fatal; el compromiso interno va en ámbar y sólo si ya apremia. */
.item.fila-t { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 12px; }
.fila-t .reloj { width: 60px; min-height: 50px; padding: 7px 3px; gap: 2px; }
.fila-t .reloj b { font-size: 20px; }
.fila-t .reloj span { font-size: 10.5px; }
.ft-cuerpo { min-width: 0; display: grid; gap: 3px; }
.ft-titulo { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ft-titulo > .ft-tipo { flex: none; font-size: 11px; font-weight: 650; color: var(--tenue); text-transform: none; }
.ft-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--sutil); }
.ft-meta .punto { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ft-linea { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--linea); border-radius: 999px; background: none; color: var(--sutil); font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.5; cursor: default; }
button.ft-chip { cursor: pointer; }
.ft-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-solido); }
.ft-chip.av-blue::before { background: var(--blue-solido); } .ft-chip.av-purple::before { background: var(--purple-solido); }
.ft-chip.av-orange::before { background: var(--orange-solido); } .ft-chip.av-green::before { background: var(--green-solido); }
.ft-chip.verde { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 35%, transparent); } .ft-chip.verde::before { background: var(--verde); }
.ft-chip.ambar { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); } .ft-chip.ambar::before { background: var(--ambar); }
.ft-lado { display: flex; align-items: center; gap: 8px; }
.ft-quien .av { width: 26px; height: 26px; font-size: 10px; }
.fila-t .meta-acciones { margin: 0; }
.fila-t .item-doc { margin-top: 2px; }
.fila-t .mm-abrir { min-height: 32px; padding-inline: 6px; }
.solo-pc, .pc-txt { display: none; }
@media (min-width: 761px) { .solo-pc { display: inline-flex; } .pc-txt { display: inline; } }
@media (max-width: 760px) {
  .item.fila-t { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px 10px 10px 10px; }
  .fila-t .reloj { width: 56px; min-height: 48px; }
  .fila-t .reloj b { font-size: 19px; }
  .fila-t .reloj span { font-size: 10px; }
  .ft-titulo { font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ft-meta { gap: 6px; }
  .ft-chip { padding: 0 7px; font-size: 11px; }
  .ft-lado { gap: 4px; }
  .fila-t .mm-abrir { padding-inline: 4px; }
}
.item.fila-t { grid-template-areas: none; }
.fila-t > .reloj, .fila-t > .ft-cuerpo, .fila-t > .ft-lado { grid-area: auto; }
/* En el teléfono la línea de cliente va completa y los distintivos pasan al renglón de abajo. */
@media (max-width: 760px) {
  .ft-meta { flex-wrap: wrap; gap: 4px 6px; }
  .ft-meta .ft-linea { flex: 1 1 calc(100% - 13px); }
  /* Sin borde en el teléfono: los dos distintivos caben en un renglón como texto con su punto. */
  .ft-meta .ft-chip { padding: 0; border: 0; font-size: 11.5px; }
  .ft-meta .ft-chip + .ft-chip { margin-left: 4px; }
  .ft-meta .ft-chip.solo-pc { display: none; }
}

/* ═══ Rediseño por partes · 2. El Hoy del abogado (22 oct) ═══
   Encabezado de un renglón, cifras una sola vez, tira de siete días y la lista de inmediato. */
.hoy-cabeza.compacta { align-items: center; margin-bottom: 14px; }
.hoy-cabeza.compacta h1 { margin: 0; font-size: 22px; }
.hoy-cabeza.compacta .hc-fecha { margin-bottom: 1px; }
.hoy-2 .cifras-plazo { margin-bottom: 12px; }
.hoy-2 .cifras-plazo .cp { min-height: 38px; padding: 6px 12px; gap: 6px; border-radius: 999px; }
.hoy-2 .cifras-plazo .cp b { font-size: 15px; }
.hoy-2 .cifras-plazo .cp span { font-size: 13px; }
.tira7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 18px; padding: 6px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--linea); }
.t7 { display: grid; gap: 1px; justify-items: center; padding: 5px 2px 4px; border-radius: 10px; color: var(--texto); text-decoration: none; min-height: 52px; }
.t7-sem { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.t7-num { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.t7-n { font-size: 11px; font-weight: 700; min-height: 15px; line-height: 15px; padding: 0 6px; border-radius: 999px; }
.t7.con .t7-n { background: var(--acento-suave); color: var(--acento-tx); }
.t7.con.rojo .t7-n { background: var(--rojo); color: #fff; }
.t7.finde .t7-num, .t7.finde .t7-sem { color: var(--tenue-2); }
.t7.hoy { background: var(--chipon); }
.t7.hoy .t7-sem { color: var(--acento-tx); }
.t7.con:hover { background: var(--chipon); }
.grupo-plazo.resalta > h3 { color: var(--acento-tx); transition: color .3s; }
/* Recordatorios en una línea; se abren al tocar. */
.rec-lista { display: grid; gap: 6px; margin: 0 0 16px; }
.rec { --c: var(--blue-solido); --cbg: var(--blue-bg); --ctx: var(--blue-tx); border-radius: 12px; background: var(--cbg); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); transition: opacity .2s, transform .2s; }
.rec.c-yellow { --c: var(--yellow-solido); --cbg: var(--yellow-bg); --ctx: var(--yellow-tx); }
.rec.c-green { --c: var(--green-solido); --cbg: var(--green-bg); --ctx: var(--green-tx); }
.rec.se-va { opacity: 0; transform: scale(.98); }
.rec > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 10px; cursor: pointer; list-style: none; }
.rec > summary::-webkit-details-marker { display: none; }
.rec-ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; }
.rec-ico svg { width: 14px; height: 14px; stroke-width: 2.2; }
.rec-titulo { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rec-de { flex: 1; min-width: 0; font-size: 13px; color: var(--sutil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-nuevo { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.rec-cuerpo { display: grid; gap: 10px; padding: 0 12px 12px 46px; }
.rec-cuerpo .aviso-texto { font-size: 15px; font-weight: 450; line-height: 1.45; }
.rec-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec .mini-boton:not(.azul) { background: var(--tarjeta); }
@media (max-width: 760px) {
  .hoy-cabeza.compacta { margin-bottom: 10px; }
  .hoy-cabeza.compacta h1 { font-size: 20px; }
  .hoy-2 .cifras-plazo { margin-bottom: 10px; }
  .tira7 { margin-bottom: 14px; }
  .t7 { min-height: 48px; }
  .rec-de { display: none; }
  .rec-cuerpo { padding-left: 12px; }
}

/* ═══ Mi día · encabezado con selector y tira (22 oct, inspirado en una referencia de Behance) ═══ */
.dp-cabeza { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.dp-cabeza .hc-cara { flex: none; padding: 3px; border-radius: 50%; background: var(--tarjeta); box-shadow: 0 0 0 1px var(--linea); }
.dp-cabeza .hc-cara .av { width: 52px; height: 52px; }
.dp-titulo { flex: 1; min-width: 0; }
.dp-titulo h1 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.dp-titulo p { margin: 3px 0 0; font-size: 14px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-acc { display: flex; gap: 10px; }
.dp-boton { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--linea); border-radius: 15px; background: var(--tarjeta); color: var(--texto); cursor: pointer; }
.dp-boton svg { width: 20px; height: 20px; stroke-width: 1.8; }
.dp-boton .cuenta { position: absolute; top: -4px; right: -4px; }
.dp-rango { display: flex; align-items: center; gap: 6px; padding: 5px; margin: 0 0 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); }
.dp-cal { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--fondo); color: var(--sutil); }
.dp-cal svg { width: 19px; height: 19px; }
.dp-seg { --i: 1; position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); }
.dp-seg::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / 3); border-radius: 999px; background: var(--fondo); transform: translateX(calc(var(--i) * 100%)); transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
.dp-seg::after { content: ''; position: absolute; top: -4px; left: calc(100% / 6 - 14px); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acento); transform: translateX(calc(var(--i) * 300%)); transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
.dp-seg button { position: relative; z-index: 1; height: 42px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--tenue); cursor: pointer; }
.dp-seg button[aria-selected="true"] { color: var(--texto); font-weight: 650; }
#dp-calendario { margin: 0 0 20px; }
.dp-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 14px 10px 12px; border: 1px solid var(--linea); border-radius: 22px; background: var(--tarjeta); }
.dp-dia { display: grid; justify-items: center; gap: 4px; padding: 10px 0 9px; border: 0; border-radius: 999px; background: none; font: inherit; color: var(--texto); cursor: pointer; transition: background .2s, color .2s; }
.dp-sem { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.dp-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dp-punto { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.dp-punto.con { background: var(--acento); }
.dp-punto.rojo { background: var(--rojo); }
.dp-dia.finde .dp-num, .dp-dia.finde .dp-sem { color: var(--tenue-2); }
.dp-dia.hoy:not(.sel) .dp-sem { color: var(--acento-tx); }
.dp-dia:hover:not(.sel) { background: var(--fondo); }
.dp-dia.sel { background: var(--grad); color: #fff; box-shadow: 0 12px 22px -10px rgb(79 70 229 / .65); }
.dp-dia.sel .dp-sem, .dp-dia.sel .dp-num { color: #fff; }
.dp-dia.sel .dp-punto.con, .dp-dia.sel .dp-punto.rojo { background: #fff; }
.dp-mes { padding: 12px 12px 10px; border: 1px solid var(--linea); border-radius: 22px; background: var(--tarjeta); }
.dp-mes-cabeza { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.dp-mes-cabeza b { font-size: 16px; }
.dp-flecha { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--sutil); cursor: pointer; }
.dp-flecha svg { width: 17px; height: 17px; }
.dp-flecha.der svg { transform: rotate(180deg); }
.dp-mrejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-msem { text-align: center; font-size: 11px; font-weight: 650; text-transform: uppercase; color: var(--tenue); padding: 2px 0 6px; }
.dp-mdia { display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--texto); cursor: pointer; }
.dp-mdia.finde { color: var(--tenue-2); }
.dp-mdia.hoy:not(.sel) span { color: var(--acento-tx); }
.dp-mdia:hover:not(.sel) { background: var(--fondo); }
.dp-mdia.sel { background: var(--grad); color: #fff; }
.dp-mdia.sel .dp-punto { background: #fff; }
#dp-lista > h2 { align-items: baseline; }
.dp-sub { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--tenue); }
/* En el teléfono, Mi día lleva su propia cabeza: la barra de arriba sobra. En PC, buscar y la campana ya están en el menú. */
@media (max-width: 899px) {
  body:has(.hoy-3) .barra-arriba { display: none; }
  body:has(.hoy-3) .contenido { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 900px) { .dp-acc .dp-boton:not(a) { display: none; } }
@media (max-width: 760px) {
  .dp-cabeza { gap: 12px; margin-bottom: 14px; }
  .dp-cabeza .hc-cara .av { width: 46px; height: 46px; }
  .dp-titulo h1 { font-size: 23px; }
  .dp-titulo p { font-size: 13px; }
  .dp-acc { gap: 8px; }
  .dp-boton { width: 42px; height: 42px; border-radius: 13px; }
  .dp-tira { padding: 10px 6px; gap: 2px; border-radius: 20px; }
  .dp-num { font-size: 18px; }
  .dp-sem { font-size: 11px; }
  .dp-dia { padding: 9px 0 8px; }
  #dp-calendario { margin-bottom: 16px; }
}
/* En PC la píldora conserva su forma y el selector no se estira a todo lo ancho. */
.dp-dia { width: 100%; max-width: 68px; justify-self: center; }
@media (min-width: 900px) { .dp-rango { max-width: 460px; } }
/* La cara de Mi día: círculo exacto. El enlace era de bloque con la foto en línea y el renglón le sumaba
   unos píxeles abajo; el aro salía ovalado y la foto subida. */
.hc-cara { display: grid; place-items: center; line-height: 0; }
.hc-cara .av { display: block; }
.hc-cara .av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dp-cabeza .hc-cara { width: 60px; height: 60px; padding: 0; box-sizing: border-box; border: 3px solid var(--tarjeta); box-shadow: 0 0 0 1px var(--linea), 0 4px 12px -6px rgb(15 23 42 / .25); background: var(--tarjeta); }
.dp-cabeza .hc-cara .av { width: 100%; height: 100%; }
@media (max-width: 760px) { .dp-cabeza .hc-cara { width: 54px; height: 54px; } }
@media (max-width: 760px) {
  .dp-tira { padding: 10px 8px; }
  .dp-dia { max-width: 46px; }
}
/* Mi día funcional: la tarjeta lleva el título del periodo, "Hoy" y las flechas; la tira es lunes a domingo. */
.dp-tarjeta { padding: 10px 10px 12px; border: 1px solid var(--linea); border-radius: 22px; background: var(--tarjeta); touch-action: pan-y; }
.dp-tarjeta .dp-tira { padding: 0; border: 0; border-radius: 0; background: none; }
.dp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 0 2px 0 6px; }
.dp-nav b { font-size: 15px; font-weight: 650; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-nav-acc { display: flex; align-items: center; gap: 6px; flex: none; }
.dp-hoy { height: 32px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--acento-tx); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.dp-nav .dp-flecha { width: 32px; height: 32px; }
.dp-nav .dp-flecha svg { width: 16px; height: 16px; }
.dp-cal { border: 0; cursor: pointer; }
.dp-rango { position: relative; }
.dp-fecha { position: absolute; left: 5px; bottom: 0; width: 42px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.dp-tarjeta .dp-mrejilla { padding: 0 2px; }
.dp-dia:focus-visible, .dp-mdia:focus-visible, .dp-seg button:focus-visible, .dp-flecha:focus-visible, .dp-hoy:focus-visible, .dp-cal:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (max-width: 760px) {
  .dp-tarjeta { padding: 8px 8px 10px; border-radius: 20px; }
  .dp-tarjeta .dp-tira { padding: 0; }
}

/* ═══ Mi día v2 · movimiento con resortes y píxeles en su lugar (22 oct) ═══
   Cuadrícula de 4 px. Una sola píldora viaja entre los días; el texto cambia de color debajo de ella.
   Las curvas --resorte-* las calcula app.js con un resorte físico. */
.hoy-3 .dp-cabeza { gap: 14px; margin: 4px 0 20px; }
.hoy-3 .dp-titulo h1 { font-size: 28px; line-height: 32px; font-weight: 750; letter-spacing: -.025em; }
.hoy-3 .dp-titulo p { margin-top: 2px; font-size: 14px; line-height: 20px; }
.hoy-3 .dp-boton { transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .2s; }
.hoy-3 .dp-boton:active, .hoy-3 .dp-cal:active, .dp-flecha:active, .dp-hoy:active { transform: scale(.92); }

.hoy-3 .dp-rango { height: 52px; box-sizing: border-box; padding: 4px; gap: 4px; margin: 0 0 12px; border-radius: 26px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.hoy-3 .dp-cal { width: 42px; height: 42px; transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .2s; }
.hoy-3 .dp-cal:hover { background: var(--chipon); color: var(--acento-tx); }
.hoy-3 .dp-seg { height: 42px; }
.hoy-3 .dp-seg::before { background: var(--fondo); box-shadow: inset 0 0 0 1px var(--linea-2); transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease); }
.hoy-3 .dp-seg::after { top: -4px; left: 0; width: calc(100% / 3); height: 3px; border-radius: 0; background: linear-gradient(var(--acento), var(--acento)) center top / 24px 3px no-repeat; transform: translateX(calc(var(--i) * 100%)); transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease) 30ms; }
.hoy-3 .dp-seg button { height: 42px; font-size: 15px; font-weight: 600; color: var(--tenue); transition: color .22s; }
.hoy-3 .dp-seg button[aria-selected="true"] { color: var(--texto); font-weight: 600; }
.hoy-3 .dp-seg button:not([aria-selected="true"]):hover { color: var(--sutil); }

.hoy-3 #dp-calendario { margin: 0 0 20px; }
.hoy-3 .dp-tarjeta { padding: 12px 8px 8px; border-radius: 24px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.hoy-3 .dp-nav { height: 32px; margin: 0 0 8px; padding: 0 4px 0 8px; }
.dp-periodo { position: relative; flex: 1; min-width: 0; height: 24px; overflow: hidden; }
.dp-per { display: flex; align-items: baseline; gap: 8px; height: 24px; line-height: 24px; white-space: nowrap; }
.dp-per b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.dp-per span { font-size: 14px; font-weight: 500; color: var(--tenue); font-variant-numeric: tabular-nums; }
.dp-per.sale { position: absolute; left: 0; top: 0; }
.hoy-3 .dp-nav-acc { gap: 4px; }
.hoy-3 .dp-hoy { height: 32px; box-sizing: border-box; max-width: 0; padding: 0; margin-right: 0; border: 0 solid var(--linea); opacity: 0; transform: scale(.6); overflow: hidden; pointer-events: none;
  transition: max-width var(--resorte-suave-ms, .4s) var(--resorte-suave, ease), padding var(--resorte-suave-ms, .4s) var(--resorte-suave, ease), margin .3s, opacity .2s, transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease); }
.hoy-3 .con-hoy .dp-hoy { max-width: 72px; padding: 0 12px; margin-right: 4px; border-width: 1px; opacity: 1; transform: none; pointer-events: auto; }
.hoy-3 .dp-nav .dp-flecha { width: 32px; height: 32px; background: none; color: var(--sutil); transition: background .2s, transform .18s cubic-bezier(.2, .8, .2, 1); }
.hoy-3 .dp-nav .dp-flecha:hover { background: var(--fondo); color: var(--texto); }

/* La ventana recorta lo que se desliza; su relleno deja respirar la sombra de la píldora. */
.dp-vent { position: relative; overflow: hidden; touch-action: pan-y; padding: 4px 4px 14px; margin: -4px -4px -10px; }
.dp-pista { position: relative; user-select: none; -webkit-user-select: none; }
.dp-pista.sale { position: absolute; left: 4px; right: 4px; top: 4px; pointer-events: none; }
.dp-pista.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dp-pildora { position: absolute; left: 0; top: 0; z-index: 0; width: 46px; height: 68px; border-radius: 999px; background: var(--grad);
  box-shadow: 0 10px 20px -10px rgb(79 70 229 / .75), inset 0 1px 0 rgb(255 255 255 / .2);
  transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease), width .25s, height .25s, opacity .2s; will-change: transform; }
.dp-pildora.sin-trans { transition: none; }
.dp-pildora.fuera { opacity: 0; }
.mes .dp-pildora { border-radius: 14px; box-shadow: 0 8px 16px -10px rgb(79 70 229 / .75), inset 0 1px 0 rgb(255 255 255 / .2); }

.hoy-3 .dp-dia { position: relative; z-index: 1; justify-self: center; width: 46px; max-width: none; height: 68px; padding: 0; border-radius: 999px;
  display: grid; grid-template-rows: 16px 24px 6px; row-gap: 4px; align-content: center; justify-items: center; background: none; box-shadow: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.hoy-3 .dp-dia:hover:not(.sel) { background: var(--fondo); }
.hoy-3 .dp-dia:active { transform: scale(.93); }
.hoy-3 .dp-dia.sel { background: none; box-shadow: none; }
.hoy-3 .dp-sem { font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); transition: color .25s; }
.hoy-3 .dp-num { font-size: 20px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); transition: color .25s; }
.hoy-3 .dp-dia.finde:not(.sel) .dp-num, .hoy-3 .dp-dia.finde:not(.sel) .dp-sem { color: var(--tenue-2); }
.hoy-3 .dp-dia.hoy:not(.sel) .dp-sem { color: var(--acento-tx); }
.hoy-3 .dp-dia.sel .dp-sem { color: rgb(255 255 255 / .82); }
.hoy-3 .dp-dia.sel .dp-num { color: #fff; }
.hoy-3 .dp-punto { width: 6px; height: 6px; border-radius: 50%; transition: background .25s, transform .35s var(--resorte-vivo, ease); }
.hoy-3 .sel .dp-punto.con, .hoy-3 .sel .dp-punto.rojo { background: #fff; transform: scale(1.1); }

.dp-msemana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 4px; }
.dp-msemana span { text-align: center; font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.hoy-3 .dp-mrejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; padding: 0; }
.hoy-3 .dp-mdia { position: relative; z-index: 1; justify-self: center; width: 44px; height: 44px; padding: 0; border-radius: 14px; display: grid; grid-template-rows: 22px 6px; row-gap: 2px; align-content: center; justify-items: center;
  background: none; font-size: 16px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.hoy-3 .dp-mdia .dp-num { font-size: 16px; line-height: 22px; font-weight: 600; }
.hoy-3 .dp-mdia:hover:not(.sel) { background: var(--fondo); }
.hoy-3 .dp-mdia:active { transform: scale(.92); }
.hoy-3 .dp-mdia.sel { background: none; }
.hoy-3 .dp-mdia.sel .dp-num { color: #fff; }
.hoy-3 .dp-mdia.finde:not(.sel) .dp-num { color: var(--tenue-2); }
.hoy-3 .dp-mdia.hoy:not(.sel) .dp-num { color: var(--acento-tx); }

.dp-todo { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 650; color: var(--acento-tx); cursor: pointer; }
@media (max-width: 760px) {
  .hoy-3 .dp-cabeza { margin-bottom: 16px; }
  .hoy-3 .dp-titulo h1 { font-size: 26px; line-height: 30px; }
  .hoy-3 .dp-tarjeta { padding: 12px 6px 8px; border-radius: 22px; }
  .hoy-3 .dp-dia { width: 42px; height: 64px; grid-template-rows: 14px 24px 6px; }
  .hoy-3 .dp-num { font-size: 19px; }
  .hoy-3 .dp-sem { font-size: 10.5px; line-height: 14px; }
  .dp-pildora { width: 42px; height: 64px; }
  .hoy-3 .dp-mdia { width: 40px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .dp-pildora, .hoy-3 .dp-seg::before, .hoy-3 .dp-seg::after, .hoy-3 .dp-hoy { transition: none; } }

/* Notificaciones en el teléfono (22 oct): el fondo no se mueve, el scroll no se escapa y todo se toca con el dedo. */
html.con-bandeja, html.con-bandeja body { overflow: hidden; }
.notif-panel .np-lista { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.notif-capa { overscroll-behavior: contain; touch-action: none; }
.notif-panel { touch-action: pan-y; }
@media (max-width: 760px) {
  .nt-botones { margin: -6px -6px -6px 0; gap: 0; }
  .nt-botones button { width: 44px; height: 44px; border-radius: 12px; }
  .np-acciones .enlace { min-height: 40px; }
  .notif { padding-right: 6px; }
}
/* El aviso emergente en el teléfono: hasta arriba como los del sistema, cerrar de 44 px y se descarta deslizándolo hacia arriba. */
@media (max-width: 899px) {
  .tostada { top: calc(8px + env(safe-area-inset-top, 0px)); touch-action: none; }
  .tostada .ts-x { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px -8px -4px; padding: 0; border-radius: 12px; }
  .tostada .mini-boton { min-height: 40px; }
}

/* ═══ Mi día en PC (22 oct): dos columnas para aprovechar lo ancho ═══
   Teléfono y tableta: una columna en el orden de siempre (calendario, avisos, lista, lo demás).
   PC (1100 px o más): arriba cara y título a la izquierda, selector a la derecha; abajo la lista a la izquierda
   y, a la derecha, una columna fija con el mes compacto, el Boletín y los pendientes. */
.hoy-3 .dp-cuerpo { display: flex; flex-direction: column; }
.hoy-3 .dp-main, .hoy-3 .dp-lado { display: contents; }
.hoy-3 #dp-calendario { order: 1; }
.hoy-3 .dp-avisos { order: 2; }
.hoy-3 #dp-lista { order: 3; }
.hoy-3 .dp-extra { order: 4; }
.hoy-3 .dp-avisos:empty { display: none; }
.dp-banda { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; background: var(--chipon); opacity: 0;
  transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease), opacity .2s, height .2s; }
.dp-banda.ver { opacity: 1; }
.dp-banda.sin-trans { transition: opacity .2s; }

@media (min-width: 1100px) {
  .hoy-3 { max-width: 1320px; }
  .hoy-3 .dp-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 4px 0 24px; }
  .hoy-3 .dp-top .dp-cabeza { margin: 0; flex: 1; min-width: 0; }
  .hoy-3 .dp-top .dp-rango { flex: none; width: 400px; margin: 0; }
  .hoy-3 .dp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 28px; align-items: start; }
  .hoy-3 .dp-main { display: block; min-width: 0; }
  .hoy-3 .dp-lado { display: block; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; }
  .hoy-3 .dp-lado::-webkit-scrollbar { display: none; }
  .hoy-3 .dp-avisos > * + * { margin-top: 0; }
  .hoy-3 .dp-avisos { margin-bottom: 8px; }
  .hoy-3 #dp-calendario { margin: 0 0 20px; }
  .hoy-3 .dp-tarjeta { padding: 14px 12px 10px; }
  .hoy-3 .dp-mdia { width: 42px; height: 42px; }
  .hoy-3 .dp-extra .bloque-hoy, .hoy-3 .dp-extra .bloque-dia { margin: 0 0 24px; }
  .hoy-3 .dp-extra .bloque-dia { margin-top: 0; }
  .hoy-3 #dp-lista > h2 { margin-top: 0; }
}

/* Las acciones de la fila de término siempre a la vista en PC (antes sólo al pasar el mouse y la fila parecía vacía).
   Discretas en reposo; al pasar por la fila, la acción principal toma el color de acción. */
@media (hover: hover) and (min-width: 900px) {
  .fila-t .meta-acciones { opacity: 1; }
}
.fila-t .meta-acciones { align-items: center; gap: 4px; }
.fila-t .fila-accion.solo-pc { height: 32px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta); color: var(--sutil); font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.fila-t:hover .fila-accion.solo-pc { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); color: var(--acento-tx); }
.fila-t .fila-accion.solo-pc:hover { background: var(--acento-suave); }
.fila-t .mm-abrir { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--tenue); display: inline-grid; place-items: center; }
.fila-t .mm-abrir:hover { background: var(--fondo); color: var(--texto); }
@media (max-width: 760px) { .fila-t .mm-abrir { width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 999px; } }

/* El Boletín en la columna angosta de Mi día: las fechas en una franja arriba y el resto debajo, a todo lo ancho. */
.hoy-3 .dp-extra .bol-fila { flex-direction: column; gap: 10px; padding: 14px; }
.hoy-3 .dp-extra .bol-fechas { width: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; text-align: left; }
.hoy-3 .dp-extra .bol-fechas span { font-size: 12px; }
.hoy-3 .dp-extra .bol-fechas b { font-size: 14px; }
.hoy-3 .dp-extra .bol-fechas span.urge { margin: 0 0 0 auto; padding: 2px 8px; }
.hoy-3 .dp-extra .bol-acciones .boton { flex: 1; justify-content: center; }
.vp-acuse { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--linea)); border-radius: 14px; background: var(--acento-suave); color: var(--acento-tx); font: inherit; text-align: left; cursor: pointer; transition: transform .15s; }
.vp-acuse:active { transform: scale(.98); }
.vp-acuse svg { flex: none; width: 20px; height: 20px; }
.vp-acuse span { display: grid; gap: 1px; }
.vp-acuse b { font-size: 15px; }
.vp-acuse small { font-size: 12px; color: var(--sutil); }

/* ═══ Carrusel de avisos de Mi día (22 oct) ═══
   Tarjetas por tono: urgente rojo, recordatorio ámbar, aviso índigo, logro verde; cada una con un brillo
   suave de su color en la esquina. La pista la mueve app.js con un resorte cuadro por cuadro. */
.cr2 { --gap: 12px; margin: 0 0 24px; }
.cr2-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.cr2-cabeza h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cr2-cabeza h2 b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--lavanda); color: var(--acento-tx); }
.cr2-nav { display: flex; align-items: center; gap: 4px; }
.cr2-pos { margin-right: 6px; font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.cr2-flecha { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 50%; background: var(--tarjeta); color: var(--sutil); cursor: pointer; transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .2s, background .2s; }
.cr2-flecha svg { width: 16px; height: 16px; }
.cr2-flecha.der svg { transform: rotate(180deg); }
.cr2-flecha:hover:not(:disabled) { background: var(--fondo); color: var(--texto); }
.cr2-flecha:active:not(:disabled) { transform: scale(.9); }
.cr2-flecha:disabled { opacity: .35; cursor: default; }
.cr2-vent { position: relative; overflow: hidden; touch-action: pan-y; margin: -10px -14px; padding: 10px 14px 16px; outline: none; cursor: grab; }
.cr2.arrastrando .cr2-vent { cursor: grabbing; }
.cr2.arrastrando { user-select: none; -webkit-user-select: none; }
.cr2-pista { display: flex; column-gap: var(--gap); will-change: transform; }
.cr2-tarjeta { --c: var(--acento); --cbg: var(--tarjeta); flex: 0 0 calc((100% - var(--gap)) / 2); min-width: 0; box-sizing: border-box; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 16px 16px 14px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--linea));
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 13%, transparent) 0%, transparent 55%), var(--tarjeta);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 10px 24px -18px color-mix(in srgb, var(--c) 60%, transparent);
  transform-origin: 50% 60%; transition: flex-basis .24s ease, margin .24s ease, padding .24s ease, border-width .24s; }
.cr2-tarjeta.t-urgente { --c: var(--rojo); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--rojo) 16%, transparent) 0%, transparent 60%), color-mix(in srgb, var(--rojo) 4%, var(--tarjeta)); }
.cr2-tarjeta.t-recordatorio { --c: #d97706; }
.cr2-tarjeta.t-logro { --c: var(--verde); }
.cr2-tarjeta.t-info { --c: var(--acento); }
.cr2-tarjeta.se-va { flex-basis: 0 !important; padding-inline: 0; border-width: 0; margin-right: calc(-1 * var(--gap)); opacity: 0 !important; transform: scale(.9) !important; transition: flex-basis .22s ease, padding .22s ease, margin .22s ease, opacity .16s, transform .22s; }
.cr2-top { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.cr2-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 4px 10px -4px var(--c); }
.cr2-ico svg { width: 15px; height: 15px; stroke-width: 2.2; }
.cr2-tono { font-size: 13px; font-weight: 700; color: var(--c); }
.cr2-de { flex: 1; min-width: 0; font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr2-top .mas-menu { margin: -4px -6px -4px 0; }
.cr2-top .mm-abrir { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--tenue); display: inline-grid; place-items: center; border-radius: 10px; }
.cr2-top .mm-abrir:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--texto); }
.cr2-titulo { margin: 2px 0 0; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--texto); }
.cr2-texto { flex: 1; font-size: 14px; line-height: 20px; color: var(--sutil); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr2-texto a { color: var(--c); text-decoration: underline; }
.cr2-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-top: 2px; }
.cr2-hasta { font-size: 12px; color: var(--tenue); }
.cr2-asunto { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--sutil); }
.cr2-asunto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr2-asunto svg { flex: none; width: 15px; height: 15px; }
.cr2-acc { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.cr2-boton { height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--c) 28%, var(--linea)); border-radius: 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: transform .16s cubic-bezier(.2, .8, .2, 1), background .15s, border-color .15s; }
.cr2-boton:hover { border-color: var(--c); }
.cr2-boton:active { transform: scale(.95); }
.cr2-boton.fuerte { background: var(--c); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -8px var(--c); }
.cr2-boton.fuerte:hover { filter: brightness(1.06); }
.cr2-visto { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--tenue); }
.cr2-visto svg { width: 14px; height: 14px; }
.cr2-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.cr2-punto { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--linea-h); cursor: pointer; overflow: hidden; transition: width var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease), background .2s; }
.cr2-punto::after { content: ''; position: absolute; inset: -10px -4px; }
.cr2-punto.activo { width: 24px; background: color-mix(in srgb, var(--acento) 25%, var(--linea)); }
.cr2-prog { position: absolute; inset: 0; border-radius: inherit; background: var(--acento); transform: scaleX(0); transform-origin: left; }
.cr2-punto:not(.activo) .cr2-prog { display: none; }
.cr2.sin-auto .cr2-punto.activo { background: var(--acento); }

@media (max-width: 760px) {
  .cr2 { margin-bottom: 20px; }
  .cr2-vent { margin-inline: -14px; padding-inline: 14px; }
  .cr2-tarjeta { min-height: 188px; padding: 14px 14px 12px; border-radius: 18px; }
  .cr2-titulo { font-size: 16px; }
  .cr2-pos { display: none; }
  .cr2-boton { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .cr2-punto { transition: none; } }

/* Carrusel de avisos v2: ilustración de arcilla por tipo, con paralaje (--par lo pone app.js cuadro por cuadro),
   salto con resorte al llegar y una flotación lenta con su sombra. */
.cr2-tarjeta { overflow: visible; isolation: isolate; }
.cr2-ilus { --par: 0; position: absolute; top: -10px; right: 6px; z-index: 0; width: 104px; height: 104px; pointer-events: none;
  transform: translateX(calc(var(--par) * -26px)) rotate(calc(var(--par) * -7deg)); }
.cr2-flota { position: absolute; inset: 0; display: grid; place-items: center; animation: cr2-flotar 5.2s ease-in-out infinite; }
.t-recordatorio .cr2-flota { animation-delay: -1.3s; } .t-info .cr2-flota { animation-delay: -2.6s; } .t-logro .cr2-flota { animation-delay: -3.9s; }
.cr2-flota img { position: relative; z-index: 1; max-width: 92px; max-height: 92px; object-fit: contain; filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--c) 28%, transparent)); user-select: none; -webkit-user-drag: none; }
.cr2-sombra { position: absolute; left: 50%; bottom: 2px; width: 56px; height: 10px; margin-left: -28px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent); animation: cr2-sombra 5.2s ease-in-out infinite; animation-delay: inherit; }
@keyframes cr2-flotar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes cr2-sombra { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.8); opacity: .6; } }
.cr2-top, .cr2-titulo { position: relative; z-index: 1; padding-right: 96px; }
.cr2-texto, .cr2-pie { position: relative; z-index: 1; }
.cr2-tono { display: inline-flex; align-items: center; gap: 6px; }
.cr2-tono::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.cr2-titulo { min-height: 44px; margin-top: 4px; font-size: 18px; line-height: 22px; }
.cr2-acc .mas-menu { margin-right: 2px; }
.cr2-acc .mm-abrir { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--tenue); display: inline-grid; place-items: center; border-radius: 12px; }
.cr2-acc .mm-abrir:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--texto); }
.cr2-vent { padding-top: 22px; margin-top: -22px; }
@media (max-width: 760px) {
  .cr2-ilus { width: 92px; height: 92px; top: -12px; right: 2px; }
  .cr2-flota img { max-width: 80px; max-height: 80px; }
  .cr2-top, .cr2-titulo { padding-right: 82px; }
  .cr2-titulo { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .cr2-flota, .cr2-sombra { animation: none; } .cr2-ilus { transform: none; } }
/* La ilustración se decide por el ancho de la tarjeta, no de la pantalla: en una tarjeta angosta (teléfono) va grande
   y saliéndose; en una ancha (tableta, PC, panel) va compacta dentro, del alto del encabezado y el título. */
.cr2-tarjeta { container-type: inline-size; container-name: aviso; }
.cr2 { container-type: inline-size; container-name: avisos; }
@container aviso (min-width: 360px) {
  .cr2-ilus { top: 12px; right: 14px; width: 68px; height: 68px; }
  .cr2-flota img { max-width: 60px; max-height: 60px; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--c) 26%, transparent)); }
  .cr2-sombra { width: 40px; height: 7px; margin-left: -20px; bottom: 0; }
  .cr2-top, .cr2-titulo { padding-right: 84px; }
  .cr2-titulo { min-height: 0; }
}
/* Con espacio para dos tarjetas (más de 760 px de carrusel), van dos lado a lado. */
@container avisos (min-width: 760px) { .cr2-tarjeta { flex-basis: calc((100% - var(--gap)) / 2); min-height: 176px; } }
@container avisos (max-width: 759px) { .cr2-tarjeta { flex-basis: 86%; } }

/* ═══ Mis términos v2 (22 oct): anillo de plazo, fila de tres renglones, deslizar y grupos plegables ═══ */
/* La fila: el contenedor recorta; la capa lleva el contenido y se desliza sobre el fondo de acciones. */
.item.fila-t { display: block; position: relative; overflow: hidden; padding: 0; grid-template-columns: none; }
.fila-t > .ft-capa { position: relative; z-index: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px 12px 12px; background: var(--tarjeta); touch-action: pan-y; will-change: transform; }
.lista-plazos > .item.fila-t:hover > .ft-capa { background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.fila-t .ft-cuerpo { gap: 2px; }
.fila-t .ft-titulo { font-size: 15px; line-height: 20px; font-weight: 600; }
.fila-t .ft-meta { gap: 6px; font-size: 13px; line-height: 18px; color: var(--sutil); overflow: hidden; flex-wrap: nowrap; }
.fila-t .ft-meta .ft-linea { flex: 1 1 auto; }
.ft-estado { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 2px; font-size: 12.5px; line-height: 18px; color: var(--tenue); white-space: nowrap; }
.ft-vence { font-variant-numeric: tabular-nums; color: var(--sutil); font-weight: 500; }
.ft-avance { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--sutil); cursor: pointer; }
span.ft-avance { cursor: default; }
.ft-avance::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-solido); }
.ft-avance.av-blue::before { background: var(--blue-solido); } .ft-avance.av-purple::before { background: var(--purple-solido); }
.ft-avance.av-orange::before { background: var(--orange-solido); } .ft-avance.av-green::before { background: var(--green-solido); }
.ft-avance:hover:not(span) { color: var(--texto); }
.ft-entrega { font-weight: 600; color: var(--sutil); }
.ft-entrega.tarde { color: var(--ambar); }

/* El anillo. --p (0 a 1) lo pone app.js; se llena al aparecer con el resorte suave. */
.anillo { --c: var(--acento); --cbg: var(--acento-suave); position: relative; width: 52px; height: 52px; display: grid; place-items: center; flex: none; }
.anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.an-fondo { fill: var(--cbg); stroke: color-mix(in srgb, var(--c) 16%, transparent); stroke-width: 4; }
.an-arco { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100;
  animation: an-llenar var(--resorte-suave-ms, .6s) var(--resorte-suave, ease-out) both; }
@keyframes an-llenar { from { stroke-dashoffset: 100; } }
.lista-plazos > :nth-child(2) .an-arco { animation-delay: 40ms; } .lista-plazos > :nth-child(3) .an-arco { animation-delay: 80ms; }
.lista-plazos > :nth-child(4) .an-arco { animation-delay: 120ms; } .lista-plazos > :nth-child(5) .an-arco { animation-delay: 160ms; }
.lista-plazos > :nth-child(n+6) .an-arco { animation-delay: 200ms; }
.an-centro { position: relative; display: grid; justify-items: center; line-height: 1; color: var(--c); }
.an-centro b { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.anillo.largo .an-centro b { font-size: 13px; }
.an-centro small { margin-top: 2px; font-size: 9.5px; font-weight: 650; letter-spacing: .01em; color: color-mix(in srgb, var(--c) 80%, var(--sutil)); }
.a-indigo { --c: var(--acento); --cbg: color-mix(in srgb, var(--acento) 8%, var(--tarjeta)); }
.a-naranja { --c: #ea580c; --cbg: color-mix(in srgb, #ea580c 9%, var(--tarjeta)); }
.a-rojo { --c: var(--rojo); --cbg: color-mix(in srgb, var(--rojo) 9%, var(--tarjeta)); }
.a-ambar { --c: #d97706; --cbg: color-mix(in srgb, #d97706 10%, var(--tarjeta)); }
.a-verde { --c: var(--verde); --cbg: color-mix(in srgb, var(--verde) 9%, var(--tarjeta)); }
.a-gris, .a-tarea { --c: var(--tenue); --cbg: var(--fondo); }
.a-tarea { --c: var(--purple-solido); --cbg: color-mix(in srgb, var(--purple-solido) 8%, var(--tarjeta)); }
.a-gris .an-fondo { stroke-dasharray: 3 4; }

/* El fondo que descubre el deslizar (sólo en el teléfono). */
.ft-fondo { position: absolute; inset: 0; z-index: 0; display: none; justify-content: space-between; visibility: hidden; }
.fila-t.abierta > .ft-fondo { visibility: visible; }
.fd-izq, .fd-der { display: flex; height: 100%; }
.fd-boton { display: grid; place-items: center; align-content: center; gap: 4px; width: 78px; height: 100%; border: 0; color: #fff; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: width .22s cubic-bezier(.2, .8, .2, 1); }
.fd-boton svg { width: 20px; height: 20px; }
.fd-azul { background: var(--acento); } .fd-gris { background: #8e8e93; } .fd-morado { background: var(--purple-solido); }
.fila-t.completa .fd-der [data-fd-principal] { width: 100vw; }
.fila-t.completa .fd-der .fd-gris { width: 0; overflow: hidden; padding: 0; }

/* Encabezados de grupo: fijos al bajar, plegables, con su flecha que gira. */
.grupo-plazo > .gp-cabeza { position: sticky; top: 0; z-index: 3; margin: 0 -4px 6px; padding: 0 4px; background: color-mix(in srgb, var(--fondo) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.gp-cabeza button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: inherit; text-align: left; cursor: pointer; }
.gp-cabeza b { font-size: 12px; font-weight: 600; color: var(--tenue); }
.gp-flecha { width: 16px; height: 16px; margin-left: auto; color: var(--tenue); transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease); }
.grupo-plazo.plegado .gp-flecha { transform: rotate(-90deg); }
.grupo-plazo.plegado > .gp-cuerpo { height: 0; overflow: hidden; }
@media (max-width: 899px) { body:not(:has(.hoy-3)) .grupo-plazo > .gp-cabeza { top: calc(56px + env(safe-area-inset-top, 0px)); } }

/* El vacío con ilustración y lo que sigue. */
.dp-vacio { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 20px; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--acento) 8%, transparent), transparent 60%), var(--tarjeta); }
.dp-vacio img { flex: none; width: 96px; height: 96px; object-fit: contain; animation: cr2-flotar 5.2s ease-in-out infinite; }
.dpv-texto { display: grid; gap: 4px; min-width: 0; }
.dpv-texto b { font-size: 16px; }
.dpv-texto span { font-size: 13px; line-height: 18px; color: var(--sutil); }
.dpv-texto strong { color: var(--texto); font-weight: 600; }
.dpv-ir { justify-self: start; margin-top: 6px; height: 34px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--acento) 35%, var(--linea)); border-radius: 12px; background: var(--acento-suave); color: var(--acento-tx); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: transform .16s; }
.dpv-ir:active { transform: scale(.95); }

@media (max-width: 760px) {
  .fila-t.desliza > .ft-fondo { display: flex; }
  .fila-t > .ft-capa { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 12px 8px 12px 12px; }
  .anillo { width: 48px; height: 48px; }
  .an-centro b { font-size: 16px; }
  .fila-t .ft-titulo { font-size: 15px; -webkit-line-clamp: 2; }
  .fila-t .ft-lado .mm-abrir { width: 32px; height: 32px; border: 0; color: var(--tenue); }
  .dp-vacio { padding: 14px; gap: 12px; }
  .dp-vacio img { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) { .an-arco, .dp-vacio img { animation: none; } }
.dpv-ir.rojo { border-color: color-mix(in srgb, var(--rojo) 35%, var(--linea)); background: color-mix(in srgb, var(--rojo) 8%, var(--tarjeta)); color: var(--rojo); }

/* ═══ Mis términos v3 (23 oct): panorama, jerarquía en vencidos, resumen y fila limpia ═══ */
.tr-panorama { margin: 0 0 18px; padding: 14px 16px 12px; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.tr-frase { margin: 0 0 12px; font-size: 15px; line-height: 21px; color: var(--sutil); }
.tr-frase b { color: var(--texto); font-weight: 700; }
.tr-frase b.tr-rojo { color: var(--rojo); }
.tr-barra { display: flex; gap: 3px; height: 10px; margin: 0 0 10px; }
.tr-seg { flex: 0 0 var(--w); min-width: 10px; border-radius: 999px; }
.tr-seg.s-rojo { background: var(--rojo); } .tr-seg.s-ambar { background: #f59e0b; } .tr-seg.s-naranja { background: #f97316; } .tr-seg.s-indigo { background: var(--acento); }
.tr-leyenda { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 -8px; }
.tr-item { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; color: var(--sutil); cursor: pointer; transition: background .15s, transform .15s; }
.tr-item:hover { background: var(--fondo); color: var(--texto); }
.tr-item:active { transform: scale(.96); }
.tr-item i { width: 8px; height: 8px; border-radius: 50%; }
.tr-item i.s-rojo { background: var(--rojo); } .tr-item i.s-ambar { background: #f59e0b; } .tr-item i.s-naranja { background: #f97316; } .tr-item i.s-indigo { background: var(--acento); }
.tr-item b { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }

/* Vencido crítico (7 días o más): disco rojo sólido con la cifra en blanco. */
.anillo.critico .an-fondo { fill: var(--rojo); stroke: var(--rojo); }
.anillo.critico .an-arco { stroke: color-mix(in srgb, #fff 35%, var(--rojo)); stroke-width: 0; }
.anillo.critico .an-centro, .anillo.critico .an-centro small { color: #fff; }
.anillo.critico { filter: drop-shadow(0 4px 8px rgb(220 38 38 / .28)); }

/* Vencidos resumidos: el resto se despliega. */
.fila-t.resumida { display: none; }
.tr-mas { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--linea-2); background: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--rojo); cursor: pointer; }
.tr-mas svg { width: 16px; height: 16px; }
.tr-mas:hover { background: color-mix(in srgb, var(--rojo) 4%, var(--tarjeta)); }

/* En el teléfono la fila no lleva "···": se desliza o se mantiene presionada. */
@media (max-width: 760px) {
  .fila-t.desliza .ft-lado .mas-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fila-t.desliza > .ft-capa { grid-template-columns: 48px minmax(0, 1fr) auto; padding-right: 14px; }
  .tr-panorama { padding: 12px 14px 10px; border-radius: 18px; }
  .tr-frase { font-size: 14px; line-height: 20px; }
  .fila-t { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* Fila de término con más datos (23 oct): expediente y versión del proyecto en el renglón de estado.
   El expediente es lo que cede espacio; la fecha y el avance siempre se leen completos. */
.ft-estado { overflow: hidden; }
.ft-estado > * { flex: none; }
.ft-exp { flex: 0 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; color: var(--tenue); }
.ft-proy { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; color: var(--acento-tx); }
.ft-proy svg { width: 13px; height: 13px; }
.anillo .an-centro small { white-space: nowrap; }
.fila-t .ft-meta .ft-linea { flex: 0 1 auto; }
.ft-monto { flex: none; font-weight: 650; color: var(--texto); font-variant-numeric: tabular-nums; }
.ft-monto::before { content: '·'; margin-right: 6px; font-weight: 400; color: var(--tenue); }
@media (max-width: 760px) { .ft-meta .ft-linea:has(.ft-cli) .ft-acto { display: none; } }

/* La fecha arriba a la derecha de la fila (23 oct), como la hora en Mail: se lee primero junto al título. */
.ft-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.ft-cabeza .ft-titulo { flex: 1 1 auto; min-width: 0; }
.ft-fecha { flex: none; display: grid; justify-items: end; padding-top: 1px; font-size: 13px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto); }
.ft-fecha i { font-style: normal; font-weight: 500; color: var(--tenue); }
.ft-fecha small { font-size: 10.5px; line-height: 13px; font-weight: 600; color: var(--tenue); }
.ft-fecha.f-rojo { color: var(--rojo); } .ft-fecha.f-rojo i { color: color-mix(in srgb, var(--rojo) 65%, var(--tenue)); }
.ft-fecha.f-naranja { color: #ea580c; } .ft-fecha.f-naranja i { color: color-mix(in srgb, #ea580c 65%, var(--tenue)); }
.ft-fecha.f-ambar { color: #b45309; }
.ft-fecha.f-tenue { color: var(--sutil); }
.ft-monto { display: none; }
@media (max-width: 760px) {
  .ft-meta .ft-linea:has(.ft-cli) .ft-acto { display: inline; }
  .ft-fecha { font-size: 12.5px; }
}
.ft-fecha { gap: 0; }
.ft-fecha small { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--tenue); }
.ft-fecha > span { font-size: 14px; line-height: 18px; }
.ft-fecha.f-rojo small { color: color-mix(in srgb, var(--rojo) 60%, var(--tenue)); }
.ft-fecha.f-naranja small { color: color-mix(in srgb, #ea580c 60%, var(--tenue)); }
.ft-fecha.f-ambar small { color: color-mix(in srgb, #b45309 55%, var(--tenue)); }

/* ═══ Pasos del término (23 oct): barra en la fila, hoja del término y "Hoy toca" ═══ */
.fila-t[data-hoja] { cursor: pointer; }
.ft-pasos { display: flex; align-items: center; gap: 3px; margin: 6px 0 1px; max-width: 320px; }
.ft-pasos i { flex: 1; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 14%, var(--linea)); transition: background .3s; }
.ft-pasos i.h { background: var(--acento); }
.ft-pasos i.a { background: #f59e0b; }
.ft-pasos span { flex: none; margin-left: 6px; font-size: 11.5px; font-weight: 650; color: var(--tenue); font-variant-numeric: tabular-nums; }
.ft-sigue { font-weight: 500; color: var(--sutil); }
.ft-sigue b { font-weight: 650; color: var(--texto); }
.ft-sigue.tarde, .ft-sigue.tarde b { color: #b45309; }

/* La palomita: el círculo se llena y el trazo se dibuja. */
.hp-check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid color-mix(in srgb, var(--acento) 45%, var(--linea-h)); border-radius: 50%; background: var(--tarjeta); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.hp-check svg { width: 15px; height: 15px; }
.hp-check svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s cubic-bezier(.3, .7, .2, 1) .05s; }
.hecho > .hp-check, .hp-check[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); }
.hecho > .hp-check svg path, .hp-check[aria-pressed="true"] svg path { stroke-dashoffset: 0; }
.hp-check:disabled { cursor: default; opacity: .7; }
.hp-check:not(:disabled):hover { border-color: var(--acento); }
.tarde > .hp-check:not([aria-pressed="true"]) { border-color: #f59e0b; }

/* La hoja del término. */
.hoja-termino .modal-caja { max-width: 560px; }
.ht { display: grid; gap: 16px; }
.ht-cabeza { display: flex; align-items: center; gap: 14px; }
.ht-datos { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--sutil); }
.ht-datos b { font-size: 14px; color: var(--texto); }
.ht-exp { font-variant-numeric: tabular-nums; color: var(--tenue); }
.ht-progreso { display: flex; align-items: center; gap: 12px; }
.ht-barra { flex: 1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 12%, var(--linea)); overflow: hidden; }
.ht-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--acento); transition: width var(--resorte-suave-ms, .5s) var(--resorte-suave, ease); }
.ht-progreso.completo .ht-barra i { background: var(--verde); }
.ht-cuenta { flex: none; font-size: 13px; font-weight: 650; color: var(--sutil); font-variant-numeric: tabular-nums; }
.ht-pasos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; background: var(--tarjeta); }
.hp { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--linea-2); transition: background .2s; }
.hp:last-child { border-bottom: 0; }
.hp-cuerpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hp-titulo { font-size: 15px; line-height: 20px; color: var(--texto); transition: color .25s; }
.hp.hecho .hp-titulo { color: var(--tenue); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tenue) 60%, transparent); }
.hp-meta { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--tenue); cursor: pointer; }
.hp-meta:disabled { cursor: default; }
.hp-meta:not(:disabled):hover { color: var(--acento-tx); text-decoration: underline; }
.hp.tarde .hp-meta { color: #b45309; font-weight: 600; }
.hp .mm-abrir { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--tenue); display: inline-grid; place-items: center; border-radius: 10px; }
.hp-vacio { padding: 16px; font-size: 14px; color: var(--sutil); }
.ht-nuevo { display: flex; gap: 8px; }
.ht-nuevo input[name="titulo"] { flex: 1; min-width: 0; }
.ht-nuevo input[name="meta"] { width: 150px; }
.ht-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ht-acciones .boton { display: inline-flex; align-items: center; gap: 6px; }
.ht-acciones .boton svg { width: 16px; height: 16px; }
.ht-acciones .enlace { margin-left: auto; }
.ht-fecha-oculta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* "Hoy toca". */
.hoy-toca { margin: 0 0 24px; }
.ht2-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ht2-cabeza h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; }
.ht2-cabeza h2 b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--lavanda); color: var(--acento-tx); }
.ht2-cabeza > span { font-size: 13px; color: var(--tenue); }
.ht2-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; background: var(--tarjeta); }
.ht2 { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--linea-2); cursor: pointer; transition: opacity .3s, background .15s; }
.ht2:last-child { border-bottom: 0; }
.ht2:hover { background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.ht2.hecho { opacity: .45; }
.ht2.hecho .ht2-cuerpo b { text-decoration: line-through; }
.ht2-cuerpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ht2-cuerpo b { font-size: 15px; font-weight: 650; }
.ht2-cuerpo span { font-size: 12.5px; color: var(--sutil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht2-cuando { flex: none; font-size: 12.5px; font-weight: 700; color: var(--sutil); }
.ht2-cuando.hoy { color: #ea580c; }
.ht2-cuando.tarde { color: #b45309; }
.ht2-mas { margin: 8px 4px 0; font-size: 13px; color: var(--tenue); }
.hoy-3 .hoy-toca { order: 3; }
.hoy-3 #dp-lista { order: 4; }
.hoy-3 .dp-extra { order: 5; }
@media (max-width: 760px) {
  .ht-nuevo { flex-wrap: wrap; }
  .ht-nuevo input[name="meta"] { flex: 1; width: auto; }
  .ht-acciones .enlace { margin-left: 0; }
  .ft-pasos { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hp-check svg path, .ht-barra i { transition: none; } }
@media (max-width: 760px) { .ht-nuevo input[name="titulo"] { flex: 1 1 100%; } }

/* ═══ Enfoque (23 oct): pantalla completa, anillo regresivo, píldora flotante ═══ */
html.con-enfoque, html.con-enfoque body { overflow: hidden; }
.enf-capa { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--acento) 14%, var(--fondo)) 0%, var(--fondo) 60%); overflow-y: auto; }
.enf-capa.descanso { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--verde) 14%, var(--fondo)) 0%, var(--fondo) 60%); }
.enf-caja { position: relative; width: min(440px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; }
.enf-cerrar { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--texto) 6%, transparent); color: var(--sutil); font-size: 24px; cursor: pointer; }
.enf-cerrar svg { width: 22px; height: 22px; }
.enf-etq { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acento-tx); }
.descanso .enf-etq { color: var(--verde); }
.enf-paso { margin: 2px 0 0; font-size: 26px; line-height: 30px; font-weight: 750; letter-spacing: -.02em; }
.enf-term { margin: 0; max-width: 340px; font-size: 14px; line-height: 20px; color: var(--sutil); }
.enf-modos { display: grid; gap: 10px; width: 100%; margin: 14px 0 4px; }
.enf-modo { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); font: inherit; text-align: left; cursor: pointer; transition: transform .16s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s; }
.enf-modo:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); }
.enf-modo:active { transform: scale(.97); }
.enf-modo.sugerido { border-color: var(--acento); box-shadow: 0 10px 24px -16px rgb(79 70 229 / .7); }
.enf-modo b { flex: none; display: grid; justify-items: center; width: 64px; font-size: 26px; font-weight: 750; color: var(--acento-tx); line-height: 1; font-variant-numeric: tabular-nums; }
.enf-modo b small { font-size: 11px; font-weight: 600; color: var(--tenue); margin-top: 2px; }
.enf-modo span { display: grid; gap: 2px; font-size: 13px; line-height: 18px; color: var(--sutil); }
.enf-modo strong { font-size: 15px; color: var(--texto); }
.enf-consejo { margin: 6px 0 0; max-width: 360px; font-size: 13px; line-height: 19px; color: var(--tenue); }
.enf-anillo { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 14px 0 8px; }
.enf-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.enf-fondo { fill: var(--tarjeta); stroke: color-mix(in srgb, var(--acento) 14%, var(--linea)); stroke-width: 7; }
.enf-arco { fill: none; stroke: var(--acento); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear; filter: drop-shadow(0 4px 10px rgb(79 70 229 / .35)); }
.descanso .enf-arco { stroke: var(--verde); filter: drop-shadow(0 4px 10px rgb(22 163 74 / .3)); }
.descanso .enf-fondo { stroke: color-mix(in srgb, var(--verde) 16%, var(--linea)); }
.enf-centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
.enf-tiempo { font-size: clamp(44px, 13vw, 58px); font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.enf-centro span { font-size: 13px; font-weight: 600; color: var(--tenue); }
.en-pausa .enf-tiempo { color: var(--tenue); }
.en-pausa .enf-arco { stroke: var(--tenue); filter: none; }
.enf-botones { display: flex; gap: 10px; margin-top: 12px; }
.enf-botones .boton { min-width: 120px; height: 46px; border-radius: 14px; font-size: 15px; }
.enf-botones.col { flex-direction: column; align-items: stretch; width: min(320px, 100%); }
.enf-botones.col .enlace { min-height: 40px; }
.enf-logro { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--acento); color: #fff; box-shadow: 0 14px 30px -12px rgb(79 70 229 / .8); }
.enf-logro svg { width: 44px; height: 44px; }
.enf-logro svg path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: enf-trazo .5s .15s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes enf-trazo { from { stroke-dashoffset: 1; } }
.enf-pildora { position: fixed; z-index: 85; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
  background: var(--texto); color: var(--tarjeta); font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 12px 28px -12px rgb(15 23 42 / .6); }
.enf-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgb(52 211 153 / .25); animation: enf-latido 1.6s ease-in-out infinite; }
.enf-punto.pausa { background: #fbbf24; box-shadow: 0 0 0 4px rgb(251 191 36 / .25); animation: none; }
@keyframes enf-latido { 50% { box-shadow: 0 0 0 7px rgb(52 211 153 / 0); } }
.enf-pp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.enf-pt { flex: none; font-variant-numeric: tabular-nums; font-weight: 750; }
@media (min-width: 900px) { .enf-pildora { left: auto; right: 24px; bottom: 24px; transform: none; } }

/* El botón de enfoque en cada paso y el tiempo registrado. */
.hp-enfoque { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--acento-tx); cursor: pointer; transition: background .15s, transform .15s; }
.hp-enfoque svg { width: 20px; height: 20px; }
.hp-enfoque:hover { background: var(--acento-suave); }
.hp-enfoque:active { transform: scale(.9); }
.hp-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-enf { font-size: 12px; font-weight: 600; color: var(--acento-tx); }
.ht-enfoque { margin: -8px 0 0; font-size: 13px; font-weight: 600; color: var(--acento-tx); }
.ht2-enf { margin: 0 0 20px; font-size: 14px; color: var(--sutil); }
.ht2-enf b { color: var(--acento-tx); }

/* ═══ Avance del equipo (Dirección) ═══ */
.ae-sub { margin: -6px 0 14px; font-size: 13px; color: var(--tenue); }
.ae-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ae-card { display: grid; gap: 10px; padding: 14px 14px 10px; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); }
.ae-cabeza { display: flex; align-items: center; gap: 12px; }
.ae-cabeza .av { width: 40px; height: 40px; }
.ae-quien { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ae-quien b { font-size: 15px; }
.ae-quien span { font-size: 12.5px; color: var(--tenue); }
.ae-pct { display: grid; justify-items: end; line-height: 1.1; }
.ae-pct b { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ae-pct span { font-size: 11px; color: var(--tenue); }
.ae-pct.bien b { color: var(--verde); } .ae-pct.medio b { color: #d97706; } .ae-pct.mal b { color: var(--rojo); }
.ae-barra { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 12%, var(--linea)); overflow: hidden; }
.ae-barra i { display: block; height: 100%; border-radius: inherit; background: var(--acento); }
.ae-alerta { margin: -2px 0 0; font-size: 12.5px; font-weight: 650; color: #b45309; }
.ae-lista { list-style: none; margin: 0 -6px; padding: 0; }
.ae-t { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.ae-t:hover { background: var(--fondo); }
.ae-t.oculta { display: none; }
.ae-t-cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ae-t-cuerpo b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-t-cuerpo span { font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-mini { height: 4px; margin-top: 3px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 12%, var(--linea)); overflow: hidden; }
.ae-mini i { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
.ae-chip { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ae-chip.n-riesgo { background: color-mix(in srgb, var(--rojo) 12%, var(--tarjeta)); color: var(--rojo); }
.ae-chip.n-atrasado { background: color-mix(in srgb, #f59e0b 16%, var(--tarjeta)); color: #b45309; }
.ae-chip.n-tiempo { background: var(--fondo); color: var(--sutil); }
.ae-mas { width: 100%; min-height: 40px; border: 0; border-top: 1px solid var(--linea-2); background: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--acento-tx); cursor: pointer; }
.ae-vacio { margin: 0; font-size: 13px; color: var(--tenue); }
@media (max-width: 760px) { .ae-rejilla { grid-template-columns: 1fr; } .enf-paso { font-size: 23px; line-height: 28px; } }
@media (prefers-reduced-motion: reduce) { .enf-punto, .enf-logro svg path { animation: none; } .enf-arco { transition: none; } }
.ae-pct.bien b { color: var(--acento-tx); }

/* ═══ La pista de avance (23 oct): pasos contra plazo ═══
   --fp-p: avance (0 a 1). --fp-t: plazo transcurrido (0 a 1). El relleno entra con resorte y lo recorre un destello. */
.fp { --c1: #6366f1; --c2: #8b5cf6; --brillo: rgb(99 102 241 / .45); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 8px 0 2px; max-width: 360px; }
.fp.r-atras { --c1: #f59e0b; --c2: #f97316; --brillo: rgb(245 158 11 / .45); }
.fp.r-listo { --c1: #10b981; --c2: #22c55e; --brillo: rgb(16 185 129 / .45); }
.fp-carril { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c1) 13%, var(--linea)); }
.fp-relleno { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fp-p) * 100%); min-width: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 2px 8px -2px var(--brillo);
  animation: fp-entrar var(--resorte-suave-ms, .7s) var(--resorte-suave, cubic-bezier(.2, .8, .2, 1)) .1s both; }
.fp-relleno::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .55) 50%, transparent 80%); transform: translateX(-120%); animation: fp-destello 1.1s ease-out .55s 1 both; }
@keyframes fp-entrar { from { width: 0; } }
@keyframes fp-destello { to { transform: translateX(120%); } }
.fp.vivo .fp-relleno { animation: none; transition: width var(--resorte-vivo-ms, .5s) var(--resorte-vivo, ease), background .3s; }
.fp.vivo .fp-relleno::after { animation: none; }
.fp-corte { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tarjeta); z-index: 1; }
.fp-hoy { position: absolute; z-index: 2; top: -4px; bottom: -4px; left: calc(var(--fp-t) * 100%); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--texto); box-shadow: 0 0 0 2px var(--tarjeta); }
.fp-hoy::before { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--texto); box-shadow: 0 0 0 2px var(--tarjeta); }
.fp-dato { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fp-dato b { font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--texto); }
.fp-dato em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--c1); }
.fp.r-aldia .fp-dato em { color: var(--acento-tx); }
.fp.r-atras .fp-dato em { color: #b45309; }
.fp.r-listo .fp-dato em { color: #059669; }

/* En grande, en la hoja del término. */
.fp-grande { max-width: none; margin: 0; row-gap: 8px; padding: 14px 16px 12px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); }
.fp-grande .fp-carril { height: 14px; margin-top: 14px; }
.fp-grande .fp-relleno { box-shadow: 0 4px 14px -4px var(--brillo); }
.fp-grande .fp-corte { width: 3px; margin-left: -1.5px; }
.fp-grande .fp-hoy { top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; }
.fp-grande .fp-hoy::before { display: none; }
.fp-grande .fp-hoy span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: var(--texto); color: var(--tarjeta); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.fp-grande .fp-dato b { font-size: 22px; letter-spacing: -.02em; align-self: end; }
.fp-pie { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--tenue); }
.fp-pie span:first-child { font-weight: 650; color: var(--sutil); }
.fp-grande.r-atras .fp-pie span:first-child { color: #b45309; }
.fp-grande.r-listo .fp-pie span:first-child { color: #059669; }
.ht-pista:empty { display: none; }
.ft-pasos { display: none; }
@media (max-width: 760px) { .fp { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .fp-relleno, .fp-relleno::after { animation: none; } }

/* ═══ Columna de Mi día (23 oct): títulos parejos, pendientes en tarjeta, Boletín ligero ═══ */
.hoy-3 .dp-extra .bd-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--texto); }
.hoy-3 .dp-extra .bloque-dia.urge .bd-titulo { color: var(--texto); }
.hoy-3 .dp-extra .bd-titulo b { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--lavanda); color: var(--acento-tx); }
.hoy-3 .dp-extra .bloque-dia.urge .bd-titulo b { background: color-mix(in srgb, var(--rojo) 12%, var(--tarjeta)); color: var(--rojo); }
.hoy-3 .dp-extra > * { margin: 0 0 24px; }

/* Boletín ligero. */
.hoy-3 .dp-extra .bol-fila { gap: 8px; padding: 14px 16px; border-radius: 18px; }
.hoy-3 .dp-extra .bol-fechas { padding: 0; background: none; color: var(--sutil); gap: 4px 6px; }
.hoy-3 .dp-extra .bol-fechas span:first-child { font-weight: 600; color: var(--tenue); }
.hoy-3 .dp-extra .bol-fechas b { font-size: 13px; font-weight: 650; color: var(--sutil); }
.hoy-3 .dp-extra .bol-fechas span.urge { margin: 0; padding: 0; background: none; color: var(--rojo); font-weight: 700; }
.hoy-3 .dp-extra .bol-fechas b + span::before { content: '·'; margin-right: 6px; color: var(--tenue); font-weight: 400; }
.hoy-3 .dp-extra .bol-cabeza b { font-size: 15px; }
.hoy-3 .dp-extra .bol-meta .persona, .hoy-3 .dp-extra .bol-meta .av { display: none; }
.hoy-3 .dp-extra .bol-sintesis { -webkit-line-clamp: 2; }
.hoy-3 .dp-extra .bol-acciones .boton { height: 40px; border-radius: 12px; }

/* Pendientes internos. */
.pend-sec .ht2-cabeza > span { font-size: 13px; color: var(--tenue); }
.pend-sec .ht2-cabeza > .pend-atras { font-weight: 650; color: #b45309; }
.pend-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; background: var(--tarjeta); }
.tarea.pend { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--linea-2); transition: opacity .3s; }
.tarea.pend:last-child { border-bottom: 0; }
.tarea.pend.oculta { display: none; }
.tarea.pend .t-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 2px solid color-mix(in srgb, var(--acento) 40%, var(--linea-h)); border-radius: 50%; background: var(--tarjeta); color: #fff; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.tarea.pend .t-check svg { width: 14px; height: 14px; stroke-width: 3; }
.tarea.pend .t-check:active { transform: scale(.88); }
.tarea.pend.hecha .t-check { background: var(--acento); border-color: var(--acento); }
.tarea.pend.hecha { opacity: .5; }
.tarea.pend.hecha .pend-cuerpo b { text-decoration: line-through; }
.pend-cuerpo { flex: 1; min-width: 0; display: grid; gap: 1px; color: inherit; }
.pend-cuerpo b { font-size: 14.5px; font-weight: 600; line-height: 19px; }
.pend-cuerpo span { font-size: 12.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-cuando { flex: none; font-size: 12.5px; font-weight: 700; color: var(--sutil); white-space: nowrap; }
.pend-cuando.tarde { color: #b45309; }
.pend-cuando.hoy { color: #ea580c; }
.tarea.pend:has(.pend-cuando.tarde) .t-check { border-color: #f59e0b; }
.pend-mas { display: block; width: 100%; min-height: 42px; margin-top: -1px; border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 18px 18px; background: var(--tarjeta); font: inherit; font-size: 13px; font-weight: 650; color: var(--acento-tx); cursor: pointer; }
.pend-lista:has(+ .pend-mas) { border-radius: 18px 18px 0 0; }
.pend-vacio { margin: 0; font-size: 14px; color: var(--sutil); }

/* Formación: el mismo título que las demás secciones. */
.hoy-3 .dp-extra .bloque-dia:not(.urge) .bd-titulo b { background: var(--fondo); color: var(--sutil); }

/* ═══ Detalle del asunto (23 oct) ═══ */
.ad-cabeza { display: grid; gap: 6px; margin: 2px 0 18px; }
.ad-cliente { justify-self: start; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--acento-tx); }
.ad-cliente:hover { text-decoration: underline; }
.ad-cabeza h1 { margin: 0; font-size: 26px; line-height: 31px; font-weight: 750; letter-spacing: -.02em; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ad-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); font-size: 13px; color: var(--sutil); white-space: nowrap; }
.ad-chip .punto { width: 7px; height: 7px; border-radius: 50%; }
.ad-chip.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--texto); }
.ad-chip.quien { padding-left: 3px; color: var(--texto); font-weight: 600; }
.ad-chip.quien .av { width: 22px; height: 22px; font-size: 9px; }
.ad-chip.alerta { border-color: color-mix(in srgb, #f59e0b 45%, var(--linea)); color: #b45309; font-weight: 650; }
.ad-chip.estado { background: var(--fondo); font-weight: 650; }

.ad-sigue { display: grid; gap: 14px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--linea); border-radius: 22px; background: var(--tarjeta); box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.ad-sigue.urg-rojo { border-color: color-mix(in srgb, var(--rojo) 30%, var(--linea)); background: linear-gradient(180deg, color-mix(in srgb, var(--rojo) 4%, var(--tarjeta)), var(--tarjeta) 50%); }
.ad-sigue-top { display: flex; align-items: center; gap: 14px; }
.ad-sigue-top .anillo { width: 58px; height: 58px; }
.ad-sigue-top .an-centro b { font-size: 19px; }
.ad-sigue-txt { display: grid; gap: 2px; min-width: 0; }
.ad-sigue-txt .lqs-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.ad-sigue-txt b { font-size: 18px; line-height: 23px; font-weight: 700; }
.ad-sigue-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--sutil); }
.ad-sigue .fp-grande { border: 0; padding: 0; background: none; }
.ad-paso { margin: -4px 0 0; font-size: 14px; color: var(--sutil); }
.ad-paso b { color: var(--texto); }
.ad-enf { color: var(--acento-tx); font-weight: 600; }
.ad-sigue .enlace-doc { justify-self: start; }
.ad-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-acciones .boton { display: inline-flex; align-items: center; gap: 6px; height: 42px; border-radius: 12px; }
.ad-acciones .boton svg { width: 17px; height: 17px; }
.ad-acciones .meta-acciones { margin-left: auto; }
.ad-acciones .mm-abrir { width: 42px; height: 42px; border-radius: 12px; }
.ad-acciones .lqs-mas { display: flex; gap: 8px; align-items: center; }

.ad-datos { margin: 0 0 18px; padding: 14px 16px 10px; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); }
.ad-sub { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.ad-datos dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.ad-datos .ed-dato { min-width: 0; margin: 0; padding: 0; border: 0; }
.ad-datos .ed-dato.entero { grid-column: 1 / -1; }
.ad-datos dt { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.ad-datos dd { margin: 0; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.ad-datos .ed-pie { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-2); }

.ad-pestanas { position: sticky; top: 0; z-index: 4; margin: 0 -4px 14px; padding: 6px 4px; background: color-mix(in srgb, var(--fondo) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.tel-txt { display: none; }
@media (max-width: 760px) {
  .ad-cabeza h1 { font-size: 23px; line-height: 28px; }
  .ad-sigue { padding: 14px; border-radius: 20px; }
  .ad-sigue-txt b { font-size: 17px; }
  .ad-acciones .boton { flex: 1 1 auto; justify-content: center; }
  .ad-datos dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-pestanas { top: calc(56px + env(safe-area-inset-top, 0px)); margin-inline: -14px; padding-inline: 14px; }
  .ad-pestanas .tel-txt { display: inline; }
}
/* El regreso de arriba no se encima con el título al bajar: queda sólo la flecha. */
@media (max-width: 899px) { .barra-arriba.con-titulo .ba-atras span { display: none; } .barra-arriba .ba-titulo { max-width: 56vw; } }
/* La etiqueta de tipo (Compromiso, Seguimiento) ya no se pega al título. */
.fila-t .ft-titulo { display: block; }
.fila-t .ft-titulo > .ft-tipo { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--fondo); font-size: 11px; line-height: 18px; vertical-align: 1px; }
@media (max-width: 760px) { .fila-t .ft-titulo { display: -webkit-box; } }
@media (max-width: 899px) { .barra-arriba .ba-titulo { max-width: 44vw; } }
.ad-datos dl { padding: 0; }
.ad-datos .ed-pie { padding-left: 0; padding-right: 0; }
@media (max-width: 760px) {
  .ad-acciones { flex-wrap: nowrap; }
  .ad-acciones .boton { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .ad-acciones .meta-acciones { flex: none; margin-left: 0; }
}
@media (max-width: 760px) { .ad-acciones .boton { white-space: nowrap; font-size: 14.5px; } .ad-acciones .boton svg { display: none; } }
.exp-main { container-type: inline-size; container-name: detalle; }
@container detalle (min-width: 760px) {
  .ad-sigue { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); column-gap: 32px; align-items: center; padding: 18px 20px; }
  .ad-sigue > .ad-sigue-top, .ad-sigue > .ad-paso, .ad-sigue > .enlace-doc, .ad-sigue > .ad-acciones { grid-column: 1; }
  .ad-sigue > .fp { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .ad-sigue > .ad-paso { margin-top: 0; }
}

/* ═══ Página de Términos (23 oct): un renglón de controles, panorama y filtros en hoja ═══ */
.tm { max-width: 1040px; }
.tm-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.tm-cabeza h1 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -.02em; }
.tm-acc { display: flex; align-items: center; gap: 8px; }
.tm-vistas { --i: 0; position: relative; display: grid; grid-template-columns: repeat(3, 40px); padding: 3px; border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta); }
.tm-vistas::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 40px; border-radius: 11px; background: var(--acento-suave); transform: translateX(calc(var(--i) * 40px)); transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease); }
.tm-vistas a { position: relative; z-index: 1; display: grid; place-items: center; height: 36px; color: var(--tenue); border-radius: 11px; }
.tm-vistas a[aria-selected="true"] { color: var(--acento-tx); }
.tm-vistas a svg { width: 19px; height: 19px; }
.tm-filtrar { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta); font: inherit; font-size: 14px; font-weight: 650; color: var(--texto); cursor: pointer; transition: transform .15s, border-color .15s; }
.tm-filtrar svg { width: 18px; height: 18px; }
.tm-filtrar:active { transform: scale(.95); }
.tm-filtrar.con { border-color: color-mix(in srgb, var(--acento) 50%, var(--linea)); color: var(--acento-tx); }
.tm-filtrar b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.tm-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.tm-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: var(--acento-suave); color: var(--acento-tx); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tm-chip span { font-size: 16px; line-height: 1; opacity: .7; }
.tm .tr-panorama { margin-bottom: 16px; }

/* La hoja de filtros. */
.hoja-filtros .modal-caja { max-width: 520px; }
.hf { display: grid; gap: 18px; }
.hf-grupo h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.hf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); font: inherit; font-size: 14px; color: var(--texto); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.hf-chip:active { transform: scale(.95); }
.hf-chip.activo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-tx); font-weight: 650; }
.hf-chip .punto { width: 8px; height: 8px; border-radius: 50%; }
.hf-chip .av { width: 22px; height: 22px; margin-left: -8px; font-size: 9px; }
.hf-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--linea-2); }
.hf-pie .boton { min-width: 120px; height: 44px; border-radius: 12px; }
@media (max-width: 760px) {
  .tm-cabeza h1 { font-size: 26px; }
  .tm-filtrar span { display: none; }
  .tm-filtrar { width: 44px; padding: 0; justify-content: center; position: relative; }
  .tm-filtrar b { position: absolute; top: -6px; right: -6px; }
}

/* ═══ Pantalla de Asuntos (23 oct): chips de materia, búsqueda y tarjetas con anillo ═══ */
.as { max-width: 1240px; }
.tm-vistas.dos { grid-template-columns: repeat(2, 40px); }
.tm-vistas button { position: relative; z-index: 1; display: grid; place-items: center; height: 36px; padding: 0; border: 0; border-radius: 11px; background: none; color: var(--tenue); cursor: pointer; }
.tm-vistas button[aria-selected="true"] { color: var(--acento-tx); }
.tm-vistas button svg { width: 19px; height: 19px; }
.as-nuevo { background: var(--grad); border-color: transparent; color: #fff; }
.as-nuevo svg { width: 18px; height: 18px; }
.as-busca { display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 0 12px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta); color: var(--tenue); transition: border-color .15s, box-shadow .15s; }
.as-busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.as-busca svg { flex: none; width: 18px; height: 18px; }
.as-busca input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--texto); }
.as-materias { display: flex; align-items: center; gap: 8px; margin: 0 -14px 18px; padding: 2px 14px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.as-materias::-webkit-scrollbar { display: none; }
.as-mat { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background .15s, border-color .15s, transform .15s; }
.as-mat:active { transform: scale(.96); }
.as-mat.activo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-tx); }
.as-mat b { font-size: 12px; font-weight: 700; color: var(--tenue); }
.as-mat.activo b { color: var(--acento-tx); }
.img-materia.en-chip { width: 22px; height: 22px; object-fit: contain; margin-left: -4px; }
.as-urge { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 2px var(--tarjeta); }
.as-sep { flex: none; width: 1px; height: 24px; background: var(--linea); }
.as-alcance { display: inline-flex; gap: 8px; }
.as-sec { margin: 0 0 26px; }
.as-sec-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; }
.as-sec-cabeza .img-materia { width: 30px; height: 30px; object-fit: contain; }
.as-sec-cabeza h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.as-sec-cabeza b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--fondo); color: var(--sutil); }
.as-sec-cabeza span { flex-basis: 100%; margin-left: 40px; font-size: 13px; color: var(--tenue); }
/* Tarjeta de asunto con el anillo. */
.ficha-sig .anillo { width: 44px; height: 44px; }
.ficha-sig .an-centro b { font-size: 15px; }
.ficha-sig .an-centro small { font-size: 9px; }
/* Concluidos y archivados al final. */
.as-archivo { display: flex; gap: 10px; margin: 8px 0 24px; }
.as-archivo a { flex: 1; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 16px; background: var(--tarjeta); color: var(--texto); font-size: 14px; font-weight: 600; }
.as-archivo a:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--linea)); }
.as-archivo svg { width: 18px; height: 18px; color: var(--tenue); }
.as-archivo b { margin-left: auto; font-size: 13px; color: var(--tenue); font-weight: 650; }
@media (max-width: 760px) {
  .as-nuevo span { display: none; }
  .as-nuevo { width: 44px; padding: 0; justify-content: center; }
  .as-sec-cabeza span { display: none; }
}
.as-alcance { flex: none; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); }
.as-alc { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--sutil); cursor: pointer; white-space: nowrap; }
.as-alc.activo { background: var(--fondo); color: var(--texto); box-shadow: 0 1px 2px rgb(15 23 42 / .08); }

/* ═══ Clientes (23 oct): directorio por urgencia, tarjeta con lo que sigue y el equipo ═══ */
.cl { max-width: 1240px; }
.cl-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cl-ficha { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--linea); border-radius: 22px; background: var(--tarjeta); color: var(--texto); box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  transition: transform .2s var(--resorte-firme, ease), border-color .15s, box-shadow .2s; animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.cl-ficha:hover { border-color: color-mix(in srgb, var(--acento) 30%, var(--linea)); box-shadow: 0 8px 24px -12px rgb(15 23 42 / .18); }
.cl-ficha:active { transform: scale(.985); }
.cl-galeria > :nth-child(2) { animation-delay: 30ms; } .cl-galeria > :nth-child(3) { animation-delay: 60ms; } .cl-galeria > :nth-child(4) { animation-delay: 90ms; }
.cl-galeria > :nth-child(5) { animation-delay: 120ms; } .cl-galeria > :nth-child(n+6) { animation-delay: 150ms; }
@keyframes cl-entra { from { opacity: 0; transform: translateY(10px); } }
.cl-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; min-width: 0; }
.cl-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 14px; font-weight: 750; letter-spacing: .02em; }
.cl-av.grande { width: 60px; height: 60px; border-radius: 18px; font-size: 19px; }
.cl-nom { display: grid; gap: 1px; min-width: 0; flex: 1; }
.cl-nom b { font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nom span { font-size: 12.5px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-alerta { flex: none; align-self: start; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--rojo) 10%, var(--tarjeta)); color: var(--rojo); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cl-sig { display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--fondo); }
.cl-sig .anillo { width: 46px; height: 46px; }
.cl-sig .an-centro b { font-size: 15px; }
.cl-sig.urg-rojo { background: color-mix(in srgb, var(--rojo) 6%, var(--tarjeta)); }
.cl-sig-txt { display: grid; gap: 1px; min-width: 0; }
.cl-sig-txt span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.cl-sig-txt b { font-size: 14.5px; line-height: 19px; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-sig-txt em { font-style: normal; font-size: 12.5px; color: var(--sutil); }
.cl-sig.vacio { min-height: 66px; font-size: 14px; color: var(--tenue); }
.cl-ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-bg); color: var(--green-tx); }
.cl-ok svg { width: 16px; height: 16px; }
.cl-pie { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 16px 14px; font-size: 13px; color: var(--sutil); }
.cl-caras { display: inline-flex; flex: none; }
.cl-caras .av { width: 26px; height: 26px; margin-left: -7px; box-shadow: 0 0 0 2px var(--tarjeta); overflow: hidden; }
.cl-caras .av:first-child { margin-left: 0; }
.cl-caras .av img { width: 100%; height: 100%; object-fit: cover; }
.cl-caras .av.mas { background: var(--fondo); color: var(--sutil); font-size: 10px; }
.cl-n { font-weight: 600; color: var(--texto); white-space: nowrap; }
.cl-rfc { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--tenue); white-space: nowrap; }
.as-materias button.as-mat { font: inherit; font-size: 14px; font-weight: 600; }

/* El cliente: su cabecera, el resumen en una tarjeta y las pestañas fijas. */
.cl-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 12px; margin: 2px 0 16px; }
.cl-cab-txt { display: grid; gap: 2px; min-width: 0; }
.cl-cab-txt h1 { margin: 0; font-size: 26px; line-height: 31px; font-weight: 750; letter-spacing: -.02em; }
.cl-razon { font-size: 13.5px; color: var(--sutil); }
.cl-editar { height: 40px; }
.cl-cabeza .ad-chips { grid-column: 1 / -1; margin: 0; }
.cl-cabeza .ad-chip svg { width: 14px; height: 14px; color: var(--tenue); }
.cl-cabeza .ad-chip.enlace { color: var(--acento-tx); font-weight: 600; }
.cl-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 16px; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); overflow: hidden; }
.cl-resumen a { display: grid; gap: 2px; padding: 14px 16px; color: var(--texto); border-left: 1px solid var(--linea-2); transition: background .15s; }
.cl-resumen a:first-child { border-left: 0; }
.cl-resumen a:hover { background: var(--fondo); }
.cl-resumen b { font-size: 24px; line-height: 28px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-resumen span { font-size: 12.5px; color: var(--sutil); }
.cl-resumen .rojo b { color: var(--rojo); }
.cl-resumen .ambar b { color: #d97706; }
.cl-resumen .cero b { color: var(--tenue); }
@media (max-width: 760px) {
  .cl-galeria { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cl-cabeza { column-gap: 12px; }
  .cl-av.grande { width: 52px; height: 52px; border-radius: 16px; font-size: 17px; }
  .cl-cab-txt h1 { font-size: 22px; line-height: 27px; }
  .cl-editar span { display: none; }
  .cl-editar { width: 40px; padding: 0; justify-content: center; }
  .cl-resumen a { padding: 12px; }
  .cl-resumen b { font-size: 21px; line-height: 25px; }
  .cl-resumen span { font-size: 11.5px; }
}

/* ═══ Acuerdos y acuses (23 oct): lo que corre sin acuse arriba, lo demás como se lee un expediente ═══ */
.ac { max-width: 1040px; }
.ac-grupo { margin: 0 0 22px; }
.ac-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.ac-cab b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--sutil); font-weight: 650; }
.ac-cab span { font-size: 13px; font-weight: 650; color: var(--rojo); }
.ac-urge .ac-cab { color: var(--rojo); }
.ac-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); overflow: hidden; container-type: inline-size; container-name: aclista; }
.ac-urge .ac-lista { border-color: color-mix(in srgb, var(--rojo) 28%, var(--linea)); }
.ac-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linea-2); cursor: pointer; transition: background .15s;
  animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.ac-fila:last-child { border-bottom: 0; }
.ac-fila:hover { background: color-mix(in srgb, var(--fondo) 70%, var(--tarjeta)); }
.ac-lista > :nth-child(2) { animation-delay: 25ms; } .ac-lista > :nth-child(3) { animation-delay: 50ms; } .ac-lista > :nth-child(4) { animation-delay: 75ms; } .ac-lista > :nth-child(n+5) { animation-delay: 100ms; }
.ac-ico { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; transition: transform .15s; }
span.ac-ico { cursor: inherit; }
button.ac-ico:active { transform: scale(.9); }
.ac-ico .img-doc { width: 38px; height: 38px; border-radius: 12px; }
.ac-cuerpo { display: grid; gap: 3px; min-width: 0; }
.ac-titulo { font-size: 15px; line-height: 20px; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-meta { font-size: 13px; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-cliente { font-weight: 650; color: var(--texto); }
.ac-cliente:not(:empty)::after { content: '·'; margin: 0 6px; font-weight: 400; color: var(--tenue); }
.ac-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 12.5px; color: var(--tenue); }
.ac-tipo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sutil); }
.ac-punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-tx); }
.ac-punto.c-red { background: var(--red-tx); } .ac-punto.c-blue { background: var(--blue-tx); } .ac-punto.c-purple { background: var(--purple-tx); }
.ac-punto.c-orange { background: var(--orange-tx); } .ac-punto.c-green { background: var(--green-tx); } .ac-punto.c-brown { background: var(--brown-tx); }
.ac-exp { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ac-est { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ac-est svg { width: 13px; height: 13px; stroke-width: 2.4; }
.ac-est.rojo { background: color-mix(in srgb, var(--rojo) 10%, var(--tarjeta)); color: var(--rojo); }
.ac-est.indigo { background: var(--acento-suave); color: var(--acento-tx); }
.ac-est.verde { background: var(--green-bg); color: var(--green-tx); }
.ac-lado { display: grid; justify-items: end; gap: 6px; }
.ac-fecha { font-size: 13px; font-weight: 650; color: var(--sutil); white-space: nowrap; }
.ac-lado .persona span { display: none; }
.ac-lado .persona .av { width: 24px; height: 24px; }
.ac-mas { border-radius: 16px; border-top: 1px solid var(--linea); margin: -8px 0 24px; }
.as-materias .ac-punto { margin-right: -1px; }
.ac-ico { grid-column: 1; grid-row: 1 / span 2; }
.ac-cuerpo { grid-column: 2; grid-row: 1; }
.ac-linea { grid-column: 2 / -1; grid-row: 2; margin-top: -6px; }
.ac-lado { grid-column: 3; grid-row: 1; }
@container aclista (min-width: 720px) {
  .ac-fila { grid-template-columns: auto minmax(0, 1fr) 200px 96px; align-items: center; gap: 16px; padding: 12px 18px; }
  .ac-ico { grid-row: 1; }
  .ac-linea { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; }
  .ac-lado { grid-column: 4; grid-row: 1; grid-auto-flow: column; align-items: center; justify-content: end; }
}
@media (max-width: 760px) {
  .ac-fila { padding: 12px; gap: 10px; }
  .ac-ico .img-doc { width: 34px; height: 34px; border-radius: 11px; }
  .ac-titulo { font-size: 14.5px; }
}
.cl-venc { font-style: normal; color: var(--rojo); }
.cl-venc::before { content: '·'; margin: 0 6px; color: var(--tenue); }
@media (min-width: 900px) { .ac .as-materias { flex-wrap: wrap; overflow: visible; } }
/* Dentro del cliente, su nombre en cada tarjeta sobra. */
.cl-detalle .ficha-cliente { display: none; }
.cl-detalle .ficha-arriba:not(:has(.tag)) { display: none; }

/* ═══ Equipo (23 oct): por rol, ficha de cada quien en hoja, roles plegados ═══ */
.eq-resumen > div { display: grid; gap: 2px; padding: 14px 16px; border-left: 1px solid var(--linea-2); }
.eq-resumen > div:first-child { border-left: 0; }
.eq-resumen .ambar b { color: #d97706; }
.eq-resumen .cero b { color: var(--tenue); }
.eq-sec { margin: 0 0 20px; }
.eq-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); overflow: hidden; }
.eq-fila { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--linea-2); cursor: pointer; transition: background .15s;
  animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.eq-fila:last-child { border-bottom: 0; }
.eq-fila:hover, .eq-fila:focus-visible { background: color-mix(in srgb, var(--fondo) 70%, var(--tarjeta)); outline: none; }
.eq-fila:active { background: var(--fondo); }
.eq-fila > .av { width: 42px; height: 42px; font-size: 14px; overflow: hidden; }
.eq-fila > .av img, .eq-hoja-cab .av img { width: 100%; height: 100%; object-fit: cover; }
.eq-fila.baja { opacity: .6; }
.eq-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.eq-txt b { font-size: 15px; font-weight: 650; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-txt b em { margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--acento-suave); color: var(--acento-tx); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.eq-txt span { font-size: 12.5px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-rol { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--fondo); color: var(--sutil); white-space: nowrap; }
.eq-rol.r-direccion { background: var(--acento-suave); color: var(--acento-tx); }
.eq-rol.r-supervisor { background: var(--purple-bg); color: var(--purple-tx); }
.eq-rol.r-socio { background: var(--yellow-bg); color: var(--yellow-tx); }
.eq-flecha { flex: none; width: 18px; height: 18px; color: var(--tenue); }
.eq .eq-sec .eq-rol { display: none; }
.eq-roles { margin: 4px 0 28px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); }
.eq-roles summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.eq-roles summary::-webkit-details-marker { display: none; }
.eq-roles summary svg { width: 17px; height: 17px; color: var(--tenue); }
.eq-roles summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--resorte-vivo, ease); }
.eq-roles[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.eq-roles dl { display: grid; gap: 12px; margin: 0; padding: 4px 16px 16px; }
.eq-roles dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.eq-roles dt { margin: 0; } .eq-roles dd { margin: 0; font-size: 13.5px; color: var(--sutil); line-height: 1.45; }
.hoja-persona .hf-chip:disabled { opacity: .55; cursor: default; }
.eq-hoja { display: grid; gap: 18px; }
.eq-hoja-cab { display: flex; align-items: center; gap: 14px; }
.eq-hoja-cab .av { width: 60px; height: 60px; font-size: 19px; overflow: hidden; }
.eq-hoja-cab b { display: block; font-size: 18px; font-weight: 700; line-height: 23px; }
.eq-hoja-cab span { font-size: 13.5px; color: var(--sutil); }
.eq-hoja-datos { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.eq-hoja-datos > div { display: grid; gap: 2px; padding: 12px 14px; }
.eq-hoja-datos > div + div { border-left: 1px solid var(--linea-2); }
.eq-hoja-datos b { font-size: 17px; font-weight: 700; }
.eq-hoja-datos span { font-size: 12px; color: var(--tenue); }
.eq-puede { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fondo); font-size: 13.5px; line-height: 1.45; color: var(--sutil); }
.eq-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea-2); }
.eq-acciones .boton { display: inline-flex; align-items: center; gap: 6px; height: 42px; border-radius: 12px; }
.eq-acciones .boton svg { width: 16px; height: 16px; }
.eq-acciones .peligro-suave { margin-left: auto; }
@media (max-width: 760px) {
  .eq-roles dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .eq-acciones .boton { flex: 1 1 auto; justify-content: center; }
  .eq-acciones .peligro-suave { margin-left: 0; }
}

/* ═══ Boletín (23 oct): la revisión en un renglón, publicaciones agrupadas por día ═══ */
.bl-nota { margin: -6px 0 14px; font-size: 14px; color: var(--sutil); }
.bl-estado { margin: 0 0 14px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); }
.bl-estado summary { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 52px; padding: 8px 40px 8px 16px; position: relative; cursor: pointer; list-style: none; }
.bl-estado summary::-webkit-details-marker { display: none; }
.bl-estado summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); transform: rotate(45deg); transition: transform .25s var(--resorte-vivo, ease); }
.bl-estado[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.bl-estado summary b { font-size: 14.5px; font-weight: 650; }
.bl-estado summary span { font-size: 13px; color: var(--tenue); }
.bl-luz { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 16%, transparent); }
.t-ambar .bl-luz { background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 18%, transparent); }
.t-rojo .bl-luz { background: var(--rojo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rojo) 16%, transparent); }
.t-verde .bl-luz { animation: bl-latido 2.4s ease-in-out infinite; }
@keyframes bl-latido { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #16a34a 0%, transparent); } }
.bl-estado-mas { padding: 0 16px 14px; font-size: 13.5px; color: var(--sutil); line-height: 1.5; }
.bl-estado-mas p { margin: 0 0 8px; }
.bl-estado-mas h4 { margin: 12px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.bl-exps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bl-exps a { padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; font-size: 12.5px; color: var(--texto); }
.bl-exps a:hover { border-color: var(--acento); color: var(--acento-tx); }
#bol-revisar.girando svg { animation: bl-gira 1s linear infinite; }
@keyframes bl-gira { to { transform: rotate(360deg); } }
.bl-grupo { margin: 0 0 22px; }
.bl-dia { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.bl-cal { flex: none; display: grid; justify-items: center; width: 44px; padding: 3px 0 4px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); line-height: 1; }
.bl-cal small { font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--rojo); }
.bl-cal b { margin-top: 2px; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.bl-dia-txt { display: grid; gap: 1px; min-width: 0; }
.bl-dia-txt b { font-size: 15px; font-weight: 700; }
.bl-dia-txt span { font-size: 12.5px; font-weight: 500; color: var(--sutil); }
.bl-dia em { margin-left: auto; font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--sutil); font-weight: 650; }
.bl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bl-tarjeta { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; transition: box-shadow .3s; }
.bl-tarjeta.urge { border-color: color-mix(in srgb, var(--rojo) 26%, var(--linea)); }
.bl-tarjeta.descartada { opacity: .7; }
.bl-tarjeta.resaltada { box-shadow: 0 0 0 3px var(--acento-suave); border-color: var(--acento); }
.bl-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bl-asunto { min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 20px; }
.bl-asunto a { color: var(--texto); }
.bl-asunto a:hover { color: var(--acento-tx); }
.bl-cab .persona { flex: none; font-size: 13px; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--tenue); }
.bl-sintesis { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--sutil); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.bl-sintesis.abierta { -webkit-line-clamp: unset; }
.bl-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bl-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bl-acciones .boton { display: inline-flex; align-items: center; gap: 6px; height: 40px; border-radius: 12px; }
.bl-acciones .boton svg { width: 16px; height: 16px; }
.ac-est.gris { background: var(--fondo); color: var(--sutil); font-weight: 600; }
.bl .as-materias a.as-mat { text-decoration: none; }
@media (max-width: 760px) { .eq #nuevo-usuario { width: auto; padding: 0 14px; } .eq #nuevo-usuario span { display: inline; } }
/* El deslizamiento se ancla respetando el margen: el primer chip ya no queda pegado a la orilla. */
.as-materias { scroll-padding-inline: 14px; }
.dir-cuenta { font-size: 14px; font-weight: 600; color: var(--tenue); }
.as-busca .dir-buscar { margin: 0; padding: 0; border: 0; box-shadow: none; }

/* ═══ Equipo: Feed, Formación y Directorio (23 oct) ═══ */
/* El segmento de arriba, con indicador que se desliza como los de vista. */
.seg-equipo { --i: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 380px; margin: 0 0 18px; padding: 3px; border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta); }
.seg-equipo::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 11px; background: var(--acento-suave); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--resorte-vivo-ms, .4s) var(--resorte-vivo, ease); }
.seg-equipo a { position: relative; z-index: 1; display: grid; place-items: center; height: 36px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--sutil); }
.seg-equipo a.activo { color: var(--acento-tx); }
@media (max-width: 760px) { .seg-equipo { max-width: none; } }

/* Formación: la temporada y lo que sigue arriba, lo pendiente en lista, el resto en mosaico. */
.fm2 { max-width: 1040px; }
.fm-arriba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 20px; }
@media (min-width: 900px) { .fm-arriba:has(.fm-sigue) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.fm-hero { position: relative; display: flex; align-items: center; gap: 12px; min-height: 132px; padding: 18px 18px 18px 20px; border-radius: 24px; background: linear-gradient(135deg, #4338ca, #7c3aed 70%, #a855f7); color: #fff; overflow: hidden; box-shadow: 0 14px 30px -18px rgb(76 29 149 / .7);
  animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; transition: transform .2s var(--resorte-firme, ease); }
.fm-hero:active { transform: scale(.985); }
.fm-hero::after { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .18), transparent); pointer-events: none; }
.fm-hero-txt { position: relative; z-index: 1; display: grid; gap: 2px; min-width: 0; flex: 1; }
.fm-hero-txt span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.fm-hero-txt b { font-size: 26px; line-height: 31px; font-weight: 800; letter-spacing: -.02em; }
.fm-hero-txt em { font-style: normal; font-size: 13.5px; opacity: .9; }
.fm-hero-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-style: normal; font-size: 13px; font-weight: 650; opacity: .95; }
.fm-hero-ir svg { width: 15px; height: 15px; }
.fm-hero-ilus { position: relative; z-index: 1; flex: none; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 14px rgb(30 10 80 / .35)); animation: fm-flota 5s ease-in-out infinite; }
@keyframes fm-flota { 50% { transform: translateY(-5px) rotate(-3deg); } }
.fm-sigue { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--linea); border-radius: 24px; background: var(--tarjeta); color: var(--texto); animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) 60ms both; transition: border-color .15s, transform .2s; }
.fm-sigue:hover { border-color: color-mix(in srgb, var(--acento) 30%, var(--linea)); }
.fm-sigue:active { transform: scale(.985); }
.fm-sigue-ilus { flex: none; width: 64px; height: 64px; object-fit: contain; }
.fm-sigue-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fm-sigue-txt span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.fm-sigue-txt b { font-size: 16px; line-height: 21px; font-weight: 700; }
.fm-sigue-txt em { font-style: normal; font-size: 12.5px; color: var(--sutil); }
.fm-barra { height: 8px; border-radius: 99px; background: var(--fondo); overflow: hidden; }
.fm-barra i { display: block; width: var(--x); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f46e5, #8b5cf6); animation: fm-llena .9s var(--resorte-suave, ease-out) .15s both; }
@keyframes fm-llena { from { width: 0; } }
.fm-sigue-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 6px 14px -6px rgb(79 70 229 / .6); }
.fm-sigue-btn svg { width: 18px; height: 18px; margin-left: 2px; }
.fm-sec { margin: 0 0 22px; }
.fm-pend li { border-bottom: 1px solid var(--linea-2); }
.fm-pend li:last-child { border-bottom: 0; }
.fm-pfila { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; color: var(--texto); transition: background .15s; }
.fm-pfila:hover { background: color-mix(in srgb, var(--fondo) 70%, var(--tarjeta)); }
.fm-pfila .nt-ico { flex: none; }
.fm-aldia { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); }
.fm-aldia div { display: grid; gap: 1px; } .fm-aldia b { font-size: 15px; } .fm-aldia span { font-size: 13px; color: var(--sutil); }
.fm-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .fm-mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.fm-mos { position: relative; display: grid; justify-items: start; gap: 2px; padding: 14px; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); color: var(--texto); transition: transform .2s var(--resorte-firme, ease), border-color .15s, box-shadow .2s; animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.fm-mosaico > :nth-child(2) { animation-delay: 30ms; } .fm-mosaico > :nth-child(3) { animation-delay: 60ms; } .fm-mosaico > :nth-child(4) { animation-delay: 90ms; } .fm-mosaico > :nth-child(n+5) { animation-delay: 120ms; }
.fm-mos:hover { border-color: color-mix(in srgb, var(--acento) 30%, var(--linea)); box-shadow: 0 8px 20px -14px rgb(15 23 42 / .25); transform: translateY(-2px); }
.fm-mos:active { transform: scale(.97); }
.fm-mos-ilus { width: 52px; height: 52px; margin-bottom: 6px; object-fit: contain; transition: transform .3s var(--resorte-vivo, ease); }
.fm-mos:hover .fm-mos-ilus { transform: scale(1.08) rotate(-4deg); }
.fm-mos b { font-size: 15px; font-weight: 700; }
.fm-mos span { font-size: 12.5px; font-weight: 600; color: var(--sutil); }
.fm-mos.alerta span { color: #b45309; }
.fm-mos .as-urge { top: 12px; right: 12px; }
@media (max-width: 760px) { .fm-hero-txt b { font-size: 23px; line-height: 28px; } .fm-hero-ilus { width: 84px; height: 84px; } .fm-sigue-ilus { width: 52px; height: 52px; } }

/* Feed: el cuadro para publicar en un renglón en el teléfono, chips de temas como los de las demás pantallas. */
.pn-rapido { display: none; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.pn-rapido img { width: 26px; height: 26px; }
.pn-fila textarea { align-self: center; }
@media (max-width: 760px) {
  .pub-nueva { padding: 10px 14px; }
  .pub-nueva:not(.abierta) .pn-pie { display: none; }
  .pub-nueva:not(.abierta) .pn-rapido { display: grid; }
  .pub-nueva:not(.abierta) .pn-fila textarea { min-height: 40px; height: 40px; padding: 9px 14px; border-radius: 20px; background: var(--fondo); font-size: 15px; }
  .pub-nueva.abierta .pn-pie { animation: cl-entra .3s var(--resorte-suave, ease-out) both; }
}
.chip-tema { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; font-size: 14px; scroll-snap-align: start; transition: transform .15s; }
.chip-tema:active { transform: scale(.95); }
.chip-tema.activo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-tx); }
.tendencias-chips { scroll-snap-type: x proximity; scroll-padding-inline: 14px; padding-bottom: 2px; }
/* Me gusta: un pequeño salto al activarse. */
.pa-boton { transition: transform .15s, background .15s, color .15s; }
.pa-boton:active { transform: scale(.94); }
.pa-boton.activa .rx { animation: rx-salta .45s var(--resorte-vivo, cubic-bezier(.3,1.6,.5,1)) both; }
@keyframes rx-salta { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.feed .pub { animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
@media (max-width: 760px) { .pub-nueva:not(.abierta) .pn-fila textarea { overflow: hidden; white-space: nowrap; } }
.fm-hero-ir span { transition: transform .2s; } .fm-hero:hover .fm-hero-ir span { transform: translateX(3px); }

/* ═══ Corroborar término (23 oct): buscador de plazos, lista compacta, vencimiento como hoja de calendario ═══ */
.corr-solo { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 18px; font-size: 13.5px; line-height: 1.45; color: var(--sutil); }
.corr-solo svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #b45309; }
.corr2 .corr-paso { border-radius: 22px; }
.corr2 .corr-num { transition: background .2s; }
.corr2 .corr-num svg { width: 16px; height: 16px; }
.corr2 .con-eleccion .corr-num, .corr2 #corr-paso2:has(#corr-fecha:valid) .corr-num:has(svg) { background: #16a34a; }
.corr-busca { margin-bottom: 10px; }
.corr2 .corr-materias { margin: 0 -20px 12px; padding-inline: 20px; scroll-padding-inline: 20px; }
.corr2 .corr-materias.apagadas .as-mat { opacity: .45; }
.corr-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.corr2 .corr-plazo { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--linea-2); border-radius: 0; background: var(--tarjeta); cursor: pointer; transition: background .15s; }
.corr2 .corr-plazo:last-child, .corr2 .corr-plazo:has(~ .corr-plazo[hidden]):not(:has(~ .corr-plazo:not([hidden]))) { border-bottom: 0; }
.corr2 .corr-plazo:hover, .corr2 .corr-plazo:focus-visible { background: color-mix(in srgb, var(--fondo) 70%, var(--tarjeta)); outline: none; }
.corr2 .corr-plazo.activo { background: var(--acento-suave); }
.corr2 .corr-plazo[hidden] { display: none; }
.corr-pl-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.corr-pl-txt b { font-size: 14.5px; font-weight: 650; line-height: 19px; }
.corr-pl-txt span { font-size: 12.5px; color: var(--tenue); }
.corr2 .corr-plazo.activo .corr-pl-txt b { color: var(--acento-tx); }
.corr-dias { flex: none; display: grid; justify-items: center; min-width: 46px; padding: 4px 6px; border-radius: 12px; background: var(--fondo); line-height: 1; }
.corr-dias { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.corr-dias small { margin-top: 2px; font-size: 10px; font-weight: 650; color: var(--tenue); }
.corr2 .corr-plazo.activo .corr-dias { background: var(--acento); color: #fff; }
.corr2 .corr-plazo.activo .corr-dias small { color: rgb(255 255 255 / .8); }
.corr-nada { margin: 10px 0 0; font-size: 14px; color: var(--tenue); }
.corr2 .corr-notifs { margin-bottom: 14px; }
.corr2 .corr-resultado { border-radius: 22px; }
.corr2 .corr-vence { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.corr-hoja { flex: none; display: grid; justify-items: center; width: 62px; padding: 6px 0 8px; border-radius: 16px; background: var(--tarjeta); color: var(--texto); box-shadow: 0 6px 16px -10px rgb(15 23 42 / .35); line-height: 1; }
.corr-hoja small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); }
.corr-hoja b { margin-top: 4px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.corr-vence-txt { display: grid; gap: 2px; min-width: 0; }
.corr2 .corr-vence-txt > span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.corr2 .corr-vence-txt b { font-size: 20px; line-height: 25px; }
.corr2 .corr-vence-txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; }
.corr-falta { font-style: normal; padding: 2px 9px; border-radius: 999px; background: var(--tarjeta); font-weight: 750; }
@media (max-width: 760px) {
  .corr2 .corr-materias { margin-inline: -16px; padding-inline: 16px; }
  .corr2 .con-eleccion .corr-busca, .corr2 .con-eleccion .corr-nada { display: none; }
  .corr2 .corr-vence-txt b { font-size: 18px; line-height: 23px; }
}

/* ═══ Mi biblioteca (23 oct): encabezado de la app, chips de tipo y etiqueta, "Nuevo" en hoja ═══ */
.bi { max-width: 1240px; }
.bi-et { color: var(--acento-tx); }
.bi-mosaico { columns: 3 300px; column-gap: 14px; margin-bottom: 24px; }
.bi-mosaico > .bi-carta { break-inside: avoid; margin: 0 0 14px; }
.bi-carta { display: block; min-height: 0; padding: 16px 18px; border-radius: 20px; animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; transition: border-color .15s, box-shadow .2s, transform .2s var(--resorte-firme, ease); }
.bi-carta:hover { border-color: color-mix(in srgb, var(--acento) 28%, var(--linea)); box-shadow: 0 10px 24px -16px rgb(15 23 42 / .25); }
.bi-carta:active { transform: scale(.985); }
.bi-carta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.bi-carta .carta-tipo { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bi-carta .carta-tipo > span:not(.bi-tipo):not(.bi-ok) { font-size: 12px; color: var(--tenue); }
.bi-tipo { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; background: var(--blue-bg); color: var(--blue-tx); }
.t-purple .bi-tipo { background: var(--purple-bg); color: var(--purple-tx); }
.t-green .bi-tipo { background: var(--green-bg); color: var(--green-tx); }
.bi-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 650; color: var(--green-tx); }
.bi-ok svg { width: 13px; height: 13px; }
.bi-carta h3 { font-size: 16px; line-height: 21px; font-weight: 700; }
.bi-carta .md { max-height: 160px; }
.bi-carta .carta-pie { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-2); }
.bi-opciones { display: grid; gap: 10px; }
.bi-op { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--linea); border-radius: 18px; background: var(--tarjeta); font: inherit; text-align: left; color: var(--texto); cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.bi-op:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento-suave) 40%, var(--tarjeta)); }
.bi-op:active { transform: scale(.98); }
.bi-op .nt-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; }
.bi-op span:last-child { display: grid; gap: 2px; }
.bi-op b { font-size: 15.5px; } .bi-op small { font-size: 13px; line-height: 1.4; color: var(--sutil); }
@media (max-width: 760px) { .bi-mosaico { columns: 1; } }
.corr2 .corr-form { grid-template-columns: minmax(0, 1fr); }
.corr2 .corr-paso, .corr2 .corr-cuerpo { min-width: 0; }
.corr2 .corr-pl-txt b { color: var(--texto); }
@media (min-width: 900px) { .bi .as-materias { flex-wrap: wrap; overflow: visible; } }

/* ═══ Consultas del equipo (23 oct): lista en una tarjeta, materias en chips, respuesta que se abre ═══ */
.cs2 .punto, .cs2-det .punto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.cs2-preguntar svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .cs2 .cs2-preguntar { width: auto; padding: 0 14px; } .cs2 .cs2-preguntar span { display: inline; } }
.cs2 .as-materias + .as-materias { margin-top: -8px; }
.cs2-materias .as-mat { height: 34px; font-size: 13px; }
.cs2 .as-materias a.as-mat { text-decoration: none; }
.cs2-nota { margin: -4px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--sutil); }
.cs2-nota b { color: #b45309; }
.cs2-lista { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid var(--linea); border-radius: 20px; background: var(--tarjeta); overflow: hidden; }
.cs2-lista > li { border-bottom: 1px solid var(--linea-2); animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.cs2-lista > li:last-child { border-bottom: 0; }
.cs2-lista > li:nth-child(2) { animation-delay: 30ms; } .cs2-lista > li:nth-child(3) { animation-delay: 60ms; } .cs2-lista > li:nth-child(n+4) { animation-delay: 90ms; }
.cs2-fila { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 18px; color: var(--texto); transition: background .15s; }
.cs2-fila:hover { background: color-mix(in srgb, var(--fondo) 70%, var(--tarjeta)); }
.cs2-fila.sola::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #f59e0b; }
.cs2-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--tenue); }
.cs2-arriba .ac-tipo { gap: 6px; }
.cs2-titulo { font-size: 15.5px; line-height: 21px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs2-fila.resuelta .cs2-titulo { font-weight: 650; }
.cs2-extracto { font-size: 13.5px; line-height: 19px; color: var(--sutil); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs2-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 12.5px; color: var(--tenue); }
.cs2-pie .cs-quien { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sutil); }
.cs2-pie .cs-quien .av { width: 22px; height: 22px; overflow: hidden; }
.cs2-pie .cs-quien .av img { width: 100%; height: 100%; object-fit: cover; }
.cs-n { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--acento-tx); }
.cs-n svg { width: 14px; height: 14px; }
.ac-est.ambar { background: color-mix(in srgb, #f59e0b 14%, var(--tarjeta)); color: #b45309; }
.cs2-pie .cs-utiles { font-weight: 700; color: var(--acento-tx); }
.cs2-et { color: var(--tenue); }
@media (min-width: 900px) { .cs2 .cs2-materias { flex-wrap: wrap; overflow: visible; } }

/* La consulta abierta. */
.cs2-det .cs-pregunta { border-radius: 22px; }
.cs2-det .cs-resp { border-radius: 20px; animation: cl-entra var(--resorte-suave-ms, .5s) var(--resorte-suave, ease-out) both; }
.cs2-det .cs-resp-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.cs2-det .cs-resp-pie .enlace { display: inline-flex; align-items: center; gap: 5px; }
.cs2-det .cs-resp-pie .enlace svg { width: 15px; height: 15px; }
.cs-resp-mas { margin-left: auto; }
.cs-desmarcar { color: var(--tenue) !important; font-weight: 500; }
.cs2-det .cs-util { transition: transform .15s, background .15s; }
.cs2-det .cs-util:active { transform: scale(.94); }
.cs2-det .cs-util.activo b { animation: rx-salta .45s var(--resorte-vivo, ease) both; display: inline-block; }
.cs2-det .cs-nueva { padding: 12px 14px; border-radius: 20px; }
.cs-nueva-fila { display: flex; align-items: flex-start; gap: 10px; }
.cs-nueva-fila > .av { width: 36px; height: 36px; flex: none; overflow: hidden; }
.cs-nueva-fila > .av img { width: 100%; height: 100%; object-fit: cover; }
.cs2-det .cs-nueva textarea { flex: 1; min-height: 40px; margin: 0; padding: 9px 14px; border: 1px solid var(--linea); border-radius: 20px; background: var(--fondo); font: inherit; font-size: 15px; line-height: 21px; resize: none; transition: border-radius .2s, background .2s; }
.cs2-det .cs-nueva.abierta textarea { min-height: 120px; border-radius: 14px; background: var(--tarjeta); }
.cs-nueva-ayuda { margin: 8px 0 0 46px; font-size: 12.5px; color: var(--tenue); }
.cs2-det .cs-nueva:not(.abierta) .cs-nueva-ayuda, .cs2-det .cs-nueva:not(.abierta) .mr-pie { display: none; }
.cs2-det .cs-nueva .mr-pie { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; }

/* Avisos (24 oct): la ilustración compacta es la de siempre y sólo en el teléfono va grande y saliéndose.
   Antes dependía de una container query que algunos navegadores no aplicaban, y en PC salía del tamaño del teléfono. */
.cr2-ilus { top: 14px; right: 14px; width: 60px; height: 60px; }
.cr2-flota img { max-width: 52px; max-height: 52px; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--c) 24%, transparent)); }
.cr2-sombra { width: 36px; height: 6px; margin-left: -18px; bottom: 0; }
.cr2-top, .cr2-titulo { padding-right: 76px; }
.cr2-titulo { min-height: 0; }
@media (max-width: 760px) {
  .cr2-ilus { top: -12px; right: 2px; width: 88px; height: 88px; }
  .cr2-flota img { max-width: 76px; max-height: 76px; }
  .cr2-sombra { width: 50px; height: 9px; margin-left: -25px; bottom: 2px; }
  .cr2-top, .cr2-titulo { padding-right: 80px; }
  .cr2-titulo { min-height: 44px; }
}

/* ═══ v0.88 · Por turnar (Dirección y Supervisión) ═══ */
.por-turnar .pt-cuenta { background: var(--yellow-bg, #fdf3d7) !important; color: var(--ambar) !important; }
.pt-nota { margin: -6px 0 10px; font-size: 13px; color: var(--sutil); }
.pt-caja { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.pt-grupo { padding: 10px 16px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.pt-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--linea-2); cursor: pointer; }
.pt-grupo + .pt-fila { border-top: 0; }
.pt-fila:hover { background: var(--tarjeta-2); }
.pt-fila.con-termino.cerca { box-shadow: inset 3px 0 0 var(--rojo); }
.pt-fila > .nt-ico { width: 36px; height: 36px; justify-self: center; }
.pt-texto { display: grid; gap: 2px; min-width: 0; }
.pt-texto b { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-texto span { font-size: 13px; color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-fila .boton { display: inline-flex; align-items: center; gap: 6px; }
.pt-fila .boton svg { width: 16px; height: 16px; }
.pt-plegado { border-top: 1px solid var(--linea-2); }
.pt-caja > .pt-plegado:first-child { border-top: 0; }
.pt-plegado > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--acento-tx); cursor: pointer; list-style: none; }
.pt-plegado > summary::-webkit-details-marker { display: none; }
.pt-plegado > summary svg { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .2s; }
.pt-plegado[open] > summary svg { transform: rotate(90deg); }
@media (max-width: 760px) {
  .pt-fila { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px; }
  .pt-fila .boton { padding: 0 10px; }
  .pt-fila .boton svg { display: none; }
}
.as-turnar { border-color: color-mix(in srgb, var(--ambar) 45%, var(--linea)); }
.punto-turnar { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 2px var(--fondo); }
#nav-lateral .nav-item[data-id="asuntos"] { position: relative; }
#nav-lateral .nav-item[data-id="asuntos"] .punto-turnar { position: static; margin-left: auto; box-shadow: none; }
#nav-abajo a[data-id="asuntos"] { position: relative; }
#nav-abajo a[data-id="asuntos"] .punto-turnar { top: 6px; left: calc(50% + 8px); }

/* ═══ v0.88 · Pantalla de entrada nueva ═══ */
.acceso { overflow-y: auto; }
.acceso-marco { width: min(1000px, 100%); min-height: 600px; }
.acceso-arte { position: relative; }
.acceso-arte .acceso-ilus { width: 80%; max-width: 400px; }
.acceso-marco .acceso-caja { display: flex; flex-direction: column; justify-content: center; align-self: stretch; padding: 56px 56px 28px; }
.acceso-marco .marca { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--texto); letter-spacing: -.025em; }
.acceso-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--sutil); }
.acceso-marco #form-acceso { margin-top: 28px; gap: 16px; }
.acceso-campo { display: grid; gap: 6px; }
.acceso-campo > span:first-child { font-size: 13px; font-weight: 650; color: var(--sutil); }
.acceso-campo input { width: 100%; height: 50px; padding: 0 16px; font-size: 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--tarjeta-2, var(--fondo)); color: var(--texto); transition: border-color .15s, box-shadow .15s, background .15s; }
.acceso-campo input::placeholder { color: var(--tenue-2, var(--tenue)); }
.acceso-campo input:focus { outline: 0; border-color: var(--acento); background: var(--tarjeta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); }
.acceso-clave { position: relative; display: block; }
.acceso-clave input { padding-right: 52px; }
.ver-clave { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--tenue); cursor: pointer; }
.ver-clave:hover { color: var(--texto); background: var(--tarjeta-2); }
.ver-clave svg { width: 20px; height: 20px; }
.ver-clave .ojo-no, .ver-clave[aria-pressed="true"] .ojo { display: none; }
.ver-clave[aria-pressed="true"] .ojo-no { display: block; }
.acceso-marco #form-acceso .boton { height: 50px; margin-top: 6px; padding: 0; font-size: 16px; font-weight: 700; border-radius: 999px; transition: transform .15s, background .15s; }
.acceso-marco #form-acceso .boton:active { transform: scale(.98); }
.acceso-marco #form-acceso .boton[disabled] { opacity: .7; }
#form-acceso .error { margin: -4px 0 0; font-size: 14px; }
.acceso-marco .pie-acceso { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--tenue) !important; }
.acceso-instalar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--tarjeta); font: inherit; font-size: 14px; font-weight: 600; color: var(--acento-tx); cursor: pointer; }
.acceso-instalar svg { width: 18px; height: 18px; }
.acceso-instalar.oculto { display: none; }
.acceso-credito { margin: auto 0 0; padding-top: 28px; text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--tenue); }
@media (max-width: 760px) {
  .acceso { padding: 0; display: block; background: color-mix(in srgb, var(--purple-bg) 90%, var(--tarjeta)); }
  .acceso-marco { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; background: none; overflow: visible; }
  .acceso-arte { flex: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 40px; background: linear-gradient(180deg, var(--acento-suave) 0%, color-mix(in srgb, var(--purple-bg) 90%, var(--tarjeta)) 100%); }
  .acceso-arte .acceso-lema { justify-content: center; }
  .acceso-arte .acceso-ilus { order: 0; width: min(60vw, 240px); max-height: 25vh; margin: 4px auto 0; object-fit: contain; }
  .acceso-arte p { display: none; }
  .acceso-marco .acceso-caja { position: relative; z-index: 1; flex: 1; justify-content: flex-start; margin-top: -26px; padding: 30px 22px calc(env(safe-area-inset-bottom, 0px) + 16px); border-radius: 28px 28px 0 0; background: var(--tarjeta); }
  .acceso-marco .marca { font-size: 26px; }
  .acceso-sub { font-size: 14px; }
  .acceso-marco #form-acceso { margin-top: 20px; gap: 12px; }
  .acceso-campo input { height: 48px; }
  .acceso-marco #form-acceso .boton { height: 48px; }
  .acceso-marco .pie-acceso { margin-top: 14px; }
  .acceso-credito { padding-top: 22px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .acceso-arte { padding-bottom: 40px; }
  .acceso-arte .acceso-ilus { max-height: 22vh; }
}

/* ═══ v0.88 · Instalar la app ═══ */
.ins-capa { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(8, 12, 30, .42); opacity: 0; transition: opacity .2s; }
.ins-capa.abierta { opacity: 1; }
.ins-hoja { width: min(440px, 100%); background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 22px; padding: 20px 20px 16px; transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.2, .9, .3, 1.2); }
.ins-capa.abierta .ins-hoja { transform: none; }
.ins-cabeza { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.ins-cabeza img { width: 52px; height: 52px; border-radius: 13px; }
.ins-cabeza h2 { margin: 2px 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.ins-cabeza p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--sutil); }
.ins-pasos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; background: var(--tarjeta-2); border-radius: 16px; }
.ins-pasos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.ins-pasos li + li { border-top: 1px solid var(--linea-2); }
.ins-pasos li > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 13px; font-weight: 800; }
.ins-pasos li span b { font-weight: 700; }
.ins-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 1px; vertical-align: -7px; border-radius: 7px; background: var(--acento-suave); color: var(--acento-tx); font-style: normal; }
.ins-ico svg { width: 17px; height: 17px; }
.ins-pie { display: flex; gap: 10px; margin-top: 16px; }
.ins-pie .boton { flex: 1; height: 46px; border-radius: 999px; font-size: 15px; font-weight: 700; justify-content: center; }
.ins-flecha { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #fff; animation: ins-brinco 1.2s ease-in-out infinite; }
.ins-flecha svg { width: 22px; height: 22px; }
.flecha-arriba .ins-flecha { top: calc(env(safe-area-inset-top, 0px) + 6px); bottom: auto; left: auto; right: 14px; margin: 0; }
.flecha-arriba .ins-flecha svg { transform: rotate(180deg); }
@keyframes ins-brinco { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.flecha-arriba .ins-flecha { animation-name: ins-brinco-arriba; }
@keyframes ins-brinco-arriba { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .ins-flecha { animation: none; } .ins-hoja { transition: none; } }
@media (max-width: 760px) {
  .ins-capa { align-items: end; padding: 0; }
  .ins-capa.flecha-abajo { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); }
  .ins-capa.flecha-arriba { align-items: start; padding-top: calc(env(safe-area-inset-top, 0px) + 56px); }
  .ins-hoja { width: 100%; border-radius: 26px 26px 0 0; border-width: 1px 0 0; padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateY(40px); }
  .ins-capa.flecha-abajo .ins-hoja { border-radius: 26px; margin: 0 10px; width: auto; border-width: 1px; padding-bottom: 16px; }
  .ins-capa.flecha-arriba .ins-hoja { border-radius: 26px; margin: 0 10px; width: auto; border-width: 1px; padding-bottom: 16px; transform: translateY(-30px); }
}
.cj-instalar { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); margin: 6px 10px 0; min-height: 46px; padding: 0 14px; border: 1px dashed color-mix(in srgb, var(--acento) 40%, var(--linea)); border-radius: 14px; background: var(--acento-suave); font: inherit; font-size: 15px; font-weight: 650; color: var(--acento-tx); cursor: pointer; }
.cj-instalar svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .pt-texto b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } }