/* =====================================================================
   Estilos propios de la plataforma (lo que el prototipo no tenía).
   Usa las medidas y la tipografía del prototipo (variables de prototipo.css);
   los colores son los de RIDE y están acá ("Colores de RIDE" y "Modo oscuro").
   ===================================================================== */

/* La tilde de "qué llevar" va del color del texto sobre el acento (blanca en claro) */
.todo .tick svg { stroke: var(--on-acc); }

/* Cargando */
.cargando {
  padding: 48px 32px;
  color: var(--ink-3);
  font-size: 14px;
}

/* Enlaces con forma de botón */
a.btn {
  color: inherit;
  text-decoration: none;
}
a.btn.pri { color: var(--on-acc); }

/* Barra de progreso de "Qué llevar" */
.ll-barra { padding: 0 22px 6px; }

/* Órdenes en columnas angostas: el estado va debajo del texto */
.stack .cir-list .cr { grid-template-columns: 52px minmax(0, 1fr); }
.stack .cir-list .cr > .pill, .stack .cir-list .cr > .btn { grid-column: 2; justify-self: start; }
@media (max-width: 820px) {
  .cir-list .cr { grid-template-columns: 52px minmax(0, 1fr); padding: 14px 16px; }
  .cir-list .cr > .pill, .cir-list .cr > .btn { grid-column: 2; justify-self: start; }
}

/* Errores de formularios */
.form-err {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--alert-tint);
  color: var(--alert-ink);
  font-size: 13.5px;
}

/* Textos dentro del panel lateral */
.fields .note { margin: 0; }
.field textarea { resize: vertical; min-height: 96px; font-family: inherit; }

/* Lockbox con varias líneas */
.lockbox .stack span { color: var(--ink-2); }

/* ---- Ficha del paciente -------------------------------------------- */
/* Encabezado: la ficha del alumno tiene seis botones. En pantallas medianas
   bajan a su propio renglón, debajo del nombre; en las grandes van a la
   derecha, sin achicar el nombre por debajo de 260 px (si no, los datos del
   paciente quedaban debajo de los botones) */
@media (min-width: 1441px) { .pt-head { grid-template-columns: auto minmax(260px, 1fr) auto; } }
@media (min-width: 821px) and (max-width: 1440px) {
  .pt-head { grid-template-columns: auto minmax(0, 1fr); }
  .pt-head .actions { grid-column: 2 / -1; }
}
/* Antecedentes editables */
.ant-fila { align-items: start; }
.ant-fila .seg { align-self: center; }
.ant-detalle {
  display: block;
  margin-top: 8px;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 13.5px;
}
.ant-fila .seg button[data-ant="si"][aria-pressed="true"] { background: var(--alert-tint); color: var(--alert-ink); }
.ant-obs { border-bottom: 1px solid var(--line-soft); }
.ant-obs textarea { max-width: 640px; }
.ant-obs-ver { align-items: start; }
.ant-obs-ver .a small { white-space: pre-line; text-align: left; max-width: 520px; font-size: 13px; color: var(--ink-2); }
.aviso-consent { border-bottom: 0; }
.aviso-consent span { flex: 1; min-width: 0; }
/* Enlaces sueltos dentro de las pantallas (nombre del alumno en la ficha, etc.):
   el color de la plataforma, que también se lee bien en modo oscuro */
#vista a:not([class]), #drawer a:not([class]) { color: var(--acc-ink); text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
#vista a:not([class]):hover, #drawer a:not([class]):hover { text-decoration-color: currentColor; }
a.alertchip { text-decoration: none; }
a.alertchip:hover { text-decoration: underline; }

/* Pasos del plan que se pueden tocar */
.step[data-paso]:hover { background: var(--paper); }

/* Plan de tratamiento: en qué está (lo aprueba un docente) y qué se puede hacer */
#plan-tratamiento { scroll-margin-top: 84px; }
.plan-estado { gap: 10px; border-bottom: 1px solid var(--line-soft); }
.plan-estado .banner { border-radius: var(--r-sm); border-bottom: 0; padding: 10px 14px; }
.plan-estado .banner .grow { min-width: 0; }
.plan-estado .note { margin: 0; }
.plan-estado .row { gap: 8px; }
/* Botones de pedidos que esperan el plan aprobado */
.pt-head .actions .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Estudios como enlaces */
a.study { color: inherit; text-decoration: none; }
.estudio-thumb { display: grid; place-items: center; }
.study .thumb.estudio-thumb > svg { width: 34px; height: 34px; stroke: var(--film-ink); fill: none; stroke-width: 1.4; opacity: .8; }
.banner + .folder > header, .banner + .body { padding-top: 18px; }

/* ---- Encuentro --------------------------------------------------------- */
/* Ítems de "qué llevar" con botón para quitar (docente) */
.todo.static.con-accion { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; }
.todo.static.con-accion .btn svg { width: 14px; height: 14px; }
.mat-input {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 13.5px;
}
.plan-row a { color: var(--acc-ink); }
.plan-row .row { flex-wrap: wrap; }

/* Pills que son enlaces (pacientes en la lista de alumnos) */
a.pill { text-decoration: none; }
a.pill:hover { background: var(--line); }

