/* ═══════════════════════════════════════════════════════════════
   SIGO UI  —  Estilos Corporativos Estándar v2
   ═══════════════════════════════════════════════════════════════ */


/* ── Variables corporativas ──────────────────────────────────── */
:root {
    /* Marca */
    --sigo-azul:       #092E47;
    --sigo-rojo:       #870000;  /* Rojo corporativo — títulos, acciones destructivas */
    --sigo-verde:      #33691e;  /* Verde corporativo — completado, activo */
    --sigo-naranja:    #e65100;
    --sigo-alerta:     #f77f00;  /* Naranja — advertencia, en proceso */
    --sigo-azul-light: #e8f0f7;
    --sigo-accion:     #2e7d32;  /* Verde acción — guardar / confirmar */

    /* Inputs estándar */
    --input-height: 24px;
    --input-font:   12px;
    --input-pad-v:  1px;
    --input-pad-h:  4px;

    /* ── Paleta de estados semánticos ─────────────────────────
       Colores base reutilizados por todos los módulos.
       Las variables de módulo (--Color*, --Proyecto*, etc.)
       son alias de estas para mantener nombres existentes. */
    --sigo-pendiente: #d62828;  /* Rojo vivo — pendiente / peligro (distinto del rojo corporativo) */
    --sigo-gris:      #c6c7c9;  /* Gris — inactivo / programado */
    --sigo-amarillo:  #ffd22d;  /* Amarillo — en revisión / asignado */
    --sigo-proceso:   #ce8537;  /* Ámbar — en proceso / ejecución parcial */
    --sigo-facturar:  #aad37d;  /* Verde claro — listo para facturar */

    /* RST / OT — estados de órdenes de servicio */
    --ColorSolicitud:  #fcd706;
    --ColorProgramada: var(--sigo-gris);
    --ColorPendiente:  var(--sigo-pendiente);
    --ColorProceso:    var(--sigo-proceso);
    --ColorFacturar:   var(--sigo-facturar);
    --ColorEjecutada:  var(--sigo-verde);
    --ColorActivo:     var(--sigo-verde);
    --ColorInactivo:   var(--sigo-gris);

    /* Cotizaciones */
    --ColorSolicitada: var(--sigo-pendiente);
    --ColorProcesada:  #4ED4CD;
    --ColorDevuelta:   var(--sigo-amarillo);
    --ColorPorAprobar: var(--sigo-alerta);
    --ColorRecotizar:  #4B86E3;
    --ColorAprobada:   #adc3a5;
    --ColorEnviada:    #85a578;
    --ColorAceptada:   #5c874b;
    --ColorFinalizada: var(--sigo-verde);

    /* Proyectos */
    --ProyectoPorIniciar: var(--sigo-gris);
    --ProyectoPausado:    var(--sigo-pendiente);
    --ProyectoAsignado:   var(--sigo-amarillo);
    --ProyectoEjecucion:  var(--sigo-alerta);
    --ProyectoFinalizado: var(--sigo-verde);

    /* Solicitud de Materiales */
    --SolictudPendiente:  var(--sigo-pendiente);
    --SolictudRevision:   var(--sigo-amarillo);
    --SolicitudRechazada: var(--sigo-rojo);
    --SolicitudAprobada:  var(--sigo-verde);
    --SolictudEjecucion:  var(--sigo-alerta);

    /* Otros aliases */
    --Programada: var(--sigo-gris);
    --Facturada:  var(--sigo-verde);
}


/* ════════════════════════════════════════════════════════════════
   LAYOUT — navbar-fixed-top dentro de main-header colapsa su altura.
   Reservamos el espacio manualmente para que el content-wrapper
   comience justo debajo del navbar (50 px = altura estándar Bootstrap 3).
   ════════════════════════════════════════════════════════════════ */
.main-header { min-height: 50px; }


/* ════════════════════════════════════════════════════════════════
   CONTENT-HEADER — Título izquierda, breadcrumb fondo derecha
   AdminLTE 2 posiciona .breadcrumb con position:absolute, lo que
   lo saca del flujo flex. Sobreescribimos a static para poder
   alinearlo con flexbox.
   ════════════════════════════════════════════════════════════════ */
