/* ============================================================
   JR GRANALLADO — DESIGN SYSTEM 2026
   Rojo / Negro / Blanco
   ============================================================ */

:root{
    --ui-primary:#E31B23 !important;
    --ui-primary-dark:#B90F17 !important;
    --ui-black:#111317 !important;
    --ui-black-2:#1B1E23 !important;
    --ui-bg:#F5F6F8 !important;
    --ui-surface:#FFFFFF !important;
    --ui-border:#E1E5EA !important;
    --ui-text:#15171A !important;
    --ui-muted:#707781 !important;
    --ui-radius:12px !important;
    --ui-shadow:0 8px 24px rgba(17,19,23,.055) !important;

    --jr:#E31B23 !important;
    --p:#E31B23 !important;
    --s:#111317 !important;
    --a:#B90F17 !important;
    --ink:#111317 !important;
    --yellow:#E31B23 !important;
    --bg:#F5F6F8 !important;
    --surface:#fff !important;
    --line:#E1E5EA !important;
    --muted:#707781 !important;
}

html{
    background:var(--ui-bg) !important;
}

body{
    background:var(--ui-bg) !important;
    color:var(--ui-text) !important;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
    font-size:14px;
    line-height:1.45;
}

a{
    transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.shell,.wrap{
    width:min(1540px,calc(100% - 44px)) !important;
    padding-top:24px !important;
}

.panel,
.card,
.kpi,
.quick,
.serie-card,
.item,
.money-box,
.coverage,
.user-card,
.flow{
    background:#fff !important;
    border:1px solid var(--ui-border) !important;
    border-radius:var(--ui-radius) !important;
    box-shadow:var(--ui-shadow) !important;
}

.panel{
    padding:22px !important;
}

.card:hover,
.quick:hover{
    transform:translateY(-2px);
    border-color:#CDD2D8 !important;
    box-shadow:0 12px 30px rgba(17,19,23,.085) !important;
}

h1,h2,h3,h4,h5,h6{
    color:var(--ui-text);
    letter-spacing:-.02em;
}

.muted,
small,
.help,
.hint{
    color:var(--ui-muted) !important;
}

/* BOTONES */
.btn,
button,
input[type="submit"],
input[type="button"]{
    min-height:42px;
    border-radius:9px !important;
    border:1px solid #D8DDE3;
    padding:0 15px;
    font-weight:800 !important;
    font-size:12px !important;
    letter-spacing:.01em;
    cursor:pointer;
    transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
    transform:translateY(-1px);
}

.btn-primary,
.btn-yellow,
.primary,
button.btn-primary{
    background:var(--ui-primary) !important;
    border-color:var(--ui-primary) !important;
    color:#fff !important;
    box-shadow:0 5px 14px rgba(227,27,35,.18) !important;
}

.btn-primary:hover,
.btn-yellow:hover,
.primary:hover{
    background:var(--ui-primary-dark) !important;
    border-color:var(--ui-primary-dark) !important;
}

.btn-dark,
.secondary,
.header-action.logout{
    background:var(--ui-black) !important;
    border-color:var(--ui-black) !important;
    color:#fff !important;
}

.btn-danger,
.remove{
    background:#fff !important;
    border-color:#E5A4A7 !important;
    color:#B91C23 !important;
}

.btn-danger:hover,
.remove:hover{
    background:#FFF1F2 !important;
    border-color:#D96A70 !important;
}

.back{
    color:var(--ui-primary) !important;
}

/* FORMULARIOS */
label{
    color:#30343A !important;
    font-weight:750 !important;
    font-size:12px !important;
}

input,
select,
textarea{
    background:#fff !important;
    color:var(--ui-text) !important;
    border:1px solid #D8DDE3 !important;
    border-radius:8px !important;
    box-shadow:none !important;
    outline:none !important;
    transition:border-color .15s ease,box-shadow .15s ease !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--ui-primary) !important;
    box-shadow:0 0 0 3px rgba(227,27,35,.10) !important;
}

input::placeholder,
textarea::placeholder{
    color:#A0A6AE !important;
}

/* TABLAS */
table{
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#fff;
}

th{
    background:#F7F8FA !important;
    color:#5C636D !important;
    border-bottom:1px solid var(--ui-border) !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase;
}

td{
    border-bottom:1px solid #ECEEF1 !important;
    color:#25282D;
}