/* ---- Menú de la cuenta ------------------------------------------- */
.menu-yo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.menu-yo b { display: block; font-size: 14px; }
.menu-yo span { display: block; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.menu .mi { align-items: center; }
.menu .mi-ic { width: 34px; display: grid; place-items: center; }
.menu .mi-ic svg { width: 16px; height: 16px; stroke: var(--ink-2); fill: none; stroke-width: 1.7; }
.menu .mi b { font-weight: 500; }

/* ---- Marca (barra lateral) ------------------------------------------ */
/* La R en su cuadrado azul noche y, al lado, las letras RIDE del logo
   (una máscara pintada del color del texto) con "Diplomatura UBA" */
.brand .marca-r { width: 34px; height: 34px; flex: none; border-radius: 8px; }
.marca-txt { min-width: 0; }
.ride-letras {
  display: block;
  width: 81px;
  height: 14px;
  color: var(--ink);
  background: currentColor;
  -webkit-mask: url(../img/ride-letras.png) left center / contain no-repeat;
  mask: url(../img/ride-letras.png) left center / contain no-repeat;
}
.brand .marca-txt span.ride-letras { color: var(--ink); margin: 0; }
.brand .marca-txt span:not(.ride-letras) { margin-top: 5px; letter-spacing: .16em; }
.brand .marca-txt strong { font-weight: 700; color: var(--ink-2); }
.rail-foot .by { line-height: 1.6; }

/* ---- Pantalla de ingreso y avisos generales --------------------- */
/* Van sobre el azul noche del logo, en claro y en oscuro: el logo entero
   arriba y la tarjeta abajo */
.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px 40px;
  background: var(--noche);
}
body:has(.login) { background: var(--noche); }
.login-logo { display: block; width: min(300px, 68vw); }
.login-logo img { display: block; width: 100%; height: auto; }
.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login h1 { font-size: 26px; }
.login-sub { color: var(--ink-3); font-size: 14px; margin-top: -10px; }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login .fld input:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
.login-btn { justify-content: center; height: 44px; font-size: 15px; }
.login-ayuda { line-height: 1.45; }

/* ---- Laboratorio ------------------------------------------------------ */
/* Avisos dentro del panel lateral: como caja, no como franja */
.dbody .banner { border-radius: var(--r-sm); border-bottom: 0; padding: 10px 14px; }
.banner.ok { background: var(--ok-tint); color: var(--ok-ink); }
/* Datos de la orden: los valores largos van debajo del título */
.dbody .qa .a { font-weight: 500; }
.qa.largo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.qa.largo .a { text-align: left; font-weight: 400; color: var(--ink); white-space: pre-line; }
.qa.largo > span:first-child { color: var(--ink-3); font-size: 12.5px; }
/* Piezas del plan para sumar a la orden */
#or-pd-plan { align-items: center; }
#or-pd-plan .chip { padding: 3px 10px; font-family: var(--mono, inherit); }
.cir-list .cr[data-orden] { cursor: pointer; }
/* Títulos de campo que no son <label> y casillas dentro de formularios */
.field .tit { font-size: 12px; font-weight: 600; color: var(--ink-2); }
label.check, .field label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
label.check input, .field label.check input { width: auto; flex: none; margin: 2px 0 0; padding: 0; }
label.check:has(input:checked) { border-color: var(--acc); background: var(--acc-tint); }
#or-pd-plan:empty { display: none; }

