/* GSA Portal Empleados – UI refinada y 100% responsive
   Inspirada en la estética de globalstandard.com.ve (tipografía limpia, mucho aire, azul corporativo y acentos suaves).
   Puedes personalizar la paleta con estas variables CSS. */

:root{
  --gsa-bg: #ffffff;
  --gsa-fg: #0f172a;              /* Gris-azulado muy oscuro para texto */
  --gsa-muted: #6b7280;           /* Texto secundario */
  --gsa-brand: #0c3c78;           /* Azul corporativo (ajustable si marketing te pasa el exacto) */
  --gsa-brand-2: #1f6bba;         /* Azul acento */
  --gsa-surface: #f7fafc;         /* Fondos muy suaves */
  --gsa-border: #e5e7eb;          /* Bordes sutiles */
  --gsa-success: #059669;
  --gsa-warning: #d97706;
  --gsa-danger:  #dc2626;
  --gsa-radius: 14px;
  --gsa-gap: 14px;
  --gsa-shadow: 0 8px 24px rgba(2, 6, 23, .06);
  --gsa-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.gsa-wrap{color:var(--gsa-fg);font-family:var(--gsa-font);}
.gsa-container{max-width:1100px;margin-inline:auto;padding:clamp(12px,2vw,18px);}

.gsa-card{background:var(--gsa-bg);border:1px solid var(--gsa-border);border-radius:var(--gsa-radius);box-shadow:var(--gsa-shadow);padding:clamp(14px,2vw,22px);}
.gsa-stack{display:grid;gap:var(--gsa-gap);}
.gsa-row{display:flex;flex-wrap:wrap;gap:var(--gsa-gap);align-items:center}
.gsa-grow{flex:1 1 280px;min-width:0}

.gsa-title{font-weight:700;font-size:clamp(20px,2.5vw,28px);line-height:1.2;margin:0 0 10px;}
.gsa-sub{color:var(--gsa-muted);font-size:clamp(13px,1.6vw,15px);margin:0 0 8px;}
.gsa-hero{background:linear-gradient(145deg, rgba(12,60,120,.05), rgba(31,107,186,.08));border:1px solid var(--gsa-border);border-radius:var(--gsa-radius);padding:clamp(16px,2.4vw,28px);}

.gsa-cta{display:inline-flex;align-items:center;gap:8px;border-radius:12px;border:1px solid transparent;padding:10px 14px;font-weight:600;text-decoration:none}
.gsa-cta.primary{background:var(--gsa-brand);color:#fff}
.gsa-cta.primary:hover{background:#0a356a}
.gsa-cta.soft{background:var(--gsa-surface);border-color:var(--gsa-border);color:var(--gsa-brand);}
.gsa-cta.soft:hover{background:#eef4fb}

.gsa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gsa-gap);}
.gsa-kpis .kpi{padding:16px;border:1px solid var(--gsa-border);border-radius:12px;background:var(--gsa-bg);box-shadow:var(--gsa-shadow)}
.kpi .label{color:var(--gsa-muted);font-size:12px;letter-spacing:.3px;text-transform:uppercase}
.kpi .value{font-size:22px;font-weight:800;margin-top:6px}

.gsa-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--gsa-border);border-radius:12px;overflow:hidden;background:var(--gsa-bg)}
.gsa-table th, .gsa-table td{padding:10px 12px;border-bottom:1px solid var(--gsa-border);text-align:left;font-size:14px}
.gsa-table thead th{background:#eff6ff;font-weight:700}
.gsa-table tbody tr:hover{background:#f7fbff}
.gsa-table .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--gsa-border);background:#fff;font-size:12px}

.gsa-form{display:grid;gap:10px}
.gsa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gsa-gap)}
.gsa-form label{display:block;font-weight:600;margin-bottom:6px}
.gsa-form input[type="text"],.gsa-form input[type="date"],.gsa-form input[type="email"],.gsa-form input[type="number"],.gsa-form select,.gsa-form textarea{width:100%;border:1px solid var(--gsa-border);border-radius:10px;padding:10px 12px;background:#fff;outline:none}
.gsa-form textarea{min-height:90px;resize:vertical}

.gsa-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gsa-brand);border:1px solid var(--gsa-brand);color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none;cursor:pointer}
.gsa-btn:hover{background:#0a356a}
.gsa-btn.ghost{background:#fff;color:var(--gsa-brand);border-color:var(--gsa-brand)}
.gsa-actions{display:flex;flex-wrap:wrap;gap:10px}

.gsa-alert{border:1px solid var(--gsa-border);background:#f8fff9;padding:12px;border-left:4px solid var(--gsa-success);border-radius:10px}
.gsa-alert.warn{background:#fffdf5;border-left-color:var(--gsa-warning)}
.gsa-alert.error{background:#fff6f6;border-left-color:var(--gsa-danger)}

.gsa-pills{display:flex;flex-wrap:wrap;gap:8px}
.gsa-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--gsa-border);border-radius:999px;background:#fff;text-decoration:none;color:var(--gsa-brand);font-weight:600}
.gsa-pill:hover{background:#eef4fb}

.gsa-empty{padding:22px;border:1px dashed var(--gsa-border);border-radius:12px;text-align:center;color:var(--gsa-muted)}

@media (max-width: 640px){
  .gsa-title{font-size:20px}
  .gsa-table th,.gsa-table td{padding:10px 10px;font-size:13px}
}

/* Extras visuales para botones de descarga */
.gsa-download{display:inline-flex;align-items:center;gap:8px}
.gsa-money{font-weight:800;letter-spacing:.2px}