/* =====================================================
   KANDO EA — Estilos base del sistema
   Echavarría Abogados S.A.S. · Acceso Seguro S.A.S.
   Variables y clases reutilizables en todas las pantallas.
   ===================================================== */

:root {
    /* Paleta corporativa */
    --color-primario: #1B3A5C;   /* azul oscuro */
    --color-dorado:   #C9A84C;   /* dorado */
    --color-fondo:    #0F1923;   /* fondo oscuro base */
    --color-fondo-2:  #1a2a3a;   /* fondo oscuro gradiente */
    --color-texto:    #333333;   /* texto principal */
    --color-error:    #C0392B;   /* rojo de error */
    --color-exito:    #1E8449;   /* verde de éxito */

    /* Apoyos */
    --color-gris:        #6B7280;
    --color-gris-claro:  #9AA3AD;
    --color-borde:       #D8DEE6;
    --color-blanco:      #FFFFFF;

    --radio:   10px;
    --sombra:  0 12px 40px rgba(0, 0, 0, 0.25);
    --fuente:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: var(--fuente);
    color: var(--color-texto);
    line-height: 1.6;
    background: linear-gradient(135deg,
                var(--color-fondo) 0%, var(--color-fondo-2) 100%);
}

/* --- Layout de pantalla centrada (login y similares) --- */
.pantalla-centrada {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

/* =====================================================
   Tarjeta
   ===================================================== */
.tarjeta {
    background: var(--color-blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2.25rem;
}

/* =====================================================
   Logo de la marca
   ===================================================== */
.marca {
    text-align: center;
    margin-bottom: 2rem;
}

.marca h1 {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-primario);
}

.marca h1 .ea {
    color: var(--color-dorado);
}

.marca .subtitulo {
    margin-top: 0.4rem;
    color: var(--color-gris);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* =====================================================
   Formularios
   ===================================================== */
.campo-form {
    margin-bottom: 1.25rem;
}

.etiqueta {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 0.4rem;
}

/* Envoltura del input con ícono a la izquierda */
.campo-input {
    position: relative;
    display: flex;
    align-items: center;
}

.campo-input .icono {
    position: absolute;
    left: 0.85rem;
    font-size: 1.05rem;
    color: var(--color-gris-claro);
    pointer-events: none;
}

.campo-form input[type="email"],
.campo-form input[type="password"],
.campo-form input[type="text"] {
    width: 100%;
    padding: 0.75rem 0.9rem 0.75rem 2.6rem;
    font-size: 0.95rem;
    font-family: var(--fuente);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #FAFBFC;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-form input:focus {
    outline: none;
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
    background: var(--color-blanco);
}

/* Fila de opciones: recordar sesión + olvidó contraseña */
.fila-opciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.recordar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-gris);
    cursor: pointer;
    user-select: none;
}

.recordar input {
    accent-color: var(--color-primario);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.enlace {
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 500;
}

.enlace:hover {
    color: var(--color-dorado);
    text-decoration: underline;
}

/* =====================================================
   Botones
   ===================================================== */
.btn-primario,
.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.98rem;
    font-weight: 600;
    font-family: var(--fuente);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s, transform 0.05s;
}

.btn-primario {
    background: var(--color-primario);
    color: var(--color-blanco);
}

.btn-primario:hover {
    background: #16314d;
}

.btn-primario:active {
    transform: translateY(1px);
}

.btn-primario:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-secundario {
    background: transparent;
    color: var(--color-primario);
    border-color: var(--color-borde);
}

.btn-secundario:hover {
    border-color: var(--color-primario);
}

/* =====================================================
   Mensajes
   ===================================================== */
.mensaje-error,
.mensaje-exito {
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.mensaje-error {
    background: rgba(192, 57, 43, 0.1);
    border: 1px solid rgba(192, 57, 43, 0.35);
    color: var(--color-error);
}

.mensaje-exito {
    background: rgba(30, 132, 73, 0.1);
    border: 1px solid rgba(30, 132, 73, 0.35);
    color: var(--color-exito);
}

.oculto {
    display: none;
}

/* =====================================================
   Spinner (CSS puro)
   ===================================================== */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--color-blanco);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* =====================================================
   Footer de la tarjeta
   ===================================================== */
.pie-tarjeta {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-gris-claro);
}

/* =====================================================
   Responsive (login)
   ===================================================== */
