/* ============================================================
   HISTORIAL - detalle del mes
   La vista la construye historial.js en tiempo de ejecucion. Antes
   traia los estilos en linea y los colores escritos a mano, heredados
   de cuando era un modal de 1500px. Ahora usa el mismo idioma que el
   resto del sistema: encabezado estandar, tarjeta, y colores en un
   solo lugar.

   Sin alto fijo ni scroll anidado: el scroll es el de la pagina.
   ============================================================ */

/* Controles del mes (pills + buscador + acciones) */
.hist-controles {
    padding: 0 0 1rem 0;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 1rem;
}

.hist-pills {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Pills de estadisticas: los colores quedan definidos AQUI y no repetidos
   en 5 bloques de estilo en linea dentro del JS. */
.hist-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 140px;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--pill-borde, var(--gray-200));
    background: var(--pill-fondo, var(--gray-50));
}

.hist-pill .hist-pill-icono {
    font-size: 1.2rem;
    color: var(--pill-fuerte, var(--gray-600));
}

.hist-pill .hist-pill-rotulo {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pill-texto, var(--gray-600));
}

.hist-pill .hist-pill-valor {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pill-fuerte, var(--gray-900));
}

.hist-pill .hist-pill-valor span {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.8;
}

.hist-pill-total  { --pill-fondo: var(--gray-100); --pill-borde: var(--gray-200); --pill-texto: var(--gray-600); --pill-fuerte: var(--gray-900); }
.hist-pill-ok     { --pill-fondo: #ecfdf5; --pill-borde: #d1fae5; --pill-texto: #065f46; --pill-fuerte: #047857; }
.hist-pill-pend   { --pill-fondo: #fffbeb; --pill-borde: #fde68a; --pill-texto: #92400e; --pill-fuerte: #b45309; }
.hist-pill-fondos { --pill-fondo: #fff7ed; --pill-borde: #ffedd5; --pill-texto: #ea580c; --pill-fuerte: var(--warning); }
.hist-pill-lic    { --pill-fondo: #fef2f2; --pill-borde: #fee2e2; --pill-texto: #9f1239; --pill-fuerte: #b91c1c; }

/* Tabla: sin contenedor con scroll propio, la pagina es la que desplaza */
.hist-tabla {
    background: #ffffff;
}

.hist-tabla table {
    width: 100%;
    font-size: 0.85rem;
    margin: 0;
}

/* Pie: mismo patron que el resto (informacion a la izquierda, accion a la derecha) */
.hist-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0 0 0;
    margin-top: 1rem;
    border-top: 1px solid var(--gray-100);
    color: var(--gray-500);
    font-size: 0.85rem;
}

/* La tarjeta del detalle no debe recortar su contenido */
.hist-detalle {
    overflow: visible;
}

/* Titulo del mes + badge de estado, a la izquierda del encabezado */
.vista-cabecera-titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vista-cabecera-titulo .section-title {
    margin: 0;
}

/* ---- Fila de filtros del detalle del mes ----
   Antes: 6 propiedades en linea en el buscador y el :focus metido dentro
   de onfocus/onblur. Ahora todo en la hoja. */
.hist-filtros {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.hist-buscador {
    position: relative;
    flex: 2;
    min-width: 250px;
}

.hist-buscador-icono {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 5;
}

.hist-input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    background: var(--gray-50);
    transition: var(--transition);
}

.hist-input:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    outline: none;
}

.hist-select {
    flex: 1;
    min-width: 160px;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    background: #ffffff;
    cursor: pointer;
}