/* =============================================
   SERVICIOS 365 – COLAB STYLES (App Colaboradores)

   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');

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

:root {
  /* Colores de estado y grises: no son de marca y son propios de esta app. */
  --green: #059669;
  --green-soft: #ECFDF5;
  --red: #DC2626;
  --red-soft: #FEF2F2;
  --amber: #D97706;
  --amber-soft: #FFFBEB;
  --gray1: #F9FAFB;
  --gray2: #F3F4F6;
  --gray3: #E5E7EB;
  --gray4: #9CA3AF;
  --gray5: #6B7280;
  --gray6: #374151;
  --gray7: #111827;
  --r: 12px;
  --r2: 16px;
  --r3: 20px;
}

body {
  background: #F3F4F6;
  font-family: 'Geist', sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* ── UTILIDADES ──────────────────────────────────────────────────────────
   Para mostrar y ocultar desde el JS sin escribir estilos:
     elemento.classList.toggle('oculto')
   Los elementos que arrancan ocultos usan la clase contraria (.visible), que
   se define junto a cada uno.
   ─────────────────────────────────────────────────────────────────────── */
.oculto { display: none !important; }

.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; }

/* Cartel de error de un formulario: arranca oculto y el JS le pone .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; }

.field { margin-bottom: 14px; }
/* Campo más pegado al siguiente, para los formularios de los modales. */
.field.compacto { margin-bottom: 12px; }
.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); }

/* ── 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; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; box-sizing: border-box; }
/* El PIN del login: 4 dígitos, más grandes que un campo normal. */
.pw-wrap input.pin-input { font-size: 20px; text-align: left; }
.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); }

.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; }
.auth-link { text-align: center; margin-top: 14px; font-size: 13px; color: var(--gray5); }
.auth-link span { color: var(--primary); font-weight: 600; cursor: pointer; }
.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); }

/* ── HEADER ── */
.hdr {
  background: #fff; border-bottom: 1px solid var(--gray3);
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; position: sticky; top: 0; z-index: 10;
}
.hdr-left { display: flex; align-items: center; gap: 9px; }
.hdr-mark {
  width: 30px; height: 30px;
  background: var(--primary); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.hdr-name { font-size: 15px; font-weight: 700; color: var(--gray7); }
.hdr-name span { color: var(--primary); }
.hdr-right { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  width: 34px; height: 34px;
  background: var(--gray1); border: 1px solid var(--gray3);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; position: relative; color: var(--gray6);
}
.n-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--red); border-radius: 50%;
  border: 1.5px solid #fff;
}
.ava {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  cursor: pointer; border: 2px solid var(--primary-mid);
}
.back-btn { background: none; border: none; color: var(--primary); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }

/* ── TABS ── */
.tabs { display: flex; background: #fff; border-bottom: 1.5px solid var(--gray3); flex-shrink: 0; }
.tab {
  flex: 1; padding: 11px 0 9px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--gray4);
  cursor: pointer; border-bottom: 2.5px solid transparent;
  transition: all .15s;
}
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-icon { font-size: 17px; display: block; margin-bottom: 3px; }
@media (min-width: 768px) {
  .tab { flex: none; padding: 11px 24px 9px; }
}

/* ── CONTENT ── */
/* El espacio de abajo lo ocupa el footer del shell, ya no hace falta reservarlo. */
.content { flex: 1; overflow-y: auto; padding: 16px 14px 24px; background: var(--gray2); }
.content::-webkit-scrollbar { width: 0; }
@media (min-width: 768px) {
  .content { padding: 24px 32px 24px; }
}
.sec-title { font-size: 12px; font-weight: 700; color: var(--gray5); margin-bottom: 12px; }

/* Mensaje centrado que ocupa el lugar de una lista: "Cargando...", "No hay
   nada todavía". Lo usan el HTML y también el JS cuando la lista vuelve vacía. */
.estado-vacio { text-align: center; padding: 40px; color: var(--gray4); font-size: 13px; }
.estado-vacio-ico { font-size: 28px; display: block; margin-bottom: 10px; }
.estado-vacio-ico.grande { font-size: 32px; }
/* Variante con menos aire a los costados, para listas angostas. */
.estado-vacio.angosto { padding: 40px 20px; }

