/* ============================================================================
   facturacion.css — Hoja de estilos GLOBAL de Vertical Presidiaria (overrides propios)
   ----------------------------------------------------------------------------
   Orden de carga obligatorio (constitución V):
     1. lib/modernize/css/styles.css      (plantilla Modernize, de terceros)
     2. lib/sisga/sisga-global.css        (overrides comunes de SISGA)
     3. css/facturacion.css               (este archivo: solo lo propio)
   - NUNCA se edita styles.css ni sisga-global.css aquí: se sobrescribe en cascada.
   - Cada ajuste va con un comentario de sección que explique su motivo.
   ============================================================================ */

/* ── Layout base (igual que Mirador: copiado del _MasterGeneral de SAGA) ── */
body {
    font-size: 14px;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.body-wrapper {
    flex: 1;
}

.page-wrapper .body-wrapper > .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
}

.sidebar-nav .ti {
    font-size: 18px;
}

.topbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Iconos dentro de un control no interceptan el clic (guía 07, gotcha 1). */
.btn .ti, a .ti, button .ti, label .ti {
    pointer-events: none;
}

/* ── Marca, avatar e iconos grandes ── */
.facturacion-marca {
    letter-spacing: .01em;
}

.facturacion-marca-icono {
    width: 34px;
    height: 34px;
    font-size: 20px;
}

.facturacion-acceso-icono {
    width: 48px;
    height: 48px;
    font-size: 26px;
}

.facturacion-avatar {
    width: 35px;
    height: 35px;
    font-size: 16px;
}

.facturacion-avatar-grande {
    width: 80px;
    height: 80px;
    font-size: 32px;
}

.facturacion-page-header-img {
    max-height: 80px;
}

.facturacion-icono-grande {
    font-size: 64px;
    line-height: 1;
}

/* ── Acceso (login): fondo con degradado del tema y tarjeta centrada ── */
.facturacion-acceso-tarjeta {
    max-width: 440px;
    margin: 0 auto;
}

/* ── Formularios: el resumen de validación vacío no debe pintar una alerta ── */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

/* ── Usuarios: la contraseña temporal no debe ocupar todo el ancho ── */
.facturacion-clave-temporal {
    max-width: 22rem;
}

/* ── Enlaces de acción sin href (evitan javascript: bloqueado por la CSP) ── */
.topbar a[role="button"], .left-sidebar a[role="button"] {
    cursor: pointer;
}

/* ── Semáforo: borde izquierdo con el color del nivel (verde, ámbar, rojo, gris) ── */
.facturacion-semaforo-success { border-left: 4px solid var(--bs-success) !important; }
.facturacion-semaforo-warning { border-left: 4px solid var(--bs-warning) !important; }
.facturacion-semaforo-danger { border-left: 4px solid var(--bs-danger) !important; }
.facturacion-semaforo-secondary { border-left: 4px solid var(--bs-secondary) !important; }
.facturacion-semaforo-info { border-left: 4px solid var(--bs-info) !important; }

/* Barras de ocupación (feature 010); el ancho lo pone barras.js / patios.js desde data-ancho. */
.facturacion-barra-ocupacion { height: 0.6rem; }
.facturacion-barra-mini { height: 0.35rem; min-width: 5rem; }
.facturacion-icono-cabecera {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2.25rem;
}

/* Paso de la línea de fases del tratamiento (feature 008). */
.facturacion-paso {
    width: 1.75rem;
    height: 1.75rem;
    font-weight: 600;
}