.content-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    flex-wrap:       wrap;
    padding:         10px 15px 8px;
    gap:             8px;
}
.content-header > h1,
.content-header > .titulo-seccion {
    margin:      0;
    flex-shrink: 0;
    align-self:  flex-start;
}
/* Sacamos el breadcrumb del absolute de AdminLTE */
.content-header .breadcrumb {
    position:    static !important;
    float:       none  !important;
    top:         auto  !important;
    right:       auto  !important;
    background:  transparent;
    border:      none;
    padding:     0;
    margin:      0;
    font-size:   12px;
    line-height: 1.4;
    align-self:  flex-end;
}
.content-header .breadcrumb > li + li::before {
    color: #aaa;
}


/* ════════════════════════════════════════════════════════════════
   TÍTULO DE PÁGINA — Encabezado estándar corporativo
   Uso: <h1 class="titulo-seccion">
          <i class="fa-solid fa-users"></i> Nombre de la sección
        </h1>
   ════════════════════════════════════════════════════════════════ */
.titulo-seccion {
    display: inline-block;
    background-color: var(--sigo-rojo);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Poppins-SemiBold', sans-serif;
    padding: 4px 14px;
    border-radius: 3px;
    margin: 0;
    line-height: 1.6;
}
.titulo-seccion i { margin-right: 6px; opacity: .9; }


/* ════════════════════════════════════════════════════════════════
   INPUTS — Altura y padding estándar para todo el sistema
   ════════════════════════════════════════════════════════════════ */

/* Base: input, select, textarea */
.form-control {
    height:      var(--input-height);
    padding:     var(--input-pad-v) var(--input-pad-h);
    font-size:   var(--input-font);
    border-radius: 3px;
    box-shadow:  none;
}
textarea.form-control       { height: auto; }
input[type="date"].form-control,
input[type="time"].form-control { height: var(--input-height); }

/* Labels — sin sombra (regla general) */
label {
    box-shadow:    none !important;
    text-shadow:   none !important;
    margin-bottom: 0 !important;
}
.form-group > label,
.col-form-label {
    font-size:     var(--input-font);
    font-weight:   600;
    margin-bottom: 3px;
}

/* Espacio entre campos */
.form-group { margin-bottom: 10px; }

/* ── Select2 — single ── */
.select2-container .select2-selection--single,
.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single {
    height: var(--input-height) !important;
    border-radius: 3px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--classic .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: var(--input-height) !important;
    padding-left: var(--input-pad-h) !important;
    padding-right: 24px !important;
    font-size: var(--input-font) !important;
}
.select2-container .select2-selection--single .select2-selection__arrow,
.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--input-height) - 2px) !important;
    top: 1px !important;
}

/* ── Select2 — multiple ── */
.select2-container .select2-selection--multiple,
.select2-container--classic .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    min-height: var(--input-height) !important;
    padding: 2px var(--input-pad-h) !important;
}
.select2-selection--multiple .select2-selection__choice {
    font-size: 11px !important;
    margin-top: 3px !important;
    padding: 1px 5px !important;
}

/* ── Hover sobre el select cerrado (evita texto blanco del tema classic) ── */
.select2-container--classic .select2-selection--single:hover,
.select2-container--default .select2-selection--single:hover {
    background-color: var(--sigo-azul-light) !important;
    background-image: none !important;
    border-color: var(--sigo-azul) !important;
}
.select2-container--classic .select2-selection--single:hover .select2-selection__rendered,
.select2-container--default .select2-selection--single:hover .select2-selection__rendered {
    color: var(--sigo-azul) !important;
}

/* ── Resultados del dropdown ── */
.select2-results__option { font-size: var(--input-font) !important; }

/* ── Caja de búsqueda interna ── */
.select2-search--dropdown .select2-search__field {
    font-size: var(--input-font);
    padding: var(--input-pad-v) var(--input-pad-h);
    color: #333 !important;
    background-color: #fff !important;
}
.select2-search--dropdown .select2-search__field:hover,
.select2-search--dropdown .select2-search__field:focus {
    color: #333 !important;
    background-color: #fff !important;
}

/* ── Espaciado de box y modal ── */
.box-body   { padding: 10px 15px; }
.modal-body { padding: 12px 15px; }

/* Fuentes Poppins (relativas a public/css/) */
@font-face { font-family:'Poppins-Light';    src:url('../fonts/Poppins-Light.ttf'); }
@font-face { font-family:'Poppins-Black';    src:url('../fonts/Poppins-Black.ttf'); }
@font-face { font-family:'Poppins-Bold';     src:url('../fonts/Poppins-Bold.ttf'); }
@font-face { font-family:'Poppins-SemiBold'; src:url('../fonts/Poppins-SemiBold.ttf'); }
@font-face { font-family:'Poppins-Regular';  src:url('../fonts/Poppins-Regular.ttf'); }
@font-face { font-family:'Poppins-Medium';   src:url('../fonts/Poppins-Medium.ttf'); }


