/* =============================================
   SERVICIOS 365 – SUPER STYLES (App Supervisores)

   Único CSS de /super/. Antes esta app tomaba prestado el CSS del colaborador
   y completaba lo que faltaba con <style> y style="..." en el HTML; ahora es
   autónoma, como /admin/ y /colab/.

   NO se escriben estilos en el HTML ni en el JS de esta app: todo lo que se
   vea nuevo se agrega acá.
   ============================================= */

/* Los colores principales (--primary, --primary-dark, --primary-soft,
   --primary-mid y el degradado --login-bg) salen de css/main.css, que es el
   único lugar donde se escriben. El @import va primero porque el CSS exige que
   preceda a cualquier regla. */
@import url('../../css/main.css');

:root {
  /* Colores de estado. No son de marca: verde es "bien", rojo es "error". */
  --green: #059669;
  --green-soft: #ECFDF5;
  --red: #DC2626;
  --red-soft: #FEF2F2;
  --amber: #D97706;
  --amber-soft: #FFFBEB;

  /* Grises, del más claro al más oscuro. */
  --gray1: #F9FAFB;
  --gray2: #F3F4F6;
  --gray3: #E5E7EB;
  --gray4: #9CA3AF;
  --gray5: #6B7280;
  --gray6: #374151;
  --gray7: #111827;

  /* Radios de esquina. */
  --r: 12px;
  --r2: 16px;
  --r3: 20px;
}

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

body {
  background: var(--gray2);
  font-family: 'Geist', sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen { display: none; flex-direction: column; min-height: 100vh; min-height: 100dvh; width: 100%; }
.screen.active { display: flex; }

/* Pantallas de auth: se centran ellas mismas */
#screen-login {
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  background: var(--login-bg);
}

/* ── AUTH ── */
.auth-wrap {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 20px; padding: 48px 32px 40px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.15);
}
.auth-logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.auth-logo-box {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--primary); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.auth-brand { font-size: 20px; font-weight: 700; color: var(--gray7); }
.auth-brand span { color: var(--primary); }
.auth-title { font-size: 24px; font-weight: 700; color: var(--gray7); margin-bottom: 6px; letter-spacing: -0.4px; }
.auth-sub { font-size: 13px; color: var(--gray5); margin-bottom: 28px; line-height: 1.5; }

/* El cartel de error del login: arranca oculto y el JS le agrega .visible. */
.auth-error {
  display: none;
  background: var(--red-soft); border: 1.5px solid #FECACA;
  border-radius: var(--r); padding: 10px 13px;
  font-size: 12px; color: var(--red); margin-bottom: 14px;
}
.auth-error.visible { display: block; }

/* ── CAMPOS ── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--gray6); margin-bottom: 5px; letter-spacing: .3px; }
.field input {
  width: 100%; padding: 11px 14px;
  background: var(--gray1); border: 1.5px solid var(--gray3);
  border-radius: 10px; font-size: 13px; color: var(--gray7);
  outline: none; font-family: 'Geist', sans-serif; transition: border-color .2s;
}
.field input:focus { border-color: var(--primary); background: #fff; }
.field input::placeholder { color: var(--gray4); }

/* Campo de contraseña con el ojito adentro. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--gray4);
  font-size: 16px; padding: 4px; line-height: 1;
}
.pw-toggle:hover { color: var(--gray6); }

/* ── COMBO (dropdown con buscador) ── */
.combo { position: relative; }
.combo-control {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 14px;
  background: var(--gray1); border: 1.5px solid var(--gray3);
  border-radius: 10px; font-size: 13px; color: var(--gray7);
  cursor: pointer; user-select: none; transition: border-color .2s;
}
.combo.open .combo-control { border-color: var(--primary); background: #fff; }
.combo-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-value.combo-placeholder { color: var(--gray4); }
.combo-caret { color: var(--gray4); font-size: 14px; transition: transform .2s; }
.combo.open .combo-caret { transform: rotate(180deg); }

.combo-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1.5px solid var(--gray3); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); overflow: hidden;
}
.combo.open .combo-panel { display: block; }
.combo-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--gray2); color: var(--gray4);
}
.combo-search-wrap input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 13px; color: var(--gray7); font-family: 'Geist', sans-serif;
}
.combo-list { max-height: 240px; overflow-y: auto; }
.combo-item {
  padding: 11px 14px; font-size: 13px; color: var(--gray7);
  cursor: pointer; transition: background .12s;
}
.combo-item:hover, .combo-item.active { background: var(--primary-soft); color: var(--primary); }
.combo-empty { padding: 14px; font-size: 12px; color: var(--gray4); text-align: center; }

/* ── BOTONES Y LINKS ── */
.btn-primary {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: 'Geist', sans-serif; transition: background .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:active { background: var(--primary-dark); }
.btn-primary:disabled { background: var(--gray4); cursor: not-allowed; }

.back-link {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  margin-top: 16px; text-decoration: none;
  color: var(--gray5); font-size: 13px; font-weight: 600;
  transition: color .15s;
}
.back-link:active { color: var(--gray6); }

/* ── PANTALLA "PRÓXIMAMENTE" (index) ── */
.soon-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 8px;
}
.soon-ico {
  width: 76px; height: 76px; border-radius: var(--r3);
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; margin-bottom: 8px;
}
.soon-title { font-size: 22px; font-weight: 700; color: var(--gray7); }
.soon-sub { font-size: 14px; color: var(--gray5); max-width: 320px; }
.soon-name { font-size: 13px; color: var(--gray6); margin-top: 4px; }
.soon-logout {
  margin-top: 20px; background: none;
  border: 1.5px solid var(--gray3); color: var(--gray6);
  border-radius: 10px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.soon-logout:hover { border-color: var(--red); color: var(--red); }