/* ══════════════════════════════════════════════════════════
   FOSE UNIFIED — Estilos principales
   Sistema de Control Presupuestal para Instituciones Educativas
══════════════════════════════════════════════════════════ */
:root{--azul:#003d7a;--azul2:#0056a6;--verde:#1a7a3a;--dorado:#c8960c;--gris:#f0f3f7;}
body{background:var(--gris);font-family:Arial,sans-serif;font-size:13px;}

/* Sidebar */
.sidebar{width:210px;height:calc(100vh - 52px);background:var(--azul);position:fixed;top:52px;left:0;z-index:100;overflow-y:auto;padding-bottom:12px;transition:transform .25s ease, opacity .25s ease;}
.sidebar.collapsed{transform:translateX(-210px);opacity:0;pointer-events:none;}
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px;}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45);}
.sidebar .nav-link{color:rgba(255,255,255,.72);padding:5px 14px;border-left:3px solid transparent;font-size:12px;transition:.15s;}
.sidebar .nav-link:hover,.sidebar .nav-link.active{color:#fff;background:rgba(255,255,255,.1);border-left-color:var(--dorado);}
.sidebar .nav-link i{width:18px;margin-right:6px;}
.scat{color:rgba(255,255,255,.38);font-size:9px;text-transform:uppercase;letter-spacing:1px;padding:8px 14px 1px;}
.main{margin-left:210px;padding:18px;min-height:calc(100vh - 52px);transition:margin-left .25s ease;}
.main.expanded{margin-left:0;}
.page{display:none;} .page.active{display:block;}

/* Cards */
.card{border:none;box-shadow:0 1px 4px rgba(0,0,0,.1);margin-bottom:0;}
.card-header{padding:8px 14px;font-weight:600;font-size:12.5px;}
.ch-azul{background:var(--azul);color:#fff;}
.ch-verde{background:var(--verde);color:#fff;}
.ch-dorado{background:var(--dorado);color:#fff;}
.ch-gris{background:#495057;color:#fff;}

/* Tablas */
.tg{width:100%;border-collapse:collapse;font-size:11.5px;}
.tg th{background:var(--azul);color:#fff;padding:5px 6px;white-space:nowrap;text-align:center;border:1px solid #0046a0;vertical-align:middle;}
.tg td{padding:4px 6px;border:1px solid #ddd;vertical-align:middle;}
.tg .gh td{background:#dbe8f7;font-weight:700;color:var(--azul);text-transform:uppercase;}
.tg .sub td{background:var(--azul);color:#fff;font-weight:700;}
.tg .gtot td{background:#001f40;color:#fff;font-weight:700;}
.num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ctr{text-align:center!important;}

/* Inputs editables en tabla */
.inp{width:88px;border:1px solid #b0c4de;border-radius:3px;padding:2px 4px;font-size:11px;text-align:right;background:#fffde7;}
.inp:focus{outline:none;border-color:var(--dorado);background:#fff;}
.inp.ini-input{width:110px;background:#e8f5e9;}

/* Inputs editables de modificaciones de INGRESOS */
.inp-ing{width:88px;border:1px solid #a5d6a7;border-radius:3px;padding:2px 4px;font-size:11px;text-align:right;background:#f0fff4;}
.inp-ing:focus{outline:none;border-color:var(--verde);background:#fff;}

/* KPIs */
.kpi{border-left:4px solid var(--azul2);}
.kpi.e{border-left-color:var(--verde);} .kpi.p{border-left-color:#fd7e14;}
.kv{font-size:1.35rem;font-weight:700;color:var(--azul);}
.kl{font-size:10px;color:#6c757d;text-transform:uppercase;}
.kpi.e .kv{color:var(--verde);} .kpi.p .kv{color:#fd7e14;}
.pbar{height:7px;background:#e9ecef;border-radius:4px;overflow:hidden;}
.pbar-f{height:100%;border-radius:4px;transition:width .4s;}

/* Trimestre tabs */
.trim-pill{font-size:12px;font-weight:600;padding:3px 12px;border-radius:12px;}
.tp1{background:#d4edda;color:#155724;} .tp2{background:#cce5ff;color:#004085;}
.tp3{background:#fff3cd;color:#856404;} .tp4{background:#f8d7da;color:#721c24;}

/* Informe */
.inf-hdr{text-align:center;margin-bottom:12px;}
.inf-hdr h5{font-size:13px;font-weight:700;margin:2px 0;}
.inf-hdr p{font-size:11px;margin:1px 0;}
.ti{width:100%;border-collapse:collapse;font-size:10.5px;}
.ti th,.ti td{border:1px solid #888;padding:3px 5px;}
.ti th{background:#003d7a;color:#fff;text-align:center;}
.ti .ghead td{background:#e8f5e9;font-weight:700;color:#155724;}
.ti .sub td{background:#d0e4f7;font-weight:700;}
.ti .tot td{background:#003d7a;color:#fff;font-weight:700;}
.ti .gtot td{background:#001f40;color:#fff;font-weight:700;}
.ti .saldo-neg{color:#dc3545;}

/* Barra de acciones sticky */
.trim-acciones{
  position:sticky;top:60px;z-index:80;
  background:var(--gris);padding:6px 0 4px;margin:-4px 0 6px;
  border-bottom:1px solid #dee2e6;
}

/* Contratos */
.contrato-card{border-left:4px solid var(--azul2);transition:border-color .2s;}
.contrato-card:hover{border-left-color:var(--dorado);}
.estado-badge{font-size:10px;padding:3px 8px;border-radius:8px;}
.estado-elaboracion{background:#fff3cd;color:#856404;}
.estado-firmado{background:#cce5ff;color:#004085;}
.estado-ejecucion{background:#d4edda;color:#155724;}
.estado-ejecutado{background:#d1ecf1;color:#0c5460;}
.estado-liquidado{background:#e2e3e5;color:#383d41;}

/* Personas */
.persona-row:hover{background:#f8f9fa;cursor:pointer;}

/* UNSPSC search */
.unspsc-results{max-height:250px;overflow-y:auto;border:1px solid #dee2e6;border-radius:4px;}
.unspsc-item{padding:6px 10px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:11px;}
.unspsc-item:hover{background:#e3f2fd;}
.unspsc-item code{font-size:10px;color:#0056a6;}

/* Loading overlay */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.loading-bar{width:300px;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-top:12px;}
.loading-bar-fill{height:100%;background:var(--azul2);border-radius:4px;transition:width .3s;}

@media print{
  .sidebar,.navbar,.no-print{display:none!important;}
  .main{margin:0;padding:0;width:100%!important;max-width:100%!important;}
  .page{display:none!important;}
  #page-informes{display:block!important;padding:0;margin:0;}
  body{background:#fff;font-size:10px;margin:0;padding:0;}
  .card{box-shadow:none;}
  /* ── Márgenes de página ── */
  @page{size:landscape;margin:12mm 10mm 12mm 10mm;}
  /* ── Tablas: que quepan en la hoja ── */
  .ti{width:100%!important;table-layout:auto;font-size:9px;border-collapse:collapse;}
  .ti th,.ti td{padding:2px 3px!important;white-space:nowrap;overflow:hidden;}
  .ti th{font-size:8px;}
  .ti td.num{font-size:9px;}
  /* ── Encabezado del informe ── */
  .inf-header{margin-bottom:8px;}
  /* ── Saltos de página ── */
  .res-firmas{page-break-inside:avoid;}
  .gtot{page-break-inside:avoid;}
  tr{page-break-inside:avoid;}
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablets (max 992px)
══════════════════════════════════════════════════════════ */
@media (max-width:992px){
  .sidebar{transform:translateX(-210px);opacity:0;pointer-events:none;}
  .sidebar.show-mobile{transform:translateX(0);opacity:1;pointer-events:auto;z-index:1050;}
  .main{margin-left:0!important;}
  .tg th,.tg td{padding:3px 4px;font-size:11px;}
  .inp{width:75px;}
  .inp.ini-input{width:95px;}
  .trim-acciones{top:52px;}
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Móviles (max 768px)
══════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* ── Sidebar como overlay ── */
  .sidebar{
    width:240px;
    transform:translateX(-240px);opacity:0;pointer-events:none;
    top:0;height:100vh;padding-top:60px;
    box-shadow:4px 0 20px rgba(0,0,0,.3);
  }
  .sidebar.show-mobile{transform:translateX(0);opacity:1;pointer-events:auto;z-index:1050;}
  .main{margin-left:0!important;padding:10px 8px;}

  /* ── Overlay oscuro detrás del sidebar ── */
  .sidebar-backdrop{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.5);z-index:1040;
    cursor:pointer;
  }
  .sidebar-backdrop.active{display:block;}

  /* ── Botón cerrar dentro del sidebar en móvil ── */
  .sidebar-close-mobile{
    position:absolute;top:12px;right:12px;
    background:none;border:none;color:#fff;font-size:22px;
    cursor:pointer;z-index:1060;padding:4px 8px;
  }

  /* ── Navbar ── */
  .navbar{padding:4px 8px!important;height:auto!important;min-height:48px;}
  .navbar .navbar-brand{font-size:13px!important;}
  .navbar .btn-sm{font-size:10px;padding:2px 5px;}
  .navbar .d-flex{flex-wrap:wrap;gap:3px!important;}
  /* Ocultar textos de botones, dejar solo iconos */
  #btn-exportar .me-1+span,
  #btn-exportar{font-size:0;padding:4px 8px;}
  #btn-exportar i{font-size:13px;}
  .dropdown-toggle{font-size:0!important;padding:4px 8px!important;}
  .dropdown-toggle i{font-size:13px!important;}
  .dropdown-toggle::after{margin-left:2px!important;}
  #nav-inst-nombre{font-size:11px!important;display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ── Tablas responsive: scroll horizontal ── */
  .table-responsive-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px;}
  .tg{min-width:600px;}
  .tg th{font-size:9.5px;padding:4px 3px;white-space:nowrap;}
  .tg td{font-size:10.5px;padding:3px 4px;}
  .ti{min-width:500px;}

  /* ── Cards ── */
  .card{margin-bottom:8px;}
  .card-header{font-size:11.5px;padding:6px 10px;}

  /* ── KPIs: 2 por fila ── */
  .kpi .kv{font-size:1.1rem;}
  .kpi .kl{font-size:9px;}

  /* ── Inputs ── */
  .inp,.inp-ing{width:70px;font-size:10px;}
  .inp.ini-input{width:85px;}

  /* ── Botones de acción ── */
  .trim-acciones{position:relative;top:0;flex-wrap:wrap;gap:4px;}
  .trim-acciones .btn{font-size:10px;padding:3px 8px;}

  /* ── Formularios modales ── */
  .modal-dialog{margin:8px;}
  .modal-body{padding:12px;}

  /* ── Tabs trimestre ── */
  .trim-pill{font-size:10px;padding:2px 8px;}

  /* ── Loading overlay ── */
  .loading-bar{width:220px;}

  /* ── Auth overlay ── */
  #auth-overlay .card{width:95%!important;max-width:380px;margin:10px auto;}

  /* ── Contratos ── */
  .contrato-card{margin-bottom:8px;}

  /* ── Ocultar textos largos en móvil ── */
  .d-mobile-none{display:none!important;}
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Móviles pequeños (max 480px)
══════════════════════════════════════════════════════════ */
@media (max-width:480px){
  body{font-size:12px;}
  .main{padding:6px 4px;}
  .tg th{font-size:8.5px;}
  .tg td{font-size:9.5px;padding:2px 3px;}
  .inp,.inp-ing{width:60px;font-size:9px;}
  .kpi .kv{font-size:1rem;}
  .navbar .navbar-brand{font-size:11px!important;}
  #auth-overlay .card{width:98%!important;padding:8px;}
  .modal-body{padding:8px;}
  .card-header{font-size:11px;padding:5px 8px;}
}