/* Un icono de Bootstrap Icons teñido con el color principal. */
.ico-primary { color: var(--primary); }

/* ── HORARIOS (programado / real / facturable) ── */
.hor-box { display: flex; flex-direction: column; gap: 5px; }
.hor-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hor-lbl { font-size: 12px; color: var(--gray5); font-weight: 500; }
.time-chip {
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-mid); border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.time-chip.tc-green { background: var(--green-soft); color: var(--green); border-color: #BBF7D0; }
.time-chip.tc-amber { background: var(--amber-soft); color: var(--amber); border-color: #FDE68A; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; letter-spacing: 0.3px;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.b-pending { background: var(--amber-soft); color: var(--amber); }
.b-pending::before { background: var(--amber); }
.b-active { background: var(--green-soft); color: var(--green); }
.b-active::before { background: var(--green); animation: pulse 1.4s infinite; }
.b-done { background: var(--primary-soft); color: var(--primary); }
.b-done::before { background: var(--primary); }
/* Jornada cerrada, control del administrador todavía pendiente. Va en gris: no
   es un problema, es una espera, y no tiene que competir con el verde del turno
   en curso. Es el único badge con un texto largo, así que se lo deja partir en
   dos líneas en vez de empujar el nombre del cliente fuera de la tarjeta. */
.b-wait {
  background: var(--gray2); color: var(--gray5);
  white-space: normal; text-align: right;
}
.b-wait::before { background: var(--gray4); }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.5); } }

