/* Monitoreo Queop — estilo.
   Criterios: tipografía del sistema con interletrado según tamaño, jerarquía por peso + tamaño + espacio,
   respuesta inmediata al presionar, barra superior translúcida (con respaldo sólido) y respeto por
   "reducir movimiento / transparencia / más contraste". Colores como tokens en claro y oscuro. */

/* Paleta de marca Queop (tomada de queop.com.co / queop.com):
   verde casi negro #0B1410, blanco cálido #FAFAF6, crema #F4F1EA, teal #008F76 / #00AD8E,
   verde bosque #0E3A2E y amarillo #FFD900 (este último solo como detalle, nunca como estado). */
:root {
  color-scheme: light;
  --fondo: #fafaf6;
  --superficie: #ffffff;
  --superficie-2: #f4f1ea;
  --borde: #e6e9e4;
  --borde-suave: #eef0ec;
  --texto: #0b1410;
  --texto-2: #3a4842;
  --texto-3: #5a6a62;
  --acento: #008f76;          /* teal de marca: barras, foco, chips activos */
  --enlace: #007a65;          /* teal más oscuro para texto pequeño (5.3:1 sobre blanco) */
  --acento-suave: #e3f2ee;
  --acento-texto: #ffffff;
  --boton: #0b1410;           /* botón principal oscuro, como en queop.com.co */
  --boton-texto: #fafaf6;
  --amarillo-marca: #ffd900;
  --serie: #008f76;
  --rejilla: #eceee9;
  --estado-bueno: #0ca30c;
  --estado-aviso: #fab219;
  --estado-critico: #d03b3b;
  --fila-hover: #f6f5ef;
  --barra-fondo: rgba(250, 250, 246, 0.8);
  --sombra-1: 0 1px 2px rgba(11, 20, 16, 0.04), 0 1px 1px rgba(11, 20, 16, 0.03);
  --sombra-2: 0 1px 3px rgba(11, 20, 16, 0.06), 0 8px 20px rgba(11, 20, 16, 0.05);
  --radio: 16px;
  --radio-sm: 10px;
  --rapido: 120ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0b1410;
    --superficie: #111c17;
    --superficie-2: #16231d;
    --borde: #26352e;
    --borde-suave: #1d2b24;
    --texto: #f4f1ea;
    --texto-2: #b4c1b9;
    --texto-3: #8a9a92;
    --acento: #00ad8e;
    --enlace: #2cc4a5;
    --acento-suave: #0e3a2e;
    --boton: #f4f1ea;
    --boton-texto: #0b1410;
    --serie: #00ad8e;
    --rejilla: #1f2d26;
    --fila-hover: #15211b;
    --barra-fondo: rgba(11, 20, 16, 0.8);
    --sombra-1: none;
    --sombra-2: 0 0 0 1px rgba(255, 255, 255, 0.02);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0b1410; --superficie: #111c17; --superficie-2: #16231d; --borde: #26352e; --borde-suave: #1d2b24;
  --texto: #f4f1ea; --texto-2: #b4c1b9; --texto-3: #8a9a92; --acento: #00ad8e; --enlace: #2cc4a5;
  --acento-suave: #0e3a2e; --boton: #f4f1ea; --boton-texto: #0b1410; --serie: #00ad8e; --rejilla: #1f2d26;
  --fila-hover: #15211b; --barra-fondo: rgba(11, 20, 16, 0.8); --sombra-1: none;
  --sombra-2: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* ---------- Base y tipografía ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  /* Geist / DM Sans son las fuentes de los sitios de Queop: se usan si están instaladas en el PC;
     si no, Segoe UI Variable (no se cargan fuentes de internet: la app funciona sin conexión). */
  font-family: "Geist", "DM Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.005em;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

h1 {
  font-family: "Geist", "DM Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
  margin: 28px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
h2 { font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; margin: 0 0 12px; }
h3 { font-size: 0.8125rem; font-weight: 650; margin: 16px 0 8px; color: var(--texto-2); }
.sub { color: var(--texto-2); margin: 0 0 20px; }
.sub b { color: var(--texto); font-weight: 600; }
.mudo { color: var(--texto-3); }
.var { color: var(--texto-3); font-size: 0.75rem; display: block; font-weight: 400; }
code { font-size: 0.8125rem; background: var(--superficie-2); border: 1px solid var(--borde-suave); padding: 1px 5px; border-radius: 5px; }
.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 24px 56px; }

/* ---------- Barra superior translúcida (el contenido pasa por debajo) ---------- */
.barra-sup {
  position: sticky; top: 0; z-index: 20;
  background: var(--barra-fondo);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--borde);
}
.barra-sup .contenedor { display: flex; align-items: center; gap: 20px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
/* Marca: "queop" + nombre de la herramienta, con el punto amarillo de la marca */
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.marca picture { display: block; line-height: 0; }
.marca-img { height: 30px; width: auto; display: block; }
.marca:hover { text-decoration: none; }
.marca-sub { font-size: 0.8125rem; font-weight: 500; color: var(--texto-3); padding-left: 8px; border-left: 1px solid var(--borde); }

/* Etiqueta sobre el título (como "• CUSTOMER FEEDBACK 360" en queop.com.co) */
.eyebrow { margin: 28px 0 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--enlace); display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.eyebrow + h1 { margin-top: 0; }
.espacio { flex: 1; }

/* Navegación como control segmentado */
.nav { display: flex; gap: 2px; padding: 3px; background: var(--superficie-2); border: 1px solid var(--borde-suave); border-radius: 10px; }
.nav a {
  color: var(--texto-2); padding: 5px 12px; border-radius: 7px; font-weight: 500;
  transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
.nav a:hover { color: var(--texto); text-decoration: none; background: var(--fila-hover); }
.nav { border-radius: 999px; }
.nav a { border-radius: 999px; padding: 5px 14px; }
.nav a.activo { color: var(--boton-texto); background: var(--boton); font-weight: 600; }
.nav a.activo:hover { color: var(--boton-texto); background: var(--boton); }
.nav a:active { transform: scale(0.97); }

/* ---------- Botones (respuesta al presionar, no al soltar) ---------- */
.boton {
  font: inherit; font-weight: 600; line-height: 1.2; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  border: 1px solid var(--boton); background: var(--boton); color: var(--boton-texto);
  transition: transform var(--rapido) ease-out, filter var(--rapido) ease, background-color var(--rapido) ease;
  white-space: nowrap;
}
.boton:hover { filter: brightness(1.06); }
.boton:active { transform: scale(0.97); filter: brightness(0.96); }
.boton:disabled { opacity: 0.55; cursor: default; transform: none; filter: none; }
/* Botón principal de la barra: punto amarillo de marca, como "Agenda tu demo ●" */
.boton.principal { display: inline-flex; align-items: center; gap: 10px; }
.boton.principal::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo-marca); flex: none; }
.boton.sec { background: var(--superficie); color: var(--texto); border-color: var(--borde); box-shadow: var(--sombra-1); }
.boton.sec:hover { background: var(--fila-hover); filter: none; }
a.boton { display: inline-block; text-decoration: none; }

