/* ===============================================================
   AHORRA - activos.css
   Estilos globales del sistema - paleta verde manzana
=============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Mono:wght@300;400;500&display=swap');

/*  VARIABLES  */
:root {
    --ancho-sidebar:        280px;
    --alto-cabecera:        60px;
    --color-principal:      #A8E045;
    --color-principal-claro:#C5E879;
    --color-principal-dim:  rgba(168,224,69,0.12);
    --color-fondo:          #F1F8E9;
    --color-blanco:         #ffffff;
    --color-oscuro:         #1B3A0E;
    --color-oscuro-medio:   #2E5A0E;
    --color-texto-suave:    #5A7A3E;
    --color-texto-claro:    #B8D8A0;
    --color-borde:          #C5E879;
    --radio-borde:          10px;
}

/*  BASE  */
.cl-layout, .cl-layout *,
.cl-layout *::before, .cl-layout *::after { box-sizing: border-box; }

body:has(.cl-layout),
body:has(.cl-sidebar) {
    position:   static !important;
    top:        auto !important;
    display:    block !important;
    place-items: unset !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height:     auto !important;
    min-height: 100vh;
    margin:     0 !important;
    padding:    0 !important;
    background: var(--color-fondo) !important;
    font-family: "DM Mono", monospace;
    color: var(--color-oscuro);
}

