/* =====================================================================
   Estilos propios de la plataforma (lo que el prototipo no tenía).
   Usa los mismos colores y medidas del prototipo (variables de prototipo.css).
   ===================================================================== */

/* La tilde de "qué llevar" va del color del texto sobre el verde (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 -------------------------------------------- */
/* 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); }

/* 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; }

/* ---- Pantalla de ingreso y avisos generales --------------------- */
.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--paper);
}
.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-brand { display: flex; align-items: center; gap: 12px; }
.login-brand svg { width: 34px; height: auto; flex: none; }
.login-brand b { display: block; font-size: 16px; font-weight: 600; letter-spacing: .2em; }
.login-brand span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1px;
}
.login h1 { font-size: 26px; margin-top: 6px; }
.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; }
@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 { display: none; }
#pc-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; }
}
/* 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 .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); }
.tooth.ausente .shape { border-style: dashed; background: 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); }

/* ---- 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).
   El prototipo tenía una paleta oscura, pero su última versión la apagaba
   (forzaba el claro); acá se vuelve a prender con esa paleta, completada con
   los azules que sumó la versión 3 y ajustada para que el texto se lea bien.
   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: #111210;
    --surface: #191A18;
    --raised: #1F201D;
    --sunken: #242621;
    --line: #2E302B;
    --line-soft: #242621;
    --ink: #EDEDE8;
    --ink-2: #BDBEB8;
    --ink-3: #9C9E98;
    --ink-4: #858781;
    --mark: #A5A5A9;
    --acc: #B7C26A;
    --acc-hover: #C9D37F;
    --acc-tint: #262A12;
    --acc-ink: #D3DB96;
    --on-acc: #171A06;
    --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: #141512;
    --film: #0E0F0E;
    --film-ink: #D8D9D2;
    --d1: #6F7E1C;
    --d2: #4A74B3;
    --d3: #A65E37;
    --d4: #8A58A0;
    --bar: #A3B04F;
    --bar-soft: #3A3F1C;
    --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: #111210;
  --surface: #191A18;
  --raised: #1F201D;
  --sunken: #242621;
  --line: #2E302B;
  --line-soft: #242621;
  --ink: #EDEDE8;
  --ink-2: #BDBEB8;
  --ink-3: #9C9E98;
  --ink-4: #858781;
  --mark: #A5A5A9;
  --acc: #B7C26A;
  --acc-hover: #C9D37F;
  --acc-tint: #262A12;
  --acc-ink: #D3DB96;
  --on-acc: #171A06;
  --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: #141512;
  --film: #0E0F0E;
  --film-ink: #D8D9D2;
  --d1: #6F7E1C;
  --d2: #4A74B3;
  --d3: #A65E37;
  --d4: #8A58A0;
  --bar: #A3B04F;
  --bar-soft: #3A3F1C;
  --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); }