/**
 * shared.css
 * -----------------------------------------------------------------------
 * Tokens de diseño y componentes de UI comunes a las 3 páginas
 * (files.html, settings.html, users.html): paleta de colores, appbar,
 * botones y pantalla de login. Cada página conserva en su propio <style>
 * solo lo que le es específico o distinto (paddings, tamaños, .card, etc).
 * -----------------------------------------------------------------------
 */
:root{
  --primary:#075BA8;
  --primary-dark:#06467C;
  --primary-tint:#E5F1FA;
  --accent:#F35525;
  --accent-dark:#C73F16;
  --accent-tint:#FDEAE2;
  --surface:#FFFFFF;
  --bg:#EEF7FC;
  --on-surface:#102238;
  --on-surface-var:#5D6B7C;
  --outline:#DCE8F0;
  --admin:#B91C1C;
  --admin-tint:#FBEAEA;
  --editor:#15803D;
  --editor-tint:#E7F5EC;
  --lector:#7B1FA2;
  --lector-tint:#F3E8FD;
  --pdf:#B91C1C;
  --docx:#0F766E;
  --xlsx:#15803D;
  --img:#BE185D;
  --folder:#B45309;
  --folder-tint:#FCF0DF;
  --radius:12px;
  --e1: 0 1px 2px rgba(7,54,95,.12), 0 1px 3px rgba(7,54,95,.10);
  --e2: 0 2px 6px rgba(7,54,95,.15), 0 1px 2px rgba(7,54,95,.10);
  --e3: 0 4px 14px rgba(7,54,95,.18), 0 1px 3px rgba(7,54,95,.10);
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--on-surface);
  font-family:'Poppins','Segoe UI',Arial,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.material-icons-round{font-size:20px;vertical-align:middle;}

/* Top App Bar (shell — cada página ajusta su propio padding).
   position:sticky acá (no solo en files.html/index.html como antes): sin
   esto, en el resto de las páginas la barra se iba con el scroll y el
   menú desplegable de #navMenu —posicionado relativo a ella— se iba con
   la barra en vez de quedarse pegado arriba de la pantalla. */
