:root{--bg:#0b0f14;--panel:#111826;--muted:#78839a;--text:#e8eefc;--primary:#3b82f6;--primary-700:#1d4ed8;--border:#1f2a3d;--success:#16a34a;--error:#ef4444;--sidebar-width:280px;--header-height:64px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* Sidebar Layout */
.sidebar-layout{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
.sidebar{width:var(--sidebar-width);height:100vh;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:4px 0 20px rgba(0,0,0,0.3);flex-shrink:0}
.sidebar-fixed{position:relative;left:0}

/* Sidebar Header */
.sidebar-header{display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:1px solid var(--border);min-height:var(--header-height)}
.sidebar-logo{display:flex;align-items:center;gap:12px;text-decoration:none;transition:all 0.2s ease}
.sidebar-logo:hover{text-decoration:none}
.sidebar-logo:hover .logo-text{color:var(--primary)}
.logo-image{width:32px;height:32px;object-fit:contain;border-radius:6px;transition:all 0.2s ease;flex-shrink:0}
.logo-image:hover{transform:scale(1.05)}
.logo-text{margin:0;font-size:18px;font-weight:700;color:var(--text)}
.sidebar-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;transition:all 0.2s}
.sidebar-close:hover{color:var(--text);background:rgba(255,255,255,0.05)}

/* Sidebar Menu */
.sidebar-menu{list-style:none;margin:0;padding:12px 0;flex:1;overflow-y:auto}
.sidebar-menu li{margin:0}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--muted);text-decoration:none;transition:all 0.2s;border-left:3px solid transparent}
.sidebar-link:hover{color:var(--text);background:rgba(255,255,255,0.03)}
.sidebar-link.active{color:var(--primary);background:rgba(59,130,246,0.1);border-left-color:var(--primary)}
.sidebar-icon{flex-shrink:0}
.sidebar-link span{font-weight:500;font-size:14px}

/* Sidebar Footer */
.sidebar-footer{padding:20px;border-top:1px solid var(--border);margin-top:auto}
.user-info{display:flex;align-items:center;gap:12px}
.user-avatar{width:32px;height:32px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0}
.user-details{flex:1;min-width:0}
.user-name{display:block;font-weight:600;font-size:14px;color:var(--text);margin-bottom:4px}
.logout-form{margin:0}
.logout-btn{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px;transition:color 0.2s}
.logout-btn:hover{color:var(--text)}

/* Main Wrapper */
.main-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Header */
.header{height:var(--header-height);background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:20px;flex-shrink:0;justify-content:space-between}
.header-title h1{margin:0;font-size:20px;font-weight:600;color:var(--text)}

/* Header Actions */
.header-actions{display:flex;align-items:center;gap:12px}

/* Back to Home Button */
.back-to-home-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3);border-radius:8px;color:var(--primary);text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s ease}
.back-to-home-btn:hover{background:rgba(59,130,246,0.15);border-color:var(--primary);color:var(--primary);text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,0.2)}
.back-to-home-btn svg{transition:transform 0.2s ease}
.back-to-home-btn:hover svg{transform:scale(1.1)}

/* Main Content */
.main-content{flex:1;padding:24px;overflow-y:auto;background:var(--bg)}