/* ════════════════════════════════════════════════════════════════
   SELECT2 — Dropdown corporativo
   Corrige texto blanco y azul claro por defecto del tema classic
   ════════════════════════════════════════════════════════════════ */

/* Texto normal en la lista */
.select2-results__option {
    color: #333 !important;
}

/* Hover y foco con teclado */
.select2-container--classic .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--sigo-azul) !important;
    color: #fff !important;
}

/* Ítem ya seleccionado */
.select2-container--classic .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--sigo-azul-light) !important;
    color: var(--sigo-azul) !important;
}

/* Cabecera de grupo (optgroup) */
.select2-container--classic .select2-results__group,
.select2-container--default .select2-results__group {
    background-color: #f0f4f8;
    color: var(--sigo-azul);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 10px;
}


/* ════════════════════════════════════════════════════════════════
   NAV TABS — Estilo corporativo
   ════════════════════════════════════════════════════════════════ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: var(--sigo-azul);
    color: #fff;
    border-color: var(--sigo-azul);
}
.nav-tabs > li > a            { color: var(--sigo-azul); font-weight: 600; }
.nav-tabs > li > a:hover      { background-color: var(--sigo-azul-light); }


/* ════════════════════════════════════════════════════════════════
   DATATABLES — Botón expandir responsive  (modo: dtr-column)
   ESTÁNDAR SIGO:
   · Col 0 = columna control (className:'control', 20px, dtr-column)
     responsive: { details: { type: 'column', target: 0 } }
     colControl = { data:null, defaultContent:'', className:'control', orderable:false, width:'20px' }
   · JS agrega clase .has-hidden-cols al <table> cuando hay cols ocultas
     (evento responsive-resize.dt → toggleClass)
   · El indicador + solo se muestra cuando .has-hidden-cols está presente
   ════════════════════════════════════════════════════════════════ */

/* Celda control: estrecha, centrada, relativa para ::before absoluto */
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > thead > tr > th.control {
    position: relative !important;
    width: 20px !important;
    min-width: 20px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: default;
}

/* Ocultar el indicador Bootstrap por defecto (siempre visible sin nuestra clase) */
table.dataTable.dtr-column > tbody > tr > td.control::before {
    display: none !important;
}

/* Mostrar indicador + (azul) solo cuando hay columnas ocultas */
table.dataTable.dtr-column.has-hidden-cols > tbody > tr > td.control::before {
    display: block !important;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;           /* anula margin-top/left del bootstrap responsive CSS */
    background-color: var(--sigo-azul) !important;
    color: white;
    border: none !important;
    border-radius: 50%;
    box-shadow: none !important;
    width: 16px; height: 16px;
    line-height: 16px; font-size: 12px;
    text-align: center;
    cursor: pointer !important;
}

/* Indicador − (rojo) cuando la fila está expandida */
table.dataTable.dtr-column.has-hidden-cols > tbody > tr.parent > td.control::before {
    background-color: var(--sigo-rojo) !important;
}
table.dataTable.dtr-column.has-hidden-cols > tbody > tr > td.control {
    cursor: pointer;
}


/* ════════════════════════════════════════════════════════════════
   HUB — Tarjetas de navegación por sección
   Uso: <a class="hub-card hub-azul">
        <i class="fa-solid fa-users"></i>
        <div class="hub-title">...</div>
        <div class="hub-desc">...</div>
       </a>
   ════════════════════════════════════════════════════════════════ */
.hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 36px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    color: #fff;
    text-decoration: none;
}
.hub-card i {
    font-size: 52px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 14px;
}
.hub-card .hub-title {
    font-size: 18px;
    font-family: 'Poppins-Bold', sans-serif;
    margin-bottom: 0;
}
.hub-card .hub-desc {
    font-size: 13px;
    opacity: .88;
    margin-top: auto;
    padding-top: 10px;
}
.hub-azul    { background: var(--sigo-azul); }
.hub-verde   { background: var(--sigo-verde); }
.hub-rojo    { background: var(--sigo-rojo); }
.hub-naranja { background: var(--sigo-naranja); }

/* Fila con todas las cards a la misma altura */
.hub-row                      { display:flex; flex-wrap:wrap; align-items:stretch; }
.hub-row > [class*="col-"]    { display:flex; flex-direction:column; }
.hub-row .hub-card            { flex:1; min-height:unset; }


