/* =====================================================
   UI COMPONENTS — SISTEMA ADMIN (BASE ESTABLE)
   Compatible con UI MODERN V6
   ===================================================== */

/* ===============================
   VARIABLES
================================ */

:root{
    --text: #1F2937;
    --muted: #6B7280;
    --line: #E5E7EB;
    --soft: #F7F8FA;
    --soft2: #F1F3F5;

    --green: #1F5F3F;
    --orange: #FF7F00;
    --danger: #B42318;
}

/* ===============================
   WRAPPER
================================ */

.module-body{
    background:#FFFFFF;
    padding:40px;
    padding-bottom:40px;
}

.module-wrapper{
    max-width:1200px;
    margin:0 auto;
}

/* ===============================
   HEADER
================================ */

.module-header{
    margin-bottom:28px;
    padding-left:14px;
    border-left:4px solid var(--green);
}

.module-header h1{
    margin:0;
    font-size:22px;
    font-weight:650;
    color:var(--text);
}

.module-subtitle{
    margin-top:6px;
    font-size:14px;
    color:var(--muted);
}

/* ===============================
   HEADER FLEX CON ACCIONES
================================ */

.module-header-flex{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.module-header-flex .header-content{
    flex:1;
}

.module-header-flex .header-actions{
    display:flex;
    align-items:center;
}

/* Responsive */

@media(max-width:768px){

    .module-header-flex{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .module-header-flex .header-actions{
        align-self:flex-end;
    }

}

/* ===============================
   PANEL CARD
================================ */

.panel-card{
    background:#FFFFFF;
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px;
    box-shadow:0 10px 28px rgba(0,0,0,.05);
}

/* ===============================
   GRID BASE
================================ */

.module-grid{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:40px;
    align-items:start;
}

@media(max-width:900px){

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

}

/* ===============================
   GRID 2 COLUMNAS
================================ */

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

@media(max-width:900px){

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

}

/* ===============================
   FORM FIELDS
================================ */

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:22px;
}

.field label{
    font-size:14px;
    font-weight:600;
    color:#374151;
    margin:0;
}

.field input,
.field select{
    width:100%;
    height:44px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #D1D5DB;
    font-size:14px;
    background:#FFFFFF;
    transition:.2s;
    box-sizing:border-box;
}

.field input:focus,
.field select:focus{
    outline:none;
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(255,127,0,.15);
}

/* ===============================
   BOTONES
================================ */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    padding:0 20px;
    border-radius:10px;
    border:1px solid transparent;
    font-weight:650;
    text-decoration:none;
    cursor:pointer;
    transition:.18s;
    font-size:14px;
}

.btn-primary{
    background:var(--orange);
    color:#FFFFFF;
}

.btn-primary:hover{
    background:#e46f00;
    transform:translateY(-1px);
}

.btn-ghost{
    background:#FFFFFF;
    color:var(--text);
    border-color:var(--line);
}

.btn-ghost:hover{
    background:var(--soft2);
}

.btn-danger{
    background:#FFFFFF;
    color:var(--danger);
    border-color:rgba(180,35,24,.35);
}

.btn-danger:hover{
    background:rgba(180,35,24,.10);
    border-color:rgba(180,35,24,.55);
}

.btn-sm{
    height:36px;
    padding:0 16px;
    font-size:13px;
}

.btn-xs{
    height:30px;
    padding:0 12px;
    font-size:12px;
}

/* ===============================
   BOTÓN VOLVER
================================ */

.btn-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#1F5F3F;
    border:1px solid #1F5F3F;
    color:#FFFFFF;
    padding:8px 18px;
    border-radius:10px;
    font-weight:600;
    font-size:13px;
    text-decoration:none;
    transition:.2s;
}

.btn-back:hover{
    background:#174C32;
}

/* ===============================
   TABLAS BASE
================================ */

.table-wrap{
    overflow:auto;
    border-radius:12px;
    border:1px solid var(--line);
}

.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    min-width:760px;
}

.table thead th{
    text-align:left;
    padding:12px 14px;
    background:var(--soft2);
    color:var(--text);
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid var(--line);
}

.table tbody td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    font-size:14px;
    color:var(--text);
}

.table tbody tr:hover{
    background:#FAFBFC;
}

.td-strong{
    font-weight:700;
}

.td-empty{
    padding:18px 14px;
    color:var(--muted);
    text-align:center;
}

/* ===============================
   TABLA RESUMEN
================================ */