/* Alerts */
.alerts-container{margin-bottom:24px}
.alert{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:12px;margin-bottom:12px;border:1px solid var(--border)}
.alert-error{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#fecaca}
.alert-success{background:rgba(22,163,74,0.1);border-color:rgba(22,163,74,0.3);color:#86efac}
.alert-info{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.3);color:#93c5fd}
.alert-icon{flex-shrink:0;margin-top:2px}
.alert-content{flex:1;font-weight:500}

/* Footer */
.footer{padding:16px 24px;text-align:center;border-top:1px solid var(--border);background:var(--panel);flex-shrink:0}
.footer-content{color:var(--muted);font-size:13px}

/* Responsive - Old styles commented out for hamburger menu
@media (max-width:768px){
.sidebar-layout{flex-direction:column}
.sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border)}
.sidebar-header{min-height:56px;padding:12px 16px}
.logo-text{font-size:16px}
.sidebar-menu{padding:8px 0;flex:none;max-height:none;overflow:visible}
.sidebar-link{padding:8px 16px;font-size:13px}
.sidebar-footer{padding:12px 16px}
.main-wrapper{flex:1}
.header{padding:0 16px;height:56px}
.main-content{padding:16px}
}
*/
h1{font-size:22px;margin:0 0 16px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width: 900px){.grid{grid-template-columns:repeat(2,1fr)}}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
input,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0d1422;color:var(--text);outline:none}input:focus,select:focus{border-color:var(--primary)}
.actions{display:flex;gap:10px;margin-top:8px}
button,.button{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none;font-weight:600}button:hover,.button:hover{background:var(--primary-700)}.button.secondary{background:#0d1422;color:var(--text);border-color:var(--border)}.button.secondary:hover{border-color:var(--primary)}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#0e1524;z-index:1}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
tr:hover td{background:#0d1422}
.alert{padding:10px 12px;border-radius:10px;margin-bottom:10px}.alert.error{background:#221416;color:#ffdada;border:1px solid #3a1a1a}
.empty{color:var(--muted);text-align:center}
.footer{color:var(--muted)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px;background:#0d1422}
.badge-arba{border-color:#22c55e;background:rgba(34,197,94,.12);color:#86efac}
.badge-caba{border-color:#f59e0b;background:rgba(245,158,11,.12);color:#fde68a}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Estilos para barras de progreso */
.progress-container{margin-bottom:12px;padding:12px;background:rgba(0,0,0,.2);border-radius:8px;border:1px solid var(--border)}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px;font-weight:500}
.progress-filename{color:var(--text);font-family:monospace}
.progress-status{color:var(--muted);font-size:12px}
.progress-bar{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:4px}
.progress-fill{height:100%;background:var(--primary);border-radius:4px;transition:width 0.3s ease;min-width:2px}
.progress-fill.complete{background:var(--success)}
.progress-fill.error{background:var(--error)}
.progress-details{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.progress-numbers{font-family:monospace}
.progress-type{padding:2px 6px;background:rgba(59,130,246,.15);color:#93c5fd;border-radius:3px;font-size:10px}
.progress-type.arba{background:rgba(34,197,94,.15);color:#86efac}
.progress-type.caba{background:rgba(245,158,11,.15);color:#fde68a}

/* Progreso general de archivos */
.progress-general{margin-bottom:16px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.progress-general-header{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--text)}
.progress-general-bar{width:100%;height:12px;background:var(--border);border-radius:6px;overflow:hidden;margin-bottom:8px}
.progress-general-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-700));border-radius:6px;transition:width 0.3s ease;min-width:2px}
.progress-general-details{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

/* Logs compactos */
.logs-compact{max-height:200px;overflow-y:auto;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:8px;font-family:monospace;font-size:11px;color:var(--muted)}
.logs-compact:empty{display:none}

/* Celdas de consola */
.console-cell{font-family:monospace;font-size:11px;background:rgba(0,0,0,0.2);padding:4px 8px;border-radius:4px;color:var(--muted)}
.console-cell:hover{background:rgba(0,0,0,0.3)}

/* Botón de expansión en tablas */
.expand-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center}
.expand-btn:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.expand-btn svg{transition:transform 0.2s ease}

/* Filas expandidas */
.expanded-row{background:rgba(0,0,0,0.1)!important}
.expanded-content{padding:12px 16px!important;border-top:1px solid var(--border)}
.expanded-summary{font-size:12px}
.expanded-summary strong{color:var(--text);display:block;margin-bottom:8px}
.expanded-summary pre{margin:0;font-size:11px;line-height:1.4}

/* Zona de drag & drop */
.drop-zone{border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;transition:all 0.3s ease;background:rgba(0,0,0,0.1);cursor:pointer;min-height:120px}
.drop-zone:hover{border-color:var(--primary);background:rgba(59,130,246,0.05)}
.drop-zone.drag-over{border-color:var(--primary);background:rgba(59,130,246,0.1);border-style:solid}
.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:16px;height:100%}
.drop-icon{color:var(--muted);transition:color 0.3s ease}
.drop-zone:hover .drop-icon{color:var(--primary)}
.drop-text p{margin:0;font-size:16px;color:var(--text)}
.drop-text .drop-hint{font-size:13px;color:var(--muted)}
.link-button{background:none;border:none;color:var(--primary);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.link-button:hover{color:var(--primary-700)}

/* Mini explorador de archivos */
.file-explorer{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;background:rgba(0,0,0,0.1);border:1px solid var(--border);border-radius:8px;padding:12px}
.file-explorer-empty{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;color:var(--muted);background:rgba(0,0,0,0.1);border:1px solid var(--border);border-radius:8px}
.file-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,0.2);border-radius:6px;transition:background 0.2s}
.file-item:hover{background:rgba(0,0,0,0.3)}
.file-item:hover .file-actions{opacity:1}
.file-icon{color:var(--primary);flex-shrink:0}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-size:11px;color:var(--muted);font-family:monospace}
.file-actions{opacity:0;transition:opacity 0.2s;flex-shrink:0}
.file-delete-btn{background:none;border:none;color:var(--error);cursor:pointer;padding:4px;border-radius:4px;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.file-delete-btn:hover{background:rgba(239,68,68,0.1);color:#ff6b6b}
.file-delete-btn:disabled{opacity:0.5;cursor:not-allowed}

/* Lista de archivos pendientes */
.pending-files-list{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:8px;padding:12px;max-height:150px;overflow-y:auto}
.pending-empty{text-align:center;color:var(--muted);padding:16px;font-size:13px}
.pending-file-item{display:flex;align-items:center;gap:10px;padding:6px 8px;background:rgba(245,158,11,0.15);border-radius:6px;margin-bottom:6px;transition:background 0.2s}
.pending-file-item:last-child{margin-bottom:0}
.pending-file-item:hover{background:rgba(245,158,11,0.2)}
.pending-file-icon{color:#fbbf24;flex-shrink:0}
.pending-file-info{flex:1;min-width:0}
.pending-file-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pending-file-meta{font-size:10px;color:#fbbf24;font-family:monospace}
.pending-file-remove{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;border-radius:3px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;opacity:0.7}
.pending-file-remove:hover{background:rgba(239,68,68,0.1);color:var(--error);opacity:1}

/* S3 Status y Configuration */
.s3-status{display:flex;align-items:center;gap:8px}
.status-loading{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.status-success{display:flex;align-items:center;gap:8px;color:#10b981;font-size:13px;font-weight:500}
.status-warning{display:flex;align-items:center;gap:8px;color:#f59e0b;font-size:13px;font-weight:500}
.status-error{display:flex;align-items:center;gap:8px;color:var(--error);font-size:13px;font-weight:500}
.spinner-sm{width:14px;height:14px;border:2px solid var(--border);border-top:2px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite}

/* S3 Info Grid */
.s3-config-details{margin-top:12px}
.s3-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;background:rgba(0,0,0,0.1);border:1px solid var(--border);border-radius:8px;padding:16px}
.s3-info-item{display:flex;flex-direction:column;gap:4px}
.s3-info-item.s3-info-full-width{grid-column:1 / -1}
.s3-info-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.s3-info-value{font-size:13px;color:var(--text);font-family:monospace;word-break:break-all}
.s3-info-value.s3-info-success{color:#10b981;font-family:inherit}
.s3-info-value.s3-info-error{color:var(--error);font-family:inherit}

/* Responsive S3 Grid */
@media (max-width: 640px) {
  .s3-info-grid{grid-template-columns:1fr;gap:12px}
}

/* Sortable table headers */
.sortable-header {
  cursor: pointer;
  user-select: none;
}

.sortable-header:hover {
  background-color: var(--hover);
}

.sortable-header.active {
  background-color: var(--primary-light);
}

.sort-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  margin: -8px;
}

.sort-link:hover {
  color: inherit;
  text-decoration: none;
}

.sort-indicator {
  margin-left: 6px;
  font-weight: bold;
  color: var(--primary);
  font-size: 14px;
}

/* User Role Badge in Sidebar */
.user-info-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-role-badge.admin {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.user-role-badge.consultor_padrones {
  background: rgba(16, 185, 129, 0.15);
  color: #86efac;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Hamburger Menu Styles */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.hamburger-line {
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Hamburger Animation */
.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

/* Mobile Sidebar Styles */
@media (max-width: 768px) {
  /* Show hamburger button */
  .hamburger-btn {
    display: flex;
  }
  
  /* Hide sidebar by default on mobile */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
  
  /* Show sidebar when menu is open */
  .sidebar-open .sidebar {
    transform: translateX(0);
  }
  
  /* Show overlay when menu is open */
  .sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }
  
  /* Prevent body scroll when menu is open */
  .sidebar-open {
    overflow: hidden;
  }
  
  /* Adjust main wrapper for mobile */
  .main-wrapper {
    width: 100%;
    margin-left: 0;
  }
  
  /* Header adjustments */
  .header {
    position: relative;
    z-index: 998;
  }
  
  /* Sidebar header mobile adjustments */
  .sidebar-header {
    padding: 16px 20px;
    min-height: var(--header-height);
    border-bottom: 1px solid var(--border);
  }
  
  /* Logo mobile adjustments */
  .logo-image {
    width: 28px;
    height: 28px;
  }
  
  .logo-text {
    font-size: 16px;
  }
  
  /* Sidebar menu mobile adjustments */
  .sidebar-menu {
    padding: 12px 0;
  }
  
  .sidebar-link {
    padding: 14px 20px;
    font-size: 14px;
  }
  
  /* Sidebar footer mobile adjustments */
  .sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border);
  }
  
  /* Header mobile adjustments */
  .header {
    padding: 0 16px;
    height: 56px;
    gap: 12px;
  }
  
  .header-title h1 {
    font-size: 18px;
  }
  
  /* Back to home button mobile adjustments */
  .back-to-home-btn {
    padding: 6px 12px;
    font-size: 13px;
    gap: 6px;
  }
  
  .back-to-home-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .back-to-home-btn span {
    display: none; /* Ocultar texto en móvil, solo mostrar icono */
  }
  
  /* Main content mobile adjustments */
  .main-content {
    padding: 16px;
  }
  
  /* User info mobile adjustments */
  .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .user-info-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .user-role-badge {
    align-self: flex-start;
  }
}