/* =========================
   VARIABLES + BASE
   ========================= */
:root{
  /* Paleta general */
  --txt: #e9ecf1;
  --sub: #b9bfd1;

  /* Fondo glass */
  --bg1: #0f1221;
  --bg2: #12162a;

  /* Acentos glass */
  --accent: #7c3aed;      /* morado */
  --accent-2: #22d3ee;    /* cian */

  /* Capas y bordes glass */
  --glass: rgba(255,255,255,0.08);
  --glass-2: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.20);
  --border-strong: rgba(255,255,255,0.28);

  /* Estados */
  --ok: #16a34a;
  --danger: #ef4444;
  --warn: #f59e0b;

  /* Utilidades heredadas */
  --brand:#3b82f6;
  --brand-600:#2563eb;
  --ring: rgba(59,130,246,.35);
  --radius:14px;
  --shadow:0 8px 24px rgba(2,6,23,.06);
  --muted:#64748b;
  --card:#ffffff;
  --text:#0f172a;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html,body{
  background: radial-gradient(1200px 800px at 10% 0%, #1b1f37 0%, var(--bg1) 40%, var(--bg2) 100%) fixed;
  color: var(--txt);
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
}

/* Contenedor general */
.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}

/* =========================
   NAVBAR (GLASS)
   ========================= */
.nav-glass{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin: 8px 0 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.nav-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* ajuste fino */
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: var(--txt);
  font-weight: 600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;      /* evita partir “Salir” */
}
.nav-item svg{ width:16px; height:16px; display:block; margin-top:1px; flex: 0 0 16px; }
.nav-item:hover{
  background: var(--glass);
  border-color: var(--border);
  transform: translateY(-1px);
}
.nav-item.active{
  background: linear-gradient(180deg, rgba(124,58,237,.25), rgba(34,211,238,.15));
  border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px rgba(124,58,237,.25);
}

/* Fix nav móvil: permitir wrap y quitar spacer si existe */
@media (max-width: 600px){
  .nav-glass{ flex-wrap: wrap; justify-content: center; padding: 8px; }
  .nav-glass .spacer{ display:none; }
  .nav-item{ padding: 8px 12px; flex: 0 0 auto; }
}

/* =========================
   TARJETAS / PANELES (GLASS)
   ========================= */
.glass-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Grid utilitario */
.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr; } }

/* =========================
   BOTONES (GLASS)
   ========================= */
.btn-glass{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--txt);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-glass:hover{ background: var(--glass); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.btn-glass.small{ padding: 8px 12px; font-size: 0.9rem; }
.btn-ok{ border-color: rgba(34,197,94,.35); box-shadow: 0 6px 16px rgba(34,197,94,.18); }
.btn-warn{ border-color: rgba(245,158,11,.35); box-shadow: 0 6px 16px rgba(245,158,11,.18); }
.btn-danger{ border-color: rgba(239,68,68,.35); box-shadow: 0 6px 16px rgba(239,68,68,.18); }
.btn-accent{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  color: var(--txt); font-weight: 700; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(34,211,238,.18));
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-accent:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.28); }

/* =========================
   TABLA (BASE)
   ========================= */
.table-glass{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
}
.table-glass th, .table-glass td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--txt);
}
.table-glass th{
  text-align: left;
  font-weight: 700;
  color: var(--sub);
}
.table-glass tr:last-child td{ border-bottom: 0; }
.table-glass tr:hover td{ background: rgba(255,255,255,0.05); }

/* 🔧 Reset importante: por defecto, las celdas siguen siendo “table-cell”
   (evita que otras pantallas se vuelvan “cards” sin querer) */
.table-glass td{ display: table-cell; }