@media (max-width: 480px) {
    .tarjeta {
        padding: 2rem 1.5rem;
    }

    .marca h1 {
        font-size: 2.2rem;
    }
}

/* =====================================================
   Layout de la aplicación (sidebar + contenido)
   Reutilizable en todas las pantallas internas.
   ===================================================== */
.app {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-fondo);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-marca {
    padding: 1.6rem 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-blanco);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-marca .ea {
    color: var(--color-dorado);
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    color: var(--color-gris-claro);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
}

.nav-item .icono {
    font-size: 1.1rem;
    width: 1.4rem;
    text-align: center;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-blanco);
}

.nav-item.activo {
    background: rgba(201, 168, 76, 0.12);
    color: var(--color-dorado);
}

.nav-item.deshabilitado {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.sidebar-pie {
    padding: 1.1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-pie .usuario-nombre {
    color: var(--color-blanco);
    font-size: 0.9rem;
    font-weight: 600;
}

.sidebar-pie .usuario-rol {
    color: var(--color-gris-claro);
    font-size: 0.78rem;
    text-transform: capitalize;
}

/* --- Contenido principal --- */
.contenido {
    flex: 1;
    min-width: 0;
    background: linear-gradient(135deg,
                var(--color-fondo) 0%, var(--color-fondo-2) 100%);
    display: flex;
    flex-direction: column;
}

/* --- Header superior --- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar .titulo-pagina {
    color: var(--color-blanco);
    font-size: 1.4rem;
    font-weight: 600;
}

.topbar .saludo {
    color: var(--color-gris-claro);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.topbar-acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-salir {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--fuente);
    color: var(--color-blanco);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s;
}

.btn-salir:hover {
    background: rgba(192, 57, 43, 0.25);
    border-color: rgba(192, 57, 43, 0.5);
}

/* --- Área de trabajo --- */
.area {
    padding: 2rem;
    flex: 1;
}

/* --- Tarjetas de métricas --- */
.metricas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.metrica {
    background: var(--color-blanco);
    border-radius: var(--radio);
    padding: 1.4rem 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-left: 4px solid var(--color-primario);
}

.metrica.azul   { border-left-color: var(--color-primario); }
.metrica.dorado { border-left-color: var(--color-dorado); }
.metrica.verde  { border-left-color: #2E7D32; }
.metrica.gris   { border-left-color: var(--color-gris); }

.metrica .icono {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 0.5rem;
}

.metrica .valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-texto);
}

.metrica.azul   .valor { color: var(--color-primario); }
.metrica.dorado .valor { color: #B8962F; }
.metrica.verde  .valor { color: #2E7D32; }
.metrica.gris   .valor { color: var(--color-gris); }

.metrica .etiqueta-metrica {
    color: var(--color-gris);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.3rem;
}

/* --- Secciones con tablas --- */
.seccion {
    background: var(--color-blanco);
    border-radius: var(--radio);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

.seccion-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabla th {
    text-align: left;
    padding: 0.65rem 0.75rem;
    color: var(--color-gris);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--color-borde);
}

.tabla td {
    padding: 0.75rem;
    color: var(--color-texto);
    border-bottom: 1px solid #EEF1F5;
}

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

.tabla tbody tr:hover {
    background: #F7F9FB;
}

.tabla .vacio {
    text-align: center;
    color: var(--color-gris-claro);
    padding: 1.5rem;
}

/* Etiquetas de estado */
.estado {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: capitalize;
}

.estado-activo         { background: #E3F2FD; color: #1565C0; }
.estado-en_revision    { background: #FFF8E1; color: #B8962F; }
.estado-listo_facturar { background: #E8F5E9; color: #2E7D32; }
.estado-facturado      { background: #EDE7F6; color: #5E35B1; }
.estado-cerrado        { background: #ECEFF1; color: #607D8B; }

/* Badges genéricos de activo / inactivo */
.estado-on  { background: #E8F5E9; color: #2E7D32; }
.estado-off { background: #ECEFF1; color: #607D8B; }

/* Campo de solo lectura dentro de un formulario */
.campo-form input:disabled {
    background: #EFF2F5;
    color: var(--color-gris);
    cursor: not-allowed;
}

/* Botón pequeño dentro de tablas */
.btn-mini {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--fuente);
    color: var(--color-blanco);
    background: var(--color-primario);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.18s;
}

.btn-mini:hover {
    background: #16314d;
}

/* Variantes del botón mini en tablas */
.btn-mini.peligro {
    background: var(--color-error);
}

.btn-mini.peligro:hover {
    background: #a93226;
}

.btn-mini.contorno {
    background: transparent;
    color: var(--color-primario);
    border: 1px solid var(--color-borde);
}

.btn-mini.contorno:hover {
    background: #F2F5F8;
    border-color: var(--color-primario);
}

.tabla .acciones {
    display: flex;
    gap: 0.5rem;
}

/* =====================================================
   Encabezado de sección (título + acción)
   ===================================================== */
.seccion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.seccion-header .titulo-seccion {
    color: var(--color-blanco);
    font-size: 1.4rem;
    font-weight: 600;
}

/* Botón dorado (acción principal de una sección) */
.btn-dorado {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: var(--fuente);
    color: var(--color-fondo);
    background: var(--color-dorado);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s, transform 0.05s;
}

.btn-dorado:hover {
    background: #d8b85a;
}

.btn-dorado:active {
    transform: translateY(1px);
}

/* =====================================================
   Campos: select y textarea (complemento de .campo-form)
   ===================================================== */
.campo-form select,
.campo-form textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    font-family: var(--fuente);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #FAFBFC;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-form textarea {
    resize: vertical;
    min-height: 72px;
}

.campo-form select:focus,
.campo-form textarea:focus {
    outline: none;
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
    background: var(--color-blanco);
}

/* Marca de campo obligatorio */
.etiqueta .req {
    color: var(--color-error);
}

/* Cuadrícula de dos columnas para formularios anchos */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.form-grid .ancho-total {
    grid-column: 1 / -1;
}

/* =====================================================
   Modal (overlay + tarjeta)
   ===================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 14, 22, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 100;
}

.modal-overlay.oculto {
    display: none;
}

.modal-tarjeta {
    background: var(--color-blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-borde);
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primario);
}

.modal-cerrar {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-gris);
    cursor: pointer;
}

.modal-cerrar:hover {
    color: var(--color-texto);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--color-borde);
}

.modal-footer .btn-primario,
.modal-footer .btn-secundario {
    width: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* =====================================================
   Filtros en línea (encabezado de sección)
   ===================================================== */
.filtros {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filtros select {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-family: var(--fuente);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-blanco);
    cursor: pointer;
}

.filtros select:focus {
    outline: none;
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

/* =====================================================
   Hitos dinámicos dentro del formulario de caso
   ===================================================== */
.hitos-seccion {
    border-top: 1px solid var(--color-borde);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.hitos-seccion .titulo-mini {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 0.75rem;
}

.hito-fila {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    align-items: center;
}

.hito-fila input {
    padding: 0.6rem 0.7rem;
    font-size: 0.9rem;
    font-family: var(--fuente);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #FAFBFC;
}

.hito-fila .hito-desc {
    flex: 1;
}

.hito-fila .hito-valor {
    width: 130px;
}

.hito-quitar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.1);
    color: var(--color-error);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.hito-quitar:hover {
    background: rgba(192, 57, 43, 0.2);
}

.btn-agregar-hito {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--fuente);
    color: var(--color-primario);
    background: transparent;
    border: 1px dashed var(--color-borde);
    border-radius: 8px;
    cursor: pointer;
}

.btn-agregar-hito:hover {
    border-color: var(--color-dorado);
    color: var(--color-dorado);
}

/* =====================================================
   Tarjeta de resumen del mes (seguimiento)
   ===================================================== */
.resumen-mes {
    background: var(--color-blanco);
    border-radius: var(--radio);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

.resumen-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.cifra .cifra-valor {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario);
    line-height: 1.1;
}

.cifra.dorado .cifra-valor {
    color: #B8962F;
}

.cifra .cifra-label {
    color: var(--color-gris);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.desglose {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #EEF1F5;
}

.desglose .desglose-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gris);
    margin-bottom: 0.75rem;
}

.desglose-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #F4F6F9;
}

.desglose-fila:last-child {
    border-bottom: none;
}

.desglose-fila .abogado {
    color: var(--color-texto);
    font-weight: 500;
}

.desglose-fila .horas {
    color: var(--color-gris);
}

/* Contador de caracteres del textarea */
.contador {
    font-size: 0.78rem;
    color: var(--color-gris-claro);
    text-align: right;
    margin-top: 0.3rem;
}

.contador.invalido {
    color: var(--color-error);
}

/* =====================================================
   Facturación: filas resaltadas e ítems de hito
   ===================================================== */

/* Fila con hitos listos para facturar: acento dorado a la izquierda */
.tabla tr.fila-lista td:first-child {
    border-left: 3px solid var(--color-dorado);
}

.tabla tr.fila-lista td {
    background: rgba(201, 168, 76, 0.06);
}

/* Botón verde dentro de tablas/panel (acción de facturar) */
.btn-mini.exito {
    background: #2E7D32;
}

.btn-mini.exito:hover {
    background: #256628;
}

/* Fila de totales en una tabla */
.tabla .fila-total td {
    font-weight: 700;
    color: var(--color-primario);
    border-top: 2px solid var(--color-borde);
    background: #F7F9FB;
}

/* Ítem de hito en el panel de detalle */
.hito-item {
    padding: 0.85rem;
    border: 1px solid #EEF1F5;
    border-left: 4px solid var(--color-gris-claro);
    border-radius: 8px;
    margin-bottom: 0.65rem;
}

.hito-item .hito-fila-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.hito-item .hito-nombre {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-texto);
}

.hito-item .hito-monto {
    font-size: 0.85rem;
    color: var(--color-gris);
}

.hito-item .hito-fecha {
    font-size: 0.8rem;
    color: var(--color-gris);
    margin-top: 0.3rem;
}

/* Acento por estado del hito */
.hito-item.hito-pendiente { border-left-color: var(--color-gris-claro); }
.hito-item.hito-listo     { border-left-color: var(--color-dorado); }
.hito-item.hito-facturado { border-left-color: #2E7D32; }

/* =====================================================
   Panel lateral de detalle (slide-in)
   ===================================================== */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 14, 22, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    z-index: 90;
}

.panel-overlay.abierto {
    opacity: 1;
    visibility: visible;
}

.panel-detalle {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 460px;
    max-width: 100%;
    background: var(--color-blanco);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 95;
    display: flex;
    flex-direction: column;
}

.panel-detalle.abierto {
    transform: translateX(0);
}

.panel-detalle .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-borde);
}

.panel-detalle .panel-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primario);
}

.panel-detalle .panel-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.panel-bloque {
    margin-bottom: 1.75rem;
}

.panel-bloque .bloque-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gris);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #EEF1F5;
}