tbody tr:hover td{
    background:#FCFCFD !important;
}

/* BADGES / ESTADOS */
.badge{
    border-radius:999px !important;
    font-weight:850 !important;
}

.badge.general{
    background:#F0F1F3 !important;
    color:#3C424A !important;
}

.badge.komatsu{
    background:#FFF2B8 !important;
    color:#003B7A !important;
}

.complete{
    background:#E7F7ED !important;
    color:#167440 !important;
}

.partial{
    background:#FFF4D8 !important;
    color:#8A5C00 !important;
}

.pending{
    background:#FDEBEC !important;
    color:#B4242C !important;
}

/* ALERTAS */
.flash{
    border:1px solid transparent !important;
    border-radius:10px !important;
    box-shadow:none !important;
}

.flash.success{
    background:#EAF7EF !important;
    border-color:#CBEBD7 !important;
    color:#17663B !important;
}

.flash.error{
    background:#FFF0F1 !important;
    border-color:#F5CDD0 !important;
    color:#A91F26 !important;
}

/* HERO / CABECERAS EXISTENTES */
.hero{
    background:linear-gradient(115deg,#101216 0%,#191C21 70%,#5A0A0E 100%) !important;
    border-radius:18px !important;
    box-shadow:0 18px 45px rgba(17,19,23,.12) !important;
}

.eyebrow,
.section-title{
    color:var(--ui-primary) !important;
}

/* TOP BAR */
.topbar{
    min-height:52px;
}

.header-action{
    border-radius:10px !important;
}

/* NUEVO LAYOUT JR */
.jr-app{
    min-height:100vh;
    display:grid;
    grid-template-columns:238px minmax(0,1fr);
    background:var(--ui-bg);
}

.jr-sidebar{
    background:#111317;
    color:#fff;
    min-height:100vh;
    padding:22px 16px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
}

.jr-sidebar-brand{
    display:flex;
    align-items:center;
    gap:11px;
    padding:4px 7px 23px;
    font-size:20px;
    font-weight:900;
}

.jr-brand-mark{
    width:38px;
    height:38px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--ui-primary);
    color:#fff;
    font-weight:900;
}

.jr-nav{
    display:grid;
    gap:5px;
}

.jr-nav-label{
    color:#7E858F;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:900;
    margin:18px 10px 7px;
}

.jr-nav a{
    min-height:44px;
    padding:0 12px;
    border-radius:9px;
    display:flex;
    align-items:center;
    gap:11px;
    color:#D9DCE1;
    text-decoration:none;
    font-weight:650;
    font-size:13px;
}

.jr-nav a:hover,
.jr-nav a.active{
    background:#24272D;
    color:#fff;
}

.jr-nav a.active{
    background:linear-gradient(90deg,#E31B23,#C80F17);
}

.jr-sidebar-bottom{
    margin-top:auto;
}

.jr-user{
    border:1px solid #2D3138;
    border-radius:11px;
    padding:12px;
    display:flex;
    align-items:center;
    gap:10px;
}

.jr-user-avatar{
    width:35px;
    height:35px;
    border-radius:9px;
    background:#E31B23;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
}

.jr-user strong{
    display:block;
    font-size:12px;
}

.jr-user span{
    display:block;
    margin-top:2px;
    font-size:10px;
    color:#9EA4AD;
}

.jr-main{
    min-width:0;
    padding:0 26px 34px;
}

.jr-topbar{
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid #E4E7EB;
    margin-bottom:25px;
}

.jr-page-title h1{
    margin:0;
    font-size:21px;
}

.jr-page-title p{
    margin:3px 0 0;
    color:var(--ui-muted);
    font-size:12px;
}

.jr-top-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.jr-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:13px;
    margin-bottom:17px;
}

.jr-stat{
    background:#fff;
    border:1px solid var(--ui-border);
    border-radius:12px;
    padding:17px;
    min-height:122px;
}

.jr-stat-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.jr-stat-label{
    color:#606772;
    font-size:11px;
    font-weight:800;
}

.jr-stat-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#FDEDEE;
    color:#E31B23;
    font-weight:900;
}

.jr-stat-value{
    display:block;
    margin-top:13px;
    font-size:28px;
    font-weight:900;
    letter-spacing:-.04em;
}

.jr-stat-sub{
    display:block;
    margin-top:4px;
    color:#8A9099;
    font-size:10px;
}

.jr-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);
    gap:16px;
}

