/* ─── THERIANS PLATFORM — shared.css ─── */
/* Estilos del nav universal, auth UI y utilidades compartidas */

/* ── Nav Auth ─────────────────────────────────────────────── */
.nav { position:fixed;top:0;left:0;right:0;z-index:100;padding:0.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(to bottom,rgba(13,11,20,0.97) 0%,rgba(13,11,20,0.85) 100%);backdrop-filter:blur(8px);border-bottom:1px solid rgba(212,168,67,0.12); }
.nav-logo { font-family:'Cinzel Decorative',serif;font-size:0.95rem;color:#d4a843;text-decoration:none;flex-shrink:0; }
.nav-links { display:flex;gap:1.5rem;list-style:none;flex:1;justify-content:center; }
.nav-links a { font-family:'Space Mono',monospace;font-size:0.65rem;color:#c8d4b8;text-decoration:none;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.3s;padding:0.2rem 0; }
.nav-links a:hover,.nav-links a.active { color:#d4a843; }

.nav-auth { display:flex;align-items:center;gap:0.6rem;flex-shrink:0; }
.nav-spinner { width:18px;height:18px;border:2px solid rgba(212,168,67,0.15);border-top-color:#d4a843;border-radius:50%;animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.nav-auth-btn { font-family:'Space Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:0.45rem 0.9rem;border-radius:3px;transition:all 0.3s;white-space:nowrap; }
.nav-auth-login { color:#c8d4b8;border:1px solid rgba(200,212,184,0.2); }
.nav-auth-login:hover { color:#d4a843;border-color:rgba(212,168,67,0.4); }
.nav-auth-register { background:#d4a843;color:#0d0b14;font-weight:700; }
.nav-auth-register:hover { background:#c4882a; }
.nav-auth-contribute { background:rgba(92,122,62,0.3);color:#8aac5c;border:1px solid rgba(92,122,62,0.4);font-weight:700; }
.nav-auth-contribute:hover { background:rgba(92,122,62,0.5);color:#faf6ef; }

/* ── Avatar + Dropdown ─────────────────────────────────────── */
.nav-user-menu { position:relative; }
.nav-avatar { display:flex;align-items:center;gap:0.4rem;background:rgba(250,246,239,0.06);border:1px solid rgba(212,168,67,0.2);border-radius:3px;padding:0.4rem 0.7rem;cursor:pointer;color:#ede5d5;font-family:'Space Mono',monospace;font-size:0.6rem;transition:all 0.3s; }
.nav-avatar:hover { border-color:rgba(212,168,67,0.5);background:rgba(212,168,67,0.08); }
.nav-avatar-emoji { font-size:1.1rem;line-height:1; }
.nav-avatar-name { max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.nav-avatar-caret { color:#d4a843;font-size:0.5rem;transition:transform 0.3s; }
.nav-avatar:hover .nav-avatar-caret { transform:rotate(180deg); }

.nav-dropdown { display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:rgba(13,11,20,0.99);border:1px solid rgba(212,168,67,0.2);border-radius:4px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:999; }
.nav-dropdown.open { display:block;animation:dropIn 0.25s cubic-bezier(0.23,1,0.32,1); }
@keyframes dropIn { from { opacity:0;transform:translateY(-8px); } to { opacity:1;transform:translateY(0); } }

.nav-dropdown-header { padding:0.9rem 1rem;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:0.7rem; }
.nav-dd-emoji { font-size:1.5rem; }
.nav-dd-name { display:block;font-family:'Crimson Pro',serif;font-size:0.95rem;font-weight:600;color:#faf6ef; }
.nav-dd-role { display:block;font-family:'Space Mono',monospace;font-size:0.55rem;color:#5c7a3e;text-transform:uppercase;letter-spacing:0.1em; }
.nav-dd-unverified { display:block;font-family:'Space Mono',monospace;font-size:0.5rem;color:#d47a62;margin-top:0.2rem; }
.nav-dd-item { display:flex;align-items:center;justify-content:space-between;padding:0.65rem 1rem;font-family:'Space Mono',monospace;font-size:0.6rem;color:#c8d4b8;text-decoration:none;letter-spacing:0.06em;transition:background 0.2s,color 0.2s;border:none;background:none;width:100%;text-align:left;cursor:pointer; }
.nav-dd-item:hover { background:rgba(212,168,67,0.08);color:#d4a843; }
.nav-dd-count { background:rgba(212,168,67,0.15);color:#d4a843;padding:0.1rem 0.4rem;border-radius:10px;font-size:0.55rem; }
.nav-dd-divider { height:1px;background:rgba(255,255,255,0.06);margin:0.3rem 0; }
.nav-dd-logout { color:rgba(180,80,60,0.7)!important; }
.nav-dd-logout:hover { color:#d47a62!important;background:rgba(139,58,42,0.12)!important; }

/* ── Hamburger (móvil) ─────────────────────────────────────── */
.nav-hamburger { display:none;background:none;border:1px solid rgba(212,168,67,0.2);color:#d4a843;padding:0.4rem 0.6rem;cursor:pointer;border-radius:3px;font-size:1rem; }
@media(max-width:768px) {
  .nav-hamburger { display:block; }
  .nav-links { display:none;flex-direction:column;gap:0.5rem; }
  .nav-links.mobile-open { display:flex;position:fixed;top:60px;left:0;right:0;background:rgba(13,11,20,0.99);padding:1.5rem;border-bottom:1px solid rgba(212,168,67,0.12);z-index:99; }
  .nav-auth { display:none; }
  .nav-auth.mobile-open { display:flex;flex-wrap:wrap; }
}

/* ── Toast / Notificaciones ─────────────────────────────────── */
#tp-toast-container { position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:0.5rem;max-width:360px; }
.tp-toast { padding:0.8rem 1.2rem;border-radius:4px;font-family:'Space Mono',monospace;font-size:0.65rem;letter-spacing:0.05em;color:#faf6ef;animation:toastIn 0.4s cubic-bezier(0.23,1,0.32,1);backdrop-filter:blur(8px); }
.tp-toast-success { background:rgba(45,74,46,0.95);border:1px solid rgba(138,172,92,0.4); }
.tp-toast-error { background:rgba(100,30,20,0.95);border:1px solid rgba(180,80,60,0.4); }
.tp-toast-info { background:rgba(13,11,20,0.95);border:1px solid rgba(212,168,67,0.3); }
@keyframes toastIn { from { opacity:0;transform:translateX(20px); } to { opacity:1;transform:translateX(0); } }

/* ── Form Shared ─────────────────────────────────────────────── */
.tp-form-group { margin-bottom:1.4rem; }
.tp-label { display:block;font-family:'Space Mono',monospace;font-size:0.6rem;color:#8aac5c;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.5rem; }
.tp-input, .tp-textarea, .tp-select {
  width:100%;background:rgba(250,246,239,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:3px;padding:0.8rem 1rem;
  color:#faf6ef;font-family:'Crimson Pro',serif;font-size:1rem;transition:border-color 0.3s,box-shadow 0.3s;outline:none;
}
.tp-input::placeholder,.tp-textarea::placeholder { color:rgba(200,212,184,0.3);font-style:italic; }
.tp-input:focus,.tp-textarea:focus,.tp-select:focus { border-color:#d4a843;box-shadow:0 0 0 3px rgba(212,168,67,0.1); }
.tp-input.error,.tp-textarea.error { border-color:#d47a62;box-shadow:0 0 0 3px rgba(180,80,60,0.1); }
.tp-textarea { min-height:160px;resize:vertical;line-height:1.6; }
.tp-select { appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4a843'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center; }
.tp-field-error { font-family:'Space Mono',monospace;font-size:0.58rem;color:#d47a62;margin-top:0.4rem;letter-spacing:0.05em; }
.tp-submit { width:100%;background:#d4a843;color:#0d0b14;border:none;padding:1rem;font-family:'Space Mono',monospace;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border-radius:3px;cursor:pointer;transition:background 0.3s,transform 0.2s;margin-top:0.5rem; }
.tp-submit:hover { background:#c4882a; }
.tp-submit:active { transform:scale(0.98); }
.tp-submit:disabled { background:rgba(212,168,67,0.3);cursor:not-allowed;transform:none; }
.tp-link { color:#8aac5c;text-decoration:none;border-bottom:1px solid rgba(138,172,92,0.3); }
.tp-link:hover { color:#d4a843; }