/* ============================================================
   Odontología · ficha odontológica y odontograma (clases .od-*)

   Tres colores con un solo significado en toda la ficha:
     rojo  = hallazgo o patología        ámbar = por realizar
     azul  = existente o realizado       gris  = condición sin patología
   ============================================================ */
.od{
  --od-hallazgo:#d64545; --od-plan:#d98200; --od-hecho:#2563c9; --od-neutro:#8a8799;
  --od-esmalte:#ffffff; --od-raiz:#f6efdf; --od-trazo:#b4afc4; --od-suave:#f5f3fa;
  min-width:0;
}
[data-theme="dark"] .od{
  --od-hallazgo:#ff6f6f; --od-plan:#ffb44d; --od-hecho:#74a6ff; --od-neutro:#a7a3b8;
  --od-esmalte:#2b2835; --od-raiz:#383341; --od-trazo:#625d75; --od-suave:#1f1c28;
}
.modal.od-modal{ max-width:1240px !important; width:min(1240px,97vw); }

/* ── Entrada a la ficha, donde se elige el tipo de atención (v364) ──
   Vive en el formulario de la atención, fuera de .od: usa solo variables del tema. */
.od-entrada{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:6px 0 18px; padding:14px 16px;
  border:1px solid var(--line); border-left:4px solid var(--purple); border-radius:12px; background:var(--surface-2); }
