/* ============================================================
   InformesIA — Estilos principales
   ============================================================ */

/* --- General --- */
body {
    background-color: #f4f6f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.container-fluid {
    flex: 1;
}

/* --- Navbar --- */
.navbar-dark.bg-primary {
    background-color: #1a5276 !important;
}

.logo-clinica {
    object-fit: contain;
    background: white;
    padding: 2px 6px;
}

.logo-dev {
    object-fit: contain;
    background: white;
    padding: 4px 8px;
    border-radius: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.logo-dev:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* --- Cards --- */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* --- Tabla de turnos --- */
.tabla-turnos th {
    background-color: #1a5276;
    color: white;
    font-size: 0.82rem;
    white-space: nowrap;
}

.tabla-turnos td {
    font-size: 0.85rem;
    vertical-align: middle;
}

.tabla-turnos tr:hover {
    background-color: #eaf3fb;
}

/* --- Color de fondo de la celda Paciente según orden_os4 --- */
/* !important para que sobrescriba el hover de la fila */
.tabla-turnos td.celda-orden-p {
    background-color: #cfe2ff !important; /* azul claro */
}
.tabla-turnos td.celda-orden-v {
    background-color: #ffe5b4 !important; /* naranja claro */
}
.tabla-turnos td.celda-practica-cero {
    background-color: #d6d6d6 !important; /* gris */
}

/* --- Botonera de turnos --- */
/* Informar: botón unificado (NP + Dictar + Tipear). Color azul (heredado
   del antiguo "Dictar"). El modal permite combinar prearmado + dictado
   + tipeo + IA en un solo flujo. */
.btn-informar {
    background-color: #2980b9;
    color: white;
    border: none;
    font-size: 0.75rem;
    padding: 3px 8px;
}
.btn-informar:hover { background-color: #1a5276; color: white; }

.btn-imagenes {
    background-color: #8e44ad;
    color: white;
    border: none;
    font-size: 0.75rem;
    padding: 3px 8px;
}
.btn-imagenes:hover { background-color: #6c3483; color: white; }

/* Variante IMG.JPG: verde (modo dicom, visor propio de InformeIA) */
.btn-imagenes-dicom-jpg {
    background-color: #27ae60;
    color: white;
    border: none;
    font-size: 0.75rem;
    padding: 3px 8px;
}
.btn-imagenes-dicom-jpg:hover { background-color: #1e8449; color: white; }
.btn-imagenes-dicom-jpg:disabled, .btn-imagenes-dicom-jpg.disabled {
    background-color: #27ae60;
    color: white;
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: line-through;
    box-shadow: none;
}
.btn-imagenes-dicom-jpg:disabled:hover, .btn-imagenes-dicom-jpg.disabled:hover {
    background-color: #27ae60;
}

/* Variante JPG: violeta más claro / lila */
.btn-imagenes-jpg {
    background-color: #af7ac5;
    color: white;
    border: none;
    font-size: 0.75rem;
    padding: 3px 8px;
}
.btn-imagenes-jpg:hover { background-color: #884ea0; color: white; }
.btn-imagenes-jpg:disabled, .btn-imagenes-jpg.disabled {
    background-color: #af7ac5;
    color: white;
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: line-through;
    box-shadow: none;
}
.btn-imagenes-jpg:disabled:hover, .btn-imagenes-jpg.disabled:hover {
    background-color: #af7ac5;
}

/* Estado disabled de los botones de acción de la grilla:
   mantienen su color pero con opacidad, tachado y cursor not-allowed
   para que sea evidente que no se pueden usar (ej: cuando practica=0). */
.btn-informar:disabled, .btn-informar.disabled,
.btn-imagenes:disabled, .btn-imagenes.disabled {
    color: white;
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: line-through;
    box-shadow: none;
}
.btn-informar:disabled,  .btn-informar.disabled  { background-color: #2980b9; }
.btn-imagenes:disabled,  .btn-imagenes.disabled  { background-color: #8e44ad; }

/* Hover sin cambio cuando están disabled */
.btn-informar:disabled:hover,  .btn-informar.disabled:hover  { background-color: #2980b9; }
.btn-imagenes:disabled:hover,  .btn-imagenes.disabled:hover  { background-color: #8e44ad; }

.btn-informe {
    background-color: #ff7b00;   /* naranja vivo */
    color: white;
    border: none;
    font-size: 0.75rem;
    padding: 3px 8px;
}
.btn-informe:hover { background-color: #e66f00; color: white; }

/* Informe ya firmado: tono más oscuro del mismo naranja + borde
   dorado fino para diferenciar del "no firmado" sin cambiar de paleta. */
.btn-informe.firmado {
    background-color: #b35600;
    box-shadow: inset 0 0 0 1px #d4af37;
}
.btn-informe.firmado:hover { background-color: #8a4200; color: white; }

/* Botón "Subir imágenes" (perfil técnico): publica la previa en la HC.
   Amarillo oscuro / mostaza para diferenciarlo del naranja del informe. */
.btn-subir-imagenes {
    background-color: #c8990a;
    color: white;
    border: none;
    font-size: 0.75rem;
    padding: 3px 8px;
}
.btn-subir-imagenes:hover { background-color: #a87f08; color: white; }
.btn-subir-imagenes:disabled, .btn-subir-imagenes.disabled {
    background-color: #c8990a;
    color: white;
    opacity: 0.55;
    cursor: not-allowed;
    text-decoration: line-through;
    box-shadow: none;
}
.btn-subir-imagenes:disabled:hover, .btn-subir-imagenes.disabled:hover {
    background-color: #c8990a;
}

/* --- Panel de dictado / tipeo --- */
.panel-informe {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.textarea-informe {
    min-height: 180px;
    font-size: 0.95rem;
    border-radius: 8px;
    resize: vertical;
}

/* Botón micrófono inline (dentro del modal "Informar"): chico, al lado
   del select de prearmados. Rojo cuando inactivo, rojo más oscuro
   pulsando cuando está grabando. */
.btn-mic-inline {
    background-color: #c0392b;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-mic-inline:hover {
    background-color: #a93226;
    color: white;
}
.btn-mic-inline.grabando {
    background-color: #922b21;
    box-shadow: 0 0 0 4px rgba(192,57,43,0.25);
    animation: pulso 1s infinite;
}

@keyframes pulso {
    0%   { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); }
    70%  { box-shadow: 0 0 0 12px rgba(192,57,43,0); }
    100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}

.btn-procesar-ia {
    background-color: #1a5276;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-procesar-ia:hover {
    background-color: #154360;
    color: white;
}

.texto-ia-resultado {
    background-color: #eaf3fb;
    border-left: 4px solid #2980b9;
    border-radius: 0 8px 8px 0;
    padding: 15px;
    min-height: 100px;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

/* --- Login --- */
.login-card {
    max-width: 480px;
    margin: 80px auto;
}

.login-header {
    background-color: #1a5276;
    border-radius: 12px 12px 0 0;
    padding: 24px;
    text-align: center;
}

/* --- Footer --- */
.footer {
    font-size: 0.82rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .tabla-turnos {
        font-size: 0.78rem;
    }
    .btn-informar, .btn-imagenes, .btn-imagenes-jpg, .btn-imagenes-dicom-jpg, .btn-informe, .btn-subir-imagenes {
        font-size: 0.68rem;
        padding: 2px 5px;
    }
}

/* --- Badge HC SAPREM (estado de subida de informe a HC) --- */
.hc-badge {
    display: none;          /* JS lo muestra cuando aplica */
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.hc-badge.hc-ok          { display: inline-block; background:#198754; color:#fff; }
.hc-badge.hc-pendiente   { display: inline-block; background:#fd7e14; color:#fff; }
.hc-badge.hc-falla       { display: inline-block; background:#dc3545; color:#fff; }