/* ── PPL: fotos, búsqueda global, lista de definiciones de la ficha ── */
.facturacion-foto-mini {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.facturacion-foto-ficha {
    width: 128px;
    height: 128px;
    object-fit: cover;
}

.facturacion-foto-previa {
    max-width: 160px;
    max-height: 200px;
    object-fit: cover;
}

.facturacion-busqueda-global {
    width: 320px;
}

.facturacion-dl dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.facturacion-dl dd {
    margin-bottom: .35rem;
}

.facturacion-texto-corto {
    max-width: 36rem;
}

/* ── Contador de condena (anillos SVG, estilo TimeCircles) ── */
.facturacion-anillos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.facturacion-anillo {
    position: relative;
    width: 104px;
    text-align: center;
}

.facturacion-contador-grande .facturacion-anillo {
    width: 150px;
}

.facturacion-anillo svg {
    display: block;
    width: 100%;
    height: auto;
}

.facturacion-anillo-fondo {
    fill: none;
    stroke: var(--bs-border-color);
    stroke-width: 6;
}

.facturacion-anillo-arco {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}

.facturacion-anillo-anios { stroke: var(--bs-primary); }
.facturacion-anillo-meses { stroke: var(--bs-info); }
.facturacion-anillo-dias { stroke: var(--bs-success); }
.facturacion-anillo-horas { stroke: var(--bs-warning); }
.facturacion-anillo-minutos { stroke: var(--bs-danger); }
.facturacion-anillo-segundos { stroke: var(--bs-secondary); }

.facturacion-anillo-numero {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.facturacion-contador-grande .facturacion-anillo-numero {
    font-size: 2.6rem;
}

.facturacion-anillo-rotulo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    margin-top: .15rem;
}

.facturacion-contador-grande .facturacion-anillo-rotulo {
    font-size: .9rem;
}

.facturacion-contador-estado {
    text-align: center;
    font-weight: 600;
    margin-top: .75rem;
}

.facturacion-contador-cumplida .facturacion-contador-estado {
    color: var(--bs-danger);
    font-size: 1.2rem;
}

.facturacion-contador-pie {
    text-align: center;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    margin-top: .35rem;
}

/* Pantalla completa (proyección) */
.facturacion-pantalla-contador {
    background: #0b1220;
    min-height: 100vh;
}

.facturacion-pantalla-contenido {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.facturacion-pantalla-nombre {
    font-size: clamp(1.6rem, 4vw, 3.2rem);
}

.facturacion-pantalla-contador .facturacion-anillo-fondo {
    stroke: rgba(255, 255, 255, .15);
}

.facturacion-pantalla-contador .facturacion-anillo-numero,
.facturacion-pantalla-contador .facturacion-contador-estado {
    color: #fff;
}

.facturacion-pantalla-contador .facturacion-anillo-rotulo,
.facturacion-pantalla-contador .facturacion-contador-pie {
    color: rgba(255, 255, 255, .7);
}

@media (min-width: 1200px) {
    .facturacion-pantalla-contador .facturacion-anillo { width: 190px; }
    .facturacion-pantalla-contador .facturacion-anillo-numero { font-size: 3.4rem; }
}

/* ── Portada: tarjetas de centro con semáforo y barra de ocupación ── */
.facturacion-tarjeta-centro {
    transition: transform .15s ease;
}

.facturacion-tarjeta-centro:hover {
    transform: translateY(-2px);
}

.facturacion-progreso {
    height: 8px;
}

.facturacion-progreso-barra {
    width: 0;
    transition: width .4s ease;
}

/* ── Bitácora: el detalle largo se corta con elipsis y se lee completo al pasar el ratón ── */
.facturacion-detalle {
    max-width: 420px;
    white-space: normal;
    word-break: break-word;
}

/* ── Tablas sin DataTables (respaldo de tablas.js): cabeceras clicables ── */
th.facturacion-ordenable {
    cursor: pointer;
    user-select: none;
}

th.facturacion-ordenable[aria-sort="ascending"]::after {
    content: " \25B2";
    font-size: .7em;
}

th.facturacion-ordenable[aria-sort="descending"]::after {
    content: " \25BC";
    font-size: .7em;
}

/* Pestañas de la ficha 360 (feature 013): ocho pestañas caben en una línea en escritorio. */
@media (min-width: 992px) {
    .facturacion-pestanas {
        flex-wrap: nowrap;
    }

    .facturacion-pestanas .nav-link {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .875rem;
        white-space: nowrap;
    }
}

/* Vista previa del resumen por correo (feature 014). */
.facturacion-vista-correo {
    height: 520px;
    background: #F4F7FB;
}

/* Gráficos navegables del tablero (feature 015): el cursor indica que se puede abrir el detalle. */
.facturacion-grafica-navegable .apexcharts-bar-area,
.facturacion-grafica-navegable .apexcharts-pie-area,
.facturacion-grafica-navegable .apexcharts-marker {
    cursor: pointer;
}

/* Etiquetas de filtros activos del explorador de PPL. */
.facturacion-filtro:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Controles de DataTables dentro de una card sin relleno (card-body p-0): margen lateral para que no queden pegados
   al borde. La fila de la tabla (.dt-row) no se toca. */
.card-body.p-0 .dataTables_wrapper > .row:not(.dt-row) {
    margin: 0;
    padding: 0.75rem 1rem 0;
}

.card-body.p-0 .dataTables_wrapper > .row:not(.dt-row):last-child {
    padding-bottom: 0.75rem;
}

/* Carrito del contrato (Views/Contratos/Nuevo.cshtml, patrón eco-checkout de Modernize). */
.facturacion-producto { transition: border-color .15s ease, background-color .15s ease; }
.facturacion-producto:hover, .facturacion-producto:focus-visible { border-color: var(--bs-primary) !important; background-color: var(--bs-primary-bg-subtle); }
.facturacion-cantidad { width: 9.5rem; }
.facturacion-cantidad .form-control { -moz-appearance: textfield; }
.facturacion-cantidad .form-control::-webkit-outer-spin-button,
.facturacion-cantidad .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.facturacion-valor { width: 9rem; }
.facturacion-vigencia { width: 9.5rem; }
[data-modulo] .facturacion-vigencia { width: 15rem; }
.facturacion-modulos { max-height: 22rem; overflow-y: auto; }
.facturacion-grafica { min-height: 240px; }

/* Modo oscuro: filas alternas con contraste suficiente (la franja clara por defecto deja el texto gris sobre gris). */
[data-bs-theme=dark] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255, 255, 255, 0.03);
    color: var(--bs-body-color);
}
/* Avisos en SISGA (014): lista de colegios con desplazamiento y vista previa fija junto al formulario. */
.facturacion-lista-colegios {
    max-height: 260px;
}

.facturacion-vista-previa {
    top: 90px;
}

.facturacion-texto-aviso {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Encuestas (014, corte C): barras de distribución con etiqueta y cifra de ancho fijo. */
.facturacion-etiqueta-barra {
    width: 12rem;
    flex-shrink: 0;
}

.facturacion-cifra-barra {
    width: 3rem;
    flex-shrink: 0;
}