/* ════════════════════════════════════════════════════════════════════════
     GENERAL_GLOBAL.CSS · SIE · Presupuesto 2027
     ────────────────────────────────────────────────────────────────────────
     Contiene ÚNICAMENTE lo que Presupuesto27.html usa hoy y que NO vive ya
     en layout-admin.css (base institucional), en modulos.css (componentes
     genéricos: .filtros, .modal-*, .table-card, .form-group, etc.) ni en
     GenericGenie.css (el motor de animación "Genie": keyframes, .genio-
     entrando/.genio-saliendo/.genio-preparando y sus variables --genio-*).

     Lo que NO está aquí y por qué:
       · Header/topbar, navbar, footer            → layout-admin.css
       · .filtros, tabs, modal genérico, tablas    → modulos.css
       · Nodos/tabla/botones del árbol (clad-fila,
         clad-badge, clad-btn, clad-oc-*, etc.)    → Presupuesto_cladograma.css
       · Panel de columnas, filtros de tabla        → GenericTableHelper.css
       · Modal y tokens de exportación (gexport-*)  → GenericExportHelper.css
       · Keyframes y clases de la animación Genie   → GenericGenie.css

     Dependencia: usa variables de layout-admin.css con fallback
     (--surface, --border, --shadow, --radius, --vino) y no las redeclara.

     ────────────────────────────────────────────────────────────────────────
     MIGRACIÓN A TOKENS DE ESCALA (GenericEscala.css)
     ────────────────────────────────────────────────────────────────────────
     Regla seguida en este archivo:
       · Si el valor original coincide con un peldaño de la escalera
         (--e-1..--e-8, --fs-xs..--fs-xl) se usa ESE token directo, para
         que si el peldaño cambia de valor este archivo lo herede gratis.
       · Si el valor original NO coincide con ningún peldaño (383px, 20px,
         250px, etc.) se deriva con calc(Npx * var(--esc)), el mismo
         patrón que ya usa GenericEscala.css en su capa de reserva
         (sección 1 de ese archivo). No se redondea al peldaño más cercano
         porque cambiaría la proporción original del diseño.
       · Bordes finos decorativos (1px–5px: separadores, border-left de
         acento) se dejan en px fijo a propósito. Escalarlos los vuelve
         borrosos en pantallas de baja densidad y no aportan legibilidad.
         Mismo criterio para border-radius, que ya usa var(--radius) de
         layout-admin.
     ════════════════════════════════════════════════════════════════════════ */

  :root {
    /* Paleta propia de este archivo. --vino vive en layout-admin.css y NO
       se repite aquí aunque el valor coincida. */
    --wine-dark:      #671c33;
    --gray:           #636569;
    --gray-dark:      #41504d;
    --beige-light:    #dbc6b3;
    --gold-dark:      #c5a55a;
    --fondo:          #f9f9f9;
    --border-light:   #ccc;
    --text-default:   #333;
    --white:          #ffffff;
    --cereza:         #861943;
      --Suficiencia_Presupuestal: #636569;
      --Ampliacion_de_suficiencia: #8e9094;
      --Modificaciones_Suficiencia_Presupuestal: #3a3c40;
      --Suficiencia_Anticipada: #dbc6b3;
      --Suficiencia_Compromiso_Gasto: #a6a8ab;
      --ANTICIPADA_Suficiencia: #c2ba98;
      --Ampliacion_Liquida: #e8d4b4;
      --Ampliacion_Presupuestal: #c5a55a;
      --Transferencia: #671c33;
      --ANTICIPADA_Autorizacion: #41504d;
      --Disposicion_y_Reasignacion: #9e7d2e;
      --Multianuales: #ffd966;
      --Disposicion: #861943;
      --Reasignacion: #c0a40c;
      --Recalendarizacion: #f6e29f;
      --Uso_de_partida: #b37620;
      --Apertura_de_Fondo_Fijo: #7b8a87;
      --Lic_Romay: #41594d;
      --Circular: #d1c9a6;
      --Memorando: #cf1d62;
      --Oficio: #537362;
      --Ayuda_subsidios: #6c551f;
      --Noticia_Administrativa: #525458;
      --Pbr: #c5a55a;
      --Regularizacion: #7d2447;
      --Transparencia: #3d3522;

      /* ─────────────────────────────────────────────────────────────
         COLORES POR ESTATUS DE TRÁMITE
         ─────────────────────────────────────────────────────────────
         Fuente única de verdad para la dona de estatus, el pipeline
         Vega y cualquier otra gráfica que agrupe por estatus. Cambiar
         AQUÍ afecta a todo el ecosistema — no editar en JS. */
      --Estatus_PreRegistro:               #dbc6b3;
      --Estatus_Creado:                    #dbc6b3;
      --Estatus_Turnado:                   #671c33;
      --Estatus_Observaciones:             #c5a55a;
      --Estatus_ObservacionesInternas:     #b58f35;
      --Estatus_FirmaTitular:              #41594d;
      --Estatus_ProcesoFirmaTitular:       #41594d;
      --Estatus_EnProceso:                 #cf1d62;
      --Estatus_AcuseExpediente:           #4a1525;
      --Estatus_Aplicado:                  #636569;
      --Estatus_Archivado:                 #2c3e35;
      --Estatus_ArchivadoEntregado:        #2c3e35;
      --Estatus_ConAcuse:                  #2c3e35;
      --Estatus_Actualizacion:             #2c3e35;
      --Estatus_NoProcedentes:             #d32f2f;
      --Estatus_Devuelto:                  #d32f2f;
      --Estatus_Cancelado:                 #d32f2f;
      --Estatus_Rechazado:                 #d32f2f;

      /* Tokens de UI usados por Chart.js (títulos, ticks, textos de
         plugins). Los canvas necesitan strings resueltos, así que el
         JS los lee de estas mismas variables. */
      --chart-title:                       #671c33;
      --chart-axis:                        #636569;
      --chart-text-dark:                   #333333;
      --chart-text-light:                  #ffffff;
      --chart-total-hint:                  #671c33;
      --chart-dona-center-label:           #636569;
      --chart-dona-center-value:           #671c33;
  }
  /* ═══════════════════════════════════════════════════════════════
     SCROLLBAR GLOBAL DEL NAVEGADOR
     ═══════════════════════════════════════════════════════════════ */

  html {
      scrollbar-color: var(--wine-dark) var(--bg);
      scrollbar-width: thin;
  }

  /* Chrome / Edge / Chromium */
  html::-webkit-scrollbar {
      width: 12px;
      height: 12px;
  }

  html::-webkit-scrollbar-track {
      background: var(--bg);
  }

  html::-webkit-scrollbar-thumb {
      background: var(--wine-dark);
      border-radius: 10px;
      border: 2px solid var(--bg);
  }

  html::-webkit-scrollbar-thumb:hover {
      background: var(--vino);
  }

  /* ════════════════════════════════════════════════════════════════════════
     0 · SIE · Pantalla de Inicio de Sesión 
     ────────────────────────────────────────────────────────────────────────*/

  /* main.login-page, NUNCA "main" a secas: <main> es una etiqueta HTML5
     que reaparece en TODAS las pantallas (Correspondencia_Dashboard.html
     la usa como <main class="content">, cargando este mismo CSS de forma
     dinámica vía GenericLayoutadmin.js). Si se estilizara "main" pelado,
     estas reglas (display:flex, min-height, etc.) se colarían también en
     .content y le romperían el layout a esas pantallas, aunque .content
     gane en propiedades que sí declara (max-width, padding, margin-top):
     las que .content NO declara (display, align-items, min-height,
     background-color) se aplican igual. La clase .login-page en el
     <main> del login es lo que aísla esto por completo. */
  main.login-page {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    min-height: calc(var(--esc-alto-util, 100vh) - var(--e-6) * 4);
    padding: var(--e-4) var(--e-5);
    margin-top: var(--esc-cromo, var(--admin-topbar-h));
    background-color: var(--bg);
  }

  /* ─── ENVOLTORIO DEL LOGIN (contexto de posicionamiento del canvas) ─────
     Único responsable de position:relative/overflow:hidden para que el
     canvas de fondo no se filtre a otras páginas que también usan <main>.
     align-self:stretch pisa el align-items:center de main SOLO para este
     hijo, así ocupa todo el alto disponible sin que main tenga que
     declarar una altura fija. */
  .login-shell {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 1 1 auto;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* ─── FONDO ANIMADO (red de puntos, estilo COBAEV) ──────────────────────
     Puntos conectados a sus 5 vecinos más cercanos; se iluminan cerca del
     cursor. Vive en assets/js/particles-bg.js, sin jQuery ni TweenLite.
     --particles-rgb es el único valor que hay que tocar para cambiar el
     color: usa "R, G, B" (sin rgba(), sin #). Por defecto usa --wine-dark. */
  #bgCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* el mouse sigue interactuando con el formulario */
    --particles-rgb: 103, 28, 51; /* --wine-dark en formato "R, G, B" */
  }
  #pageInd     {font-weight: 700;
               font-size: 12px; 
               align-self: center;
               color: var(--wine-dark); }

  /* ─── TARJETA DE LOGIN ───────────────────────────────────────────────── */
  .login-container {
    position: relative; /* para quedar por encima de #bgCanvas */
    z-index: 1;
    max-width: calc(400px * var(--esc));
    width: 100%;
    padding: var(--e-6);
    background-color: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }

  .login-container h2 {
    text-align: center;
    margin-bottom: var(--e-6); /* 30px original, 32px peldaño */
    color: var(--vino-osc);

  }

  .login-container form input[type="email"],
  .login-container form input[type="password"] {
    width: 100%;
    padding: var(--e-3); /* 12px exacto */
    margin-bottom: var(--e-4); /* 15px original, 16px peldaño */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
  }

  .login-container form input:focus {
    border-color: var(--vino);
    outline: none;
    box-shadow:var(--cereza);
  }

  /* ─── LOGO ───────────────────────────────────────────────────────────── */
  .login-logo {
    text-align: center;
    margin-bottom: var(--e-5); /* 20px exacto */
  }

  .login-logo img {
    width: calc(120px * var(--esc));
    border-radius: var(--radius-sm);
  }

  /* ─── RESPONSIVO ─────────────────────────────────────────────────────── */
  @media (max-width: 576px) {
    main.login-page {
      padding: var(--e-4) var(--e-3);
    }



    .login-logo img {
      width: calc(100px * var(--esc));
    }
  }
  /* ==========================================================================
     1. FILTROS — ajuste puntual del select de dependencia
     ========================================================================== */
  #slideSelect {
    width: calc(273px * var(--esc));
    max-width: calc(550px * var(--esc));
  }

  /* ==========================================================================
     2. COLLAPSIBLES (armado del presupuesto + estructura CONAC + Correspondencia)
     ----------------------------------------------------------------------
     Presupuesto27.html usa dos <details>:
       .cladograma-collapsible-conac   → estructura CONAC
       .cladograma-collapsible         → armado del presupuesto
     Correspondencia_DashboardV2.html usa otros tres <details>:
       .correspondencia-collapsible    → trámites del mes en curso
       .indicadores-collapsible        → tus indicadores
       .volantes-collapsible           → volantes de observaciones
     Todos comparten <summary class="indicadores-summary"> y
     <div class="indicadores-content">. Se incluyen todos los selectores en
     [open] para que reciban el mismo borde dorado y giro de ícono que ya
     tenía la de armado (antes solo estaba declarada esta última).
     ========================================================================== */
  .cladograma-collapsible-conac,
  .cladograma-collapsible,
  .agrupacion-colapsible,
  .correspondencia-collapsible,
  .indicadores-collapsible,
  .volantes-collapsible {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e7e2dd);
    border-radius: var(--radius, 8px);
    margin-bottom: calc(20px * var(--esc));
    margin-top: calc(20px * var(--esc));
    box-shadow: var(--shadow, 0 2px 4px rgba(0,0,0,0.05));
    overflow: visible;
    transition: all 0.3s ease;
    height: auto;
  }

  .indicadores-summary {
    padding: var(--e-4) var(--e-5); /* 16px 24px equivalentes; original era 16px 20px */
    background: var(--white);
    border-bottom: 1px solid transparent;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    border-radius: 8px 8px 0 0;
  }
  .indicadores-summary::-webkit-details-marker { display: none; }
  .indicadores-summary h2 {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--wine-dark);
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
  }
  .indicadores-summary .toggle-icon {
    color: var(--wine-dark);
    transition: transform 0.3s ease;
    font-size: var(--fs-lg);
  }

  .cladograma-collapsible-conac[open] .indicadores-summary,
  .cladograma-collapsible[open]       .indicadores-summary,
  .correspondencia-collapsible[open]  .indicadores-summary,
  .correspondencia-collapsible[open]  .indicadores-summary,
  .indicadores-collapsible[open]      .indicadores-summary,
  .volantes-collapsible[open]         .indicadores-summary {
    border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
    border-bottom: 2px solid var(--gold-dark);
    border-bottom-color: var(--gold-dark);
  }
  .cladograma-collapsible-conac[open] .toggle-icon,
  .cladograma-collapsible[open]       .toggle-icon,
  .agrupacion-colapsible[open]        .toggle-icon,
  .correspondencia-collapsible[open]  .toggle-icon,
  .indicadores-collapsible[open]      .toggle-icon,
  .volantes-collapsible[open]         .toggle-icon {
    transform: rotate(180deg);
  }

  .indicadores-content {
    width: auto;
    padding: var(--e-5); /* 24px, original era 20px */
    background: var(--white);
  }


  /* ==========================================================================
     3. CLADOGRAMA — clases sueltas usadas dentro del render de niveles
     ========================================================================== */
  .clad-subtitle {
    font-weight: 400;
    font-size: var(--fs-sm);
    opacity: 0.65;
    margin-left: var(--e-2);
  }
  .clad-leyenda-icon-accion {
    color: var(--wine-dark);
    font-size: var(--fs-xs);
  }
  .clad-empty { opacity: 0.45; }
  .clad-empty-icon { margin-right: var(--e-2); }
  .clad-btn-icon { margin-right: calc(4px * var(--esc)); }

  /* ==========================================================================
     4. BOTONES DE NAVEGACIÓN RÁPIDA (#scrollBotones)
     ========================================================================== */
  #scrollBotones {
    position: fixed;
    bottom: calc(40px * var(--esc));
    right: calc(05px * var(--esc));
    display: flex;
    flex-direction: column;
    gap: var(--e-3); /* 12px, original era 10px */
    z-index: 9999;
  }
  .btn-scroll {
    border-radius: 50% !important;
    width: calc(45px * var(--esc));
    height: calc(45px * var(--esc));
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-color: var(--wine-dark) !important;
    color: var(--white) !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  .btn-scroll:hover {
    background-color: var(--vino) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  /* Estado activo: lo alterna SIE.togglePanelDerecho() en btnToggleFondos */
  .btn-scroll.active {
    background-color: var(--gold-dark) !important;
    color: var(--gray-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  /* Oculto por defecto; el scroll listener lo muestra al bajar la página */
  #btnScrollTop { display: none; }

  /* ==========================================================================
     5. PANEL LATERAL FIJO (FONDOS)
     ----------------------------------------------------------------------
     ========================================================================== */
  .panel-fijo-derecho {
      position: sticky;
      top: var(--panel-fondos-top, var(--esc-cromo, 43px));
      grid-column: 2;
      align-self: start;
      width: calc(324px * var(--esc)); 
      height: var(--panel-fondos-h, calc(var(--esc-alto-util) - var(--e-4) * 2));
      max-height: calc(var(--esc-alto-util) - var(--e-4) * 2);
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: var(--e-3);
      z-index: 1040;
      overflow: hidden;
      box-sizing: border-box;
  }
  .panel-fijo-derecho.panel-visible { display: flex; }
  .panel-lateral-box {
      width: 100%;
      flex: 0 1 auto;
      max-height: 100%;
      overflow: hidden;
      min-height: 0;
      box-sizing: border-box;
      background: var(--white);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      padding: calc(25px * var(--esc));
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
  }
  .panel-lateral-box h3 {
      font-size: var(--fs-lg);
      font-weight: 800;
      color: var(--gray-dark);
      margin-top: 0;
      margin-bottom: calc(15px * var(--esc));
      letter-spacing: 1px;
      text-transform: uppercase;
      border-bottom: 2px solid var(--gold-dark);
      padding-bottom: var(--e-2); /* 8px, exacto */
      width: 100%;
      text-align: center;
      flex-shrink: 0;        
  }
  .panel-contenido-interno {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
  }
  .main-con-panel.panel-derecho-abierto {
      display: grid;
      grid-template-columns:
          minmax(0, 1fr)
          calc(150 * var(--esc));
      gap: var(--e-6);
      align-items: start;
  }
  .main-contenido-presupuesto {
      grid-column: 1;
      min-width: 0;
  }
  @media (max-width: 1024px) {
      .main-con-panel.panel-derecho-abierto {
          display: block;
          padding-right: 0;
      }
      /* Aquí hay que soltar TODO lo que lo posicionaba en escritorio:
         sticky, columna de grid, alto de banda y centrado. */
      .panel-fijo-derecho {
          position: relative;
          top: 0;
          right: 0;
          grid-column: auto;
          align-self: auto;
          width: 100%;
          height: auto;
          max-height: none;
          overflow: visible;
          justify-content: flex-start;
          flex-direction: row;
          padding: 0 var(--e-6); /* 32px, original era 30px */
          margin-bottom: calc(20px * var(--esc));
          z-index: 1;
      }
      .panel-fijo-derecho.genio-entrando,
      .panel-fijo-derecho.genio-saliendo { animation: none; }

      .panel-lateral-box { width: 50%; min-height: calc(150px * var(--esc)); flex: 0 1 auto; }
      .main-con-panel { padding-left: var(--e-3) !important; } /* 12px, original era 10px */
  }
  @media (max-width: 768px) {
      .panel-fijo-derecho { flex-direction: column; padding: 0 var(--e-4); } /* 16px, original era 15px */
      .panel-lateral-box { width: 100%; }
  }

  /* ==========================================================================
     6. BANNERS FINANCIEROS (PRESUPUESTO 2027)
     ========================================================================== */
  .banner-financiero-modal {
      background-color: var(--fondo);
      padding: calc(15px * var(--esc));
      border-radius: 8px;
      margin-bottom: calc(20px * var(--esc));
      text-align: center;
      border: 1px solid var(--border-light);
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .banner-financiero-titulo {
      font-size: var(--fs-sm);
      color: var(--gray);
      display: block;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }
  .banner-financiero-valor {
      font-size: calc(24px * var(--esc));
      color: var(--vino);
      font-weight: bold;
  }
  .banner-financiero-masiva {
      background-color: var(--fondo);
      padding: calc(15px * var(--esc)) var(--e-5); /* 24px, original era 20px */
      border-radius: 8px;
      margin-bottom: calc(20px * var(--esc));
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-left: 5px solid var(--vino); /* acento decorativo, no escala */
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .banner-masiva-label {
      font-size: var(--fs-xs);
      color: var(--gray);
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      display: block;
  }
  .banner-masiva-valor-sistema {
      font-size: calc(20px * var(--esc));
      color: var(--text-default);
      font-weight: bold;
  }
  .banner-masiva-valor-actualizar {
      font-size: calc(20px * var(--esc));
      color: var(--vino);
      font-weight: bold;
  }

  /* ==========================================================================
     7. BUSCADOR GLOBAL DE TABLAS
     ========================================================================== */
  .global-search-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
  }
  .global-search-wrapper .search-icon {
    position: absolute;
    left: var(--e-3); /* 12px, exacto */
    color: var(--wine-dark);
    pointer-events: none;
    z-index: 1;
  }
  .global-search-input {
    padding-left: calc(32px * var(--esc)) !important;
    padding-right: calc(30px * var(--esc)) !important;
    width: calc(250px * var(--esc));
  }
  .clear-search-btn {
    position: absolute;
    right: calc(10px * var(--esc));
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--wine-dark);
    font-weight: bold;
    line-height: 1;
    padding: 0;
    font-size: var(--fs-sm);
  }
  .clear-search-btn:hover { opacity: 0.7; }

  


  /* ANIMACIONES DE CONSTRUCCIÓN, QUITAR CUANDO SEA NECESARIO */  
.en-construccion .tramite-icon-placeholder {
    transform-origin: 75% 75%;
    animation: martilloConstruccion 2.4s ease-in-out infinite;
}

@keyframes martilloConstruccion {
    0%, 65%, 100% {
        transform: rotate(0deg);
    }

    72% {
        transform: rotate(-18deg);
    }

    78% {
        transform: rotate(8deg);
    }

    84% {
        transform: rotate(-5deg);
    }

    90% {
        transform: rotate(0deg);
    }
}


/* ============================================================
   CINTILLO — REGRESAR A LA VISTA PRINCIPAL
   ============================================================ */

#btnInicio {
    position: relative;
}

.cintillo-inicio {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);

    width: max-content;
    max-width: 260px;
    padding: 9px 14px;

    background: var(--gray);
    color: #fff;
    border-radius: 8px;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1000;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.cintillo-inicio::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--gray);
}

/* Estado visible */
#btnInicio.mostrar-cintillo .cintillo-inicio {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}