/* ════════════════════════════════════════════════════════════════
   FORMULARIOS — Separador de sección
   Uso: <p class="form-section-title"><i class="fa-solid fa-user"></i> Nombres</p>
   ════════════════════════════════════════════════════════════════ */
.form-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sigo-azul);
    border-bottom: 2px solid var(--sigo-azul);
    padding-bottom: 4px;
    margin: 18px 0 12px;
}
.form-section-title i { margin-right: 5px; }


/* ════════════════════════════════════════════════════════════════
   ESTADOS — Badges de color (flat, para Bootstrap .badge)
   Uso: <span class="badge Activo"> / Vencido / porVencer
   ════════════════════════════════════════════════════════════════ */
.Activo       { background-color: var(--sigo-verde);  color: #fff; font-size: 12px; }
.Vencido      { background-color: var(--sigo-rojo);   color: #fff; font-size: 12px; }
.porVencer    { background-color: var(--sigo-alerta); color: #fff; font-size: 12px; }
.Aprobada     { background-color: var(--sigo-verde);  color: #fff; font-size: 12px; }
.Pendiente    { background-color: var(--sigo-alerta); color: #fff; font-size: 12px; }
.badge-nuevo     { background-color: var(--sigo-verde);   color: #fff; }
.badge-retirado  { background-color: var(--sigo-naranja); color: #fff; }


/* ════════════════════════════════════════════════════════════════
   ESTADOS — Badges pill (borde redondeado, para estado de documentos)
   Uso: <span class="badge-vigente">Vigente</span>
        <span class="badge-por-vencer">Por Vencer</span>
        <span class="badge-vencido">Vencido</span>
   ════════════════════════════════════════════════════════════════ */
.badge-vigente,
.badge-por-vencer,
.badge-vencido,
.badge-inactivo   { color: #fff; padding: 3px 8px; border-radius: 10px; font-size: 11px; display: inline-block; }
.badge-vigente    { background-color: var(--sigo-verde);  }
.badge-por-vencer { background-color: var(--sigo-alerta); }
.badge-vencido    { background-color: var(--sigo-rojo);   }
.badge-inactivo   { background-color: #999; }


/* ════════════════════════════════════════════════════════════════
   ESTADOS DE ÓRDENES Y SERVICIOS — fondos para leyendas de
   calendario, badges de estado y tarjetas de panel.
   Uso: class="bgPendiente" / "bgProceso" / "bgFacturar" / etc.
   ════════════════════════════════════════════════════════════════ */
.bgProgramada { background-color: var(--ColorProgramada); color: #000; }
.bgPendiente  { background-color: var(--ColorPendiente);  color: #fff; }
.bgProceso    { background-color: var(--ColorProceso);    color: #fff; }
.bgFacturar   { background-color: var(--ColorFacturar);   color: #fff; }
.bgEjecutada  { background-color: var(--ColorEjecutada);  color: #fff; }
.bgActivo     { background-color: var(--ColorActivo)   !important; color: #fff; }
.bgInactivo   { background-color: var(--ColorInactivo) !important; color: #fff; }


/* ════════════════════════════════════════════════════════════════
   SEPARADOR CORPORATIVO
   Uso: <hr class="hr-sigo">
   ════════════════════════════════════════════════════════════════ */
.hr-sigo {
    margin: 8px 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #D3D4D5, var(--sigo-azul), #D3D4D5);
}


/* ════════════════════════════════════════════════════════════════
   TABLES — Padding y tipografía estándar
   ════════════════════════════════════════════════════════════════ */

/* Bootstrap .table — cuerpo */
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    padding: 4px 8px !important;
    font-size: var(--input-font);
    vertical-align: middle;
}

/* Bootstrap .table — encabezados centrados */
.table > thead > tr > th,
.table > thead > tr > td {
    padding: 4px 8px !important;
    font-size: var(--input-font);
    vertical-align: middle !important;
    text-align: center !important;
}

/* DataTables — cuerpo */
table.dataTable tbody td,
table.dataTable tbody th,
table.dataTable tfoot th,
table.dataTable tfoot td {
    padding: 4px 8px !important;
    font-size: var(--input-font);
    vertical-align: middle;
}

/* DataTables — encabezados centrados */
table.dataTable thead th,
table.dataTable thead td {
    padding: 4px 8px !important;
    font-size: var(--input-font);
    vertical-align: middle !important;
    text-align: center !important;
}


/* ════════════════════════════════════════════════════════════════
   TABLE ACTIONS — Botones de icono en filas
   Uso: <td class="col-acciones">
          <button class="btn-tabla btn-primary" title="Editar"><i class="fa fa-pencil"></i></button>
          <button class="btn-tabla btn-danger"  title="Eliminar"><i class="fa fa-trash"></i></button>
        </td>
   ════════════════════════════════════════════════════════════════ */
.btn-tabla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    transition: filter .12s ease;
}
.btn-tabla + .btn-tabla  { margin-left: 2px; }
.btn-tabla:hover         { filter: brightness(.88); }
.btn-tabla:active        { filter: brightness(.75); }

/* Columna de acciones: ancho mínimo y sin saltos de línea */
td.col-acciones,
th.col-acciones {
    white-space: nowrap;
    text-align: center !important;
    width: 1%;
}

/* ── Botón "más opciones" — abre panel ligero, sin Bootstrap dropdown ──
   Uso: <button class="btn-tabla btn-mas" data-id="{{ $id }}" title="Más acciones">
          <i class="fa-solid fa-ellipsis-vertical"></i>
        </button>
   Panel: <div class="panel-acciones" id="pa-{{ $id }}">
            <button data-accion="ver">   <i class="fa-solid fa-eye"></i>          Ver</button>
            <button data-accion="edit">  <i class="fa-solid fa-pen-to-square"></i> Editar</button>
            <button data-accion="mover"> <i class="fa-solid fa-arrows-up-down"></i> Reubicar</button>
            <button data-accion="del"
                    class="peligro">     <i class="fa-solid fa-trash"></i>         Eliminar</button>
          </div>
   ─────────────────────────────────────────────────────────────────── */
.btn-mas {
    background-color: var(--sigo-azul) !important;
    border-color:     var(--sigo-azul) !important;
    color: #fff !important;
}
.btn-mas:hover  { background-color: #0b3d5e !important; filter: none !important; }
.btn-mas:active { background-color: #061d2d !important; filter: none !important; }

/* Panel flotante de acciones */
.panel-acciones {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d0d5db;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    min-width: 160px;
    padding: 4px 0;
    display: none;
}
.panel-acciones button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 12px;
    border: none;
    background: none;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.panel-acciones button:hover           { background-color: var(--sigo-azul-light); color: var(--sigo-azul); }
.panel-acciones button.peligro         { color: var(--sigo-rojo); }
.panel-acciones button.peligro:hover   { background-color: #ffebee; }
.panel-acciones button i               { width: 14px; text-align: center; font-size: 12px; }


/* ════════════════════════════════════════════════════════════════
   SELECT NATIVO — Alineado con colores corporativos
   ════════════════════════════════════════════════════════════════ */
select.form-control,
select.input-sm {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
    cursor: pointer;
}
select.form-control:hover,
select.input-sm:hover {
    border-color: var(--sigo-azul) !important;
    background-color: var(--sigo-azul-light) !important;
    color: var(--sigo-azul) !important;
}
select.form-control:focus,
select.input-sm:focus {
    border-color: var(--sigo-azul) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(9, 46, 71, .15) !important;
    background-color: #fff !important;
    color: #333 !important;
}
/* Opciones: fondo claro por defecto */
select.form-control option,
select.input-sm option {
    color: #333 !important;
    background-color: #fff !important;
}
/* Opción seleccionada — background-color funciona en Firefox;
   Chrome/Win usa renderizado del SO para el dropdown abierto */
select.form-control option:checked,
select.input-sm option:checked {
    background-color: var(--sigo-azul-light) !important;
    color: var(--sigo-azul) !important;
}
/* Opción deshabilitada */
select.form-control option:disabled,
select.input-sm option:disabled {
    color: #aaa !important;
}


/* ════════════════════════════════════════════════════════════════
   BUTTONS — Estilo corporativo sobre AdminLTE
   ════════════════════════════════════════════════════════════════ */

/* Base común */
.btn {
    border-radius: 3px !important;
    font-size: var(--input-font) !important;
    font-weight: 600;
    letter-spacing: .02em;
    transition: filter .15s ease, box-shadow .15s ease;
    border-width: 1px;
    border-style: solid;
}
.btn:hover   { filter: brightness(.9); }
.btn:active  { filter: brightness(.8); box-shadow: inset 0 2px 4px rgba(0,0,0,.2) !important; }
.btn:focus   { outline: none; box-shadow: 0 0 0 2px rgba(9,46,71,.25) !important; }

/* Tamaño —  btn-sm alineado con inputs */
.btn-sm {
    height: var(--input-height) !important;
    padding: var(--input-pad-v) 10px !important;
    font-size: var(--input-font) !important;
    line-height: calc(var(--input-height) - 2px) !important;
}

/* Primary — verde acción (guardar / confirmar) */
.btn-primary,
.btn-primary:visited {
    background-color: var(--sigo-azul) !important;
    border-color:     var(--sigo-azul) !important;
    color: #fff !important;
}
.btn-primary:hover  { background-color: #1b5e20 !important; border-color: #1b5e20 !important; filter: none !important; }
.btn-primary:active { background-color: #0f3a12 !important; border-color: #0f3a12 !important; filter: none !important; }

/* Danger — rojo corporativo */
.btn-danger,
.btn-danger:visited {
    background-color: var(--sigo-rojo) !important;
    border-color:     var(--sigo-rojo) !important;
    color: #fff !important;
}
.btn-danger:hover  { background-color: #a00 !important; border-color: #a00 !important; }
.btn-danger:active { background-color: #600 !important; border-color: #600 !important; }

/* Success — verde corporativo */
.btn-success,
.btn-success:visited {
    background-color: var(--sigo-verde) !important;
    border-color:     var(--sigo-verde) !important;
    color: #fff !important;
}
.btn-success:hover  { background-color: #3d7a24 !important; border-color: #3d7a24 !important; }
.btn-success:active { background-color: #254d14 !important; border-color: #254d14 !important; }

/* Warning — naranja corporativo */
.btn-warning,
.btn-warning:visited {
    background-color: var(--sigo-naranja) !important;
    border-color:     var(--sigo-naranja) !important;
    color: #fff !important;
}
.btn-warning:hover  { background-color: #cc4900 !important; border-color: #cc4900 !important; }
.btn-warning:active { background-color: #993600 !important; border-color: #993600 !important; }

/* Default — gris neutro */
.btn-default,
.btn-default:visited {
    background-color: #f4f4f4 !important;
    border-color:     #ccc     !important;
    color: #444 !important;
}
.btn-default:hover  { background-color: #e8e8e8 !important; border-color: #bbb !important; }
.btn-default:active { background-color: #d8d8d8 !important; }

/* Info — azul claro */
.btn-info,
.btn-info:visited {
    background-color: #1d7da1 !important;
    border-color:     #1d7da1 !important;
    color: #fff !important;
}
.btn-info:hover  { background-color: #166082 !important; border-color: #166082 !important; filter: none !important; }
.btn-info:active { background-color: #0f4460 !important; border-color: #0f4460 !important; filter: none !important; }


/* ════════════════════════════════════════════════════════════════
   MODAL — Cabecera y pie corporativos
   ════════════════════════════════════════════════════════════════ */
.modal-header {
    background-color: var(--sigo-azul);
    padding: 10px 15px;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins-SemiBold', sans-serif;
}
.modal-header .modal-title i { margin-right: 6px; opacity: .85; }
.modal-header .close {
    color: #fff;
    opacity: .7;
    text-shadow: none;
    font-size: 20px;
    margin-top: -2px;
}
.modal-header .close:hover { opacity: 1; color: #fff; }

.modal-footer {
    background-color: #f5f7f9;
    border-top: 1px solid #dde3ea;
    padding: 8px 15px;
}
.modal-content { border-radius: 4px; overflow: hidden; }


/* ════════════════════════════════════════════════════════════════
   PROGRESS BAR — Barra de progreso de navegación (top)
   La animación CSS arranca sola al parsear el stylesheet.
   JS solo la "completa" (100%) y la desvanece al terminar la carga.
   ════════════════════════════════════════════════════════════════ */
#sigo-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity .4s ease;
}
#sigo-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--sigo-azul) 0%, #1a6ea8 50%, var(--sigo-azul) 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 10px 1px rgba(9, 46, 71, .7);
    animation: sigo-bar-entrada 1.8s ease-out forwards, sigo-bar-shimmer 1.2s linear infinite;
}
/* Avanza sola hasta el 75% — JS lleva al 100% al terminar */
@keyframes sigo-bar-entrada {
    0%   { width: 0%; }
    30%  { width: 50%; }
    100% { width: 75%; }
}
/* Shimmer para indicar actividad mientras carga */
@keyframes sigo-bar-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Estado "completado": JS agrega esta clase al terminar la carga */
#sigo-progress.sigo-progress-done #sigo-progress-bar {
    animation: none;
    width: 100%;
    background: var(--sigo-azul);
    transition: width .15s ease;
}
#sigo-progress.sigo-progress-done { opacity: 0; transition-delay: .25s; }


/* ════════════════════════════════════════════════════════════════
   LOADING OVERLAY — Pantalla de bloqueo para operaciones largas
   Usado por el módulo PWA/offline. Se controla con jQuery .show()/.hide().
   ════════════════════════════════════════════════════════════════ */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(2px);
    z-index: 1050;
    display: none;
    text-align: center;
    padding-top: 25vh;
}
#loadingOverlay i {
    display: block;
    font-size: 40px;
    color: var(--sigo-azul);
    margin-bottom: 10px;
}
#loadingOverlay p {
    display: block;
    color: var(--sigo-azul);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   STATUS COLORS — Cotizaciones, Proyectos, Solicitudes de Material
   (sin box-shadow — migrado desde fullCalendar_v2.css)
   ════════════════════════════════════════════════════════════════ */
.Solicitud, .Solicitada { background-color: var(--ColorSolicitada)    !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Procesada              { background-color: var(--ColorProcesada)     !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Aprobar, .Generada     { background-color: var(--ColorPorAprobar)    !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Devuelta               { background-color: var(--ColorDevuelta)      !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Enviada                { background-color: var(--ColorEnviada)       !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Recotizar              { background-color: var(--ColorRecotizar)     !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Aceptada               { background-color: var(--ColorAceptada)      !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Rechazada              { background-color: var(--SolicitudRechazada) !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Facturada              { background-color: var(--Facturada)          !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Programada             { background-color: var(--Programada)         !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Proceso                { background-color: var(--ColorProceso)       !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Ejecutada              { background-color: var(--ColorProceso)       !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Facturar               { background-color: var(--ColorFacturar)      !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Revisión               { background-color: var(--SolictudRevision)   !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Ejecucion              { background-color: var(--SolictudEjecucion)  !important; color: #faf5f4; font-family: "Poppins-Light"; }
.Finalizada             { background-color: var(--SolicitudAprobada)  !important; color: #faf5f4; font-family: "Poppins-Light"; }

/* Colores de texto semánticos (sin fondo) */
.colorActivo     { background-color: transparent; color: var(--SolicitudAprobada); }
.colorPendiente  { background-color: transparent; color: var(--SolictudPendiente); }
.colorEnProceso  { background-color: transparent; color: var(--SolictudEjecucion); }
.colorRechazado  { background-color: transparent; color: var(--SolicitudRechazada); }


/* ════════════════════════════════════════════════════════════════
   BADGE COLORS — Variantes de color para .badge de Bootstrap
   ════════════════════════════════════════════════════════════════ */
.badge-primary   { background-color: #0d6efd; }
.badge-danger    { background-color: #dc3545; }
.badge-success   { background-color: #198754; }
.badge-warning   { background-color: #fd7e14; }
.badge-info      { background-color: #0dcaf0; }
.badge-secondary { background-color: #6c757d; }
.badge-light     { background-color: #f8f9fa; }
.badge-white     { background-color: #fff; }
.badge-dark      { background-color: #000; }


/* ════════════════════════════════════════════════════════════════
   SWEETALERT2 — Sombra en botones
   ════════════════════════════════════════════════════════════════ */
.swal2-confirm,
.swal2-cancel,
.swal2-deny { box-shadow: 2px 2px 6px #0f0f0f !important; }


/* ════════════════════════════════════════════════════════════════
   COMPONENTES DE FORMULARIO — Varios
   ════════════════════════════════════════════════════════════════ */
.inputTotal       { border: none; margin-right: 25px; }
.cerrarModal      { font-size: 35px; }
.input-group-addon{ padding: 0 4px !important; }
.row-flex         { display: flex; align-items: center; }
.centrarTable     { margin: 0 auto; }

.card-shadow {
    border: 1px solid #d1cece;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 2px 2px 4px gray;
    margin-bottom: 15px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.mdlCintillo {
    margin-bottom: 15px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}


/* ════════════════════════════════════════════════════════════════
   TABLAS ESPECIALES
   ════════════════════════════════════════════════════════════════ */
.tblServiciosFacturar,
.tableBordes { border: 1px solid #dad3d3 !important; }
.tblServiciosFacturar th, .tblServiciosFacturar td,
.tableBordes th,          .tableBordes td { border: 1px solid #dad3d3 !important; }

.table-striped tbody tr:nth-of-type(odd) { background-color: #f2f2f2; }

.thFijo {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
}

/* Tooltip de DataTables */
.custom-tooltip ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    color: #fff;
    background-color: #31708f;
    border: 1px solid #aaa;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
}
.custom-tooltip li { margin: 5px 0; }


/* ════════════════════════════════════════════════════════════════
   RADIO SWITCH — Toggle on/off para status en tablas
   ════════════════════════════════════════════════════════════════ */
.radio-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
    background-color: #ccc;
    border-radius: 15px;
}
.radio-switch input[type="radio"] { display: none; }
.switch-label {
    position: absolute;
    top: 1px;
    width: 100%;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 12px;
    color: white;
    cursor: pointer;
    border-radius: 15px;
    transition: 0.3s;
}
#activoOn:checked  + .switch-label { background-color: #5cb85c; left: 0;  width: 50%; }
#activoOff:checked + .switch-label { background-color: #e70d05; right: 0; width: 50%; }


/* ════════════════════════════════════════════════════════════════
   TIPOGRAFÍA — Tamaños de fuente rápidos
   ════════════════════════════════════════════════════════════════ */
.fsize11, .fSize11 { font-size: 11px !important; }
.fsize12, .fSize12 { font-size: 12px !important; }
.fSize10 { font-size: 10px !important; }
.fSize13 { font-size: 13px !important; }
.fSize14 { font-size: 14px !important; }
.fSize15 { font-size: 15px !important; }
.fSize16 { font-size: 16px !important; }
.fSize18 { font-size: 18px !important; }
.fSize20 { font-size: 20px !important; }
.fSize24 { font-size: 24px !important; }
.fSize28 { font-size: 28px !important; }
.fSize32 { font-size: 32px !important; }
.mbTotal { font-size: 10px !important; }


/* ════════════════════════════════════════════════════════════════
   PADDING / MARGIN UTILITARIOS
   ════════════════════════════════════════════════════════════════ */
.pt-5  { padding-top:    5px  !important; }
.pt-10 { padding-top:   10px  !important; }
.pt-15 { padding-top:   15px  !important; }
.pt-20 { padding-top:   20px  !important; }
.pb-10 { padding-bottom:10px  !important; }
.mt-5  { margin-top:     5px  !important; }
.mt-10 { margin-top:    10px  !important; }
.mt-20 { margin-top:    20px  !important; }
.mb-5  { margin-bottom:  5px  !important; }
.mb-10 { margin-bottom: 10px  !important; }
.mb-20 { margin-bottom: 20px  !important; }
.ml-5  { margin-left:    5px  !important; }
.ml-10 { margin-left:   10px  !important; }
.ml-20 { margin-left:   20px  !important; }

/* Tabla con celdas compactas */
.paddingTd             { padding: 2px 3px !important; font-size: 12px !important; }
.paddingTd input       { font-size: 12px !important; }


/* ════════════════════════════════════════════════════════════════
   PANEL COLAPSABLE — secciones en modales y formularios
   Uso: .panel.panel-default > .panel-heading.cerrarPanel + .panel-body.panelOculto
   ════════════════════════════════════════════════════════════════ */
.panelOculto {
    display: none;
}
.panel-heading.cerrarPanel {
    cursor:          pointer;
    user-select:     none;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.panel-heading.cerrarPanel::after {
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    font-size:   11px;
    color:       var(--sigo-azul);
    content:     '\f078';       /* chevron-down = expandir */
    transition:  transform .2s ease;
}
.panel-heading.cerrarPanel.panel-open::after {
    transform: rotate(180deg); /* chevron-up = colapsar */
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Pantallas pequeñas
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .table-sm { font-size: 8px; }
    .table-lg { font-size: 12px; }
    h1        { font-size: 12px !important; }

    .tblTrabajosEjecutados,
    .tblTrabajosEjecutados td,
    .tblTrabajosEjecutados textarea,
    .tblTrabajosEjecutados input,
    .tblTrabajosEjecutados button { font-size: 10px !important; }
    .tblTrabajosEjecutados input  { width: 90px; }

    .lblTotalMegas,
    .filesTabla,
    .filesTabla td,
    .filesTabla textarea,
    .filesTabla input,
    .filesTabla button { font-size: 10px !important; }
}
@media (max-width: 320px) {
    .paddingTd       { padding: 1px 2px !important; font-size: 10px !important; }
    .paddingTd input { font-size: 10px !important; }
}