.jr-dashboard-card{
    background:#fff;
    border:1px solid var(--ui-border);
    border-radius:13px;
    padding:18px;
}

.jr-card-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:15px;
}

.jr-card-title h2{
    margin:0;
    font-size:15px;
}

.jr-quick{
    display:grid;
    gap:9px;
}

.jr-quick a{
    border:1px solid #E4E7EB;
    border-radius:10px;
    min-height:58px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:11px;
    color:#202329;
    text-decoration:none;
    font-weight:750;
}

.jr-quick a:hover{
    border-color:#D4D8DE;
    background:#FAFAFB;
}

.jr-quick-icon{
    width:35px;
    height:35px;
    border-radius:9px;
    display:grid;
    place-items:center;
    background:#FDECEE;
    color:#E31B23;
    font-weight:900;
}

@media(max-width:1200px){
    .jr-stats{
        grid-template-columns:repeat(3,1fr);
    }
    .jr-dashboard-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:850px){
    .jr-app{
        grid-template-columns:1fr;
    }
    .jr-sidebar{
        min-height:auto;
        height:auto;
        position:relative;
    }
    .jr-nav{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .jr-sidebar-bottom{
        margin-top:18px;
    }
    .jr-main{
        padding:0 14px 28px;
    }
    .jr-stats{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:520px){
    .jr-stats{
        grid-template-columns:1fr;
    }
    .jr-nav{
        grid-template-columns:1fr;
    }
    .jr-topbar{
        height:auto;
        padding:16px 0;
        align-items:flex-start;
        flex-direction:column;
    }
}


/* ============================================================
   UI POLISH v2 — BOTONES, TABLAS Y ESTADOS
   ============================================================ */

/* Todos los enlaces-botón se comportan realmente como botones */
a.btn,
.btn,
button,
input[type="submit"],
input[type="button"]{
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:0 15px !important;
    line-height:1 !important;
    text-decoration:none !important;
    text-align:center !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
    box-sizing:border-box !important;
}

a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active{
    text-decoration:none !important;
}

/* Acciones superiores: misma línea y misma altura */
.jr-top-actions,
.actions,
.topbar .actions{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    flex-wrap:wrap !important;
}

.jr-top-actions .btn{
    min-width:112px !important;
}

.jr-top-actions .btn:first-child{
    background:#fff !important;
    border-color:#D8DDE3 !important;
    color:#262A30 !important;
}

.jr-top-actions .btn:first-child:hover{
    background:#F8F9FA !important;
    border-color:#C9CED5 !important;
}

/* Formularios de filtro */
select,
input[type="date"],
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"]{
    min-height:42px !important;
}

select{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Tablas: recuperar respiración y alineación */
table{
    width:100% !important;
    font-size:13px !important;
    line-height:1.3 !important;
}

th{
    height:39px !important;
    padding:9px 12px !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
}

td{
    min-height:46px !important;
    padding:10px 12px !important;
    vertical-align:middle !important;
    line-height:1.35 !important;
}

td .btn{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 12px !important;
    border-radius:7px !important;
    font-size:11px !important;
}

/* Estados compactos: nunca heredan tipografías gigantes */
.badge,
.badge.complete,
.badge.partial,
.badge.pending,
.complete,
.partial,
.pending{
    width:auto !important;
    min-width:0 !important;
    min-height:23px !important;
    height:23px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 9px !important;
    border-radius:999px !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.015em !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
}

/* Evitar que texto de columnas se pegue */
.jr-dashboard-card table td:nth-child(1){
    white-space:nowrap !important;
}

.jr-dashboard-card table td:nth-child(4),
.jr-dashboard-card table td:nth-child(5),
.jr-dashboard-card table td:last-child{
    white-space:nowrap !important;
}

/* Mejor distribución de la tabla principal */
.jr-dashboard-card table th:nth-child(1){width:14% !important;}
.jr-dashboard-card table th:nth-child(2){width:21% !important;}
.jr-dashboard-card table th:nth-child(3){width:31% !important;}
.jr-dashboard-card table th:nth-child(4){width:15% !important;}
.jr-dashboard-card table th:nth-child(5){width:12% !important;}
.jr-dashboard-card table th:nth-child(6){width:7% !important;}

/* En pantallas angostas se mantiene scroll de tabla */
.jr-dashboard-card > div[style*="overflow:auto"]{
    overflow-x:auto !important;
}