/* ============================================================
   BERA — Potenciales Evocados Auditivos de Tronco Cerebral
   ============================================================ */

/* ── Pantalla de montaje de electrodos ────────────────────── */
.bera-montaje-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.bera-montaje-overlay.oculto { display: none; }

.bera-montaje-card {
    background: #fff;
    border-radius: 16px;
    max-width: 880px;
    width: 100%;
    padding: 22px 26px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.bera-montaje-header h2 {
    margin: 0 0 4px;
    color: #0f3d5e;
    font-size: 22px;
}
.bera-montaje-header p {
    margin: 0 0 16px;
    color: #5b7a8e;
    font-size: 14px;
}

.bera-montaje-body {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.bera-montaje-area {
    position: relative;
    width: 460px;
    height: 380px;
    flex: 0 0 460px;
    background: #f8fbfd;
    border: 1px solid #e0ecf4;
    border-radius: 12px;
}
.bera-cabeza-svg { width: 100%; height: 100%; display: block; }

/* Objetivos sobre la cabeza */
.bera-target {
    position: absolute;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;          /* centrar en left/top */
    border: 2px dashed #94a3b8;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.bera-target.cerca {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.18);
    transform: scale(1.15);
}
.bera-target.limpio {
    border-style: solid;
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.16);
}
.bera-target.alta {
    border-style: solid;
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.18);
    animation: bera-pulse 1s infinite;
}
.bera-target.ocupado {
    border-style: solid;
    border-color: transparent;
    background: transparent;
}
.bera-target.ocupado.alta { border-color: #dc2626; background: rgba(220,38,38,0.12); }

@keyframes bera-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50%      { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}

/* Gasa: el pad rectangular es la pieza que se arrastra (no la fila completa) */
.bera-tool-tray { margin-bottom: 14px; }
.bera-gasa-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bera-gasa-pad {
    flex: 0 0 auto;
    width: 38px;
    height: 26px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, #ffffff 0 4px, #eef2f6 4px 8px),
        repeating-linear-gradient(0deg, #ffffff 0 4px, #eef2f6 4px 8px);
    background-blend-mode: multiply;
    border: 1.5px solid #cbd5e1;
    box-shadow: inset 0 0 0 1px #fff;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.bera-gasa-pad.arrastrando { cursor: grabbing; box-shadow: 0 8px 22px rgba(0,0,0,0.28); }

/* Transductores (audífonos) */
.bera-trans-tray { margin: 4px 0 12px; }
.bera-trans {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: #f1f5f9;
    border: 1.5px solid #c5d9e8;
    border-radius: 10px;
    margin-bottom: 8px;
}
.bera-trans-icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.bera-trans-icon.arrastrando { cursor: grabbing; box-shadow: 0 8px 22px rgba(0,0,0,0.28); }
.bera-trans-icon.colocado { position: absolute; }
.bera-target-trans { border-color: #0ea5e9; }
.bera-target-trans.ocupado { border-color: transparent; background: transparent; }

/* Electrodo colocado con impedancia alta */
.bera-electrodo.colocado.alta {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35);
    animation: bera-pulse 1s infinite;
}

/* Electrodo colocado con impedancia alta */
.bera-electrodo.colocado.alta {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35);
    animation: bera-pulse 1s infinite;
}
.bera-target-label {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: #52758a;
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
}
.bera-target.ocupado .bera-target-label { display: none; }

/* Panel lateral */
.bera-montaje-side {
    flex: 1 1 300px;
    min-width: 260px;
}
.bera-montaje-side h3 {
    margin: 0 0 10px;
    color: #0f3d5e;
    font-size: 16px;
}

.bera-electrodo-tray {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.bera-electrodo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #f1f5f9;
    border: 1.5px solid #c5d9e8;
    border-radius: 10px;
    touch-action: none;
    user-select: none;
}
.bera-electrodo.arrastrando { box-shadow: 0 8px 22px rgba(0,0,0,0.28); }

/* Forma de círculo mientras se arrastra el electrodo (solo el dot) */
.bera-electrodo.como-circulo {
    width: auto;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    border-width: 2px;
}
.bera-electrodo.como-circulo .bera-electrodo-txt,
.bera-electrodo.como-circulo .bera-electrodo-imp { display: none; }

.bera-electrodo.colocado {
    cursor: default;
    width: auto;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    border-width: 2px;
}
.bera-electrodo.colocado .bera-electrodo-txt,
.bera-electrodo.colocado .bera-electrodo-imp { display: none; }

.bera-electrodo-dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid;
    cursor: grab;
    touch-action: none;
}
.bera-electrodo-dot:active { cursor: grabbing; }
.bera-electrodo-txt {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
    color: #0f3d5e;
    line-height: 1.2;
}
.bera-electrodo-txt small { font-weight: 400; color: #7c98a9; font-size: 11px; }

.bera-electrodo-imp {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
}
.bera-electrodo-imp.imp-ok  { color: #16a34a; }
.bera-electrodo-imp.imp-mal { color: #dc2626; }

.bera-montaje-status {
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #eef4f9;
    color: #52758a;
}
.bera-montaje-status.ok    { background: #e7f7ee; color: #15803d; }
.bera-montaje-status.error { background: #fdecec; color: #c0392b; }

.bera-imp-lista {
    margin-bottom: 12px;
    border: 1px solid #e0ecf4;
    border-radius: 10px;
    overflow: hidden;
}
.bera-imp-lista.oculto { display: none; }
.bera-imp-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    border-bottom: 1px solid #eef4f9;
}
.bera-imp-fila:last-child { border-bottom: none; }
.bera-imp-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.bera-imp-nombre { color: #0f3d5e; font-weight: 600; }
.bera-imp-val { margin-left: auto; font-weight: 700; }
.bera-imp-val.imp-ok  { color: #16a34a; }
.bera-imp-val.imp-mal { color: #dc2626; }

.bera-montaje-btn {
    width: 100%;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 8px;
}
.bera-montaje-btn:disabled { background: #b9c6d6; cursor: not-allowed; }
.bera-montaje-btn-ok { background: #16a34a; }
.bera-montaje-btn-ok:hover { background: #15803d; }
.bera-montaje-btn.oculto { display: none; }

@media (max-width: 720px) {
    .bera-montaje-area { flex-basis: 100%; width: 100%; }
}


/* ── Botón BERA en tarjetas de caso ───────────────────────── */
.btn-bera {
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    font-family: inherit;
}
.btn-bera:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
    transform: translateY(-1px);
}

/* ── Device frame ─────────────────────────────────────────── */
.bera-device-frame {
    background: #10202e;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 20px 52px rgba(9,36,52,0.45);
}

.bera-device-header {
    background: linear-gradient(135deg, #0a1820 0%, #132433 100%);
    border-bottom: 1px solid #1b3447;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bera-brand-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bera-brand {
    color: #e2f0fb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.bera-model {
    color: #6da8c8;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.bera-status-badge {
    background: #1e3a52;
    color: #7ab8d4;
    border: 1px solid #2a4e68;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.bera-status-badge.badge-midiendo {
    background: #7c3aed22;
    color: #a78bfa;
    border-color: #7c3aed55;
}
.bera-status-badge.badge-ok {
    background: #064e3b22;
    color: #34d399;
    border-color: #064e3b55;
}

/* ── Workspace (2 columnas) ────────────────────────────────── */
.bera-workspace {
    display: grid;
    grid-template-columns: 230px 1fr;
    background: #10202e;
}

/* ── Pestañas RECORD / EDIT del panel de controles ─────────── */
.bera-ctrl-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.bera-ctrl-tab {
    flex: 1;
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8fb6cf;
    background: #16293a;
    border: 1px solid #244257;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
    transition: all 0.13s;
}
.bera-ctrl-tab:hover { background: #1d3548; }
.bera-ctrl-tab.activo {
    color: #fff;
    background: #0f3d5e;
    border-color: #3b82f6;
}
.bera-ctrl-pane.oculto { display: none; }

.bera-edit-hint {
    font-size: 12px;
    color: #9fc0d6;
    line-height: 1.4;
    margin: 0 0 12px;
}
.bera-mark-toolbar-vert {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.bera-mark-toolbar-vert .bera-mark-label {
    color: #9fc0d6;
    margin-bottom: 2px;
}
.bera-mark-toolbar-vert .bera-mark-btn { width: 100%; text-align: center; }

/* ── Panel de controles (izquierda) ────────────────────────── */
.bera-controls-panel {
    background: #162d40;
    border-right: 2px solid #10202e;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bera-selector-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bera-selector-label {
    color: #7ab8d4;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bera-btn-group {
    display: flex;
    gap: 6px;
}

.bera-ear-btn {
    flex: 1;
    background: #1e3a52;
    color: #8fc5df;
    border: 2px solid #2a4e68;
    border-radius: 8px;
    padding: 9px 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    min-height: 40px;
}
.bera-ear-btn:hover { background: #234a66; }
.bera-ear-od.activo {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #dc2626;
}
.bera-ear-oi.activo {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #2563eb;
}

.bera-intens-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.bera-intens-btn {
    background: #1e3a52;
    color: #8fc5df;
    border: 1px solid #2a4e68;
    border-radius: 6px;
    padding: 6px 2px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.13s;
    font-family: inherit;
    text-align: center;
    min-height: 36px;
}
.bera-intens-btn:hover { background: #234a66; }
.bera-intens-btn.una-replica  { border-color: #f59e0b; border-width: 2px; }
.bera-intens-btn.dos-replicas { border-color: #22c55e; border-width: 2px; }
.bera-intens-btn.activo {
    background: #0f3d5e;
    color: #e2f0fb;
    border-color: #3b82f6;
}

.bera-info-bloque {
    background: #0d1d2a;
    border: 1px solid #1b3447;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bera-info-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.bera-info-fila span {
    color: #6da8c8;
    font-size: 11px;
}

.bera-info-fila strong {
    color: #c5dff0;
    font-size: 12px;
    text-align: right;
}

.bera-btn-registrar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
    font-family: inherit;
    min-height: 52px;
    width: 100%;
}
.bera-btn-registrar small {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.82;
    letter-spacing: 0;
}
.bera-btn-registrar:hover { background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%); }
.bera-btn-registrar:disabled {
    background: #334a5e;
    cursor: not-allowed;
}

.bera-status-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0d1d2a;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 36px;
}

.bera-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3b5268;
    flex-shrink: 0;
    transition: background 0.2s;
}
.bera-status-dot.dot-evaluando {
    background: #a78bfa;
    animation: pulse-dot 0.8s ease-in-out infinite alternate;
}
.bera-status-dot.dot-presente { background: #34d399; }

@keyframes pulse-dot {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

.bera-status-text {
    color: #7ab8d4;
    font-size: 11px;
    line-height: 1.3;
}

/* ── Panel canvas principal (derecha) ──────────────────────── */
.bera-main-panel {
    background: #f7fbfe;
    padding: 16px 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bera-canvas-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.bera-canvas-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0f3d5e;
    text-transform: uppercase;
}

.bera-canvas-sub {
    font-size: 13px;
    color: #5a8fa8;
    font-weight: 600;
}

#beraMainCanvasOD,
#beraMainCanvasOI {
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #dce9f3;
    border-radius: 6px;
    display: block;
}

/* Pantalla principal dividida: OD | OI en paralelo */
.bera-main-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #10202e;
    padding: 4px;
}
.bera-main-split .bera-main-panel {
    border-radius: 8px;
}

@media (max-width: 900px) {
    .bera-main-split { grid-template-columns: 1fr; }
}

.bera-canvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #7ab8d4;
    padding: 0 2px;
}

.bera-scale-ref {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bera-scale-line {
    display: inline-block;
    width: 2px;
    height: 20px;
    background: #0f3d5e;
    border-radius: 1px;
}

/* ══ SECCIÓN DE MARCADO ════════════════════════════════════ */
.bera-marcado-section {
    background: #fff;
    border: 1px solid #e0ecf4;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
}

.bera-marcado-header {
    margin-bottom: 16px;
}
.bera-marcado-header h2 {
    font-size: 20px;
    color: #0f3d5e;
    margin-bottom: 4px;
}

.bera-stack-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.bera-stack-tab {
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #e0ecf4;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.14s;
    font-family: inherit;
    min-height: 40px;
}
.bera-stack-tab.rojo.activo {
    background: #fee2e2;
    color: #7f1d1d;
    border-color: #dc2626;
}
.bera-stack-tab.azul.activo {
    background: #dbeafe;
    color: #1e3a8a;
    border-color: #2563eb;
}
.bera-stack-tab:not(.activo):hover { background: #e2eff8; }

.bera-mark-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #e0ecf4;
    border-radius: 8px;
    padding: 10px 14px;
}

.bera-mark-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-right: 4px;
}

.bera-mark-btn {
    background: #f1f5f9;
    color: #0f3d5e;
    border: 1.5px solid #c5d9e8;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.14s;
    font-family: inherit;
    min-height: 36px;
}
.bera-mark-btn:hover { background: #dce9f3; border-color: #0f3d5e; }
.bera-mark-btn.activo {
    background: #0f3d5e;
    color: #fff;
    border-color: #0f3d5e;
}

.bera-mark-cancel {
    background: #fff;
    color: #dc2626;
    border-color: #fca5a5;
}
.bera-mark-cancel:hover { background: #fee2e2; }

.bera-mark-hint {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin-left: 4px;
}

.oculto { display: none !important; }

.bera-stack-wrap {
    position: relative;
    background: #f7fbfe;
    border: 1px solid #dce9f3;
    border-radius: 8px;
    overflow: hidden;
}

#beraStackCanvas {
    width: 100%;
    height: auto;
    display: block;
}

.bera-stack-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    background: #f7fbfe;
    pointer-events: none;
}

/* ══ TABLA DE LATENCIAS ════════════════════════════════════ */
.bera-tabla-section {
    background: #fff;
    border: 1px solid #e0ecf4;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
}
.bera-tabla-section h2 {
    font-size: 20px;
    color: #0f3d5e;
    margin-bottom: 4px;
}

.bera-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bera-tabla th {
    background: #f1f5f9;
    color: #374151;
    font-weight: 700;
    padding: 10px 12px;
    text-align: center;
    border-bottom: 2px solid #dce9f3;
    white-space: nowrap;
}

.bera-tabla td {
    padding: 9px 12px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
}

.bera-tabla tr:hover td { background: #f8fafc; }

.bera-onda-v {
    font-weight: 700;
    color: #0f3d5e;
}

.bera-empty-row {
    color: #94a3b8;
    font-style: italic;
    padding: 18px;
}

/* ══ RESUMEN IPLs ══════════════════════════════════════════ */
.bera-resumen-section {
    background: #fff;
    border: 1px solid #e0ecf4;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
}
.bera-resumen-section h2 {
    font-size: 20px;
    color: #0f3d5e;
    margin-bottom: 14px;
}

.bera-resumen-grid {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.bera-resumen-grupo {
    flex: 1;
    min-width: 160px;
}
.bera-resumen-grupo h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e0ecf4;
}

.bera-resumen-card {
    background: #f8fafc;
    border: 1px solid #e0ecf4;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bera-resumen-card.resumen-alto {
    background: #fef3c7;
    border-color: #f59e0b;
}
.bera-resumen-card.resumen-normal {
    background: #f0fdf4;
    border-color: #22c55e;
}

.bera-resumen-val {
    font-size: 18px;
    font-weight: 700;
    color: #0f3d5e;
}
.bera-resumen-lbl {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}
.bera-resumen-ref {
    font-size: 11px;
    color: #94a3b8;
}

/* ══ INTERPRETACIÓN ════════════════════════════════════════ */
.bera-umbral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 6px;
}

.bera-umbral-input {
    display: block;
    width: 100%;
    border: 1.5px solid #c5d9e8;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    color: #0f3d5e;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bera-umbral-input:focus {
    outline: none;
    border-color: #0f7a9d;
    box-shadow: 0 0 0 3px rgba(15,122,157,0.12);
}

.bera-select {
    display: block;
    width: 100%;
    border: 1.5px solid #c5d9e8;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: #0f3d5e;
    box-sizing: border-box;
    transition: border-color 0.15s;
    appearance: auto;
}
.bera-select:focus {
    outline: none;
    border-color: #0f7a9d;
    box-shadow: 0 0 0 3px rgba(15,122,157,0.12);
}

/* ══ PÁGINA DE RESULTADO BERA ══════════════════════════════ */

.bera-resultado-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.bera-resultado-titulo h1 {
    font-size: 24px;
    color: #0f3d5e;
    margin-bottom: 4px;
}

.bera-resultado-titulo p {
    font-size: 15px;
    color: #6b7280;
}

.bera-score-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f3d5e 0%, #1e5f85 100%);
    color: #fff;
    border-radius: 16px;
    padding: 18px 28px;
    min-width: 130px;
    text-align: center;
}

.bera-score-number {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.bera-score-label {
    font-size: 12px;
    opacity: 0.75;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.bera-score-ring.excelente { background: linear-gradient(135deg, #065f46 0%, #047857 100%); }
.bera-score-ring.bien      { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }
.bera-score-ring.regular   { background: linear-gradient(135deg, #92400e 0%, #b45309 100%); }
.bera-score-ring.bajo      { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%); }

.bera-retro-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 22px;
    font-size: 15px;
    color: #0c4a6e;
    line-height: 1.6;
}

.bera-resultado-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

.bera-resultado-oido {
    background: #fff;
    border: 1.5px solid #e0ecf4;
    border-radius: 12px;
    overflow: hidden;
}

.bera-resultado-oido-header {
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bera-resultado-oido-header.od {
    background: #fee2e2;
    color: #7f1d1d;
    border-bottom: 2px solid #dc2626;
}
.bera-resultado-oido-header.oi {
    background: #dbeafe;
    color: #1e3a8a;
    border-bottom: 2px solid #2563eb;
}

.bera-cmp-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bera-cmp-tabla th {
    background: #f8fafc;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid #e0ecf4;
}

.bera-cmp-tabla td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

.bera-cmp-tabla tr:last-child td { border-bottom: none; }

.bera-cmp-row-separador td {
    background: #f8fafc;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 5px 12px;
    text-transform: uppercase;
}

td.ok-val  { color: #166534; font-weight: 600; }
td.err-val { color: #991b1b; font-weight: 600; }
td.nd-val  { color: #9ca3af; }

.bera-umbral-cmp {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.bera-umbral-cmp-card {
    flex: 1;
    min-width: 160px;
    background: #fff;
    border: 1.5px solid #e0ecf4;
    border-radius: 12px;
    padding: 14px 16px;
}

.bera-umbral-cmp-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #374151;
}

.bera-umbral-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 4px 0;
}

.bera-umbral-row span:first-child { color: #6b7280; font-size: 13px; }
.bera-umbral-row strong { font-size: 18px; color: #0f3d5e; }
.bera-umbral-row .umbral-ok  { color: #166534; }
.bera-umbral-row .umbral-err { color: #991b1b; }

.bera-interp-resultado {
    background: #fff;
    border: 1.5px solid #e0ecf4;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 22px;
}

.bera-interp-resultado h3 {
    font-size: 17px;
    color: #0f3d5e;
    margin-bottom: 12px;
}

.bera-interp-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 14px;
}

.bera-interp-row .bera-lbl {
    min-width: 120px;
    color: #6b7280;
    font-size: 13px;
    padding-top: 1px;
}

.bera-interp-row .bera-val {
    font-weight: 600;
    color: #0f3d5e;
    line-height: 1.4;
}

.bera-interp-row.obs .bera-val {
    color: #374151;
    font-weight: 400;
    white-space: pre-wrap;
}

.bera-ref-section {
    background: #f8fafc;
    border: 1px solid #e0ecf4;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 22px;
}

.bera-ref-section h3 {
    font-size: 17px;
    color: #0f3d5e;
    margin-bottom: 14px;
}

.bera-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.bera-ref-card {
    background: #fff;
    border: 1px solid #e0ecf4;
    border-radius: 8px;
    padding: 12px 14px;
}

.bera-ref-card h5 {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.bera-ref-card ul {
    margin: 0;
    padding-left: 16px;
    list-style: disc;
}

.bera-ref-card li {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

.bera-patron-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.bera-patron-card {
    background: #fff;
    border-left: 3px solid #dce9f3;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
}

.bera-patron-card.normal    { border-color: #22c55e; }
.bera-patron-card.conductiva { border-color: #f59e0b; }
.bera-patron-card.coclear    { border-color: #3b82f6; }
.bera-patron-card.retrococlear { border-color: #dc2626; }
.bera-patron-card.neuropatia  { border-color: #8b5cf6; }

.bera-patron-card h5 {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

.bera-patron-card p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.bera-botones-resultado {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 24px;
}

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 900px) {
    .bera-workspace {
        grid-template-columns: 1fr;
    }
    .bera-controls-panel {
        border-right: none;
        border-bottom: 2px solid #10202e;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .bera-selector-row { flex: 1; min-width: 120px; }
    .bera-resultado-grid { grid-template-columns: 1fr; }
    .bera-umbral-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .bera-intens-grid { grid-template-columns: repeat(4, 1fr); }
    .bera-mark-toolbar { gap: 6px; }
    .bera-resumen-grid { flex-direction: column; }
    .bera-resultado-header { flex-direction: column; align-items: flex-start; }
}

/* "No se encontró umbral" — checkbox bajo el input de umbral BERA */
.bera-nr-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
}
.bera-nr-check input { cursor: pointer; }
.bera-umbral-input:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }