/* ==========================================================================
   STYLE GLOBALS & CUSTOM PROPERTIES
   ========================================================================== */

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

   :root {
       /* Color Palette - Institucional ATN Theme */
       --bg-deep: #f3f4f6;      
       --bg-gradient-1: #ffffff; 
       --bg-gradient-2: #e5e7eb; 
       
       --surface: rgba(255, 255, 255, 0.85); /* glass base */
       --surface-hover: rgba(255, 255, 255, 1);
       --border-subtle: rgba(87, 86, 86, 0.2); 
       --border-highlight: rgba(87, 86, 86, 0.4);
       
       --text-primary: #575656;   /* ATN Gray */
       --text-secondary: #374151; /* Darker gray for headers */
       --text-muted: #8b929d;
       
       --accent-primary: #097137; /* ATN Green */
       --accent-primary-hover: #075c2d;
       --accent-secondary: #097137; 
       --accent-danger: #ef4444;
       --accent-danger-hover: #dc2626;
       --accent-success: #10b981;
       
       /* Shadows & Effects */
       --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
       --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
       --shadow-glow: 0 0 15px rgba(9, 113, 55, 0.3); /* green glow */
       
       --glass-blur: blur(12px);
       --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* ==========================================================================
      RESET & BASE STYLES
      ========================================================================== */
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Inter', sans-serif;
   }
   
   body {
       background: linear-gradient(135deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-deep));
       background-size: 400% 400%;
       animation: gradientBG 15s ease infinite;
       color: var(--text-primary);
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   @keyframes gradientBG {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   
   h1, h2, h3, h4, h5, h6 {
       font-weight: 600;
       letter-spacing: -0.025em;
       color: var(--text-primary);
   }
   
   a {
       color: var(--accent-primary);
       text-decoration: none;
       transition: color var(--transition-fast);
   }
   
   a:hover {
       color: var(--accent-primary-hover);
   }
   
   /* ==========================================================================
      LAYOUT & UTILITIES
      ========================================================================== */
   
   .container {
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1.5rem;
       margin-bottom: 2rem;
   }
   
   header {
       background: rgba(255, 255, 255, 0.9);
       backdrop-filter: var(--glass-blur);
       -webkit-backdrop-filter: var(--glass-blur);
       border-bottom: 1px solid var(--border-subtle);
       padding: 1rem 0;
       position: sticky;
       top: 0;
       z-index: 100;
   }
   
   header .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .logo {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--accent-primary);
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   main {
       flex: 1;
       padding: 3rem 0;
   }
   
   footer {
       text-align: center;
       padding: 2rem;
       color: var(--text-muted);
       font-size: 0.875rem;
       border-top: 1px solid var(--border-subtle);
       background: rgba(255, 255, 255, 0.8);
   }
   
   /* ==========================================================================
      COMPONENTS: GLASS PANELS & CARDS
      ========================================================================== */
   
   .glass-panel {
       background: var(--surface);
       backdrop-filter: var(--glass-blur);
       -webkit-backdrop-filter: var(--glass-blur);
       border: 1px solid var(--border-subtle);
       border-radius: 1rem;
       padding: 2rem;
       box-shadow: var(--shadow-md);
       transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
   }
   
   .glass-panel.hover-effect:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-lg), var(--shadow-glow);
       border-color: var(--border-highlight);
   }
   
   /* ==========================================================================
      COMPONENTS: BUTTONS
      ========================================================================== */
   
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       border-radius: 0.5rem;
       font-weight: 500;
       font-size: 0.9rem;
       cursor: pointer;
       transition: all var(--transition-fast);
       border: none;
       outline: none;
   }
   
   .btn-primary {
       background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
       color: white;
       box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
   }
   
   .btn-primary:hover {
       opacity: 0.9;
       box-shadow: var(--shadow-glow);
       transform: translateY(-1px);
   }
   
   .btn-secondary {
       background: rgba(255, 255, 255, 0.05);
       color: var(--text-primary);
       border: 1px solid var(--border-subtle);
   }
   
   .btn-secondary:hover {
       background: rgba(255, 255, 255, 0.1);
       border-color: var(--border-highlight);
   }
   
   .btn-danger {
       background: var(--accent-danger);
       color: white;
   }
   
   .btn-danger:hover {
       background: var(--accent-danger-hover);
   }

   .btn-icon {
       padding: 0.5rem;
       border-radius: 0.5rem;
       aspect-ratio: 1;
   }
   
   /* ==========================================================================
      COMPONENTS: FORMS & INPUTS
      ========================================================================== */
   
   .form-group {
       margin-bottom: 1.5rem;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .form-group label {
       font-size: 0.875rem;
       color: var(--text-secondary);
       font-weight: 500;
   }
   
   .form-control {
       width: 100%;
       padding: 0.875rem 1rem;
       background: rgba(255, 255, 255, 0.8);
       border: 1px solid var(--border-subtle);
       border-radius: 0.5rem;
       color: var(--text-primary);
       font-size: 1rem;
       transition: all var(--transition-fast);
   }
   
   .form-control:focus {
       outline: none;
       border-color: var(--accent-primary);
       box-shadow: 0 0 0 3px rgba(9, 113, 55, 0.2);
       background: rgba(255, 255, 255, 1);
   }
   
   .form-control::placeholder {
       color: var(--text-muted);
   }
   
   .input-group {
       display: flex;
       gap: 0.5rem;
   }
   
   .input-group .form-control {
       flex: 1;
   }
   
   /* ==========================================================================
      PAGES: HOME & LOGIN
      ========================================================================== */
   
   .hero {
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       min-height: 60vh;
       gap: 1.5rem;
   }
   
   .hero h1 {
       font-size: 3rem;
       line-height: 1.2;
       color: var(--accent-primary);
   }
   
   .hero p {
       font-size: 1.125rem;
       color: var(--text-secondary);
       max-width: 600px;
   }
   
   .auth-container {
       max-width: 400px;
       margin: 2rem auto;
   }
   
   .auth-header {
       text-align: center;
       margin-bottom: 2rem;
   }
   
   .auth-header h2 {
       font-size: 1.75rem;
       margin-bottom: 0.5rem;
   }
   
   .error-msg {
       background: rgba(239, 68, 68, 0.1);
       border: 1px solid rgba(239, 68, 68, 0.3);
       color: #fca5a5;
       padding: 0.75rem;
       border-radius: 0.5rem;
       font-size: 0.875rem;
       margin-bottom: 1rem;
       display: none;
   }
   
   .error-msg.active {
       display: block;
   }

   .success-msg {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.3);
        color: #6ee7b7;
        padding: 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        margin-bottom: 1rem;
        display: none;
   }

   .success-msg.active {
       display: block;
   }
   
   /* ==========================================================================
      PAGES: DASHBOARDS (Admin & Sociedad)
      ========================================================================== */
   
   .dashboard-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 2rem;
       margin-top: 2rem;
   }
   
   /* Tablas Modernas */
   .table-responsive {
       overflow-x: auto;
   }
   
   table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
   }
   
   th, td {
       padding: 1rem;
       text-align: left;
       border-bottom: 1px solid var(--border-subtle);
   }
   
   th {
       color: var(--text-secondary);
       font-size: 0.875rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 0.05em;
   }
   
   tbody tr {
       transition: background-color var(--transition-fast);
   }
   
   tbody tr:hover {
       background-color: rgba(255, 255, 255, 0.03);
   }
   
   td {
       color: var(--text-primary);
       font-size: 0.95rem;
   }
   
   .actions-cell {
       display: flex;
       gap: 0.5rem;
   }
   
   /* ==========================================================================
      COMPONENTS: MODALS
      ========================================================================== */
   
   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.7);
       backdrop-filter: blur(5px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 1000;
       opacity: 0;
       pointer-events: none;
       transition: opacity var(--transition-fast);
   }
   
   .modal-overlay.active {
       opacity: 1;
       pointer-events: all;
   }
   
   .modal {
       background: var(--bg-deep);
       border: 1px solid var(--border-subtle);
       border-radius: 1rem;
       width: 100%;
       max-width: 500px;
       padding: 2rem;
       box-shadow: var(--shadow-lg);
       transform: scale(0.95);
       transition: transform var(--transition-fast);
   }
   
   .modal-overlay.active .modal {
       transform: scale(1);
   }
   
   .modal-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.5rem;
   }
   
   .btn-close {
       background: transparent;
       border: none;
       color: var(--text-muted);
       font-size: 1.25rem;
       cursor: pointer;
       transition: color var(--transition-fast);
   }
   
   .btn-close:hover {
       color: white;
   }
   
   /* ==========================================================================
      COMPONENTS: DRAG & DROP ZONE
      ========================================================================== */
   
   .drop-zone {
       border: 2px dashed var(--border-subtle);
       border-radius: 1rem;
       padding: 3rem 2rem;
       text-align: center;
       cursor: pointer;
       transition: all var(--transition-fast);
       background: rgba(255, 255, 255, 0.5);
       margin-bottom: 2rem;
   }
   
   .drop-zone:hover, .drop-zone.dragover {
       border-color: var(--accent-primary);
       background: rgba(59, 130, 246, 0.05);
   }
   
   .drop-zone i {
       font-size: 3rem;
       color: var(--accent-primary);
       margin-bottom: 1rem;
   }
   
   .drop-zone p {
       color: var(--text-secondary);
       font-size: 0.95rem;
       margin-bottom: 1rem;
   }
   
   .drop-zone input[type="file"] {
       display: none;
   }
   
   /* Loader simple */
   .loader {
       border: 3px solid rgba(255,255,255,0.1);
       border-radius: 50%;
       border-top: 3px solid var(--accent-primary);
       width: 20px;
       height: 20px;
       -webkit-animation: spin 1s linear infinite; /* Safari */
       animation: spin 1s linear infinite;
       display: inline-block;
   }

   .loader-container {
       display: flex;
       justify-content: center;
       padding: 2rem;
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }

   /* Listado de archivos subidos */
   .file-list {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
   }

   .file-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem;
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid var(--border-subtle);
       border-radius: 0.5rem;
       transition: background var(--transition-fast);
   }

   .file-item:hover {
       background: rgba(255, 255, 255, 0.05);
   }

   .file-info {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .file-icon {
       font-size: 1.5rem;
       color: var(--accent-danger);
   }
   
   .file-details h4 {
       font-size: 0.95rem;
       margin-bottom: 0.25rem;
   }

   .file-details p {
       font-size: 0.8rem;
       color: var(--text-muted);
   }

   /* Ocultar elementos */
   .hidden {
       display: none !important;
   }