/* ============================================================
   periodontograma.css — Pestaña Periodontograma de la ficha
   (js/views/periodontograma.js)

   La tabla tiene 16 piezas × 3 sitios por arcada: no entra en un
   teléfono y achicarla la volvería ilegible. Se desplaza de costado
   DENTRO de .perio-scroll; la página no.
   ============================================================ */

.perio-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.perio-fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
}

.perio-fecha .form-input {
    width: auto;
    padding: 4px 8px;
    font-size: 12px;
    min-height: 0;
}

.perio-indices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.perio-indice {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    min-width: 96px;
}

.perio-indice small {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.perio-indice strong {
    font-size: 15px;
    color: #111827;
}

.perio-indice.is-moderada { border-color: #fcd34d; background: #fffbeb; }
.perio-indice.is-profunda { border-color: #fca5a5; background: #fef2f2; }
.perio-indice.is-profunda strong { color: #b91c1c; }

.perio-indice-vacio {
    flex-direction: row;
    font-size: 13px;
    color: #9ca3af;
    border-style: dashed;
}

.perio-ayuda {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
    line-height: 1.5;
}

.perio-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

/* Título de cada arcada: una fila de la tabla sobre las columnas de las
   piezas, así el centro cae en la línea media. Lleva !important por las
   mismas reglas generales de th que se blindan más abajo. */
.perio-tabla th.perio-arcada-titulo {
    height: 34px;
    padding: 12px 0 6px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    background: transparent !important;
    border: 0 !important;
}

.perio-tabla th.perio-etiqueta-titulo {
    background: transparent !important;
    border: 0 !important;
}

.perio-scroll-inferior { margin-top: 10px; }

/* Grilla como la del periodontograma en papel: celdas chicas con borde
   celeste, un casillero por sitio. */
.perio-tabla {
    --perio-borde: #cfe3ea;
    border-collapse: collapse;
    table-layout: fixed;
    /* Etiquetas + 16 piezas × 3 sitios × 22px. El dibujo mide exactamente
       lo mismo, así cada punto cae sobre su casillero. */
    width: calc(150px + 48 * 22px);
    /* Centrada cuando sobra lugar. Cuando no entra, margin auto da 0 y la
       tabla arranca pegada a la izquierda, que es lo que necesita el
       desplazamiento lateral de .perio-scroll para llegar a la 18. */
    margin: 0 auto;
    font-size: 11px;
    user-select: none;
}

.perio-col-etiqueta { width: 150px; }
.perio-col-sitio { width: 22px; }

.perio-tabla td,
.perio-tabla th {
    padding: 0;
    height: 20px;
    text-align: center;
    vertical-align: middle;
}

.perio-tabla td { border: 1px solid var(--perio-borde); }

.perio-etiqueta {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    text-align: right !important;
    padding-right: 8px !important;
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
    border: 1px solid var(--perio-borde);
}

/* Separación entre piezas y línea media */
.perio-tabla .perio-pieza-celda,
.perio-tabla .perio-inicio { border-left: 1px solid #9fc3cf; }
.perio-tabla .perio-linea-media { border-left: 2px solid #6b8793 !important; }
.perio-tabla .is-ausente { background: repeating-linear-gradient(135deg, #f3f4f6 0 4px, #fff 4px 8px); }

/* Fila del dibujo: sin grilla, las piezas ocupan la fila entera. */
.perio-fila-dibujo td.perio-celda-dibujo {
    height: 124px;
    padding: 0;
    border-left: 1px solid var(--perio-borde);
    border-right: 1px solid var(--perio-borde);
    background: #fff;
}

.perio-etiqueta-cara {
    font-size: 17px;
    font-weight: 300;
    color: #6b7280;
    text-align: left !important;
    padding-left: 10px !important;
}

.perio-dibujo { display: block; }
.perio-contorno { stroke: #9aa1a9; stroke-width: .8; }
.perio-raiz-detras { opacity: .55; }
.perio-diente.is-ausente { opacity: .1; }
.perio-rosca { stroke: #4b5561; stroke-width: .8; stroke-linecap: round; }
.perio-rosca-brillo { stroke: #ffffff; stroke-width: .6; opacity: .7; stroke-linecap: round; }
.perio-contorno-metal { stroke: #56606b; stroke-width: .8; stroke-linejoin: round; }
.perio-dib-grilla line { stroke: #7fb3c4; stroke-width: .5; opacity: .35; }
.perio-dib-divisiones line { stroke: #e3eef2; stroke-width: 1; }
.perio-dib-divisiones line.perio-dib-media { stroke: #9fb6bf; stroke-width: 1.5; }
.perio-bolsa { fill: rgba(37, 99, 235, .22); stroke: none; }
.perio-linea-margen { fill: none; stroke: #e11d48; stroke-width: 1.6; stroke-linejoin: round; }
.perio-linea-fondo  { fill: none; stroke: #2563eb; stroke-width: 1.6; stroke-linejoin: round; }
.perio-furca { fill: #fff; stroke: #7c3aed; stroke-width: 1.4; }
.perio-furca-llena { fill: #7c3aed; }

.perio-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 0;
    font-weight: 800;
    font-size: 12px;
    color: #1f2937;
}

.perio-fila-numeros td { background: #f4f9fb; }

.perio-toggle {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #9ca3af;
    border-radius: 4px;
    width: 18px;
    height: 16px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.perio-toggle.is-on { background: #374151; border-color: #374151; color: #fff; }
.perio-toggle-implante.is-on { background: #0ea5e9; border-color: #0ea5e9; }
.perio-toggle:disabled { cursor: default; opacity: .6; }

.perio-grado {
    width: 44px;
    height: 18px;
    font-size: 11px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    text-align: center;
}

/* Los números van sin recuadro propio: el casillero es la celda. */
.perio-input {
    display: block;
    width: 100%;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    color: #111827;
}

.perio-input-pieza { width: 44px; margin: 0 auto; }

.perio-input:focus {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
    background: #fff;
}

.perio-input.is-invalid { background: #fee2e2; color: #b91c1c; }
.perio-input.perio-sev-moderada { background: #fef3c7; }
.perio-input.perio-sev-profunda { background: #fee2e2; color: #b91c1c; }

/* Placa, sangrado y supuración: el casillero entero se pinta. */
.perio-marca {
    display: block;
    width: 100%;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.perio-marca:hover:not(:disabled) { background: #eef6f9; }
.perio-marca:disabled { cursor: default; }
.perio-marca-sangrado.is-on,   .perio-marca-sangrado.is-on:hover   { background: #ef4444; }
.perio-marca-placa.is-on,      .perio-marca-placa.is-on:hover      { background: #3b82f6; }
.perio-marca-supuracion.is-on, .perio-marca-supuracion.is-on:hover { background: #eab308; }

/* Lo que acaba de cargar el dictado se ve unos segundos. */
.perio-dictado {
    box-shadow: inset 0 0 0 2px #8b5cf6;
    transition: box-shadow .3s;
}

/* ── Blindaje contra los estilos generales de tablas ─────────
   dark-theme.css y layout.css le ponen a TODO th y td mayúsculas, un
   letter-spacing de .1em, fondo, color y borde inferior, varios con
   !important. En esta tabla eso rompía la grilla: "PROFUNDIDAD DE
   SONDAJE" en mayúsculas espaciadas no entra en su columna, se monta
   sobre las piezas y corre los casilleros. Por eso acá también hace
   falta !important, acotado a .perio-tabla. */
.perio-tabla th,
.perio-tabla td {
    letter-spacing: normal !important;
    border-bottom: 1px solid var(--perio-borde) !important;
}

.perio-tabla th.perio-etiqueta {
    text-transform: none !important;
    font-size: 10px !important;
    color: #4b5563 !important;
    background: #fff !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perio-tabla th.perio-etiqueta-cara {
    font-size: 16px !important;
    color: #6b7280 !important;
}

.perio-tabla .perio-fila-numeros td { background: #f4f9fb !important; }
/* El resaltado de fila al pasar el mouse sirve en los casilleros, pero sobre
   el dibujo tiñe la lámina entera. */
.perio-tabla tr.perio-fila-dibujo:hover td { background: #fff !important; }

/* ── Tema oscuro ─────────────────────────────────────────── */
body.theme-dark .perio-tabla td,
body.theme-dark .perio-tabla th { border-color: var(--perio-borde) !important; }
body.theme-dark .perio-tabla .perio-pieza-celda,
body.theme-dark .perio-tabla .perio-inicio { border-left-color: rgba(148, 197, 214, .35) !important; }
body.theme-dark .perio-tabla .perio-linea-media { border-left-color: #6b8793 !important; }
body.theme-dark .perio-tabla th.perio-etiqueta { background: #0f172a !important; color: #94a3b8 !important; }
body.theme-dark .perio-tabla .perio-fila-numeros td { background: #162033 !important; }
/* El dibujo de las piezas queda claro, como una lámina: los dientes en
   gris sobre fondo oscuro no se leen. */
body.theme-dark .perio-tabla { --perio-borde: rgba(148, 197, 214, .18); }
body.theme-dark .perio-indice { background: #1e293b; border-color: rgba(255,255,255,.1); }
body.theme-dark .perio-indice strong,
body.theme-dark .perio-num { color: #e5e7eb; }
body.theme-dark .perio-tabla th.perio-arcada-titulo { color: #94a3b8 !important; }
body.theme-dark .perio-indice.is-moderada { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); }
body.theme-dark .perio-indice.is-profunda { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); }
body.theme-dark .perio-indice.is-profunda strong { color: #fca5a5; }
body.theme-dark .perio-etiqueta { background: #0f172a; color: #94a3b8; }
body.theme-dark .perio-fila-numeros td { background: #162033; }
body.theme-dark .perio-input { color: #e5e7eb; }
body.theme-dark .perio-input:focus { background: #1e293b; }
body.theme-dark .perio-grado { color: #e5e7eb; }
body.theme-dark .perio-grado option { background: #1e293b; }
body.theme-dark .perio-toggle { background: #1e293b; border-color: rgba(255,255,255,.15); color: #94a3b8; }
body.theme-dark .perio-input.perio-sev-moderada { background: rgba(245,158,11,.25); }
body.theme-dark .perio-input.perio-sev-profunda { background: rgba(239,68,68,.25); color: #fecaca; }
body.theme-dark .perio-toggle.is-on { background: #e5e7eb; color: #111827; }
body.theme-dark .perio-toggle-implante.is-on { background: #0ea5e9; color: #fff; }
body.theme-dark .perio-marca:hover:not(:disabled) { background: rgba(255,255,255,.06); }
body.theme-dark .perio-tabla .is-ausente { background: repeating-linear-gradient(135deg, #1e293b 0 4px, #0f172a 4px 8px); }
body.theme-dark .perio-tabla .perio-pieza-celda,
body.theme-dark .perio-tabla .perio-inicio { border-left-color: rgba(148, 197, 214, .35); }

/* ── Alergias en Antecedentes ────────────────────────────── */
.mh-allergies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
}

.mh-allergies-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #92400e;
}

body.theme-dark .mh-allergies { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.35); }
body.theme-dark .mh-allergies-label { color: #fcd34d; }