.table-summary{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

.table-summary thead th{
    padding:14px 12px;
    background:var(--soft2);
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid var(--line);
}

.table-summary tbody td{
    padding:14px 12px;
    border-bottom:1px solid var(--line);
    font-size:14px;
}

.table-summary tbody tr:hover{
    background:#FAFBFC;
}

.col-small{
    width:80px;
    font-weight:600;
}

.col-name{
    min-width:240px;
}

.col-date{
    width:120px;
}

.col-number{
    width:110px;
    font-weight:600;
    text-align:center;
}

/* ===============================
   UTILIDADES
================================ */

.text-center{ text-align:center; }
.text-left{ text-align:left; }
.fw-600{ font-weight:600; }
.mt-4{ margin-top:28px; }
.mb-4{ margin-bottom:28px; }
.mb-3{ margin-bottom:18px; }

/* ===============================
   ACTION BAR
================================ */

.actions-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px;
    gap:16px;
}

.actions-left{
    display:flex;
    align-items:center;
}

.actions-right{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ===============================
   LOADER OVERLAY
================================ */

.loader-overlay{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(2px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:80px;
    z-index:2000;
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}

.loader-overlay.active{
    opacity:1;
    pointer-events:auto;
}

.loader-spinner{
    width:48px;
    height:48px;
    border:4px solid #E5E7EB;
    border-top:4px solid var(--orange);
    border-radius:50%;
    animation:spin .8s linear infinite;
    margin-bottom:16px;
}

.loader-text{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    letter-spacing:.3px;
}

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

/* ===============================
   SYSTEM MESSAGES
================================ */

.system-message{
    padding:14px 16px;
    border-radius:10px;
    font-size:14px;
    margin-bottom:24px;
    font-weight:500;
    transition:opacity .4s;
}

/* éxito */

.system-success{
    background:#ECFDF5;
    border:1px solid #10B981;
    color:#065F46;
}

/* error */

.system-danger{
    background:#FEF2F2;
    border:1px solid #EF4444;
    color:#7F1D1D;
}

/* ===============================
   ESTADO TABLA OPERATIVA
================================ */

.status-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    line-height:1;
}

.status-ok{
    background:#ECFDF5;
    border:1px solid #10B981;
    color:#065F46;
}

.status-error{
    background:#FEF2F2;
    border:1px solid #EF4444;
    color:#7F1D1D;
}

.status-detail{
    font-size:12px;
    color:#6B7280;
    margin-top:4px;
}

.row-error{
    background:#FFF5F5;
}

/* =====================================================
   MODULO ASOCIADO — RESUMEN INGRESO TIQUETES (3 COL)
   Línea Base vigente asociado_ingresar_tiquetes2.php
   Reglas: fondo 100% blanco; único color = badge válido/inválido
===================================================== */

/* ---------- Resumen superior (blanco) ---------- */

.summary-card{
    background:#FFFFFF;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:16px;
}

.summary-bar{
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    align-items:center;
    justify-content:space-between;
}

.summary-left{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    align-items:center;
}

.summary-right{
    display:flex;
    gap:14px;
    align-items:center;
}

.summary-item{
    font-size:14px;
    color:var(--text);
}

.summary-label{
    color:var(--muted);
    font-weight:600;
    margin-right:6px;
}

.summary-count{
    font-size:14px;
    color:var(--text);
}

.summary-count b{
    font-weight:700;
}

/* ---------- Grid resultados 3 columnas (17+17+16) ---------- */

.results-grid-3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    align-items:start;
}

@media(max-width:1100px){
    .results-grid-3{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:780px){
    .results-grid-3{
        grid-template-columns:1fr;
    }
}

/* Scoped: ajustar tabla para operar en 3 columnas sin forzar ancho */
.results-grid-3 .table{
    min-width:0;
}

.results-grid-3 .table thead th,
.results-grid-3 .table tbody td{
    padding:8px 10px;
}

/* Encabezado blanco (no gris) */
.results-grid-3 .table thead th{
    background:#FFFFFF;
}

/* Hover blanco (sin tintes) */
.results-grid-3 .table tbody tr:hover{
    background:#FFFFFF;
}

/* Registro más compacto */
.results-grid-3 .col-reg{
    width:70px;
}

/* ---------- Badges (único elemento con color) ---------- */

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

/* Válido */
.status-ok{
    background:#ECFDF5;
    border:1px solid #10B981;
    color:#065F46;
}

/* Inválido */
.status-error{
    background:#FEF2F2;
    border:1px solid #EF4444;
    color:#7F1D1D;
}