.od-entrada__texto{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:3px; }
.od-entrada__texto b{ font-size:14.5px; color:var(--ink); }
.od-entrada__texto span{ font-size:12.5px; line-height:1.45; color:var(--ink-soft); }
.od-entrada .od-entrada__boton{ flex:0 0 auto; min-height:42px; padding-inline:18px; }
.od-entrada__error{ flex:1 1 100%; margin:0; font-size:12.5px; font-weight:600; color:#c0392b; }
[data-theme="dark"] .od-entrada__error{ color:#ff8a80; }
@media (max-width:640px){ .od-entrada .od-entrada__boton{ flex:1 1 100%; justify-content:center; min-height:46px; } }
/* El mismo botón en la barra fija del formulario, junto a «Crear plan de tratamiento». */
.fc-tools .od-entrada__boton{ margin-left:8px; }
.fc-tools .od-entrada__error{ display:block; margin-top:6px; }
/* En el teléfono la barra fija ya ocupa bastante: ahí la entrada es la tarjeta bajo el selector. */
@media (max-width:640px){ .fc-tools .od-entrada__boton{ display:none; } }
.od .od-ayuda{ margin:0 0 10px; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.od-cuerpo{ display:flex; flex-direction:column; gap:18px; min-width:0; transition:opacity .15s ease; }
.od-cuerpo[inert]{ opacity:.55; }
.od-pie__aviso{ flex-basis:100%; margin:0; }
/* v366 · El pie queda a la vista: guardar y crear el plan no se buscan al final de la ficha
   (mismo patrón que el pie del formulario de atención). */
.od .proc-footer{ position:sticky; bottom:0; z-index:5; background:var(--surface); padding:12px; border:1px solid var(--line); border-radius:12px; box-shadow:0 -6px 18px #1029470c; }
@media (max-width:600px){
  .od .proc-footer{ padding:10px; gap:8px; }
  .od .proc-footer>span{ flex-basis:100%; margin:0; }
  .od .proc-footer .btn{ width:auto; flex:1 1 130px; min-height:44px; justify-content:center; }
  /* En el teléfono el pie fijo lleva solo lo que se usa en cada atención: el plan y guardar. */
  .od .proc-footer .od-pie__recargar{ display:none; }
}

/* ── Barra de herramientas ─────────────────────────────────── */
.od-herr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.od-herr select{ width:auto; margin:0; min-height:34px; padding:6px 10px; font-size:13px; }
.od-herr__fin{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.od-herr__dent{ display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.od-herr__pista{ margin:0; font-size:12.5px; color:var(--ink-soft); min-height:18px; }
.od-ficha{ border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-weight:600;
  padding:7px 12px; border-radius:999px; cursor:pointer; min-height:34px; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.od-ficha:hover:not(:disabled){ border-color:var(--purple); }
.od-ficha.on{ background:var(--purple); border-color:var(--purple); color:#fff; }
.od-ficha:disabled{ opacity:.55; cursor:default; }
.od-ficha:focus-visible, .od-seg button:focus-visible, .od-pieza:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.od-ficha--cara{ padding:5px 10px; min-height:30px; font-size:12.5px; }
.od-fichas{ display:flex; flex-wrap:wrap; gap:6px; }
.od-seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:2px; }
.od-seg button{ border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); padding:6px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.od-seg button.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(20,18,28,.14); }
.od-seg button:disabled{ cursor:default; opacity:.6; }

/* ── Lienzo: el plano a la izquierda, la pieza elegida a la derecha ── */
.od-lienzo{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.od--lectura .od-lienzo{ grid-template-columns:minmax(0,1fr) auto; }
.od--lectura .od-lado{ width:320px; }
.od-columna{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.od-plano{ min-width:0; background:var(--od-suave); border-radius:18px; padding:14px 12px 12px; overflow-x:auto; }
.od-svg{ display:block; width:100%; min-width:640px; height:auto; user-select:none; -webkit-user-select:none; }
.od-lado{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.od-lado__cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13.5px; }

.od-pieza{ cursor:pointer; outline:none; }
.od-pieza__zona{ fill:transparent; stroke:transparent; stroke-width:1.5; transition:fill .15s ease, stroke .15s ease; }
.od-pieza:hover .od-pieza__zona{ fill:color-mix(in srgb,var(--purple) 7%,transparent); }
.od-pieza--sel .od-pieza__zona{ fill:color-mix(in srgb,var(--purple) 11%,transparent); stroke:var(--purple); }
.od-cara{ fill:var(--od-esmalte); stroke:var(--od-trazo); stroke-width:1; stroke-linejoin:round; transition:fill .12s ease; }
.od-cara:hover{ fill:color-mix(in srgb,var(--purple) 26%,var(--od-esmalte)); }
.od-corona-borde{ fill:none; stroke:var(--od-trazo); stroke-width:1.4; pointer-events:none; }
.od-raiz{ fill:var(--od-raiz); stroke:var(--od-trazo); stroke-width:1; }
.od-num{ font-size:10.5px; font-weight:700; fill:var(--ink-soft); font-variant-numeric:tabular-nums; pointer-events:none; }
.od-pieza--sel .od-num{ fill:var(--purple); }
.od-eti{ font-size:8.5px; font-weight:800; letter-spacing:.02em; pointer-events:none; }
.od-lado-txt{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; fill:var(--ink-soft); }
.od-media{ stroke:var(--od-trazo); stroke-width:1; stroke-dasharray:3 4; }
.od-linea{ stroke-width:2.2; stroke-linecap:round; fill:none; pointer-events:none; }
.od-linea--gruesa{ stroke-width:3; }
.od-linea--puente{ stroke-width:4.5; stroke-linecap:butt; }
.od-apical{ fill-opacity:.35; stroke-width:1.6; pointer-events:none; }
.od-implante{ fill:#b9bcc8; stroke:#7f8392; stroke-width:1; }
.od-implante__espira{ stroke:#6c7080; stroke-width:1.4; }
.od-trama__fondo{ fill:var(--od-esmalte); }

/* Tono como relleno (.od-t-*), como trazo (.od-tz-*), como texto (.od-tx-*) y como borde (.od-borde-*). */
.od-t-hallazgo{ fill:var(--od-hallazgo); background:var(--od-hallazgo); } .od-t-plan{ fill:var(--od-plan); background:var(--od-plan); }
.od-t-hecho{ fill:var(--od-hecho); background:var(--od-hecho); } .od-t-neutro{ fill:var(--od-neutro); background:var(--od-neutro); }
.od-apical.od-t-hallazgo{ stroke:var(--od-hallazgo); } .od-apical.od-t-plan{ stroke:var(--od-plan); } .od-apical.od-t-hecho{ stroke:var(--od-hecho); }
.od-tz-hallazgo, .od-tz-hallazgo line{ stroke:var(--od-hallazgo); } .od-tz-plan, .od-tz-plan line{ stroke:var(--od-plan); }
.od-tz-hecho, .od-tz-hecho line{ stroke:var(--od-hecho); } .od-tz-neutro, .od-tz-neutro line{ stroke:var(--od-neutro); }
.od-tx-hallazgo{ fill:var(--od-hallazgo); } .od-tx-plan{ fill:var(--od-plan); } .od-tx-hecho{ fill:var(--od-hecho); } .od-tx-neutro{ fill:var(--od-neutro); }
.od-cara.od-cara--suave{ fill-opacity:.2; }
.od-cara--trama-hallazgo{ fill:url(#od-trama-hallazgo); } .od-cara--trama-plan{ fill:url(#od-trama-plan); }
.od-cara--trama-hecho{ fill:url(#od-trama-hecho); } .od-cara--trama-neutro{ fill:url(#od-trama-neutro); }
.od-borde-hallazgo{ border-left-color:var(--od-hallazgo) !important; } .od-borde-plan{ border-left-color:var(--od-plan) !important; }
.od-borde-hecho{ border-left-color:var(--od-hecho) !important; } .od-borde-neutro{ border-left-color:var(--od-neutro) !important; }

.od-leyenda{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 4px 0; padding:0; font-size:12px; color:var(--ink-soft); }
.od-leyenda li{ display:flex; align-items:center; gap:6px; }
.od-leyenda__c{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.od-leyenda__c--trama{ background:repeating-linear-gradient(45deg,var(--od-hecho) 0 2px,var(--od-esmalte) 2px 5px); border:1px solid var(--od-trazo); }
.od-indices{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin:12px 4px 2px; }
.od-indices div{ display:flex; align-items:baseline; gap:7px; }
.od-indices dt{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.od-indices dd{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.od-indices small{ font-size:12px; color:var(--ink-soft); }
.od-indices p{ flex-basis:100%; margin:0; font-size:11.5px; color:var(--ink-soft); }

/* ── Vista 3D ──────────────────────────────────────────────── */
.od-3d{ position:relative; border-radius:18px; overflow:hidden; background:radial-gradient(120% 90% at 50% 12%,#ffffff 0%,#eef1fb 55%,#dde4f6 100%); box-shadow:inset 0 0 0 1px var(--line); }
[data-theme="dark"] .od-3d{ background:radial-gradient(120% 90% at 50% 12%,#2c2a3a 0%,#1b1a26 60%,#13121b 100%); }
.od-3d canvas{ display:block; width:100%; height:100%; }
.od-3d__aviso{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; margin:0; font-size:13px; color:var(--ink-soft); }
.od-3d__sobre{ position:absolute; left:10px; top:10px; padding:5px 10px; border-radius:999px; background:rgba(22,20,28,.78); color:#fff; font-size:12px; font-weight:600; pointer-events:none; }
.od-3d__vistas{ position:absolute; left:8px; right:8px; bottom:8px; display:flex; justify-content:center; flex-wrap:wrap; gap:4px; }
.od-3d__vistas button{ border:0; border-radius:999px; padding:5px 10px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; background:rgba(255,255,255,.82); color:#2a2740; box-shadow:0 1px 4px rgba(20,18,28,.14); }
.od-3d__vistas button:hover{ background:#fff; }

/* ── Detalle de la pieza y listas ──────────────────────────── */
.od-detalle{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.od-detalle h4{ margin:0; font-size:14px; }
.od-detalle__nota{ margin:0; font-size:13px; color:var(--ink-soft); white-space:pre-wrap; }
.od-marcas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; align-items:start; }
.od-marca{ display:flex; flex-direction:column; gap:7px; padding:10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--od-neutro); min-width:0; }
.od-marca b{ font-size:13.5px; } .od-marca span{ font-size:13px; } .od-marca small{ font-size:11.5px; color:var(--ink-soft); }
.od-marca input, .od-marca select{ margin:0; min-height:34px; padding:6px 10px; font-size:13px; }
.od-marca__cab{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.od-marca__cab .x-btn{ padding:5px; line-height:0; }
.od-marca__fila{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.od-marca__fila select{ width:auto; flex:1 1 120px; }
.od-marca--linea{ flex-direction:row; align-items:center; flex-wrap:wrap; grid-column:1/-1; }
.od-marca--linea span{ flex:1 1 200px; }
.od-agregar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px dashed var(--line); border-radius:12px; padding:12px 14px; margin:0; }
.od-agregar legend{ font-size:12.5px; font-weight:700; color:var(--ink-soft); padding:0 6px; }
.od-agregar>select{ width:auto; flex:1 1 220px; } .od-agregar>input{ flex:1 1 180px; width:auto; }
.od-agregar select, .od-agregar input{ margin:0; min-height:34px; padding:6px 10px; font-size:13px; }

/* ── Formularios ───────────────────────────────────────────── */
.od .od-seccion{ border:1px solid var(--line); border-radius:16px; padding:16px 18px; min-width:0; margin:0; }
.od .od-seccion>legend{ font-weight:700; font-size:14.5px; padding:0 8px; }
.od-campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.od-campos--3{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; }
.od-campo{ display:flex; flex-direction:column; gap:5px; min-width:0; margin:0; }
.od-campo--ancho{ grid-column:1/-1; } .od-campo--doble{ grid-column:span 2; }
.od-campo__nombre{ font-size:13px; font-weight:600; }
.od-campo input, .od-campo select, .od-campo textarea{ margin:0; width:100%; }
.od-campo textarea{ min-height:68px; }
.od-campo small{ font-size:11.5px; color:var(--ink-soft); }
.od-tri{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; padding:8px 0; border-bottom:1px solid var(--line); min-width:0; }
.od-tri__nombre{ font-size:13px; font-weight:600; }
.od-tri__detalle{ grid-column:1/-1; margin:0; min-height:34px; padding:6px 10px; font-size:13px; }
.od-tri--si .od-seg button.on{ background:var(--od-hallazgo); color:#fff; }
.od-fila{ display:grid; gap:8px; align-items:end; margin:0 0 10px; min-width:0; }
.od-fila select, .od-fila input{ margin:0; min-height:36px; padding:6px 10px; font-size:13px; min-width:0; width:100%; }
.od-fila label{ display:flex; flex-direction:column; gap:3px; margin:0; font-size:11.5px; font-weight:600; color:var(--ink-soft); min-width:0; }
.od-fila .x-btn{ padding:8px; line-height:0; justify-self:start; }
.od-fila--pulpar{ grid-template-columns:76px repeat(6,minmax(0,1fr)) minmax(0,1.2fr) auto; padding-bottom:10px; border-bottom:1px solid var(--line); }
.od-fila--dx{ grid-template-columns:96px minmax(0,1fr) 150px auto; }
.od-fila--proc{ grid-template-columns:96px minmax(0,1fr) auto; }
.od-fila--conducto{ grid-template-columns:repeat(5,minmax(0,1fr)) auto; margin-top:8px; }
.od-proc{ padding:14px; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:var(--od-suave); display:flex; flex-direction:column; gap:8px; }
.od-proc .od-fila{ margin:0; }
.od-proc__mas{ align-self:flex-start; }
.od-botones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ── Tratamientos propuestos y plan de tratamiento (v366) ───── */
.od-prop__cab{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 12px; }
.od-prop__cab .od-ayuda{ flex:1 1 280px; margin:0; }
.od-prop__cab .btn{ flex:0 0 auto; min-height:40px; }
.od-fila--prop{ grid-template-columns:96px minmax(0,2.2fr) 72px minmax(84px,auto) minmax(0,1.6fr) auto; align-items:center; padding:8px 0; border-top:1px solid var(--line); margin:0; }
.od-fila--prop:has(select[aria-label="Variante"]){ grid-template-columns:96px minmax(0,1.6fr) minmax(0,1fr) 72px minmax(84px,auto) minmax(0,1.3fr) auto; }
.od-fila--enplan{ opacity:.82; }
.od-prop__valor{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink); }
.od-prop__enplan{ white-space:nowrap; border-color:var(--od-hecho); color:var(--od-hecho); }
.od-prop__fin{ display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.od-prop .od-botones{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.od-prop__total{ margin:12px 0 0; font-size:13px; color:var(--ink-soft); }
.od-prop__total b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.od-prop__vacio{ margin:10px 0 0; padding:10px 12px; border-left:3px solid var(--od-plan); border-radius:0 8px 8px 0; background:var(--od-suave); font-size:12.5px; line-height:1.45; }
.od-prop__aviso{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; border-left:3px solid var(--od-plan); border-radius:0 10px 10px 0; background:var(--od-suave); font-size:13px; }
.od-prop__aviso span{ flex:1 1 200px; }
@media (max-width:760px){
  .od-fila--prop, .od-fila--prop:has(select[aria-label="Variante"]){ grid-template-columns:88px minmax(0,1fr) 64px; row-gap:6px; }
  .od-fila--prop select[aria-label="Variante"], .od-fila--prop input[aria-label="Nota del tratamiento propuesto"]{ grid-column:1/-1; }
  .od-prop__valor{ text-align:left; grid-column:1/3; }
  .od-prop__cab .btn{ flex:1 1 100%; justify-content:center; min-height:46px; }
}
.od-botones select{ width:auto; margin:0; min-height:36px; }
.od-epb{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.od-epb label{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; padding:10px; border:1px solid var(--line); border-radius:12px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.od-epb select{ margin:0; width:74px; text-align:center; }

/* ── Periodontograma ───────────────────────────────────────── */
.od-perio__caja{ min-width:0; }
.od-perio__arcada{ overflow-x:auto; margin-bottom:14px; border:1px solid var(--line); border-radius:12px; }
.od-perio{ border-collapse:collapse; font-size:11.5px; width:max-content; min-width:100%; }
.od-perio th, .od-perio td{ padding:3px 2px; text-align:center; border-right:1px solid var(--line); white-space:nowrap; }
.od-perio thead th{ font-weight:800; font-size:12px; padding:7px 4px; background:var(--surface-2); font-variant-numeric:tabular-nums; }
.od-perio tbody th{ position:sticky; left:0; z-index:1; text-align:left; font-weight:600; color:var(--ink-soft); background:var(--surface); padding:3px 8px; min-width:116px; font-size:11px; }
.od-perio thead th:first-child{ position:sticky; left:0; z-index:2; text-align:left; padding-left:10px; }
.od-perio select{ margin:0; padding:2px 2px; min-height:26px; width:44px; font-size:11.5px; }
.od-perio__n{ width:17px !important; min-width:0 !important; min-height:25px !important; margin:0 1px !important; padding:1px 0 !important; text-align:center; font-size:11.5px !important; border-radius:5px !important; font-variant-numeric:tabular-nums; }
.od-perio__n--ojo{ background:color-mix(in srgb,var(--od-plan) 22%,var(--surface)) !important; font-weight:700; }
.od-perio__n--mal{ background:color-mix(in srgb,var(--od-hallazgo) 24%,var(--surface)) !important; font-weight:700; }
.od-perio__punto{ width:13px; height:13px; margin:2px 3px; padding:0; border-radius:50%; border:1.5px solid var(--od-trazo); background:var(--surface); cursor:pointer; vertical-align:middle; }
.od-perio__punto.on{ background:var(--od-hallazgo); border-color:var(--od-hallazgo); }
.od-perio__punto--sup.on{ background:var(--od-plan); border-color:var(--od-plan); }
.od-perio__punto:disabled{ cursor:default; opacity:.4; }
.od-perio__fuera{ background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--od-neutro) 16%,transparent) 5px 7px); }
.od-perio__corte td{ height:6px; padding:0; background:var(--surface-2); }
.od-perio__resumen{ margin:0 0 12px; font-size:12.5px; color:var(--ink-soft); }

@media (max-width:980px){
  .od-lienzo, .od--lectura .od-lienzo{ grid-template-columns:minmax(0,1fr); }
  .od--lectura .od-lado{ width:auto; }
  .od-fila--pulpar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .od-fila--conducto{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .od-campos, .od-campos--3{ grid-template-columns:minmax(0,1fr); }
  .od-campo--doble{ grid-column:auto; }
  .od-fila--dx, .od-fila--proc{ grid-template-columns:minmax(0,1fr); }
  .od-epb{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .od-herr__fin{ margin-left:0; width:100%; justify-content:space-between; }
  .od .od-seccion{ padding:12px; }
}
@media (prefers-reduced-motion:reduce){ .od-ficha, .od-cara, .od-pieza__zona{ transition:none; } }