/*  CABECERA  */
.cabecera {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    height:        var(--alto-cabecera);
    background:    var(--color-blanco);
    border-bottom: 2px solid var(--color-principal);
    z-index:       1000;
    display:       flex;
    align-items:   center;
    padding:       0 20px;
    gap:           0;
    box-shadow:    0 1px 12px rgba(0,0,0,0.07);
}
.cab-logo {
    display:     flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 16px;
    background:  var(--color-blanco);
    padding:     0 12px;
    height:      var(--alto-cabecera);
}
.cab-divisor {
    width:        1px;
    height:       36px;
    background:   var(--color-principal);
    flex-shrink:  0;
    margin-right: 16px;
}
.cab-empresa { flex: 1; min-width: 0; }
.cab-empresa-nombre {
    font-family:    "Syne", sans-serif;
    font-size:      13px;
    font-weight:    700;
    color:          var(--color-oscuro);
    letter-spacing: .05em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.cab-empresa-sub {
    font-family:    "DM Mono", monospace;
    font-size:      9px;
    color:          var(--color-texto-suave);
    margin-top:     2px;
    letter-spacing: .04em;
}
.cab-empresa-pagina {
    font-family:    "DM Mono", monospace;
    font-size:      10px;
    color:          var(--color-principal);
    margin-top:     2px;
}
.cab-acciones {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-shrink: 0;
    margin-left: 20px;
}
.cab-supervisor {
    display:         flex;
    align-items:     center;
    gap:             7px;
    background:      var(--color-oscuro);
    border:          1px solid rgba(168,224,69,0.30);
    border-radius:   7px;
    padding:         5px 10px;
    text-decoration: none;
}
.cab-supervisor-punto {
    width:        6px;
    height:       6px;
    border-radius: 50%;
    background:   var(--color-principal);
    box-shadow:   0 0 5px rgba(168,224,69,0.5);
    flex-shrink:  0;
    animation:    pulso-amarillo 2s infinite;
}
.cab-supervisor-texto {
    font-family:    "Syne", sans-serif;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--color-principal);
}
.cab-avatar {
    width:         30px;
    height:        30px;
    border-radius: 50%;
    background:    var(--color-fondo);
    border:        1.5px solid var(--color-principal);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   "Syne", sans-serif;
    font-size:     10px;
    font-weight:   700;
    color:         var(--color-oscuro);
}
.cab-salir {
    padding:     5px 14px;
    background:  transparent;
    border:      1px solid var(--color-borde);
    border-radius: 7px;
    font-family: "DM Mono", monospace;
    font-size:   10px;
    color:       var(--color-texto-suave);
    cursor:      pointer;
}
.cab-salir:hover { border-color: #dc2626; color: #dc2626; }

@keyframes pulso-amarillo {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/*  LAYOUT  */
.cl-layout {
    display:    flex;
    min-height: 100vh;
    padding-top: var(--alto-cabecera);
    margin-left: var(--ancho-sidebar);
    width:       calc(100% - var(--ancho-sidebar));
    box-sizing:  border-box;
}

/*  SIDEBAR  */
.cl-sidebar {
    width:         var(--ancho-sidebar);
    min-width:     var(--ancho-sidebar);
    background:    var(--color-oscuro);
    display:       flex;
    flex-direction: column;
    position:      fixed;
    top:           var(--alto-cabecera);
    left:          0;
    height:        calc(100vh - var(--alto-cabecera));
    overflow-y:    auto;
    flex-shrink:   0;
    z-index:       10;
}
.cl-nav { flex: 1; padding: 0; }
.cl-nav-seccion {
    font-size:      8px;
    font-weight:    500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.50);
    padding:        14px 24px 4px;
}
.cl-nav-item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         10px 20px;
    text-decoration: none;
    border-left:     3px solid transparent;
    transition:      all .18s;
    cursor:          pointer;
}
.cl-nav-item:hover  { background: rgba(255,255,255,0.04); border-left-color: rgba(168,224,69,0.4); }
.cl-nav-item.activo { border-left-color: var(--color-principal); background: rgba(168,224,69,0.08); }
.cl-nav-item.bloqueado { opacity: .35; cursor: not-allowed; }
.cl-nav-ini {
    width:         28px;
    height:        28px;
    border-radius: 6px;
    background:    rgba(168,224,69,0.12);
    border:        1px solid rgba(168,224,69,0.25);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   "Syne", sans-serif;
    font-size:     9px;
    font-weight:   700;
    color:         var(--color-principal);
    letter-spacing: .06em;
    flex-shrink:   0;
}
.cl-nav-item.activo .cl-nav-ini { background: var(--color-principal); color: var(--color-oscuro); }
.cl-nav-texto {
    flex:           1;
    font-family:    "Syne", sans-serif;
    font-size:      12px;
    font-weight:    700;
    color:          rgba(255,255,255,0.80);
    letter-spacing: .04em;
    line-height:    1.2;
}
.cl-nav-texto small {
    display:        block;
    font-family:    "DM Mono", monospace;
    font-size:      9px;
    font-weight:    300;
    color:          rgba(255,255,255,0.35);
    letter-spacing: .02em;
    margin-top:     2px;
}
.cl-nav-item.activo .cl-nav-texto { color: #fff; }
.cl-nav-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--color-principal);
    flex-shrink:   0;
}
.cl-sidebar-foot {
    padding:         14px 24px;
    border-top:      1px solid rgba(255,255,255,0.06);
    font-size:       9px;
    color:           rgba(255,255,255,0.15);
    letter-spacing:  .08em;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.cl-sidebar-foot-usuario {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.cl-sidebar-avatar {
    width:          24px;
    height:         24px;
    border-radius:  50%;
    background:     rgba(168,224,69,0.15);
    border:         1px solid rgba(168,224,69,0.3);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-family:    "Syne", sans-serif;
    font-size:      8px;
    font-weight:    700;
    color:          var(--color-principal);
}

/*  MAIN  */
.cl-main {
    flex:       1;
    padding:    20px 32px 40px;
    background: var(--color-fondo);
    min-height: calc(100vh - var(--alto-cabecera));
}

/*  PIE  */
.pie {
    margin-left: var(--ancho-sidebar);
    padding:     16px 0;
    text-align:  center;
    font-size:   10px;
    color:       var(--color-texto-suave);
    letter-spacing: .08em;
    border-top:  1px solid rgba(168,224,69,0.15);
}

/*  PRINT  */
@media print {
    .cabecera, .cl-sidebar, .cab-acciones, .pie { display: none !important; }
    .cl-layout  { display: block !important; }
    .cl-main    { margin-left: 0 !important; padding: 0 !important; background: #fff !important; }
}

/* ===============================================================
   LISTADOS (lst-*)
=============================================================== */
.lst-wrap          { max-width: 1100px; margin: 0 auto; padding: 8px 0 48px; }
.lst-titulo-pagina { font-family: "Syne", sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--color-oscuro); letter-spacing: .05em; margin-bottom: 4px; }
.lst-titulo-pagina span { color: var(--color-principal); }
.lst-subtitulo     { font-family: "DM Mono", monospace; font-size: 10px; color: var(--color-texto-suave); letter-spacing: .06em; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--color-borde); }

.lst-tabla-envoltorio { overflow-x: auto; border-radius: var(--radio-borde); border: 1.5px solid var(--color-borde); }
.lst-tabla          { width: 100%; border-collapse: collapse; }
.lst-tabla thead tr { background: var(--color-oscuro); }
.lst-tabla thead th { padding: 10px 14px; font-family: "Syne", sans-serif; font-size: 10px; font-weight: 700; color: var(--color-principal); letter-spacing: .10em; text-transform: uppercase; text-align: left; border-bottom: 2px solid var(--color-principal); }
.lst-tabla thead th.acciones { text-align: center; width: 130px; }
.lst-tabla tbody tr { border-bottom: 1px solid var(--color-fondo); transition: background .14s; }
.lst-tabla tbody tr:last-child { border-bottom: none; }
.lst-tabla tbody tr:hover { background: rgba(168,224,69,0.04); }
.lst-tabla tbody td { padding: 9px 14px; font-family: "DM Mono", monospace; font-size: 11px; color: var(--color-oscuro-medio); vertical-align: middle; }
.lst-tabla tbody td.acciones { text-align: center; white-space: nowrap; }

/* Íconos SVG de acción */
.lst-accion       { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; cursor: pointer; color: var(--color-texto-suave); transition: all .15s; text-decoration: none; }
.lst-accion:hover { background: rgba(168,224,69,0.12); color: var(--color-oscuro); }
.lst-accion.borrar:hover { background: rgba(220,38,38,0.08); color: #dc2626; }

/* Badge de estado */
.lst-badge        { display: inline-block; padding: 2px 10px; border-radius: 20px; font-family: "Syne", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lst-badge.activo { background: var(--color-principal); color: var(--color-oscuro); }
.lst-badge.borrado { background: rgba(220,38,38,0.10); color: #dc2626; }

/* ===============================================================
   FORMULARIOS ABM (frm-*)
=============================================================== */
.frm-wrap      { max-width: 740px; margin: 0 auto; padding: 8px 0 48px; }
.frm-card      { background: var(--color-blanco); border: 1.5px solid var(--color-borde); border-radius: var(--radio-borde); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.frm-card-head { padding: 14px 20px; background: var(--color-oscuro); border-bottom: 2px solid var(--color-principal); display: flex; align-items: center; gap: 12px; }
.frm-card-titulo { font-family: "Syne", sans-serif; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .07em; text-transform: uppercase; }
.frm-card-body { padding: 24px 28px; }
.frm-fila      { margin-bottom: 18px; }
.frm-etiqueta  { display: block; font-size: 8px; font-weight: 500; letter-spacing: .20em; text-transform: uppercase; color: var(--color-texto-suave); margin-bottom: 6px; }
.frm-campo     { width: 100%; background: var(--color-fondo); border: 1.5px solid var(--color-borde); border-radius: 8px; padding: 10px 14px; font-family: "DM Mono", monospace; font-size: 13px; color: var(--color-oscuro); outline: none; box-sizing: border-box; transition: border-color .18s; }
.frm-campo:focus { border-color: var(--color-principal); }
.frm-boton-guardar { padding: 11px 28px; background: var(--color-principal); color: var(--color-oscuro); border: none; border-radius: 8px; font-family: "Syne", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; cursor: pointer; transition: background .18s; }
.frm-boton-guardar:hover { background: var(--color-principal-claro); }
.frm-boton-cancelar { padding: 11px 20px; background: transparent; border: 1px solid var(--color-borde); border-radius: 8px; font-family: "DM Mono", monospace; font-size: 11px; color: var(--color-texto-suave); cursor: pointer; text-decoration: none; }
.frm-boton-cancelar:hover { border-color: #dc2626; color: #dc2626; }

/* ===============================================================
   MENSAJES (msj-*)
=============================================================== */
.msj-exito    { padding: 10px 16px; background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.30); border-radius: 8px; color: #166534; font-family: "DM Mono", monospace; font-size: 12px; margin-bottom: 16px; }
.msj-error    { padding: 10px 16px; background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.25); border-radius: 8px; color: #991b1b; font-family: "DM Mono", monospace; font-size: 12px; margin-bottom: 16px; }
.msj-aviso    { padding: 10px 16px; background: var(--color-principal-dim); border: 1px solid rgba(168,224,69,0.40); border-radius: 8px; color: var(--color-oscuro-medio); font-family: "DM Mono", monospace; font-size: 12px; margin-bottom: 16px; }

/* ===============================================================
   PANEL DE MÓDULO — INDEX (cl-panel-*, cl-bienvenida)
=============================================================== */
.cl-panel          { max-width: 860px; margin: 0 auto; padding: 8px 0 48px; }
.cl-panel-head     { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--color-oscuro); border-radius: 12px 12px 0 0; border-bottom: 2px solid var(--color-principal); }
.cl-panel-ini      { font-family: "Syne", sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--color-principal); letter-spacing: .12em; min-width: 40px; }
.cl-panel-head-texto { display: flex; flex-direction: column; gap: 3px; }
.cl-panel-head-nombre { font-family: "Syne", sans-serif; font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.cl-panel-head-desc   { font-family: "DM Mono", monospace; font-size: 10px; color: rgba(168,224,69,0.60); letter-spacing: .08em; }
.cl-panel-body        { background: #fff; border: 1.5px solid var(--color-borde); border-top: none; border-radius: 0 0 12px 12px; padding: 24px 28px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }

.cl-bienvenida        { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; text-align: center; color: var(--color-texto-suave); }
.cl-bienvenida-sym    { font-size: 2rem; color: var(--color-principal); margin-bottom: 16px; opacity: .5; }
.cl-bienvenida h2     { font-family: "Syne", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--color-oscuro); letter-spacing: .06em; margin: 0 0 8px; }
.cl-bienvenida p      { font-family: "DM Mono", monospace; font-size: 11px; color: var(--color-texto-suave); margin: 0; }

/* ===============================================================
   SUBMENÚ DENTRO DE PANEL (cl-submenu-*)
=============================================================== */
.cl-submenu         { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.cl-submenu-seccion { font-family: "DM Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .20em; text-transform: uppercase; color: var(--color-texto-suave); padding: 14px 0 6px; border-bottom: 1px solid var(--color-borde); margin-bottom: 4px; }
.cl-submenu-seccion:first-child { padding-top: 0; }
.cl-submenu-item    { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; text-decoration: none; font-family: "DM Mono", monospace; font-size: 12px; color: var(--color-oscuro-medio); transition: all .15s; }
.cl-submenu-item:hover  { background: var(--color-principal-dim); color: var(--color-oscuro); }
.cl-submenu-item.activo { background: var(--color-principal-dim); color: var(--color-principal); font-weight: 600; }
.cl-submenu-punto   { width: 5px; height: 5px; border-radius: 50%; background: var(--color-texto-claro); flex-shrink: 0; transition: background .15s; }
.cl-submenu-item:hover .cl-submenu-punto,
.cl-submenu-item.activo .cl-submenu-punto { background: var(--color-principal); }