@import url("studio-design-system.css?v=studio-v32");
/* ─────────────────────────────────────────────────
   LitHub · main.css  –  Estilos globales
───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f8f7f4;
  --surface:  #ffffff;
  --border:   #e0ddd6;
  --text:     #1a1a1a;
  --muted:    #888880;
  --green:    #2e8b57;
  --green-l:  #e8f5ed;
  --amber:    #c8a45a;
  --amber-l:  #fef9ee;
  --purple:   #7c3aed;
  --purple-l: #f5eeff;
  --red:      #c0392b;
  --red-l:    #fff0f0;
  --blue:     #1d6fa5;
  --blue-l:   #e8f3fb;
}

html { font-size: 16px; }
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { line-height: 1.2; }
a { color: var(--green); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; font-family: inherit;
  padding: 6px 13px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap; line-height: 1.4;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }
.btn.primary:hover { background: #257a4a; border-color: #257a4a; }
.btn.danger { background: var(--red-l); color: var(--red); border-color: #f5c6c6; }
.btn.danger:hover { background: #ffe0e0; }
.btn-icon { background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 5px; color: var(--muted); transition: color .12s, background .12s; }
.btn-icon:hover { color: var(--green); background: var(--green-l); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── FORMS ── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-family: inherit;
  outline: none; background: var(--bg); color: var(--text);
  transition: border-color .15s, background .15s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--green); background: #fff; }
.form-group select { cursor: pointer; }

/* ── OVERLAY / MODAL ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: none; align-items: center; justify-content: center; z-index: 500; padding: 16px; }
.overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: 16px; padding: 32px; width: 100%; max-width: 480px; box-shadow: 0 8px 40px rgba(0,0,0,.18); max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ── SPACER ── */
.spacer { flex: 1; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #c8c6be; }

/* ── RESPONSIVE HELPERS ── */
@media (max-width: 640px) {
  .modal { padding: 24px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   Studio Global Mobile · v2.0
   Mejoras para app-nav, modales, biblioteca y páginas generales
   ════════════════════════════════════════════════════════════════ */

/* ── App Nav (biblioteca, settings, chat) ── */
.app-nav { position:sticky;top:0;z-index:200;padding-top:env(safe-area-inset-top,0px); }

@media(max-width:600px){
  .app-nav{
    gap:8px;padding:0 12px;height:auto;min-height:50px;
    flex-wrap:nowrap;overflow-x:auto;
  }
  .app-nav .spacer{flex:1;min-width:0}
  /* Ocultar lang picker en nav */
  .app-nav .lh-lang-picker,.app-nav .lang-picker{display:none !important}
  /* Nombre de usuario oculto, solo avatar */
  .user-btn span:not(.user-avatar){display:none}
  .user-btn{padding:4px 8px;min-height:40px}
  /* Logo más pequeño */
  .app-logo{font-size:16px}
  .app-logo img{width:22px;height:22px}
  /* Botón de Chat AIGOR más compacto */
  .app-nav a[href*="chat.php"]{padding:5px 9px;font-size:12px}
}

/* ── Library toolbar en mobile ── */
@media(max-width:680px){
  .lib-header{padding:16px 16px 0;flex-wrap:wrap;gap:10px}
  .lib-header h1{font-size:18px}
  .lib-toolbar{padding:10px 16px;flex-wrap:wrap;gap:8px}
  .lib-toolbar .search-box{flex:1;min-width:160px}
  .lib-toolbar .filter-select{flex:1;min-width:120px;font-size:12px;padding:6px 8px}
  #obras-grid{padding:0 16px 80px !important}
}
@media(max-width:480px){
  .lib-toolbar{flex-direction:column}
  .lib-toolbar .search-box{width:100%}
  .lib-toolbar .filter-select{width:100%}
}

/* ── Modales: bottom sheet en mobile ── */
@media(max-width:640px){
  .overlay.open{
    align-items:flex-end;
    padding:0;
  }
  .modal{
    border-radius:22px 22px 0 0;
    max-height:92dvh;
    max-width:100%;
    width:100%;
    margin:0;
    padding:20px 18px 32px;
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));
  }
  /* Drag handle visual */
  .modal::before{
    content:'';display:block;
    width:36px;height:4px;
    background:var(--border);border-radius:99px;
    margin:0 auto 16px;
  }
}

/* ── Botones globales touch-friendly ── */
@media(max-width:768px){
  .btn{min-height:40px;padding:8px 14px}
  .btn-icon{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
  /* Formularios más legibles */
  .form-group input,.form-group textarea,.form-group select{
    font-size:16px !important; /* Evita zoom en iOS */
    padding:10px 12px;min-height:44px;
  }
  .form-group textarea{font-size:15px !important}
}

/* ── Settings / perfil ── */
@media(max-width:640px){
  .settings-grid{grid-template-columns:1fr !important}
  .profile-header{flex-direction:column;text-align:center}
}

/* ── Safe area para contenido con bottom nav ── */
.has-bottom-nav{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)) !important}

/* ── LITHUB BRAND ── */
.lh-brand{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:800;text-decoration:none;letter-spacing:-.4px;white-space:nowrap}
.lh-brand img{width:26px;height:26px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.lh-brand span{line-height:1}
.lh-brand.big{font-size:24px;justify-content:center}
.lh-brand.big img{width:42px;height:42px}
.lh-brand.cert{justify-content:center;font-size:28px;gap:10px}
.lh-brand.cert img{width:48px;height:48px}
@media(max-width:640px){.lh-brand span{font-size:.95em}.lh-brand img{width:23px;height:23px}}