/* ---- Pedidos de cirugía ---------------------------------------------- */
.tipos-cir { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 4px; }
.impl-fila { display: grid; grid-template-columns: minmax(0, 1fr) 92px 104px 64px auto; gap: 6px; align-items: center; }
.impl-fila .btn svg { width: 14px; height: 14px; }
.guia-caja { border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: var(--r-sm); padding: 12px 14px; }
/* Cada insumo (material, instrumental u otro) en dos renglones: de qué tipo y cuántos; qué es */
.insumo-fila { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; grid-template-areas: "categoria cant quitar" "campos campos campos";
  gap: 6px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.insumo-fila [data-k="categoria"] { grid-area: categoria; }
.insumo-fila [data-k="cantidad"] { grid-area: cant; } .insumo-fila [data-quitar] { grid-area: quitar; }
.insumo-campos { grid-area: campos; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.insumo-fila .btn svg { width: 14px; height: 14px; }
/* Componentes protésicos del pedido: un renglón por componente elegido */
.reng-comp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.reng-comp .reng-nombre { flex: 1 1 100%; font-size: 13.5px; }
.reng-comp input, .reng-comp select { flex: 1 1 104px; min-width: 0; }
.reng-comp select[data-k="tipo"] { flex: 1 1 100%; }
.reng-comp .num-corto { flex: none; width: 64px; }
.reng-comp .btn svg { width: 14px; height: 14px; }
/* Biomateriales del pedido de quirófano: marca → tipo → casillas */
.bio-marca { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bio-grupo { display: flex; flex-direction: column; gap: 6px; }
/* Catálogo de insumos: pestañas y listas */
.cat-tabs { margin: -4px 0 14px; border-top: 0; border-bottom: 1px solid var(--line-soft); padding: 0; }
.cat-lista .fila-cat { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cat-lista .fila-cat:last-child { border-bottom: 0; }
.cat-lista .fila-cat:hover:not([disabled]) { background: var(--acc-tint); }
.cat-lista .fila-cat[disabled] { cursor: default; }
.cat-lista .fila-cat.apagada { opacity: .55; }
.cat-lista .grupo-cat { padding: 10px 4px 2px; }
@media (max-width: 520px) {
  .impl-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px auto; }
  .impl-fila [data-k="marca"] { grid-column: 1 / -1; }
  .impl-fila { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
}
.field input.num-corto, .field label.check input.num-corto { width: 64px; padding: 6px 8px; margin: 0; }
#pc-pd-plan:empty, #pc-g-plan:empty, #ad-pd-plan:empty { display: none; }
#pc-pd-plan, #pc-g-plan, #ad-pd-plan { align-items: center; }
#pc-pd-plan .chip { padding: 3px 10px; font-family: var(--mono, inherit); }
.cir-list .cr[data-pedido] { cursor: pointer; }

/* ---- Presupuestos -------------------------------------------------------- */
@media print {
  body * { visibility: hidden !important; }
  .docprev, .docprev * { visibility: visible !important; }
  .docprev { position: absolute; left: 0; top: 0; margin: 0; width: 100%; border: 0; box-shadow: none; }
}
/* La hoja: membrete de RIDE y grises fríos, como la plataforma (siempre blanca) */
.docprev { color: #0F1530; border-color: #DCE1EA; }
.docprev .lh { border-bottom-color: #DCE1EA; }
.docprev .lh .marca-r { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.docprev .lh .dp-letras { display: block; width: 68px; height: auto; }   /* las letras RIDE ya pintadas: se imprimen limpias */
.docprev .lh span { display: block; margin-top: 5px; color: #5B627C; }
.docprev td, .docprev th { border-bottom-color: #E8EBF2; }
.docprev th, .docprev .dp-nota { color: #5B627C; }
.docprev .foot { color: #3F4661; }
.docprev .sign { border-top-color: #0F1530; }
/* Pizarra: la etiqueta del tipo, un poco más cerca del color del texto que la raya de arriba,
   para que se lea (el ámbar de "Aviso" no llegaba a 4,5:1) */
.pin-card .ty { color: color-mix(in srgb, var(--pc, var(--acc)) 80%, var(--ink)); }
/* Vista previa de WhatsApp: la R como foto del contacto */
.phone .ph-top .marca-r { width: 26px; height: 26px; border-radius: 50%; flex: none; }
/* Tabla del presupuesto: que entre en la columna sin desplazarse */
.presu-items .tbl th, .presu-items .tbl td { padding-left: 10px; padding-right: 10px; }
.presu-items .tbl th:first-child, .presu-items .tbl td:first-child { padding-left: 18px; }
.presu-items .pin { width: 72px; }
.presu-items .modnote { white-space: normal; max-width: 120px; margin-left: auto; }
.presu-items .stp button { width: 26px; height: 26px; }
.presu-items .stp span { width: 32px; height: 26px; }
.presu-items .tbl td.num { white-space: nowrap; }

/* ---- Odontograma -----------------------------------------------------------
   Convención: en azul lo que hay que realizar y en rojo lo realizado (lo que
   el paciente ya tiene). Cada marca es un <b class="m m-…"> dentro de la
   pieza (ver ficha.js), así se combinan: por ejemplo, corona realizada (roja)
   y endodoncia a realizar (azul). En las piezas de arriba la corona mira
   hacia abajo (hacia el plano oclusal) y en las de abajo, hacia arriba: la
   restauración, la reconstrucción, la caries y la carilla van de ese lado;
   la endodoncia y el implante, del lado de la raíz; el perno (macizo, con
   su muñón) y el poste (hueco) entran desde la corona hasta media raíz. */
.tooth .shape > .m { position: absolute; pointer-events: none; --c: var(--alert); }
.tooth .shape > .m.a { --c: var(--blue); }
.tooth .shape > .m.k { --c: var(--ink-3); }
.tooth .shape > .m.w { --c: var(--ink-2); }
.tooth .m-rest { left: 24%; right: 24%; bottom: 14%; height: 30%; border-radius: 3px; background: color-mix(in srgb, var(--c) 80%, var(--surface)); }
.tooth.low .m-rest { bottom: auto; top: 14%; }
.tooth .m-caries { left: 50%; bottom: 20%; width: 28%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--surface); }
.tooth.low .m-caries { bottom: auto; top: 20%; }
.tooth .m-veneer { left: 16%; right: 16%; bottom: 6%; height: 3px; border-radius: 2px; background: var(--c); }
.tooth.low .m-veneer { bottom: auto; top: 6%; }
.tooth .m-endo { left: 50%; width: 3px; margin-left: -1.5px; top: 9%; height: 44%; border-radius: 2px; background: var(--c); }
.tooth.low .m-endo { top: auto; bottom: 9%; }
.tooth .m-impl { left: 50%; width: 5px; margin-left: -2.5px; top: 8%; height: 52%; border-radius: 1px; background: repeating-linear-gradient(var(--c) 0 2px, transparent 2px 4px); }
.tooth.low .m-impl { top: auto; bottom: 8%; }
.tooth .m-recon { left: 12%; right: 12%; bottom: 8%; height: 42%; border: 2px solid var(--c); border-radius: 4px 4px 9px 9px; background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.tooth.low .m-recon { bottom: auto; top: 8%; border-radius: 9px 9px 4px 4px; }
.tooth .m-perno { left: 50%; width: 6px; margin-left: -3px; top: 26%; height: 40%; border-radius: 1px; background: var(--c); }
.tooth .m-perno::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 12px; height: 5px; margin-left: -6px; border-radius: 2px; background: inherit; }
.tooth.low .m-perno { top: auto; bottom: 26%; }
.tooth.low .m-perno::after { bottom: auto; top: -3px; }
.tooth .m-poste { left: 50%; width: 7px; margin-left: -3.5px; top: 26%; height: 40%; border: 2px solid var(--c); border-radius: 2px; background: var(--surface); }
.tooth.low .m-poste { top: auto; bottom: 26%; }
.tooth .m-crown { inset: 0; border: 3px solid var(--c); border-radius: inherit; }
.tooth .m-frac { left: 50%; top: 22%; width: 2px; height: 56%; margin-left: -1px; background: var(--c); transform: rotate(18deg); }
.tooth .m-ext, .tooth .m-miss { left: 50%; top: 50%; width: 78%; height: 2px; background: var(--c); transform: translate(-50%, -50%) rotate(45deg); }
.tooth .m-ext::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); }
.tooth .m-miss { transform: translate(-50%, -50%) rotate(-40deg); }
/* En erupción: una flecha hacia el plano oclusal y el contorno punteado fino */
.tooth .m-erup { left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -30%) rotate(45deg); border-right: 3px solid var(--c); border-bottom: 3px solid var(--c); }
.tooth.low .m-erup { transform: translate(-50%, -70%) rotate(-135deg); }
.tooth.erupcion .shape { border-style: dotted; border-width: 2px; }
.tooth.ausente .shape { border-style: dashed; background: none; }
/* Dientes temporarios: fila aparte, centrada bajo los permanentes (55 a 65 quedan bajo 15 a 25) */
.odo .odo-temp { grid-column: 4 / span 10; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.odo .odo-temp[hidden] { display: none; }
.tooth.vigilar .shape { border-color: var(--watch); background: var(--watch-tint); }
.tooth.sin-detalle .shape { border-color: var(--blue); border-width: 2px; background: var(--blue-tint); }
.tooth.a-realizar .n { color: var(--blue-ink); font-weight: 600; }
.tooth .shape > .obs { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); border: 2px solid var(--surface); }
.tooth.low .shape > .obs { top: auto; bottom: -4px; }
.tooth.mini .m-crown { border-width: 2px; }
.tooth.mini .m-veneer { height: 2px; }
.tooth.mini .m-endo { width: 2px; margin-left: -1px; }
.tooth.mini .m-impl { width: 4px; margin-left: -2px; }
.tooth.mini .m-ext, .tooth.mini .m-miss, .tooth.mini .m-frac { height: 1.5px; }
.tooth.mini .m-frac { height: 56%; width: 1.5px; }
.tooth.mini .m-caries { box-shadow: none; }
.tooth.mini .m-recon { border-width: 1px; border-radius: 2px 2px 4px 4px; }
.tooth.low.mini .m-recon { border-radius: 4px 4px 2px 2px; }
.tooth.mini .m-perno { width: 3px; margin-left: -1.5px; }
.tooth.mini .m-perno::after { width: 7px; height: 2px; margin-left: -3.5px; bottom: -1px; }
.tooth.low.mini .m-perno::after { bottom: auto; top: -1px; }
.tooth.mini .m-poste { width: 4px; margin-left: -2px; border-width: 1px; }
/* Referencias */
.odo-legend i.sw-a { background: var(--blue-tint); border-color: var(--blue); }
.odo-legend i.sw-r { background: var(--alert-tint); border-color: var(--alert); }
.odo-legend i.sw-w { background: var(--watch-tint); border-color: var(--watch); }
.odo-legend i.sw-obs { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--ink-2); }
.odo-simbolos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.odo-sim { display: inline-flex; align-items: center; gap: 6px; }
.odo-sim .mini { width: 16px; height: 18px; flex: none; }
.odo-sim .mini .shape { width: 16px; height: 18px; border-width: 1.5px; border-radius: 4px 4px 6px 6px; }
/* Editor de la pieza: lo elegido toma el color de su grupo */
.lbl .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.lbl .sw.a { background: var(--blue); }
.lbl .sw.r { background: var(--alert); }
.sym-grid.a .sym[aria-pressed=true] { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-ink); }
.sym-grid.r .sym[aria-pressed=true] { border-color: var(--alert); background: var(--alert-tint); color: var(--alert-ink); }
.sym-grid.w .sym[aria-pressed=true] { border-color: var(--watch); background: var(--watch-tint); color: var(--watch-ink); }
@media (max-width: 560px) { .sym-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Detalle por pieza, debajo del dibujo */
.odo-det { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.odo-det-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.odo-det-row:last-child { border-bottom: 0; padding-bottom: 0; }
.odo-det-row[data-pieza] { cursor: pointer; border-radius: var(--r-sm); }
.odo-det-row[data-pieza]:hover > b, .odo-det-row[data-pieza]:focus-visible > b { text-decoration: underline; }
.odo-det-row > b { font-size: 13px; color: var(--ink); }
.odo-det-row p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.odo-det-row .odo-tags + p { margin-top: 6px; }
.odo-det-row > div > p:first-child { margin-top: 0; }
.odo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.odo-tag { font-size: 12.5px; line-height: 1.35; padding: 2px 9px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); }
.odo-tag b { font-weight: 600; }
.odo-tag.a { background: var(--blue-tint); color: var(--blue-ink); }
.odo-tag.r { background: var(--alert-tint); color: var(--alert-ink); }
.odo-tag.w { background: var(--watch-tint); color: var(--watch-ink); }

/* ---- Colores de RIDE: tema claro ---------------------------------------
   Salen del logo: el azul noche del fondo (#010220), los azules de la R
   (#2E478A a #486AC3), lavanda y cian, con grises fríos. Reemplazan al verde
   oliva y los grises cálidos del prototipo (prototipo.css sigue con los
   suyos: estos ganan porque van después). Los colores con significado no
   cambian: verde = bien, ámbar = atención, rojo = alerta y, en el
   odontograma, azul = a realizar y rojo = realizado. Los textos grises
   (--ink-3 y --ink-4) llegan a 4,5:1 de contraste sobre los fondos.
   Un color nuevo que se sume acá tiene que ir también en los dos bloques
   del tema oscuro (si no, en oscuro queda el del claro). */
:root {
  --noche: #010220;   /* el fondo del logo: pantalla de ingreso, en los dos temas */
  --paper: #F4F6FA;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #EDF0F6;
  --line: #DCE1EA;
  --line-soft: #E8EBF2;
  --ink: #0F1530;
  --ink-2: #3F4661;
  --ink-3: #5B627C;
  --ink-4: #646B86;
  --mark: #8A91AA;
  --acc: #3753B3;
  --acc-hover: #2B4596;
  --acc-tint: #E9EDFA;
  --acc-ink: #233982;
  --on-acc: #FFFFFF;
  --d1: #157A86;
  --d3: #A65B32;      /* un poco más oscuros que en el prototipo: el texto blanco */
  --wa: #1B8048;      /* encima se lee a 4,5:1 (avatar del alumno, botón de WhatsApp) */
  --bar: #3753B3;
  --bar-soft: #C3CDEE;
  --shadow: 0 1px 2px rgba(15,21,48,.05);
  --shadow-2: 0 24px 48px -20px rgba(15,21,48,.25);
}

/* ---- Chips elegidos (filtros, marcas) ------------------------------------- */
.chip[aria-pressed=true] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.chip .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--on-acc); color: var(--acc-ink); font-size: 11px; font-weight: 600; text-align: center; }
.chip[aria-pressed=false] .cuenta { background: var(--acc-tint); }

/* ---- Implantes: tarjetas, grilla de medidas y resumen ------------------------ */
.sel-impl { display: flex; flex-direction: column; gap: 12px; }
.marcas-impl { gap: 8px; align-items: center; flex-wrap: wrap; }
.marcas-impl .chip { font-weight: 600; padding: 7px 14px; }
.impl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.impl-cards.catalogo { padding: 14px 18px 18px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.impl-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; font: inherit; color: inherit; }
button.impl-card { cursor: pointer; }
button.impl-card:hover:not([disabled]) { border-color: var(--acc); }
.impl-card.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); background: var(--acc-tint); }
.impl-card.apagada { opacity: .55; }
.impl-card b { font-size: 13.5px; line-height: 1.25; }
.impl-card .note { font-size: 12px; line-height: 1.3; }
.impl-foto { position: relative; width: 100%; height: 104px; display: grid; place-items: center; border-radius: 9px; background: var(--paper); overflow: hidden; }
.impl-foto.grande { width: 132px; height: 150px; flex: none; }
.foto-linea { display: flex; gap: 14px; align-items: center; flex-direction: row; }
.foto-otro { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px dashed var(--line-strong, var(--line)); border-radius: 50%; color: var(--ink-3); }
.foto-otro svg { width: 20px; height: 20px; }
.dibujo-implante { height: 92%; width: auto; max-width: 100%; }
.impl-foto .foto-implante { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.foto-implante { object-fit: contain; }
.dibujo-implante.mini, .foto-implante.mini { height: 44px; width: 44px; flex: none; object-fit: contain; border-radius: 6px; }
.foto-implante.mini { background: #fff; }
.paso-num { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 4px; background: var(--surface); }
.paso-num button { width: 34px; height: 32px; border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink); }
.paso-num button:hover:not([disabled]) { background: var(--acc-tint); }
.paso-num button[disabled] { color: var(--ink-4); cursor: default; }
.paso-num span { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.grilla-impl { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.grilla-impl .mal { color: var(--alert-ink); }
table.grilla { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 300px; }
table.grilla th { font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: center; white-space: nowrap; padding: 2px 4px; }
table.grilla th[scope=row] { text-align: left; }
table.grilla td { padding: 0; }
.celda { width: 100%; min-width: 58px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink-3); font: inherit; font-size: 16px; cursor: pointer; }
button.celda:hover:not([disabled]) { border-color: var(--acc); color: var(--acc-ink); }
button.celda[disabled] { opacity: .45; cursor: default; }
.celda.no { background: transparent; border-style: dashed; border-color: var(--line); color: var(--ink-3); opacity: .5; cursor: default; font-size: 14px; }
.celda.on { justify-content: space-between; border-color: var(--acc); background: var(--acc-tint); color: var(--acc-ink); cursor: default; padding: 0 2px; }
.celda.on button { width: 22px; height: 28px; border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; border-radius: 6px; }
.celda.on button:hover:not([disabled]) { background: var(--surface); }
.celda.on button[disabled] { opacity: .4; cursor: default; }
.celda.on span { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.impl-resumen { display: flex; gap: 10px; align-items: flex-start; }
.impl-viejos { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* ---- Usuarios y permisos ---------------------------------------------------------- */
.pestanas-usuarios { margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.perm-fila { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 13.5px; }
.perm-fila > span { flex: 1; }
.perm-fila select { width: auto; min-width: 150px; font-size: 13px; }
.matriz-permisos td.c, .matriz-permisos th.c { text-align: center; width: 92px; }
.matriz-permisos tr.sep th { text-align: left; background: var(--paper); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.matriz-permisos input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acc); }
button.persona-grupo { cursor: pointer; font: inherit; }
button.persona-grupo:hover { border-color: var(--acc); }
.persona-grupo .cuenta { background: var(--acc-tint); }
.clave-nueva { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; margin-top: 8px; border: 1px dashed var(--acc); border-radius: 10px; background: var(--acc-tint); }
.clave-nueva b { font-size: 20px; letter-spacing: .04em; color: var(--acc-ink); }
.clave-nueva .note { margin: 0; }
@media (max-width: 640px) {
  .perm-fila { flex-direction: column; align-items: stretch; gap: 4px; }
  .impl-cards { grid-template-columns: repeat(2, 1fr); }
  .foto-linea { flex-direction: column; align-items: flex-start; }
}

/* ---- Modo oscuro ----------------------------------------------------------
   Por defecto sigue al dispositivo: si el teléfono o la compu están en modo
   oscuro, la plataforma también. En Mi perfil cada uno puede elegir Claro u
   Oscuro a mano (se guarda en ese dispositivo y se marca con data-theme en
   <html>; ver js/lib/tema.js).
   Fondos azul noche, como el logo, y el azul de la R aclarado (lavanda)
   para que se lea; los colores con significado son los del claro,
   aclarados. El documento del presupuesto (.docprev) queda blanco: es la
   hoja impresa.
   Va al final del archivo para que gane sobre los estilos de arriba.
   Los dos bloques de abajo tienen que quedar iguales. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --paper: #080C22;
    --surface: #0F1430;
    --raised: #151B3A;
    --sunken: #1A2142;
    --line: #283055;
    --line-soft: #1A2142;
    --ink: #E8EBF7;
    --ink-2: #B7BDD6;
    --ink-3: #9AA1BD;
    --ink-4: #858CAB;
    --mark: #9EA4C0;
    --acc: #8EA5F6;
    --acc-hover: #A9BBF9;
    --acc-tint: #1B2554;
    --acc-ink: #C0CDFB;
    --on-acc: #0A0F2B;
    --ok: #5DBB82;
    --ok-tint: #10281A;
    --ok-ink: #9ADBB2;
    --watch: #E0A04A;
    --watch-tint: #2E1F08;
    --watch-ink: #F1C88E;
    --alert: #F07A6E;
    --alert-tint: #35120F;
    --alert-ink: #FFB5AC;
    --blue: #6E9BD6;
    --blue-tint: #14253A;
    --blue-ink: #9CC2EE;
    --wa: #1B8247;
    --wa-bubble: #173524;
    --wa-ground: #0B1024;
    --film: #0E0F0E;
    --film-ink: #D8D9D2;
    --d1: #17808B;
    --d2: #4A74B3;
    --d3: #A65E37;
    --d4: #8A58A0;
    --bar: #7F9AF3;
    --bar-soft: #253463;
    --shadow: none;
    --shadow-2: 0 24px 48px -16px rgba(0,0,0,.7);
  }
  :root:not([data-theme=light]) .scrim { background: rgba(0, 0, 0, .55); }
  :root:not([data-theme=light]) .login-card { box-shadow: none; }
  :root:not([data-theme=light]) .docprev { border-color: var(--line); box-shadow: none; }
  :root:not([data-theme=light]) .tbl tr.click:hover td, :root:not([data-theme=light]) .kpi[data-go]:hover, :root:not([data-theme=light]) .slot:hover, :root:not([data-theme=light]) .in-item:hover, :root:not([data-theme=light]) .todo:hover, :root:not([data-theme=light]) .enc-row:hover, :root:not([data-theme=light]) .cir-list .cr:hover, :root:not([data-theme=light]) .grp-i:hover, :root:not([data-theme=light]) .step[data-paso]:hover { background: var(--raised); }
  :root:not([data-theme=light]) .enc-row.next h4 em { color: var(--ink-3); }
}

/* Cuando la persona eligió "Oscuro" en Mi perfil (aunque el dispositivo esté en claro) */
:root[data-theme=dark] {
  color-scheme: dark;
  --paper: #080C22;
  --surface: #0F1430;
  --raised: #151B3A;
  --sunken: #1A2142;
  --line: #283055;
  --line-soft: #1A2142;
  --ink: #E8EBF7;
  --ink-2: #B7BDD6;
  --ink-3: #9AA1BD;
  --ink-4: #858CAB;
  --mark: #9EA4C0;
  --acc: #8EA5F6;
  --acc-hover: #A9BBF9;
  --acc-tint: #1B2554;
  --acc-ink: #C0CDFB;
  --on-acc: #0A0F2B;
  --ok: #5DBB82;
  --ok-tint: #10281A;
  --ok-ink: #9ADBB2;
  --watch: #E0A04A;
  --watch-tint: #2E1F08;
  --watch-ink: #F1C88E;
  --alert: #F07A6E;
  --alert-tint: #35120F;
  --alert-ink: #FFB5AC;
  --blue: #6E9BD6;
  --blue-tint: #14253A;
  --blue-ink: #9CC2EE;
  --wa: #1B8247;
  --wa-bubble: #173524;
  --wa-ground: #0B1024;
  --film: #0E0F0E;
  --film-ink: #D8D9D2;
  --d1: #17808B;
  --d2: #4A74B3;
  --d3: #A65E37;
  --d4: #8A58A0;
  --bar: #7F9AF3;
  --bar-soft: #253463;
  --shadow: none;
  --shadow-2: 0 24px 48px -16px rgba(0,0,0,.7);
}
:root[data-theme=dark] .scrim { background: rgba(0, 0, 0, .55); }
:root[data-theme=dark] .login-card { box-shadow: none; }
:root[data-theme=dark] .docprev { border-color: var(--line); box-shadow: none; }
:root[data-theme=dark] .tbl tr.click:hover td, :root[data-theme=dark] .kpi[data-go]:hover, :root[data-theme=dark] .slot:hover, :root[data-theme=dark] .in-item:hover, :root[data-theme=dark] .todo:hover, :root[data-theme=dark] .enc-row:hover, :root[data-theme=dark] .cir-list .cr:hover, :root[data-theme=dark] .grp-i:hover, :root[data-theme=dark] .step[data-paso]:hover { background: var(--raised); }
:root[data-theme=dark] .enc-row.next h4 em { color: var(--ink-3); }

/* El muleto (la copia para probar): una raya arriba y un cartel, que no tapan nada que se toque */
:root[data-entorno=muleto]::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--watch-ink); z-index: 9999; pointer-events: none; }
.cartel-muleto { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10000; pointer-events: none; padding: 2px 12px 4px; border-radius: 0 0 8px 8px; background: var(--watch-ink); color: var(--watch-tint); font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) { .cartel-muleto { left: auto; right: 12px; transform: none; } .cartel-muleto span { display: none; } }   /* en el celular, corto y a la derecha: a la izquierda va la marca */
@media print { .cartel-muleto, :root[data-entorno=muleto]::before { display: none; } }

/* ---- Ver la plataforma como otra persona (administradores) ------------ */
:root[data-vista-como]::after { content: ''; position: fixed; inset: 0; border: 3px solid var(--watch); pointer-events: none; z-index: 9999; }
.banner-vista { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; justify-content: center; max-width: min(760px, calc(100vw - 24px)); padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--watch); background: var(--watch-tint); color: var(--watch-ink); font-size: 13px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.banner-vista .btn { white-space: nowrap; }
body:has(#drawer:not([hidden])) .banner-vista { display: none; }   /* no tapa los botones del panel */
@media print { .banner-vista, :root[data-vista-como]::after { display: none; } }
.vc-persona { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); cursor: pointer; }
.vc-persona:hover:not(:disabled) { border-color: var(--line); background: var(--paper); }
.vc-persona:disabled { opacity: .6; cursor: default; }
.vc-persona b, .vc-persona small { display: block; }
.vc-persona small { color: var(--ink-3); font-size: 12px; }

/* ---- Datos personales (Completá tu perfil, Mi perfil, ficha) --------- */
.completar { justify-content: flex-start; padding-top: 32px; }
.completar .login-card { width: min(720px, 100%); }
.tit-seccion { font-size: 13px; font-weight: 700; color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.fields > .tit-seccion:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.field input[hidden], .field select[hidden], .stack[hidden] { display: none; }
.field [data-uni-otra] { margin-top: 6px; }
.esp-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
@media (max-width: 600px) {
  .completar .fields { grid-template-columns: 1fr; }
  .esp-fila { grid-template-columns: 1fr; }
  .esp-fila [data-esp-quitar] { justify-self: start; }
}
/* Datos que ya no se pueden cambiar (Mi perfil del alumno): se ven apagados */
.fields input:disabled, .fields select:disabled {
  background: var(--sunken); color: var(--ink-3); border-color: var(--line-soft); cursor: not-allowed; opacity: 1;
}
.seg button:disabled { cursor: not-allowed; color: var(--ink-4); }
.seg button:disabled[aria-pressed=true] { color: var(--ink-2); }

/* ---- Inicio del alumno: grupo, clases del encuentro y docentes ----------- */
.hello-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grupo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--acc-tint); color: var(--acc-ink); font-size: 13px; font-weight: 600; border: 1px solid var(--acc); }
.grupo-chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.clase-fila { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft); }
.clase-fila.con-accion { grid-template-columns: 112px minmax(0, 1fr) auto; }
.clase-fila:last-child { border-bottom: 0; }
.clase-fila .hora { font-family: var(--mono); font-size: 13px; color: var(--acc-ink); font-weight: 600; }
.clase-fila .d, .docente-fila .d { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.docentes-grupo { display: flex; flex-direction: column; }
.docente-fila { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.docente-fila:last-child { border-bottom: 0; }
@media (max-width: 520px) {
  .clase-fila, .clase-fila.con-accion { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* «Lo que hizo» cada alumno: números chicos en grilla */
.avance { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 4px 16px 12px; }
.avance-dato { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line, #e3e6ee); border-radius: 10px; background: var(--surface, transparent); }
.avance-dato b { font-size: 24px; line-height: 1.1; }
.avance-dato span { font-size: 12px; color: var(--ink-3, #5b6577); }

/* Aviso al alumno: lo que cambió el encargado de quirófano */
.cambios-aviso .cambios-lista { margin: 0; padding-left: 18px; font-size: 13px; }
.cambios-aviso .cambios-lista li { margin: 2px 0; }

/* Resumen del alumno: cada práctica se abre para ver el detalle */
.resumen-practica { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 8px 12px; }
.resumen-practica summary { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.resumen-practica summary span:first-child { flex: 1; font-weight: 600; }
.resumen-practica ul { margin: 8px 0 2px; padding-left: 18px; font-size: 13px; }

/* Botón «Instalar la app» al pie del menú lateral */
.rail-foot .rail-instalar { width: 100%; justify-content: center; margin-bottom: 10px; }
.rail-foot .rail-instalar[hidden] { display: none; }

/* Foto de perfil (migración 026): recorta la imagen en el círculo del avatar */
.av.foto { overflow: hidden; padding: 0; background: var(--sunken); }
.av.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-invita { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foto-invita .av-vacio { width: 56px; height: 56px; border-radius: 50%; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.foto-invita .grow { flex: 1; min-width: 200px; }
/* Foto de perfil: el ícono de cámara necesita su tamaño y trazo (si no, sale como una mancha negra) */
.foto-invita .av-vacio svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; }
/* En el celular los botones van abajo, uno al lado del otro, sin tapar el texto */
.foto-invita .acciones { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
@media (min-width: 720px) { .foto-invita .acciones { width: auto; } }

/* Biomateriales del pedido: cada uno con sus presentaciones y la cantidad de cada una */
.bio-prod { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.bio-grupo .bio-prod:first-of-type { border-top: 0; }
.bio-presentaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; }
.bio-pres { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.field .bio-pres input.num-corto { flex: none; width: 58px; padding: 5px 6px; margin: 0; }
/* Catálogo: presentaciones debajo del nombre, y códigos de los implantes por medida */
.pres-cat { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; }
.cod-grilla { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.cod-fila { display: flex; gap: 10px; align-items: flex-start; }
.cod-fila > b { flex: none; width: 52px; padding-top: 20px; }
.cod-celdas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 8px; flex: 1; }
.cod-celdas label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.field .cod-celdas input { width: 100%; min-width: 0; padding: 5px 6px; margin: 0; }

/* Ordenar a mano (catálogo de insumos): flechas en cada fila, tarjeta, variante y campo */
.mover { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.mover.h, .cc-fila .mover, .ci-fila .mover { flex-direction: row; align-items: center; }
.mover button { width: 24px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.mover button:hover:not([disabled]) { background: var(--acc-tint); color: var(--ink); }
.mover button[disabled] { opacity: .3; cursor: default; }
.con-orden { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.con-orden:last-child { border-bottom: 0; }
.cat-lista .con-orden .fila-cat { border-bottom: 0; flex: 1; min-width: 0; }
.con-orden.tarjeta { flex-direction: column; align-items: stretch; gap: 4px; border-bottom: 0; }
.con-orden.tarjeta .impl-card { flex: 1; width: 100%; }
.con-orden.tarjeta .mover { justify-content: center; }

/* Ficha del alumno: pedidos viejos plegados bajo «Ver anteriores». */
.anteriores > summary { cursor: pointer; padding: 10px 16px; font-size: 13px; color: var(--muted, inherit); }
.anteriores > summary:hover { text-decoration: underline; }