/* ---------- Formularios ---------- */
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 7px 10px; min-height: 36px;
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
textarea { width: 100%; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--acento); }
.col { display: flex; flex-direction: column; gap: 10px; }
.buscar { min-width: 220px; }

/* ---------- Superficies ---------- */
.caja {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-1); overflow: auto; margin-bottom: 16px;
}
.caja.pad { padding: 20px; }
.rejilla2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.rejilla2 > .caja { margin-bottom: 0; }

/* Panel de progreso */
.progreso { display: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 18px; margin: 20px 0 0; box-shadow: var(--sombra-2); }
.progreso.visible { display: block; }
.progreso .fila { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.barra-prog { flex: 1; min-width: 160px; height: 6px; background: var(--rejilla); border-radius: 3px; overflow: hidden; }
.barra-prog > div { height: 100%; width: 0; background: var(--serie); border-radius: 3px; transition: width 400ms ease; }
.mensajes { margin: 10px 0 0; padding: 0; list-style: none; color: var(--texto-2); font-size: 0.8125rem; max-height: 140px; overflow: auto; font-variant-numeric: tabular-nums; }
.aviso-login { margin-top: 12px; padding: 10px 12px; border-radius: var(--radio-sm); border: 1px solid var(--estado-aviso); background: var(--superficie-2); }

/* Tarjetas de conteo (también filtran) */
.tarjetas { display: flex; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; align-items: stretch; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px;
  min-width: 128px; text-align: left; font: inherit; color: var(--texto); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; gap: 4px;
}
button.tarjeta { cursor: pointer; transition: transform var(--rapido) ease-out, box-shadow var(--rapido) ease, border-color var(--rapido) ease; }
button.tarjeta:hover { border-color: var(--texto-3); }
button.tarjeta:active { transform: scale(0.98); }
.tarjeta .n { font-size: 1.875rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: block; }
.tarjeta.activa { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.tarjetas .buscar { align-self: center; }

/* ---------- Estado: siempre ícono + texto (nunca solo color) ---------- */
.estado { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; font-size: 0.8125rem; }
.estado .ic { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; color: #fff; flex: none; }
.estado.rojo .ic { background: var(--estado-critico); }
.estado.amarillo .ic { background: var(--estado-aviso); color: #1a1a19; }
.estado.verde .ic { background: var(--estado-bueno); }
.estado.sin_datos .ic, .estado.info .ic, .estado.pausa .ic { background: var(--texto-3); }
h1 .estado { font-size: 0.875rem; font-weight: 600; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); letter-spacing: 0; }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
th {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); font-weight: 600;
  background: var(--superficie-2); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody tr { transition: background-color var(--rapido) ease; }
tbody tr:hover { background: var(--fila-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num { font-weight: 600; }
td.num.mudo { font-weight: 400; }
.motivos { margin: 0; padding: 0; list-style: none; color: var(--texto-2); font-size: 0.8125rem; line-height: 1.45; }
.motivos li + li { margin-top: 3px; }
.etiqueta { display: inline-block; font-size: 0.6875rem; font-weight: 500; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-2); margin-left: 6px; background: var(--superficie-2); vertical-align: 1px; }

/* Errores visibles */
.errores { border: 1px solid var(--estado-critico); border-radius: var(--radio); padding: 14px 18px; margin: 0 0 16px; background: var(--superficie); }
.errores h2 { margin-bottom: 6px; }

/* ---------- Detalle de cliente ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-1); }
.kpi .t { color: var(--texto-2); font-size: 0.75rem; font-weight: 500; }
.kpi .v { font-size: 1.625rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.alertas { list-style: none; margin: 0; padding: 0; }
.alertas li { display: flex; gap: 12px; padding: 9px 0; align-items: flex-start; line-height: 1.45; }
.alertas li + li { border-top: 1px solid var(--borde-suave); }
.alertas li > span:last-child { padding-top: 1px; }
.ficha-resumen p { margin: 0 0 6px; line-height: 1.5; }
.ficha-resumen p:last-child { margin-bottom: 0; }

/* ---------- Gráficos ---------- */
.grafico { width: 100%; height: auto; display: block; }
.grafico .barra { fill: var(--serie); }
.grafico .zona { fill: transparent; }
.grafico .zona:hover { fill: var(--fila-hover); }
.grafico .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.grafico .base { stroke: var(--borde); stroke-width: 1; }
.grafico .eje { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .valor { fill: var(--texto); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
#tip {
  position: fixed; pointer-events: none; background: var(--texto); color: var(--fondo); padding: 6px 9px;
  border-radius: 7px; font-size: 0.75rem; display: none; z-index: 30; box-shadow: var(--sombra-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Filtros tipo chip ---------- */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.chip-filtro {
  padding: 5px 12px; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto-2);
  background: var(--superficie); font-weight: 500; transition: background-color var(--rapido) ease, transform var(--rapido) ease-out;
}
.chip-filtro:hover { background: var(--fila-hover); text-decoration: none; color: var(--texto); }
.chip-filtro:active { transform: scale(0.97); }
.chip-filtro.activo { border-color: var(--boton); background: var(--boton); color: var(--boton-texto); font-weight: 600; }
.sep { width: 1px; height: 20px; background: var(--borde); margin: 0 6px; }
.chip { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-2); white-space: nowrap; background: var(--superficie-2); }
/* Estados de tarea: abierta amarillo, en curso teal Queop, hecha verde, descartada gris; vencida rojo */
.chip.abierta { background: var(--estado-aviso); border-color: var(--estado-aviso); color: #1a1a19; }
.chip.en_curso { background: var(--acento); border-color: var(--acento); color: #ffffff; }
.chip.hecha { background: var(--estado-bueno); border-color: var(--estado-bueno); color: #ffffff; }
.chip.descartada { background: var(--superficie-2); color: var(--texto-3); text-decoration: line-through; }
.chip.vencida { background: var(--estado-critico); border-color: var(--estado-critico); color: #ffffff; }
.txt-vencida { color: var(--estado-critico); font-weight: 600; }

/* ---------- Tareas ---------- */
.tareas { list-style: none; margin: 10px 0 0; padding: 0; }
.tarea { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--superficie); }
.tarea { border-left-width: 4px; }
.tarea.estado-abierta { border-left-color: var(--estado-aviso); }
.tarea.estado-en_curso { border-left-color: var(--acento); }
.tarea.estado-hecha { border-left-color: var(--estado-bueno); }
.tarea.estado-descartada { border-left-color: var(--borde); }
.tarea.vencida { border-left-color: var(--estado-critico); }
.tarea.estado-hecha, .tarea.estado-descartada { opacity: 0.7; }
.tarea-form input.fecha-tarea { flex: 0 0 auto; min-width: 0; }
.tarea-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; line-height: 1.4; }
.tarea-det { margin: 6px 0 0; color: var(--texto-2); }
.tarea-form { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tarea-form input { flex: 1; min-width: 180px; }
.tarea-pie { font-size: 0.75rem; margin-top: 6px; }
.comentarios { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--borde); font-size: 0.8125rem; line-height: 1.45; }
.comentarios li + li { margin-top: 4px; }
.nueva-tarea { display: flex; gap: 6px; flex-wrap: wrap; }
.nueva-tarea input[name=titulo] { flex: 2; min-width: 220px; }
.nueva-tarea input[name=detalle] { flex: 1; min-width: 160px; }

/* ---------- Ficha ---------- */
.ficha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ficha-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8125rem; color: var(--texto-2); font-weight: 500; }
.ficha-form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); font-weight: 400; }
.ficha-form .ancho { grid-column: 1 / -1; }
.ficha-form small { font-weight: 400; }

/* Notas de tablets */
.nota-tablet { font-size: 0.75rem; color: var(--texto-2); margin-top: 3px; }
.nota-form summary { cursor: pointer; font-size: 0.75rem; list-style: none; }
.nota-form summary::-webkit-details-marker { display: none; }
.nota-form form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
details > summary { cursor: pointer; }

/* Categoría del Plan de Reportes (texto + borde; no usa colores de estado) */
.cat {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 700; border: 1px solid var(--borde); color: var(--texto); background: var(--superficie-2);
}
.cat-A { border-color: var(--texto); border-width: 2px; }
.cat-B { border-color: var(--texto-2); border-width: 2px; }

/* Reunión */
.cab-reunion { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.acciones { display: flex; gap: 8px; margin-bottom: 20px; }

/* ---------- Preferencias del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .boton:active, .nav a:active, .chip-filtro:active, button.tarjeta:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .barra-sup { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra-sup { background: var(--superficie); }
}
@media (prefers-contrast: more) {
  :root { --borde: #8a8984; --borde-suave: #b5b4ae; --texto-2: #2b2b29; --texto-3: #4a4a46; }
  .barra-sup { background: var(--superficie); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Impresión (vista Reunión) ---------- */
@media print {
  .barra-sup, .no-imprimir, .progreso, .tarea-form, .nueva-tarea, .nota-form, #tip { display: none !important; }
  body { background: #fff; color: #000; }
  .caja, .tarjeta, .kpi { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 700px) {
  .contenedor { padding: 0 16px 40px; }
  .ocultar-movil { display: none; }
  h1 { font-size: 1.375rem; margin-top: 20px; }
  .barra-sup .contenedor { gap: 10px; }
  .nav { order: 3; width: 100%; justify-content: space-between; }
  .nav a { flex: 1; text-align: center; padding: 6px 4px; }
  .caja.pad { padding: 16px; }
  .tarjeta { min-width: calc(50% - 6px); flex: 1; }
  .buscar { min-width: 0; width: 100%; }
  .rejilla2 { grid-template-columns: 1fr; }
}

/* Celdas cortas que no deben partirse (ej. "Off-Line") */
.sin-corte { white-space: nowrap; }

/* Tablas ordenables */
table.ordenable th[data-orden] { cursor: pointer; user-select: none; white-space: nowrap; }
table.ordenable th[data-orden]:hover { color: var(--texto); }
table.ordenable th[data-orden]::after { content: "↕"; opacity: 0.3; margin-left: 4px; font-size: 0.85em; }
table.ordenable th[aria-sort="ascending"]::after { content: "↑"; opacity: 0.9; }
table.ordenable th[aria-sort="descending"]::after { content: "↓"; opacity: 0.9; }

/* Tablets agrupadas por cliente */
.grupos-tablets { display: flex; flex-direction: column; gap: 10px; }
details.grupo { padding: 0; overflow: hidden; }
details.grupo > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 18px; }
details.grupo > summary::-webkit-details-marker { display: none; }
details.grupo > summary::before { content: "›"; font-size: 1.2rem; line-height: 1; color: var(--texto-3); transition: transform var(--rapido) ease; }
details.grupo[open] > summary::before { transform: rotate(90deg); }
details.grupo > summary:hover { background: var(--fila-hover); }
details.grupo[open] > summary { border-bottom: 1px solid var(--borde-suave); }
.grupo-nombre { display: inline-flex; align-items: center; gap: 8px; min-width: 260px; flex: 1 1 260px; }
.grupo-cifras { display: inline-flex; gap: 16px; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.grupo-peor { flex: 1 1 220px; font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) { details.grupo > summary::before { transition: none; } }

/* Puntos de control */
tr.fila-grupo td { background: var(--superficie-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); padding-top: 8px; padding-bottom: 8px; }
tr.fila-total td { font-weight: 700; border-top: 1px solid var(--borde); }
.lista-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-puntos li { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 8px 12px; }

/* Acceso (modo nube) */
body.lector form[method="post"], body.lector .nota-form, body.lector .nueva-tarea, body.lector .tarea-form { display: none !important; }
.menu-usuario { position: relative; }
.menu-usuario > summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); font-weight: 500; white-space: nowrap; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario-caja { position: absolute; right: 0; top: calc(100% + 6px); background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; min-width: 220px; display: grid; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 30; }
.menu-usuario-caja p { margin: 0 0 4px; font-size: 0.8125rem; }
.dialogo { border: 1px solid var(--borde); border-radius: 16px; padding: 22px; max-width: 440px; width: calc(100% - 32px); background: var(--superficie); color: var(--texto); }
.dialogo::backdrop { background: rgba(11, 20, 16, .45); }
.dialogo form { display: grid; gap: 12px; }
.dialogo label { display: grid; gap: 4px; font-weight: 500; }
.dialogo-botones { display: flex; gap: 8px; justify-content: flex-end; }
.aviso-error { color: var(--estado-critico); font-weight: 600; margin: 0; }
.login-caja { max-width: 400px; margin: 12vh auto; padding: 0 16px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.boton-ancho { width: 100%; text-align: center; text-decoration: none; }