.appbar{
  height:64px;background:var(--surface);box-shadow:var(--e1);display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:20;
}
.appbar .logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#20B8F5);display:flex;align-items:center;justify-content:center;color:#fff;}
.appbar h1{font-size:18px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appbar .spacer{flex:1;}
.navlinks{display:flex;gap:6px;}
.navlinks a{text-decoration:none;color:var(--on-surface-var);font-size:13px;font-weight:500;padding:8px 14px;border-radius:18px;transition:background .15s ease, color .15s ease;}
.navlinks a:hover{background:#E8F0EF;color:var(--on-surface);}

/* Botón hamburguesa: agrupa todo lo que hay entre el spacer y la insignia
   de usuario (los .navlinks y, en index.html, el botón de login) dentro
   de #navMenu para poder colapsarlo en pantallas angostas. Oculto por
   defecto — el media query de abajo lo muestra y el de #navMenu lo
   convierte en desplegable (ver shared-nav.js). */
.nav-toggle{
  display:none;background:transparent;border:none;cursor:pointer;color:var(--on-surface-var);
  padding:8px;border-radius:8px;flex-shrink:0;align-items:center;justify-content:center;
}
.nav-toggle:hover{background:#E8F0EF;color:var(--on-surface);}
.nav-toggle .material-icons-round{font-size:22px;}
.nav-menu{display:flex;align-items:center;gap:6px;}

/* Por debajo de este ancho el título + los links + la insignia de usuario
   no entran en una sola fila y el navegador agregaba scroll horizontal en
   vez de adaptarse. Acá el menú se colapsa detrás del botón hamburguesa
   (desplegable hacia abajo) y la insignia de usuario pierde el texto,
   dejando solo el punto de rol y el botón de salir. */
@media (max-width:760px){
  .appbar{gap:8px;}
  .appbar h1{font-size:15px;max-width:46vw;}
  .nav-toggle{display:flex;}
  .user-badge-text{display:none;}
  .user-badge{padding:6px;gap:4px;}

  .nav-menu{
    position:absolute;top:100%;left:0;right:0;z-index:25;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);box-shadow:var(--e2);
    padding:8px;border-radius:0 0 16px 16px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .22s ease, opacity .18s ease;
  }
  .nav-menu.open{max-height:calc(100vh - 64px);opacity:1;pointer-events:auto;overflow-y:auto;}
  .navlinks{flex-direction:column;gap:2px;}
  .navlinks a{padding:11px 14px;border-radius:10px;}
  .nav-menu #openLoginBtn{width:100%;justify-content:center;margin:4px 0 0;}
}
.navlinks a.current{background:var(--primary);color:#fff;font-weight:700;}

/* Insignia de usuario conectado (appbar) — igual en todas las páginas */
.user-badge{
  display:flex;align-items:center;gap:10px;background:#E5F0FA;border-radius:24px;padding:6px 8px 6px 14px;
}
.role-dot{width:9px;height:9px;border-radius:50%;background:var(--admin);}
.user-badge-text{display:flex;flex-direction:column;line-height:1.2;}
.user-badge-text span:first-child{font-size:12.5px;font-weight:500;color:var(--on-surface);}
.user-badge-text span:last-child{font-size:10.5px;color:var(--on-surface-var);text-transform:uppercase;letter-spacing:0.3px;}
.logout-btn{cursor:pointer;color:var(--on-surface-var);border-radius:50%;padding:6px;font-size:18px;}
.logout-btn:hover{background:var(--outline);color:var(--on-surface);}

/* Botones */
.btn{
  align-items:center;gap:6px;font-size:13.5px;font-weight:600;letter-spacing:0.1px;
  border-radius:8px;cursor:pointer;border:1.5px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px);}
.btn-filled{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-filled:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn-outline:hover{background:var(--primary-tint);}
.btn:disabled{background:#E8F0EF;color:#7C8F8C;border-color:#E8F0EF;cursor:not-allowed;transform:none;}

/* Pantalla de login */
.login-card{background:var(--surface);border-radius:20px;box-shadow:var(--e2);padding:36px 32px;max-width:380px;width:100%;text-align:center;}
.login-card h2{font-size:20px;font-weight:500;margin:0 0 6px;}
.login-sub{font-size:13px;color:var(--on-surface-var);margin:0 0 22px;}
.login-card form{display:flex;flex-direction:column;gap:6px;text-align:left;}
.login-card label{font-size:12px;color:var(--on-surface-var);margin-top:8px;}
.login-card input{border:1.5px solid var(--outline);border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit;outline:none;}
.login-card input:focus{border-color:var(--primary);}
.login-error{background:var(--admin-tint);color:var(--admin);font-size:12.5px;padding:9px 12px;border-radius:8px;margin-top:8px;}
.login-hint{font-size:11.5px;color:var(--on-surface-var);margin:20px 0 0;}
#loginSubmit,#openLoginBtn{border-radius:24px;}

/* Formulario "nuevo usuario" (files.html y users.html) */
.new-user-form input:focus, .new-user-form select:focus{border-color:var(--primary);}

/* Overlays / diálogos (bottom-sheet style) — usados por el modal de login
   de index.html, "recuperar contraseña" en todas las páginas, y los
   diálogos propios de files.html (nueva carpeta, renombrar, mover...).
   Cada página conserva en su propio <style> solo lo que le es específico
   (ej. .dialog-preview de files.html). */
.overlay{position:fixed;inset:0;background:rgba(32,33,36,0.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:60;}
.overlay.open{display:flex;}
.dialog{
  background:var(--surface);width:100%;max-width:480px;border-radius:20px;box-shadow:var(--e3);overflow:hidden;
}
.dialog-head{display:flex;align-items:center;gap:12px;padding:20px 20px 4px;}
.dialog-head .icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.dialog-head h3{font-size:16px;font-weight:500;margin:0;line-height:1.3;}
.dialog-close{margin-left:auto;cursor:pointer;color:var(--on-surface-var);border-radius:50%;padding:6px;}
.dialog-close:hover{background:#E5F0FA;}
.dialog-body{padding:8px 20px 20px;}
.dialog-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}

.field-label{font-size:12.5px;color:var(--on-surface-var);margin:14px 20px 6px;}
.field-input{
  margin:0 20px;display:flex;align-items:center;gap:8px;border:1.5px solid var(--outline);border-radius:10px;
  padding:10px 12px;transition:border-color .15s ease;
}
.field-input:focus-within{border-color:var(--primary);}
.field-input .material-icons-round{color:var(--on-surface-var);font-size:19px;}
.field-input input{border:none;outline:none;flex:1;font-size:14px;font-family:inherit;background:transparent;color:var(--on-surface);}
.field-hint{font-size:11.5px;color:var(--on-surface-var);margin:8px 20px 0;}

/* Pie de página (shell — presente en todas las páginas) */
.app-footer{
  text-align:center;padding:28px 20px;margin-top:32px;
  background:var(--on-surface);
}
.app-footer p{margin:0 0 4px;font-size:12.5px;color:#fff;}
.app-footer p:last-child{margin-bottom:0;font-size:11.5px;color:#C6DCEB;}