/* Etiquetas de estado */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:.85rem; border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
}
.badge-ok{ color: #bbf7d0; border-color: rgba(34,197,94,.35); }
.badge-warn{ color: #fde68a; border-color: rgba(245,158,11,.35); }
.badge-danger{ color: #fecaca; border-color: rgba(239,68,68,.35); }

/* Inputs glass */
.input-glass{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.07);
  color:var(--txt);
  outline:none;
}
.input-glass:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(34,211,238,.2);
}

/* Utilidades */
.hstack{ display:flex; gap:10px; align-items:center; }
.vstack{ display:flex; gap:10px; flex-direction:column; }
.justify-between{ display:flex; justify-content:space-between; align-items:center;}
.mutedd{ color: var(--sub); }

/* Forzar números más oscuros si usas <strong> o .value/.time dentro de glass-card */
.glass-card strong,
.glass-card .value,
.glass-card .time{ color: #111 !important; }

/* =========================
   COMPONENTES HEREDADOS (LIGHT)
   ========================= */
.nav{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin:14px 0; }
.nav a{ color:var(--muted); text-decoration:none; font-weight:600 }
.nav a.active{ color:var(--brand) }
.nav .spacer{ flex:1 }

.card{ background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.card h4{ margin:0 0 8px; font-size:15px; color:#6b7280; font-weight:600; }
.cards{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(180px, 1fr)); margin-bottom: 20px; }
@media (max-width: 900px){ .cards{ grid-template-columns: 1fr; } }
.card .metric{ font-size:28px; font-weight:700; }
.muted{ color:#6b7280; font-size:13px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; font-weight:700; background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.25); transition:.2s; }
.btn:hover{ background:var(--brand-600) }
.btn.secondary{ background:#e2e8f0; color:#0f172a; box-shadow:none }
.btn.danger{ background:var(--danger) }
.btn.ok{ background:var(--ok) }

.actions{ display:flex; gap:10px; flex-wrap:wrap }
.grid-2.light{ display:grid; grid-template-columns:1fr; gap:12px }
@media(min-width:720px){ .grid-2.light{ grid-template-columns:1fr 1fr } }
.big-actions{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px }
.big-actions .btn{ padding:18px; font-size:18px }
@media(min-width:720px){ .big-actions{ grid-template-columns:1fr 1fr } }

.table-wrap{ overflow:auto; border-radius:12px; box-shadow:var(--shadow) }
table{ width:100%; border-collapse:collapse; min-width:720px; background:#fff }
th, td{ padding:10px 12px; text-align:left; border-bottom:1px solid #eef2f7; font-size:14px }
th{ color:var(--muted); font-weight:700 }

/* =========================
   FLASH (glass)
   ========================= */
.flash{
  margin: 12px auto 10px;
  padding: 12px 16px;
  max-width: 520px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--txt);
}
.flash.success { color: #bbf7d0; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.flash.warning { color: #fde68a; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.flash.info    { color: #bae6fd; border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.flash.danger,
.flash.error   { color: #fecaca; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }

/* Minis */
.mini{ font-size:12px; color:var(--sub) }
.center{ text-align:center }

/* =========================
   LOGIN (EMPLEADOS) — Uiverse adaptado
   ========================= */
.hc-login { display:grid; place-items:center; padding: min(6vw, 32px); }
.hc-login .login-container {
  --form-width: 315px; --aspect-ratio: 1.33;
  --login-box-color: #272727; --input-color: #3a3a3a; --button-color: #373737; --footer-color: rgba(255,255,255,0.6);
  display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; background:var(--login-box-color);
  border-radius:24px; width:calc(var(--form-width) + 1px); height:calc(var(--form-width) * var(--aspect-ratio) + 1px);
  z-index:8;
  box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.2), 0 0 8px rgba(255,255,255,.08), 0 0 16px rgba(255,255,255,.06);
}
.hc-login .login-container::before {
  content:""; position:absolute; inset:-50px; z-index:-2;
  background: conic-gradient(from 45deg, transparent 75%, #fff, transparent 100%);
  animation: hc-spin 4s ease-in-out infinite;
}
@keyframes hc-spin { 100% { transform: rotate(360deg); } }

.hc-login .login-box {
  background: var(--login-box-color);
  border-radius:24px;
  padding:28px;
  width: var(--form-width);
  height: calc(var(--form-width) * var(--aspect-ratio));
  margin: 0 auto;
  z-index:10;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: inset 0 40px 60px -8px rgba(255,255,255,.12),
              inset 4px 0 12px -6px rgba(255,255,255,.12),
              inset 0 0 12px -4px rgba(255,255,255,.12);
}
.hc-login .form { display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px; height:100%; }

/* Logo marco */
.hc-login .logo {
  width:65px; height:65px;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(0,0,0,.2));
  box-shadow: 8px 8px 16px rgba(0,0,0,.2), -8px -8px 16px rgba(255,255,255,.06);
  border-radius:20px; border:2px solid #fff; display:flex; justify-content:center; align-items:center; position:relative;
}
.hc-login .logo::before { content:""; position:absolute; bottom:10px; width:50%; height:20%; border-top-left-radius:40px; border-top-right-radius:40px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; border: 2.5px solid #fff; }
.hc-login .logo::after  { content:""; position:absolute; top:10px; width:30%; height:30%; border-radius:50%; border: 2.5px solid #fff; }
.hc-login .user { position:absolute; height:50px; color:#fff; }
.hc-login .header { width:100%; text-align:center; font-size:24px; font-weight:700; padding:6px; color:#fff; display:flex; justify-content:center; align-items:center; }

/* Inputs Login */
.hc-login .input { width:100%; padding:10px; border:none; border-radius:12px; background:#3a3a3a; color:#fff; outline:none; font-size:14px; }
.hc-login .input::placeholder{ color:#cbd5e1; }
.hc-login .input:focus { border:1px solid #fff; }

/* Password with toggle */
.hc-login .password-field { position:relative; width:100%; }
.hc-login .toggle-pass { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:6px; border-radius:8px; cursor:pointer; }
.hc-login .toggle-pass:hover { background: rgba(255,255,255,.08); }
.hc-login .icon-eye { width:20px; height:20px; fill:#e5e7eb; opacity:.85; }

/* Row: remember + link */
.hc-login .row { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; margin-top:4px; }
.hc-login .remember { display:flex; align-items:center; gap:8px; color:#e5e7eb; font-size:12px; cursor:pointer; }
.hc-login .remember input { width:16px; height:16px; }
.hc-login .link { color:#e5e7eb; font-size:12px; text-decoration:none; opacity:.8; }
.hc-login .link:hover { opacity:1; text-decoration:underline; }

/* Botón principal */
.hc-login .button {
  width:100%; height:40px; border:none; border-radius:20px; font-size:14px; font-weight:600; cursor:pointer;
  display:grid; place-content:center; gap:10px; background:#373737; color:#fff; transition:.3s;
  box-shadow: inset 0 3px 6px -4px rgba(255,255,255,.6), inset 0 -3px 6px -2px rgba(0,0,0,.8);
}
.hc-login .button:hover { background: rgba(255,255,255,.25); box-shadow: inset 0 3px 6px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.8), 0 0 8px rgba(255,255,255,.05); }
.hc-login .sign-in { margin-top:6px; }

/* Footer */
.hc-login .footer { width:100%; text-align:left; color:rgba(255,255,255,0.6); font-size:12px; margin-top:8px; }
.hc-login .footer .link { position:relative; color:rgba(255,255,255,0.6); font-weight:600; text-decoration:none; transition:color .3s ease; }
.hc-login .footer .link::after { content:""; position:absolute; left:0; bottom:-2px; width:0; border-radius:6px; height:1px; background: currentColor; transition: width .3s ease; }
.hc-login .footer .link:hover { color:#fff; }
.hc-login .footer .link:hover::after { width:100%; }

/* Alerts (flash) dentro del login */
.hc-login .alerts{ width:100%; display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; }
.hc-login .alert{
  padding:10px 12px; border-radius:12px; font-size:13px; font-weight:700; color: #fff;
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(34,211,238,.18));
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align:center;
}
.hc-login .alert-success{ color:#bbf7d0; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); }
.hc-login .alert-warning{ color:#fde68a; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.hc-login .alert-danger, .hc-login .alert-error{ color:#fecaca; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); }

/* Accesibilidad */
.hc-login .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Responsivo login */
@media (max-width: 420px){ .hc-login .login-container{ --form-width: 86vw; } }
@media (min-width: 768px){ .hc-login{ padding: min(6vw, 48px); } .hc-login .login-container{ --form-width: 360px; --aspect-ratio: 1.15; } }
@media (min-width: 1024px){ .hc-login .login-container{ --form-width: 400px; --aspect-ratio: 1.05; } }
.hc-login{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; }
.hc-login .login-container{ margin-left:auto !important; margin-right:auto !important; width: clamp(300px, 92vw, 420px) !important; height:auto !important; }
.hc-login .login-box{ width:100% !important; height:auto !important; margin:0 auto !important; position:static !important; }
@media (max-width: 480px){ .hc-login .login-container::before{ inset:-30px !important; } }

/* ===== Flash en pantallas de auth ===== */
.auth-page .flash {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(34,211,238,.18)) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.auth-page .flash.success { color: #bbf7d0 !important; background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.35) !important; }
.auth-page .flash.danger,
.auth-page .flash.error { color: #fecaca !important; background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.35) !important; }

/* Ocultar duplicados dentro de la caja de login (si los hubiera) */
.hc-login .login-box .flash,
.hc-login .login-box .alerts,
.hc-login .login-box .alert,
.hc-login .form .flash,
.hc-login .form .alerts,
.hc-login .form .alert { display: none !important; }

/* =========================
   FORM Mis fichajes (mejoras UX)
   ========================= */
.logs-form{ display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 720px; margin: 0 auto; }
.logs-form .field{ display: grid; gap: 6px; }
.logs-form label{ font-size: 15px; color: var(--sub); }
.input-glass-lg{
  width: 100%; height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,.08); color: var(--txt);
  font-size: 16px; outline: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.input-glass-lg::placeholder{ color: rgba(255,255,255,.85); }
.input-glass-lg:focus{ border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(34,211,238,.20); }
input[type="date"].input-glass-lg{ background: rgba(255,255,255,.08); color-scheme: dark; }
input[type="date"].input-glass-lg::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.9); }
.logs-note{ margin-top: 10px; color: var(--sub); line-height: 1.4; }

@media (max-width: 600px){
  .logs-form .btn-accent{ width: 100%; justify-content: center; padding-block: 14px; }
  .logs-note{ margin-top: 14px; }
}
@media (min-width: 980px){
  .logs-form{ grid-template-columns: 1fr 1fr; }
  .logs-form .field:nth-child(3){ grid-column: 1 / 3; }
  .logs-form > div:last-of-type{ grid-column: 1 / 3; }
}

/* Select oscuro grande */
select.input-glass-lg{
  color: var(--txt);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 44px;
  padding: 8px 12px;
  color-scheme: dark;
}
select.input-glass-lg option{ background-color: #151a2b; color: #fff; }
select.input-glass-lg optgroup{ background-color: #151a2b; color:#cbd5e1; }
select.input-glass-lg option:disabled{ color:#9aa4b2; }
select.input-glass-lg:focus{ outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(34,211,238,.20); }
select.input-glass-lg::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.85); }

/* =========================
   ENTRIES (ADMIN) — filtros
   ========================= */
.entries-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; }
@media (max-width: 880px){ .entries-filter { grid-template-columns: 1fr; } }
.entries-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* =========================
   MODO “CARDS” SOLO PARA FICHAJES (móvil)
   Añade la clase .entries-table a esa tabla en HTML.
   ========================= */
@media (max-width:680px){
  .entries-table.table-glass thead{ display:none; }
  .entries-table.table-glass,
  .entries-table.table-glass tbody,
  .entries-table.table-glass tr,
  .entries-table.table-glass td{ display:block; width:100%; }

  .entries-table.table-glass tr{
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 12px 0;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    backdrop-filter: blur(8px);
  }

  .entries-table.table-glass td{
    border: 0;
    padding: 8px 0;
    display: grid;
    grid-template-columns: 90px minmax(0,1fr);
    align-items: center;
    gap: 8px;
  }
  .entries-table.table-glass td::before{
    content: attr(data-th);
    color: var(--sub);
    font-weight: 600;
    font-size: 12px;
  }

  .entries-table.table-glass td + td{ border-top: 1px solid rgba(255,255,255,.06); }

  .entries-table.table-glass td[data-th="Acciones"]{
    display: block;
    padding-top: 8px;
  }
  .entries-table.table-glass td[data-th="Acciones"]::before{
    display:block; margin-bottom:6px; content:"Acciones";
  }

  .entries-table.table-glass td > *{ min-width: 0; max-width: 100%; }
  .btn-glass.btn-sm{ padding: 9px 12px; font-size: 14px; border-radius: 10px; }
  .badge{ font-size: .9rem; padding: 4px 10px; }
}

/* =========================
   PERFIL (pequeños ajustes)
   ========================= */
.profile-form{ display: grid; gap: 18px; }
.profile-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px){ .profile-grid{ grid-template-columns: 1fr; } }
.profile-form .field{ display: grid; gap: 8px; }
.profile-form label{ color: var(--sub); font-weight: 600; }
.profile-form .hint{ color: var(--sub); font-size: 12px; }
.profile{ max-width: 760px; margin: 0 auto; }

.avatar-uploader{ display: grid; gap: 12px; justify-items: center; }
.avatar-preview{
  width: 120px !important; height: 120px !important; aspect-ratio: 1 / 1; border-radius: 999px; object-fit: cover; display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
}
.file-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.file-input{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.file-help{ color: var(--sub); font-size: 12px; }

/* =========================
   AJUSTES FINOS “MIS FICHAJES” (no tocan superadmin)
   ========================= */
.table-glass td .btn-glass{ white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }

/* =========================
   EXTRAS
   ========================= */
.glass-card .checkbox label,
.glass-card .checkbox strong { color: #fff !important; }

/* ===== Fix global para desplegables (select) en oscuro ===== */

/* Cierra el control con estilo oscuro aunque no tenga clases */
select{
  color: var(--txt);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  height: 42px;
  color-scheme: dark;                 /* pide menú oscuro si el navegador lo soporta */
}

/* Opciones del menú desplegable en oscuro */
select option,
select optgroup{
  background-color: #151a2b !important;
  color: #ffffff !important;
}

/* Fallback (por si el SO obliga menú claro): al menos el texto se ve */
@media (forced-colors: none) {
  select option:where(:not([style])) {
    color: #ffffff !important;          /* si el fondo lo pone el SO en blanco */
  }
}

/* Detalles de compatibilidad */
select::-ms-expand{ display:none; }   /* IE/Edge antiguo */
select::-webkit-scrollbar{ width: 10px; }
select::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.85); }