/* ── SERVICE CARD ── */
.svc-card {
  background: #fff; border: 1.5px solid var(--gray3);
  border-radius: var(--r3); margin-bottom: 12px; overflow: hidden;
}
.card-header-toggle {
  padding: 14px 18px; cursor: pointer; user-select: none;
}
.card-header-toggle:hover { background: var(--gray1); }
.card-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.card-toggle-meta { display: flex; align-items: center; justify-content: space-between; }
.card-chevron { color: var(--gray4); font-size: 13px; transition: transform 0.22s ease; flex-shrink: 0; }
.card-chevron.open { transform: rotate(180deg); }
.card-collapse { overflow: hidden; transition: max-height 0.28s ease; max-height: 0; }
.card-collapse.expanded { max-height: 800px; }
.card-place { font-size: 15px; font-weight: 700; color: var(--gray7); }
.card-addr {
  font-size: 12px; color: var(--primary); margin-top: 3px;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; font-weight: 500;
}
.card-addr:hover { text-decoration: underline; }
.card-divider { height: 1px; background: var(--gray3); margin: 0 18px; }
.card-body { padding: 14px 18px; }
.info-row { display: flex; gap: 8px; margin-bottom: 7px; font-size: 12.5px; align-items: flex-start; }
/* Separada de lo de arriba, cuando la fila anterior existe (ej. la dirección). */
.info-row.con-tope { margin-top: 8px; }
/* El texto de la fila ocupa lo que queda al lado del icono. */
.info-row-body { flex: 1; }
.info-icon { color: var(--primary); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* Horario del encabezado de la tarjeta, con su relojito. */
.card-hora { font-size: 12px; color: var(--gray5); }
/* Icono chico pegado al texto que le sigue. */
.ico-inline { margin-right: 3px; }
/* Aclaración gris al lado del título (ej. el rango de fechas de un turno de noche). */
.nota-gris { color: var(--gray4); white-space: nowrap; }
.info-val { color: var(--gray6); line-height: 1.45; }
.info-label { font-size: 12px; font-weight: 600; color: var(--gray5); display: block; margin-bottom: 1px; }
.card-action-wrap { padding: 0 18px 16px; }
.btn-start {
  width: 100%; padding: 12px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Geist', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.btn-start:active { background: var(--primary-dark); }
.btn-start:disabled { background: var(--gray4); cursor: not-allowed; }

/* ── JORNADA EN CURSO ── */
.jornada-inner { padding: 14px 18px 16px; background: var(--green-soft); border-top: 1px solid #A7F3D0; }
.ji-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ji-label { font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.ji-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 1.4s infinite; }
.ji-timer { font-size: 22px; font-weight: 700; color: var(--gray7); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ji-place { font-size: 12px; color: var(--gray5); margin-bottom: 10px; }
.btn-finish {
  width: 100%; padding: 11px;
  background: #fff; color: var(--green);
  border: 1.5px solid var(--green); border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Geist', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-finish:disabled { background: var(--gray1); color: var(--gray4); border-color: var(--gray3); cursor: not-allowed; }

/* Jornada todavia no iniciada. El bloque se muestra igual —el boton de finalizar
   va deshabilitado, no escondido, para que se vea que existe— pero sin el verde
   de "en curso", que ahi mentiria. */
.jornada-inner.ji-inactiva { background: var(--gray1); border-top-color: var(--gray3); }
.jornada-inner.ji-inactiva .ji-label { color: var(--gray4); }
.jornada-inner.ji-inactiva .ji-timer { color: var(--gray4); }

/* ── OVERLAY / BOTTOM SHEET ── */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(17,24,39,0.45); z-index: 200;
  backdrop-filter: blur(3px);
  align-items: flex-end;
}
.overlay.show { display: flex; }
.sheet {
  background: #fff; border-radius: 20px 20px 0 0;
  width: 100%; padding: 6px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.15);
}
.sheet-handle { width: 36px; height: 4px; background: var(--gray3); border-radius: 2px; margin: 10px auto 16px; }
.sheet-inner { padding: 0 22px 32px; }
.sheet-title { font-size: 17px; font-weight: 700; color: var(--gray7); margin-bottom: 4px; }
.sheet-sub { font-size: 13px; color: var(--gray5); margin-bottom: 20px; }
.sec-label { font-size: 12px; font-weight: 700; color: var(--gray5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
.sheet-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-sheet-main {
  flex: 1; padding: 13px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Geist', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-sheet-main:disabled { background: var(--gray4); cursor: not-allowed; }
.btn-sheet-back {
  padding: 13px 16px;
  background: var(--gray1); color: var(--gray6);
  border: 1.5px solid var(--gray3); border-radius: var(--r);
  font-size: 14px; cursor: pointer; font-family: 'Geist', sans-serif;
}
.btn-sheet-green {
  flex: 1; padding: 13px;
  background: var(--green); color: #fff;
  border: none; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Geist', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ── GPS STATUS ── */
.gps-status-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--primary-soft); border: 1.5px solid var(--primary-mid);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 16px; transition: all .3s;
}
.gps-status-box.ok { background: var(--green-soft); border-color: #A7F3D0; }
.gps-status-box.err { background: var(--red-soft); border-color: #FECACA; }
.gps-status-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.gps-status-text { font-size: 12px; color: var(--gray6); line-height: 1.5; }
.gps-status-text b { color: var(--primary); }
.gps-status-box.ok .gps-status-text b { color: var(--green); }
.gps-status-box.err .gps-status-text b { color: var(--red); }

/* ── DISTANCE BOX ── */
/* Arranca oculta y el JS le pone .visible cuando ya midió la distancia. */
.dist-box.visible { display: flex; }
.dist-box {
  display: none; align-items: flex-start; gap: 10px;
  background: var(--primary-soft); border: 1.5px solid var(--primary-mid);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 16px; transition: all .3s;
}
.dist-box.ok  { background: var(--green-soft); border-color: #A7F3D0; }
.dist-box.far { background: #FFF7ED; border-color: #FED7AA; }
.dist-box-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.dist-box.ok  .dist-box-icon { color: var(--green); }
.dist-box.far .dist-box-icon { color: #EA580C; }
.dist-box-text { font-size: 12px; color: var(--gray6); line-height: 1.5; }
.dist-box-text b { font-size: 13px; color: var(--primary); }
.dist-box.ok  .dist-box-text b { color: var(--green); }
.dist-box.far .dist-box-text b { color: #EA580C; }

/* ── OBSERVATIONS ── */
.obs-textarea {
  width: 100%; background: var(--gray1);
  border: 1.5px solid var(--primary); border-radius: var(--r);
  padding: 10px 13px; font-size: 13px; color: var(--gray7);
  resize: none; height: 70px; outline: none;
  font-family: 'Geist', sans-serif;
}

/* ── FINALIZAR MODAL ── */
.time-locked {
  background: var(--gray1); border: 1.5px solid var(--gray3);
  border-radius: var(--r); padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.time-locked-label { font-size: 12px; color: var(--gray5); display: flex; align-items: center; gap: 6px; }
.time-locked-val { font-size: 20px; font-weight: 700; color: var(--gray7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lock-badge { font-size: 12px; background: var(--gray2); color: var(--gray5); padding: 2px 7px; border-radius: 20px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.obs-block { margin-bottom: 4px; }
.obs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.btn-edit-obs {
  width: 30px; height: 30px;
  background: var(--primary-soft); border: 1px solid var(--primary-mid);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 14px; cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.btn-edit-obs.saving { background: var(--green-soft); border-color: #A7F3D0; color: var(--green); }
.obs-display {
  font-size: 13px; color: var(--gray6);
  background: var(--gray1); border: 1.5px solid var(--gray3);
  border-radius: var(--r); padding: 10px 13px; min-height: 58px; line-height: 1.5;
}
.obs-display.empty { color: var(--gray4); font-style: italic; }
/* El texto y el textarea se turnan: se muestra uno y se oculta el otro. */
.obs-display { margin-top: 8px; }
.obs-edit-area {
  display: none; margin-top: 8px;
  width: 100%; background: var(--gray1);
  border: 1.5px solid var(--primary); border-radius: var(--r);
  padding: 10px 13px; font-size: 13px; color: var(--gray7);
  resize: none; height: 70px; outline: none;
  font-family: 'Geist', sans-serif;
}
.obs-edit-area.visible { display: block; }

/* El valor del cronómetro y el candado, uno al lado del otro. */
.time-locked-vals { display: flex; align-items: center; gap: 8px; }
/* Etiqueta de sección que va dentro de una fila, sin separación abajo. */
.sec-label.en-fila { margin-bottom: 0; }

/* ── COMPLETED TURNO FOOTER ── */
.ji-done-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; background: var(--green-soft);
  border-top: 1px solid #A7F3D0;
  font-size: 13px; font-weight: 600; color: var(--green);
}

/* ── HISTORIAL: FILTRO POR RANGO ── */
.rango-filtros {
  background: #fff; border: 1.5px solid var(--gray3);
  border-radius: var(--r2); padding: 12px; margin-bottom: 14px;
}
.rango-fechas { display: flex; gap: 10px; }
.rango-fechas label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rango-fechas span { font-size: 11px; font-weight: 700; color: var(--gray5); }
.rango-fechas input {
  width: 100%; height: 38px; padding: 0 10px;
  border: 1.5px solid var(--gray3); border-radius: var(--r);
  font-size: 13px; font-family: inherit; color: var(--gray7);
  background: #fff; -webkit-appearance: none; appearance: none;
}
.rango-fechas input:focus { outline: none; border-color: var(--primary); }
.rango-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* Chips arriba de todo del filtro: sin aire arriba y con aire abajo. */
.rango-chips.arriba { margin-top: 0; margin-bottom: 10px; }
.rango-chip {
  flex: 1; min-width: 92px; padding: 7px 10px;
  background: var(--gray1); border: 1.5px solid var(--gray3); border-radius: var(--r);
  font-size: 12px; font-weight: 600; color: var(--gray6);
  font-family: inherit; cursor: pointer; transition: all .12s;
}
.rango-chip:hover { background: var(--gray2); }
.rango-chip.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* ── HISTORIAL RESUMEN DE HORAS ── */
.hist-resumen-card {
  background: #fff; border: 1.5px solid var(--primary-mid);
  border-radius: var(--r2); padding: 14px 16px; margin-bottom: 14px;
}
.hr-top { display: flex; align-items: center; justify-content: space-between; }
.hr-total-val { font-size: 22px; font-weight: 700; color: var(--primary); letter-spacing: -0.4px; }
.hr-total-lbl { font-size: 12px; color: var(--gray5); margin-top: 2px; font-weight: 500; }
.hr-toggle-btn {
  background: var(--primary-soft); border: none; border-radius: 8px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 14px; cursor: pointer; flex-shrink: 0;
}
/* El desglose por día del resumen: arranca plegado. */
.hr-dias-list { display: none; }
.hr-dias-list.visible { display: block; }
.hr-divider { height: 1px; background: var(--gray3); margin: 12px 0 10px; }
.hr-dia-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--gray2); font-size: 13px;
}
.hr-dia-row:last-child { border-bottom: none; }
.hr-dia-name { color: var(--gray6); font-weight: 500; }
.hr-dia-dur { color: var(--primary); font-weight: 700; }

/* ── HISTORIAL ── */
.hist-card {
  background: #fff; border: 1.5px solid var(--gray3);
  border-radius: var(--r3); margin-bottom: 10px; overflow: hidden;
}
.hist-header-toggle {
  padding: 14px 18px; cursor: pointer; user-select: none;
}
.hist-header-toggle:hover { background: var(--gray1); }
.hist-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hist-toggle-meta { display: flex; align-items: center; justify-content: space-between; }
.hist-place { font-size: 14px; font-weight: 700; color: var(--gray7); }
.hist-collapse { overflow: hidden; transition: max-height 0.28s ease; max-height: 0; }
.hist-collapse.expanded { max-height: 600px; }
.hist-collapse-inner { padding: 0 18px 16px; border-top: 1px solid var(--gray3); padding-top: 12px; }
.hist-meta { font-size: 12px; color: var(--gray5); line-height: 1.6; margin-bottom: 8px; }
/* Con un poco más de aire abajo, cuando le sigue otro bloque. */
.hist-meta.con-aire { margin-bottom: 10px; }
/* Fecha del encabezado de la tarjeta de historial. */
.hist-fecha { font-size: 12px; color: var(--gray5); }
.hist-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--gray3); }
.hist-dur-lbl { font-size: 12px; color: var(--gray4); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.hist-dur-val { font-size: 13px; font-weight: 700; color: var(--primary); }
.hist-obs-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray3); }
.hist-obs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hist-obs-label { font-size: 12px; font-weight: 700; color: var(--gray5); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 5px; }
.hist-obs-text { font-size: 12px; color: var(--gray6); line-height: 1.5; font-style: italic; }
.hist-obs-text.empty { color: var(--gray4); }
.hist-obs-edit {
  font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; font-family: 'Geist', sans-serif;
}
.hist-obs-textarea {
  width: 100%; background: var(--gray1);
  border: 1.5px solid var(--primary); border-radius: 8px;
  padding: 8px 11px; font-size: 12px; color: var(--gray7);
  resize: none; height: 58px; outline: none;
  font-family: 'Geist', sans-serif; margin-top: 4px;
}
.hist-obs-save {
  font-size: 12px; color: var(--green); cursor: pointer; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; font-family: 'Geist', sans-serif; margin-top: 6px;
}

/* ── PERFIL ── */
.prof-screen { flex: 1; display: flex; flex-direction: column; overflow-y: auto; background: var(--gray2); }
.prof-header { background: #fff; border-bottom: 1px solid var(--gray3); padding: 24px 22px; }
.prof-top { display: flex; align-items: center; gap: 14px; }
.prof-ava {
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0;
}
/* El nombre y el rol, entre el avatar y el botón de editar: ocupan el resto. */
.prof-top-info { flex: 1; }
.prof-name { font-size: 17px; font-weight: 700; color: var(--gray7); }
.prof-role { font-size: 12px; color: var(--gray5); margin-top: 2px; }
.btn-editar-perfil {
  background: var(--primary-soft); border: 1px solid var(--primary-mid);
  border-radius: 8px; padding: 7px 12px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  font-family: 'Geist', sans-serif;
}
.prof-content { padding: 16px 14px 40px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
/* Cuando hay una sola tarjeta, que ocupe todo el ancho en vez de media pantalla. */
.stats-grid.una-col { grid-template-columns: 1fr; }
.stat-card { background: #fff; border: 1.5px solid var(--gray3); border-radius: var(--r2); padding: 16px; }
.stat-num { font-size: 24px; font-weight: 700; color: var(--primary); }
.stat-lbl { font-size: 12px; color: var(--gray5); margin-top: 3px; font-weight: 500; }
.prof-section { background: #fff; border: 1.5px solid var(--gray3); border-radius: var(--r2); overflow: hidden; margin-bottom: 12px; }
.prof-sec-title {
  padding: 12px 16px 10px; font-size: 12px; font-weight: 700;
  color: var(--gray5); text-transform: uppercase; letter-spacing: 0.6px;
  border-bottom: 1px solid var(--gray3);
  display: flex; align-items: center; gap: 7px;
}
.prof-field { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--gray3); }
.prof-field:last-child { border-bottom: none; }
.pf-lbl { font-size: 12px; color: var(--gray5); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.pf-val { font-size: 13px; color: var(--gray7); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pf-edit { font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 600; }

/* ── PERFIL: CAMBIAR PIN ── */
.prof-pin-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.pin-label {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 600; color: var(--gray6);
  text-transform: uppercase; letter-spacing: .4px;
}
/* Los 4 dígitos: grandes, centrados y bien separados entre sí. */
.pin-code {
  width: 100%; padding: 9px 12px;
  background: var(--gray1); border: 1.5px solid var(--gray3);
  border-radius: var(--r);
  font-size: 18px; letter-spacing: 8px; text-align: center;
  outline: none; font-family: 'Geist', sans-serif;
}
/* Error chico, dentro de un bloque (no el cartel grande de .auth-error). */
.form-error-chico {
  display: none;
  font-size: 12px; color: var(--red);
  padding: 6px 10px; background: var(--red-soft); border-radius: 8px;
}
.form-error-chico.visible { display: block; }
/* Cuando lo que se avisa salió bien, el mismo cartel se pinta de verde. */
.form-error-chico.ok { background: var(--green-soft); color: var(--green); }
.btn-pin {
  width: 100%; padding: 11px; border: none; border-radius: var(--r);
  background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: 'Geist', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ── PERFIL: MODAL DE EDICIÓN ── */
.label-upper {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: var(--gray6);
  text-transform: uppercase; letter-spacing: .4px;
}
.input-modal {
  width: 100%; padding: 10px 13px;
  background: var(--gray1); border: 1.5px solid var(--gray3);
  border-radius: var(--r); font-size: 13px; color: var(--gray7);
  outline: none; font-family: 'Geist', sans-serif;
}
/* El cartel del modal es un poco más chico que el del login. */
.auth-error.chico { border-width: 1px; padding: 8px 12px; margin-bottom: 12px; }
/* Cuando lo que se avisa salió bien, el mismo cartel se pinta de verde. */
.auth-error.ok { background: var(--green-soft); border-color: #A7F3D0; color: var(--green); }
.btn-logout {
  width: 100%; padding: 13px;
  background: #fff; color: var(--red);
  border: 1.5px solid #FECACA; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Geist', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ── FOOTER (shell) ──
   Último hijo de .screen: como el contenido de cada pantalla es flex:1 con
   scroll propio, el pie queda fijo abajo sin taparlo. */
.colab-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1.5px solid var(--gray3);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.colab-footer .btn-logout { max-width: 420px; padding: 11px; }

/* ── NOTIFICACIONES ── */
.notif-hdr {
  padding: 14px 18px; font-size: 16px; font-weight: 700; color: var(--gray7);
  border-bottom: 1px solid var(--gray3); background: #fff;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.notif-list { flex: 1; overflow-y: auto; background: #fff; }
.notif-item { padding: 15px 18px; border-bottom: 1px solid var(--gray3); display: flex; gap: 12px; align-items: flex-start; }
.notif-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; margin-top: 1px;
}
.notif-body { flex: 1; }
.notif-text { font-size: 13px; color: var(--gray6); line-height: 1.5; }
.notif-text strong { color: var(--gray7); font-weight: 600; }
.notif-time { font-size: 12px; color: var(--gray4); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.ntag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 5px; }
.ntag-new { background: var(--primary-soft); color: var(--primary); }
.ntag-read { background: var(--gray2); color: var(--gray5); }

/* Las pestañas son <a>: sin esto quedan subrayadas. */
.tabs a.tab { text-decoration: none; }