/* Pares etiqueta/valor de la ficha del caso */
.dato {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

.dato .dato-label {
    color: var(--color-gris);
}

.dato .dato-valor {
    color: var(--color-texto);
    font-weight: 500;
    text-align: right;
}

/* Hito dentro del panel */
.panel-hito,
.panel-avance {
    padding: 0.75rem;
    border: 1px solid #EEF1F5;
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

.panel-hito .hito-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.panel-hito .hito-titulo {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-texto);
}

.panel-hito .hito-valor-txt {
    font-size: 0.85rem;
    color: var(--color-gris);
}

.panel-avance .avance-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-gris);
    margin-bottom: 0.3rem;
}

.panel-avance .avance-desc {
    font-size: 0.88rem;
    color: var(--color-texto);
}

.texto-vacio {
    color: var(--color-gris-claro);
    font-size: 0.88rem;
    font-style: italic;
}

/* =====================================================
   Responsive (app)
   ===================================================== */
@media (max-width: 1024px) {
    .metricas {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En tablet el sidebar se colapsa a una franja de íconos */
@media (max-width: 900px) {
    .sidebar {
        width: 64px;
    }

    .sidebar-marca {
        font-size: 0;
        padding: 1.4rem 0;
        text-align: center;
    }

    .sidebar-marca::before {
        content: "K";
        font-size: 1.4rem;
        color: var(--color-dorado);
    }

    .nav-item {
        justify-content: center;
        padding: 0.7rem 0;
    }

    .nav-item .texto {
        display: none;
    }

    .sidebar-pie {
        display: none;
    }
}

@media (max-width: 600px) {
    .area {
        padding: 1.25rem;
    }

    .metricas {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 1.1rem 1.25rem;
    }

    .topbar .saludo {
        display: none;
    }

    /* Tablas con scroll horizontal en pantallas estrechas */
    .seccion {
        overflow-x: auto;
    }

    /* El formulario de dos columnas pasa a una sola */
    .form-grid {
        grid-template-columns: 1fr;
    }
}