/* =============================================
   SERVICIOS 365 – ADMIN STYLES
   Shadcn/ui inspired · Geist font
   ============================================= */

/* 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 {
  /* El foco de shadcn es el color principal, que ya viene de main.css. */
  --ring: var(--primary);

  /* shadcn color tokens */
  --background: #ffffff;
  --foreground: oklch(27.9% 0.041 260.031);
  --card: #ffffff;
  --card-foreground: oklch(27.9% 0.041 260.031);
  --popover: #ffffff;
  --popover-foreground: oklch(27.9% 0.041 260.031);
  --primary-foreground: #ffffff;
  --secondary: oklch(96.8% 0.007 247.896);
  --secondary-foreground: oklch(27.9% 0.041 260.031);
  --muted: oklch(96.8% 0.007 247.896);
  --muted-foreground: oklch(55.4% 0.046 257.417);
  --accent: oklch(96.8% 0.007 247.896);
  --accent-foreground: oklch(27.9% 0.041 260.031);
  --destructive: #ef4444;
  --destructive-foreground: oklch(98.4% 0.003 247.858);
  --border: oklch(92.9% 0.013 255.508);
  --input: oklch(92.9% 0.013 255.508);

  /* Colores de estado. No son de marca: verde es "bien", rojo es "error". */
  --green: #16a34a;
  --green-soft: #f0fdf4;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --amber: #d97706;
  --amber-soft: #fffbeb;

  /* Grays (Tailwind Slate) */
  --gray1: oklch(98.4% 0.003 247.858);
  --gray2: oklch(96.8% 0.007 247.896);
  --gray3: oklch(92.9% 0.013 255.508);
  --gray4: oklch(70.4% 0.04 256.788);
  --gray5: oklch(55.4% 0.046 257.417);
  --gray6: oklch(44.6% 0.043 257.281);
  --gray7: oklch(27.9% 0.041 260.031);

  /* Layout */
  --sidebar-w: 220px;
  --header-h: 61px;
  --r: 8px;
  --r2: 10px;
  --r3: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}

/* -- 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; }

/* Los pseudo-elementos entran en el reset igual que los elementos reales: es
   lo que hacía el <style> del login, y en el panel la única regla ::after que
   hay (.form-tab.error) no usa margin ni padding, así que no cambia nada. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray1);
  color: var(--foreground);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ── */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ──
   El menú fija su propio line-height. 20 de las 25 páginas cargan Bootstrap, que
   en su reboot pone line-height 1.5 en el body; las otras 5 (notificaciones,
   periodicos, index, login, admin) no. Como admin.css no declaraba line-height,
   el mismo menú quedaba ~4px más alto por ítem en las páginas con Bootstrap y
   terminaba con scroll. 'normal' es lo que ya se veía en las páginas sin
   Bootstrap, así que esas no cambian y el resto se alinea a ellas. */
.sidebar, .sidebar * { line-height: normal; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--background);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .25s;
  z-index: 100;
}
.sidebar-brand {
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.brand-mark {
  width: 28px; height: 28px;
  background: var(--primary);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  letter-spacing: -.5px;
}
.brand-name { font-size: 14px; font-weight: 700; color: var(--foreground); letter-spacing: -.3px; }
.brand-name span { color: var(--primary); }

.sidebar-section {
  padding: 16px 14px 5px;
  font-size: 11px; font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r);
  margin: 1px 6px;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 13px; font-weight: 500;
  transition: all .1s;
  text-decoration: none;
}
.nav-item:hover { background: var(--accent); color: var(--foreground); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-item i { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px;
  border-radius: var(--r);
  cursor: pointer;
}
.user-row:hover { background: var(--accent); }
.user-ava {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--foreground);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 600; color: var(--foreground); }
.user-role { font-size: 11px; color: var(--muted-foreground); }
.topbar-user {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 4px; border-radius: var(--r);
  cursor: pointer; transition: background .12s;
}
.topbar-user:hover { background: var(--accent); }
.topbar-user-name { font-size: 12px; font-weight: 600; color: var(--foreground); }
@media (max-width: 480px) { .topbar-user-name { display: none; } }

/* ── MAIN ── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  height: var(--header-h);
  background: var(--background);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  flex-shrink: 0;
}
.topbar-title { font-size: 20px; font-weight: 600; color: var(--foreground); flex: 1; letter-spacing: -.3px; }

/* ── BUTTONS ── */
.btn-icon {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground); font-size: 14px;
  cursor: pointer;
  transition: all .1s;
  position: relative;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--accent); color: var(--foreground); }
.hamburger { display: none; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--primary); color: var(--primary-foreground);
  border: none; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  transition: opacity .1s;
  white-space: nowrap;
  letter-spacing: -.1px;
}
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  transition: all .1s;
  letter-spacing: -.1px;
}
.btn-secondary:hover { background: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: 12px; min-height: 30px; }
.btn-danger { color: var(--destructive); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--destructive); }

/* ── PAGES ── */
.page {
  flex: 1; overflow-y: auto;
  padding: 20px;
  display: none;
  flex-direction: column;
  gap: 16px;
}
.page.active { display: flex; background: oklch(96.8% 0.007 247.896); }
.page::-webkit-scrollbar { width: 4px; }
.page::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── CARDS ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 6px 0px 10px 0px;
  background: transparent;
  gap: 10px; flex-wrap: wrap;
  border-bottom: 1px dashed var(--border); 
  margin-bottom: 10px;
}
.card-title {
  font-size: 14px; font-weight: 600; color: var(--foreground);
  display: flex; align-items: center; gap: 7px;
  letter-spacing: -.2px;
}
.card-title i { color: var(--muted-foreground); font-size: 14px; }

/* ── TABLE ── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--border);
  margin-top: 12px;
}
.table-wrap-scroll {
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; min-width: 500px; }
thead tr { background: var(--gray1); border-bottom: 1px solid var(--border); }
th {
  padding: 10px 12px;
  font-size: 12px; font-weight: 500; color: var(--muted-foreground);
  text-align: left; white-space: nowrap;
  user-select: none;
  letter-spacing: -.1px;
}
td {
  padding: 11px 12px;
  font-size: 13px; color: var(--foreground);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--gray1); }
.td-actions { display: flex; gap: 5px; align-items: center; justify-content: flex-end; }

/* Sticky action column (last th/td)
   El :not([colspan]) es la columna de acciones diciendo "yo no soy una celda
   que ocupa toda la fila": las filas de estado ("Cargando...", "No hay
   resultados") son un solo td con colspan y por lo tanto tambien :last-child,
   asi que sin esto se las llevaba puestas — pegadas a la derecha, sticky y con
   sombra. Se filtra aca y no en .tabla-vacia porque este selector es (0,1,2) y
   una clase sola nunca le iba a ganar. */
table th:last-child:not([colspan]),
table td:last-child:not([colspan]) {
  position: sticky;
  right: 0;
  background: var(--background);
  z-index: 2;
  box-shadow: -2px 0 4px rgba(0,0,0,.04);
}
table th:last-child:not([colspan]) { text-align: right; }
table td:last-child:not([colspan]) { text-align: right; }
thead tr th:last-child:not([colspan]) { background: var(--gray1); }
tbody tr:hover td:last-child:not([colspan]) { background: var(--gray1); }

/* ── ACTION DROPDOWN (3 puntos) ── */
.action-menu-wrap { position: relative; display: inline-flex; }
.action-menu-btn {
  width: 28px; height: 28px;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--gray3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: all .1s;
}
tr:hover .action-menu-btn { background: var(--gray2); color: var(--gray5); }
tr:hover .action-menu-btn:hover { background: var(--gray3); color: var(--foreground); }
.action-menu-wrap:has(.action-dropdown.show) .action-menu-btn {
  background: var(--gray3); color: var(--foreground);
}
.action-dropdown {
  position: fixed;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999; min-width: 160px;
  padding: 4px;
  display: none;
  animation: dropIn .12s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.action-dropdown.show { display: block; }
.action-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px; font-weight: 400;
  cursor: pointer; color: var(--foreground);
  transition: background .1s;
  border: none; background: none; width: 100%;
  font-family: 'Geist', sans-serif;
  text-align: left;
}
.action-item:hover { background: var(--accent); }
.action-item.danger { color: var(--destructive); }
.action-item.danger:hover { background: var(--red-soft); }
.action-item i { font-size: 13px; width: 14px; flex-shrink: 0; }
.action-separator {
  height: 1px; background: var(--border);
  margin: 3px 0;
}

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.b-active { background: var(--green-soft); color: var(--green); border-color: #bbf7d0; }
.b-pending { background: var(--amber-soft); color: var(--amber); border-color: #fde68a; }
.b-inactive { background: var(--gray2); color: var(--muted-foreground); border-color: var(--border); }
.b-alert { background: var(--red-soft); color: var(--red); border-color: #fecaca; }
.b-blue { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-mid); }
.b-periodico { background: #F3E8FF; color: #7E22CE; border-color: #E9D5FF; cursor: help; }

/* ── FORMS ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
/* Filas con cantidad fija de columnas, para agrupar campos que van juntos.
   minmax(0,1fr) evita que un valor largo (el nombre de un cliente) estire su
   columna y desbalancee la fila. En móvil colapsan a una sola columna, igual
   que .form-grid: por eso van como clase y no como style inline, que le ganaría
   a la media query. */
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
label.lbl {
  font-size: 13px; font-weight: 500; color: var(--foreground);
  letter-spacing: -.1px;
}
input.inp, select.inp, textarea.inp {
  padding: 8px 12px;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--r);
  font-size: 13px; color: var(--foreground);
  outline: none;
  font-family: 'Geist', sans-serif;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  letter-spacing: -.1px;
}
input.inp:focus, select.inp:focus, textarea.inp:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
input.inp::placeholder, textarea.inp::placeholder { color: var(--muted-foreground); }
textarea.inp { resize: vertical; min-height: 72px; }

/* ── COMBO CON BUSCADOR (buscadorCrear en js/admin-common.js) ──
   Reemplaza a un <select> largo por un botón que abre un dropdown con buscador.
   La regla de .inp está atada al tipo de elemento (input/select/textarea), así
   que un <button class="inp"> no toma nada y queda con el estilo nativo: por eso
   se replica acá, con el mismo box model para que quede a la misma altura que
   los campos vecinos del formulario. */
.buscador-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--r);
  font-size: 13px; color: var(--foreground);
  outline: none;
  font-family: 'Geist', sans-serif;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  letter-spacing: -.1px;
  text-align: left;
  cursor: pointer;
}
.buscador-btn:focus, .buscador.abierto .buscador-btn {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
/* El valor elegido se recorta con puntos suspensivos: los nombres de cliente
   son largos y el ancho lo manda la grilla del formulario. */
.buscador-btn .bsc-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscador-btn .bsc-val.vacio { color: var(--muted-foreground); }
.buscador-btn > i { color: var(--muted-foreground); font-size: 11px; flex-shrink: 0; }

/* Campo de sólo lectura: misma caja y alto que un .inp, pero en gris y sin foco.
   Para valores que no se pueden cambiar (el cliente de un periódico ya creado),
   de modo que el formulario no pierda la fila ni la etiqueta. */
.inp-readonly {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--gray1);
  border: 1px solid var(--input);
  border-radius: var(--r);
  font-size: 13px; color: var(--foreground);
  font-family: 'Geist', sans-serif;
  width: 100%;
  letter-spacing: -.1px;
}
.inp-readonly i { color: var(--muted-foreground); flex-shrink: 0; }

/* Las opciones del combo alinean con el texto del buscador que tienen arriba,
   no con el borde del dropdown: 12px de padding del buscador + 13px del ícono
   de lupa + 8px de gap = 33px, menos los 4px de padding de .op-opts-list.
   En el multiselect de las barras de filtros ese lugar lo ocupa el checkbox,
   por eso la regla va scopeada a .buscador. */
.buscador .op-opt { padding-left: 29px; }

/* El dropdown del buscador va contra la pantalla, no contra el campo: adentro
   de un modal (.modal-box scrollea) o de una tabla con scroll, un absolute se
   recorta en el borde del contenedor y la lista quedaba cortada. Las medidas
   las calcula _buscadorUbicar() en admin-common.js y llegan como custom
   properties; los fallback son por si algo se abre antes de medirse. El
   z-index tiene que pasarle al modal, que esta en 200. */
.buscador .op-dropdown {
  position: fixed;
  top: var(--bsc-y, 0); left: var(--bsc-x, 0); right: auto;
  width: var(--bsc-w, 240px);
  z-index: 350;
}
.buscador .op-opts-list { max-height: var(--bsc-lista, 200px); }
.form-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: flex-end; padding-top:12px; border-top:1px solid var(--border);}

/* ── MARKDOWN RENDERIZADO ──
   Lo usan manuales.html (con su índice al costado) y notas.html. */
.md-content { flex: 1; min-width: 0; padding: 4px 6px 30px; overflow-x: auto; }
.md-content h1 { font-size: 24px; font-weight: 700; color: var(--gray7); margin: 4px 0 14px; }
.md-content h2 { font-size: 17px; font-weight: 700; color: var(--gray7); margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.md-content h3 { font-size: 14px; font-weight: 700; color: var(--gray6); margin: 16px 0 6px; }
.md-content p, .md-content li { font-size: 13.5px; line-height: 1.65; color: var(--gray6); }
.md-content ul, .md-content ol { padding-left: 22px; margin: 8px 0; }
.md-content li { margin: 3px 0; }
.md-content strong { color: var(--gray7); }
.md-content code { background: var(--gray1); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
.md-content blockquote { border-left: 3px solid var(--primary-mid); background: var(--primary-soft); margin: 12px 0; padding: 8px 14px; border-radius: 0 8px 8px 0; color: var(--gray6); font-size: 13px; }
.md-content blockquote p { margin: 0; }
.md-content a { color: var(--primary); }
.md-content table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.md-content th, .md-content td { font-size: 13px; text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--gray6); }
.md-content th { font-weight: 700; color: var(--gray7); background: var(--gray1); }

/* ── SEARCH BAR ── */
.search-bar {
  display: flex; align-items: center; gap: 7px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 11px;
  flex: 1; max-width: 240px;
  transition: border-color .15s;
}
.search-bar:focus-within { border-color: var(--ring); }
.search-bar i { color: var(--muted-foreground); font-size: 13px; flex-shrink: 0; }
.search-bar input {
  border: none; background: transparent; outline: none;
  font-size: 13px; font-family: 'Geist', sans-serif; color: var(--foreground); width: 100%;
}
.search-bar input::placeholder { color: var(--muted-foreground); }

/* ── MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--card);
  border-radius: var(--r3);
  padding: 24px;
  width: 100%; max-width: 600px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  border: 1px solid var(--border);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);

}
.modal-title { font-size: 16px; font-weight: 600; color: var(--foreground); letter-spacing: -.3px; }
.modal-close {
  background: none; border: none;
  color: var(--muted-foreground); font-size: 16px;
  cursor: pointer; padding: 4px; line-height: 1;
  border-radius: 4px; transition: all .1s;
}
.modal-close:hover { background: var(--accent); color: var(--foreground); }

/* ── MISC ── */
.time-chip {
  background: var(--primary-soft); color: var(--primary);
  padding: 2px 8px; border-radius: 5px;
  font-weight: 500; font-size: 12px;
  white-space: nowrap; display: inline-block;
  border: 1px solid var(--primary-mid);
}
.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; }
.time-chip.tc-red   { background: var(--red-soft); color: var(--red); border-color: #fecaca; }

/* ── SIDEBAR OVERLAY (mobile) ── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.35); z-index: 99;
}

/* ── REPORT BOX ── */
.report-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 16px;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 10px;
}
.report-box .rt-label { font-size: 12px; color: var(--muted-foreground); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.report-box .rt-val { font-size: 20px; font-weight: 700; color: var(--foreground); letter-spacing: -.5px; }

/* ── COLABORADOR CHIPS ── */
.op-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.op-chip {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--foreground); color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: default;
}

/* ── NOTIF PANEL ── */
.notif-panel {
  position: fixed; top: var(--header-h); right: 0;
  width: 310px; height: calc(100vh - var(--header-h));
  background: var(--background); border-left: 1px solid var(--border);
  z-index: 150; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s;
  box-shadow: var(--shadow-md);
}
.notif-panel.open { transform: translateX(0); }
.notif-panel-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.notif-panel-title { font-size: 13px; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } }
.notif-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.notif-item {
  display: flex; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  animation: dropIn .2s ease;
}
.notif-item.entrada { border-left: 2px solid var(--green); }
.notif-item.salida { border-left: 2px solid var(--primary); }
.notif-item.alerta { border-left: 2px solid var(--red); }
.notif-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.notif-icon.entrada { background: var(--green-soft); color: var(--green); }
.notif-icon.salida { background: var(--primary-soft); color: var(--primary); }
.notif-icon.alerta { background: var(--red-soft); color: var(--red); }
.notif-body { flex: 1; min-width: 0; }
.notif-msg { font-size: 12px; font-weight: 600; color: var(--foreground); line-height: 1.35; }
.notif-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.notif-time-label { font-size: 11px; color: var(--muted-foreground); margin-top: 3px; }
.notif-empty { font-size: 12px; color: var(--muted-foreground); text-align: center; padding: 24px 16px; }
.notif-cnt {
  position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px;
  background: var(--destructive); border-radius: 50%;
  border: 2px solid #fff;
  font-size: 10px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ── REGISTRO ── */
.registro-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r2); border: 1px solid var(--border); background: var(--card);
}
.reg-ava { width: 32px; height: 32px; border-radius: var(--r); background: var(--foreground); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.reg-info { flex: 1; }
.reg-nombre { font-size: 13px; font-weight: 600; color: var(--foreground); }
.reg-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 1px; }
.reg-times { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.reg-time-box { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.reg-time-lbl { font-size: 10px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .4px; }
.reg-time-val { font-size: 13px; font-weight: 700; color: var(--foreground); }
.reg-time-val.empty { color: var(--muted-foreground); font-weight: 400; }

/* ── VISTA COLABORADOR ── */
.op-selector { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--background); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.op-selector label { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.op-cards-area { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.op-job-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: 18px; box-shadow: var(--shadow-sm); }
.op-job-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.op-job-title { font-size: 14px; font-weight: 600; color: var(--foreground); }
.op-job-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.op-job-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.op-meta-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted-foreground); }
.op-meta-item i { color: var(--primary); font-size: 13px; }
.op-reg-buttons { display: flex; gap: 10px; }
.op-reg-btn { flex: 1; padding: 10px; border-radius: var(--r); border: 1px solid var(--border); background: var(--gray1); font-size: 13px; font-weight: 500; font-family: 'Geist', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--foreground); transition: all .1s; }
.op-reg-btn.entrada.done { background: var(--green-soft); color: var(--green); border-color: #bbf7d0; }
.op-reg-btn.salida.done { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-mid); }
.op-reg-btn.done { cursor: default; }

/* ── TURNO CONTROLS BAR ── */
.turno-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.turno-controls::-webkit-scrollbar { display: none; }

/* ── AGENDA TABS ── */
.agenda-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.agenda-tabs::-webkit-scrollbar { display: none; }

/* ── FILTER BAR ── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0; background: transparent; border-bottom: 1px dashed var(--border); }
/* El desplegable de filtros es sólo de celular: en escritorio la barra se ve
   siempre y este botón no existe (ver el @media de 600px). */
.filtros-toggle { display: none; }
.filter-sel {
  padding: 5px 28px 5px 10px;
  background: var(--background); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; color: var(--foreground); outline: none;
  font-family: 'Geist', sans-serif; cursor: pointer; 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='%23a1a1aa'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color .1s;
}
.filter-sel:focus { border-color: var(--ring); }
.filter-clear { padding: 5px 10px; background: transparent; border: 1px solid var(--gray4); border-radius: 6px; font-size: 12px; color: var(--gray6); cursor: pointer; font-family: 'Geist', sans-serif; transition: all .1s; }
.filter-clear:hover { border-color: var(--destructive); color: var(--destructive); }

/* filtros siempre visibles (agenda) */
.fbar-field { display: inline-flex; }
.fbar-group { display: inline-flex; align-items: center; border: 1.5px solid var(--gray3); border-radius: var(--r); overflow: hidden; background: #fff; height: 30px; }
.fbar-lbl { padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--gray6); background: var(--gray1); border-right: 1px solid var(--gray3); white-space: nowrap; height: 100%; display: inline-flex; align-items: center; }
.fbar-sel, .fbar-multi-btn { border: none; background: transparent; font-size: 12px; color: var(--gray7); padding: 0 6px; height: 100%; outline: none; cursor: pointer; font-family: inherit; }
.fbar-multi-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 90px; justify-content: space-between; }
/* buscador de texto dentro de la barra de filtros (observación) */
/* El ancho por defecto alcanza para un placeholder corto; los buscadores con
   texto largo (agenda) lo pisan inline según su placeholder. */
.fbar-inp { border: none; background: transparent; font-size: 12px; color: var(--gray7); padding: 0 8px; height: 100%; outline: none; font-family: inherit; min-width: 200px; }
.fbar-inp::placeholder { color: var(--gray4); }

/* ── AUDIT LOG ── */
.audit-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.audit-label { font-size: 11px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.audit-entry { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.audit-entry:last-child { border-bottom: none; }
.audit-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 5px; }
.audit-text { flex: 1; font-size: 12px; color: var(--foreground); line-height: 1.4; }
.audit-ts { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; margin-top: 1px; }

/* ── EXPAND TABLE ROWS ── */
.row-expand { background: var(--gray1); display: none; }
.row-expand.open { display: table-row; }
.expand-inner { padding: 8px 14px 12px 42px; display: flex; flex-direction: column; gap: 6px; }
.sub-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; }
.sub-row-name { flex: 1; font-weight: 500; color: var(--foreground); }
.sub-row-desc { flex: 2; color: var(--muted-foreground); font-size: 12px; }
.expand-btn { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; transition: all .12s; flex-shrink: 0; }
.expand-btn.open { background: var(--accent); color: var(--foreground); transform: rotate(90deg); }
.add-sub { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px dashed var(--border); border-radius: var(--r); cursor: pointer; color: var(--muted-foreground); font-size: 12px; transition: all .1s; background: transparent; font-family: 'Geist', sans-serif; width: 100%; }
.add-sub:hover { border-color: var(--ring); color: var(--foreground); background: var(--accent); }

/* ── MULTISELECT COLABORADORES ── */
.op-multi-wrap { position: relative; }
.op-multi-box { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 10px; background: var(--background); border: 1.5px solid var(--input); border-radius: var(--r); min-height: 40px; cursor: pointer; align-items: center; transition: border-color .15s; }
.op-multi-box:hover { border-color: var(--primary); }
.op-placeholder { color: var(--muted-foreground); font-size: 13px; pointer-events: none; user-select: none; }
.op-chip-m { display: inline-flex; align-items: center; gap: 5px; background: var(--primary); color: var(--primary-foreground); border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 500; }
.op-chip-m button { background: none; border: none; color: rgba(255,255,255,.65); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.op-chip-m button:hover { color: #fff; }
.op-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--popover); border: 1.5px solid var(--border); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.13); overflow: hidden; display: none; }
.op-dropdown.show { display: block; }
.op-search-wrap { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--background); }
.op-search-wrap i { color: var(--muted-foreground); font-size: 13px; flex-shrink: 0; }
.op-search-inp { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--foreground); outline: none; font-family: inherit; padding: 0; }
.op-search-inp::placeholder { color: var(--muted-foreground); }
.op-selall { display: flex; align-items: center; gap: 5px; width: 100%; border: none; border-bottom: 1px solid var(--border); background: var(--background); padding: 4px 12px; font-size: 11px; font-weight: 600; color: var(--primary); cursor: pointer; font-family: inherit; text-align: left; transition: background .1s; }
.op-selall:hover { background: var(--accent); }
.op-opts-list { max-height: 200px; overflow-y: auto; padding: 4px; }
.op-opt { padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--foreground); display: flex; align-items: center; gap: 10px; transition: background .1s; }
.op-opt:hover { background: var(--accent); }
.op-opt.sel { background: var(--accent); font-weight: 600; }
.op-opt .chk { width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; transition: all .1s; }
.op-opt.sel .chk { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* ── TOAST ── */
.toast-msg {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--foreground); color: var(--primary-foreground);
  padding: 10px 16px; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: all .2s; z-index: 999;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.toast-msg.show { opacity: 1; transform: translateY(0); }
.toast-msg.err { background: var(--destructive); }
.toast-msg.ok { background: var(--green); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); box-shadow: var(--shadow-md); }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: flex; }
  .main { width: 100%; }
  .page { padding: 14px; }
  .topbar { padding: 0 14px; }
  .form-grid,
  .form-grid.cols-2,
  .form-grid.cols-3 { grid-template-columns: 1fr; }
  .notif-panel { width: 100%; }
}

@media (max-width: 600px) {
  /* Fecha inputs más cortos en mobile */
  .turno-controls input[type="date"] { width: 110px !important; font-size: 12px; }

  /* Los buscadores son anchos para que entre el placeholder: en mobile se
     achican para no desbordar la barra de filtros */
  .fbar-inp { min-width: 0 !important; width: 100%; }
  .fbar-field:has(.fbar-inp) { flex: 1 1 100%; }

  /* Cards: 1 columna en mobile */
  #agenda-cards-wrap { padding: 12px 0 !important; }
  #agenda-cards-wrap > div { width: 100% !important; min-width: 0 !important; }
  .cards-selall { padding: 10px 0 0; }

  /* Acciones en lote: cinco botones no entran en una fila de 360px. El contador
     se lleva su renglon y los botones van de a dos, a todo el ancho, que es lo
     que se puede tocar con el dedo. */
  .selbar { padding: 10px 12px; gap: 8px; }
  .selbar-count { width: 100%; }
  .selbar .btn-secondary { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .selbar .filter-clear { width: 100%; margin-left: 0; text-align: center; }

  /* ── FILTROS DE LA AGENDA EN EL CELULAR ─────────────────────────────────
     Son doce filtros. Con flex-wrap, en una pantalla de 375px ocupaban seis o
     siete filas y empujaban la tabla fuera de la vista: había que scrollear
     media pantalla para ver el primer turno. Acá van detrás de un botón que
     dice cuántos hay aplicados, y al abrirlos cada uno toma el ancho completo,
     que es lo que se puede tocar con el dedo.

     `.abierta` es un estado de esta barra, no la utilidad .oculto/.visible: la
     barra se ve siempre en escritorio y sólo acá arranca cerrada.
     ──────────────────────────────────────────────────────────────────────── */
  .filtros-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin-top: 10px; padding: 10px 12px;
    background: #fff; border: 1.5px solid var(--gray3); border-radius: var(--r);
    font-size: 13px; font-weight: 600; color: var(--gray7);
    font-family: 'Geist', sans-serif; cursor: pointer;
  }
  .filtros-toggle .bi-chevron-down { margin-left: auto; font-size: 12px; color: var(--gray5); transition: transform .15s; }
  .filtros-toggle.abierta { border-color: var(--primary); color: var(--primary); }
  .filtros-toggle.abierta .bi-chevron-down { transform: rotate(180deg); }
  .filtros-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  }

  #agenda-filter-bar { display: none; }
  #agenda-filter-bar.abierta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

  /* Un filtro por fila, a lo ancho: el objetivo táctil pasa de 30 a 38px de alto */
  .agenda-filters { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .agenda-filters .fbar-field { width: 100%; min-width: 0; }
  .agenda-filters .fbar-group { width: 100%; height: 38px; }
  .agenda-filters .fbar-lbl { min-width: 94px; font-size: 12px; }
  .agenda-filters .fbar-multi-btn,
  .agenda-filters .fbar-sel { flex: 1; min-width: 0; font-size: 13px; }
  /* El nombre del cliente elegido puede ser largo: se corta, no empuja la flecha */
  .agenda-filters .fbar-multi-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* El desplegable se ancla al campo, que ahora ocupa todo el ancho de la
     pantalla: sin esto se salía por la derecha. */
  .fbar-drop-izq { left: 0; right: 0; min-width: 0; }
  .op-opts-list { max-height: 45vh; }
  .op-opt { padding: 11px 10px; }

  /* Limpiar y Columnas: cada uno en su fila. El margin-left:auto de escritorio
     acá los mandaba contra el borde. */
  .col-menu-wrap { margin-left: 0; }
  .col-menu.angosto { left: 0; right: 0; min-width: 0; }
  #btn-clear-filters, #btn-col-toggle { width: 100%; padding: 9px 10px; font-size: 13px; justify-content: center; }
}


/* =========================================================================
   DE ACA PARA ABAJO: lo que antes estaba en un <style> dentro de cada .html.
   Cada bloque es de una pantalla y solo lo usa ella.
   ========================================================================= */

/* -- TABLERO: tarjetas de indicador (tablero.html) -- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.kpi-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r2);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
  text-align: left; font-family: 'Geist', sans-serif;
}
.kpi-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.07); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--muted-foreground); line-height: 1.35; }
.kpi-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.kpi-val { font-size: 30px; font-weight: 700; letter-spacing: -.6px; color: var(--foreground); line-height: 1; }
.kpi-sub { font-size: 12px; color: var(--muted-foreground); }
.kpi-ver { font-size: 12px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }

/* -- MANUALES: indice lateral (manuales.html) -- */
.manual-layout { display: flex; gap: 0; align-items: stretch; min-height: 60vh; }
.manual-nav { width: 250px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 6px 10px 20px 0; overflow-y: auto; }
.manual-nav-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray5); padding: 14px 8px 6px; }
.manual-nav-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--gray7); cursor: pointer; font-family: inherit; }
.manual-nav-item:hover { background: var(--gray1); }
.manual-nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.manual-nav-item i { font-size: 14px; color: var(--gray5); flex-shrink: 0; }
.manual-nav-item.active i { color: var(--primary); }
/* .md-content (el markdown renderizado) esta mas arriba: lo comparte notas.html.
   Aca solo el corrimiento que le hace lugar al indice lateral. */
.manual-layout .md-content { padding-left: 26px; }
@media (max-width: 760px) {
  .manual-layout { flex-direction: column; }
  .manual-nav { width: auto; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
  .manual-layout .md-content { padding-left: 6px; }
}

/* -- NOTIFICACIONES: filtros y etiquetas (notificaciones.html) -- */
.notif-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--gray3); background: #fff;
  font-size: 12px; font-weight: 600; color: var(--gray5);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.notif-chip:hover { border-color: var(--primary); color: var(--primary); }
.notif-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.notif-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.badge-ingreso { background: var(--green-soft); color: var(--green); }
.badge-salida  { background: var(--primary-soft);  color: var(--primary);  }
.badge-alerta  { background: var(--red-soft);   color: var(--red);   }

/* -- PERIODICOS: filtros, estados y dias (periodicos.html) -- */
.pf-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  border: 1.5px solid var(--gray3); background: #fff;
  font-size: 11px; font-weight: 600; color: var(--gray5);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.pf-chip:hover { border-color: var(--primary); color: var(--primary); }
.pf-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.per-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-pendiente  { background: var(--gray2);      color: var(--gray6); }
.badge-procesando { background: #FEF3C7;           color: #B45309; }
.badge-procesado  { background: var(--green-soft); color: var(--green); }
.badge-error      { background: var(--red-soft);   color: var(--red); }

.per-day-pill {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--gray3); background: #fff; color: var(--gray6);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.per-day-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* -- FORMULARIO DE CLIENTE (cliente-form.html) -- */
.wiz-inp {
  width: 100%; height: 42px;
  padding: 0 12px;
  font-size: 14px; font-family: 'Geist', sans-serif;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--background); color: var(--foreground);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.wiz-inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.wiz-inp::placeholder { color: var(--gray3); }
textarea.wiz-inp { height: auto; min-height: 80px; padding: 10px 12px; resize: none; }
/* appearance:none le saca la flecha nativa al select, asi que se dibuja aca. */
select.wiz-inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.wiz-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--foreground); margin-bottom: 6px; letter-spacing: -.1px; }
.wiz-hint { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; line-height: 1.4; }
.wiz-field { margin-bottom: 18px; }
.wiz-field:last-child { margin-bottom: 0; }

.wiz-step-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--foreground); margin-bottom: 4px; }
.wiz-step-desc { font-size: 13px; color: var(--muted-foreground); margin-bottom: 22px; line-height: 1.5; }
#wiz-step-5 .wiz-step-desc { margin-bottom: 12px; }

/* Grillas de 2, 3 y 4 columnas para los campos del formulario. */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }

/* Solapas del formulario. Reemplazan al paso a paso: se puede ir a cualquiera
   y guardar una sola vez. */
.form-tabs { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: center; }
.form-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 13px; font-weight: 600; color: var(--gray5);
  font-family: 'Geist', sans-serif; cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.form-tab:hover { color: var(--foreground); }
.form-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
/* Marca la solapa que tiene un campo obligatorio sin completar. */
.form-tab.error { color: var(--red); }
.form-tab.error::after { content: '!'; font-weight: 700; }

.wiz-btn-prev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--background); color: var(--foreground);
  border: 1.5px solid var(--border); border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: 'Geist', sans-serif; transition: all .15s;
}
.wiz-btn-prev:hover { background: var(--gray1); }
.wiz-btn-next {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: var(--primary); color: #fff; border: none; border-radius: var(--r);
  font-size: 13px; font-weight: 600; letter-spacing: -.1px;
  cursor: pointer; font-family: 'Geist', sans-serif; transition: opacity .15s;
}
.wiz-btn-next:hover { opacity: .88; }
.wiz-btn-next:disabled { opacity: .45; cursor: not-allowed; }

.day-pill {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--background); color: var(--muted-foreground);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Geist', sans-serif;
  transition: all .12s; display: flex; align-items: center; justify-content: center;
}
.day-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.toggle-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1.5px solid var(--border); border-radius: var(--r);
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted-foreground);
  user-select: none; transition: all .15s; background: var(--background);
}
.toggle-chip:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.toggle-chip input { display: none; }

.turnos-body-wrap { border: 1.5px solid var(--border); border-radius: var(--r2); padding: 12px; }

/* -- INGRESO AL PANEL (login.html) --
   La pantalla de ingreso no tiene sidebar ni topbar: <body class="login-page">
   la saca del layout del panel y la centra sobre el degradado. */
.login-page {
  height: auto;
  font-family: 'Geist', sans-serif;
  background: var(--login-bg);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh; padding: 24px 16px;
}
.login-box {
  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);
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.login-brand-mark {
  width: 44px; height: 44px; background: var(--primary); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.login-brand-name { font-size: 20px; font-weight: 700; color: var(--gray7); }
.login-brand-name span { color: var(--primary); }
.login-title { font-size: 24px; font-weight: 700; color: var(--gray7); margin-bottom: 6px; letter-spacing: -.4px; }
.login-sub   { font-size: 13px; color: var(--gray5); margin-bottom: 28px; line-height: 1.5; }
.login-field { margin-bottom: 14px; }
.login-field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--gray6);
  margin-bottom: 5px; letter-spacing: .3px;
}
.login-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;
}
.login-field input:focus { border-color: var(--primary); background: #fff; }
.login-field input::placeholder { color: var(--gray4); }
.login-page .pw-wrap { position: relative; }
.login-page .pw-wrap input { padding-right: 42px; }
.login-page .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;
}
.login-page .pw-toggle:hover { color: var(--gray6); }
/* Cartel de error: arranca oculto y el JS le pone .visible. */
.login-error {
  display: none; background: var(--red-soft); border: 1.5px solid #FECACA;
  border-radius: 10px; padding: 10px 13px;
  font-size: 12px; color: var(--red); margin-bottom: 14px;
}
.login-error.visible { display: block; }
.login-btn {
  width: 100%; padding: 13px; background: var(--primary); color: #fff;
  border: none; border-radius: 10px;
  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;
}
.login-btn:hover    { background: var(--primary-dark); }
.login-btn:disabled { background: var(--gray4); cursor: not-allowed; }
.login-back {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  margin-top: 18px; text-decoration: none;
  color: var(--gray5); font-size: 13px; font-weight: 600;
  transition: color .15s;
}
.login-back:hover { color: var(--gray7); }


/* -- BARRA DE FILTROS DE LOS CATALOGOS --
   Las nueve pantallas de catalogo (barrios, ciudades, criticidades, franjas,
   frecuencias, medios de transporte, prioridades, servicios y zonas) comparten
   esta barra. Antes cada una la repetia con style="..." en el HTML y en el JS. */
.fbar-row { display: flex; gap: 8px; align-items: center; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-menu-wrap { position: relative; }
/* Boton con icono + texto en una linea, que no se parte ni se encoge.
   Lo usan "Agregar filtro" y "Columnas". */
.btn-inline { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }

/* El menu de "Agregar filtro": arranca oculto y el JS le pone .visible. */
.filter-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid var(--gray3); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 300;
  min-width: 165px; padding: 4px 0;
}
.filter-menu.visible { display: block; }
.filter-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 12px;
  border: none; background: none; font-size: 13px; color: var(--gray7);
  cursor: pointer; text-align: left; font-family: inherit;
}
.filter-menu-item:hover { background: var(--gray1); }
.filter-menu-item i { color: var(--gray5); }
.filter-menu-vacio { padding: 10px 12px; font-size: 12px; color: var(--gray4); }

/* Boton de quitar un chip de filtro. La caja y la etiqueta reusan .fbar-group
   y .fbar-lbl, que ya existen mas arriba para la barra de la agenda. */
.fbar-x {
  border: none; background: transparent; padding: 0 7px; height: 100%;
  cursor: pointer; color: var(--gray4); font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; border-left: 1px solid var(--gray3);
}

/* Fila de la tabla que dice "Cargando..." o "No hay resultados". Siempre es un
   td con colspan, que es como queda afuera del tratamiento de la columna de
   acciones (ver el :not([colspan]) alla arriba). */
.tabla-vacia { text-align: center; color: var(--gray4); padding: 24px; }

/* -- PAGINACION -- */
.paginacion { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; flex-wrap: wrap; gap: 8px; }
.pag-izq { display: flex; align-items: center; gap: 8px; }
.pag-nums { display: flex; gap: 4px; align-items: center; }
.pag-info { font-size: 12px; color: var(--muted-foreground); }
.inp.pag-sel { width: 140px; padding: 6px 10px; }
/* La pagina en la que estas. */
/* La pagina en la que estas, dentro de la fila de numeros. */
.btn-secondary.actual { background: var(--primary); color: #fff; border-color: var(--primary); }

/* -- ERROR DE UN FORMULARIO --
   Arranca oculto y el JS le pone .visible. */
.form-error {
  display: none; color: var(--red); font-size: 12px;
  margin-top: 8px; padding: 8px 12px;
  background: var(--red-soft); border-radius: var(--r);
}
.form-error.visible { display: block; }
/* Variante con mas aire arriba, para los formularios mas largos. */
.form-error.tope-12 { margin-top: 12px; }

/* Aire extra arriba de la fila de botones del formulario. */
.form-actions.tope-14 { margin-top: 14px; }

/* Iconos chicos dentro de un boton. */
.ico-12 { font-size: 12px; }
.ico-10 { font-size: 10px; }
/* Celda de tabla en gris, para los datos secundarios. */
.td-gris { color: var(--gray5); }


/* -- BARRA DE FILTROS ANCHA (notificaciones, reportes) --
   Chips a la izquierda, fechas y buscador a la derecha, con un separador
   elastico en el medio. Se parte en varias lineas cuando no entra. */
.filtros-barra { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.filtros-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros-grupo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Empuja hacia la derecha todo lo que venga despues. */
.filtros-spacer { flex: 1; min-width: 0; }
/* Boton que no se parte ni se encoge cuando la barra se apreta. */
.btn-nowrap { white-space: nowrap; flex-shrink: 0; }

/* Campos de la barra: mas bajos que un input normal y de ancho fijo. */
/* Los modificadores de .inp van con doble clase a proposito: la regla base
   es `input.inp` (0-1-1) y una sola clase (0-1-0) le perderia, que es lo que
   pasaba cuando esto era un style= inline y ganaba por ser inline. */
.inp.inp-fecha { padding: 6px 10px; width: 135px; }
.inp.inp-limite { padding: 5px 8px; width: 75px; }
/* La flechita entre "desde" y "hasta". */
.rango-flecha { font-size: 12px; color: var(--gray4); }

/* Buscador con la lupa adentro, contra el borde izquierdo. */
.buscador-wrap { position: relative; }
.buscador-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--gray4); font-size: 13px; pointer-events: none;
}
.inp.inp-buscador { padding: 6px 10px 6px 30px; width: 170px; }

/* -- TABLAS: anchos de columna y pie -- */
.col-fecha-hora { width: 145px; }
.col-tipo       { width: 95px; }
/* Fila de "Cargando..." con mas aire que .tabla-vacia. */
.tabla-estado { text-align: center; padding: 32px; color: var(--muted-foreground); }
/* Pie de tabla: el total a la izquierda, el "Mostrar N" a la derecha. */
.tabla-pie {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap;
}
.tabla-pie-grupo { display: flex; align-items: center; gap: 8px; }


/* -- MENU DE COLUMNAS (clientes, colaboradores, turnos) --
   Como .filter-menu pero anclado a la derecha del boton y con scroll propio:
   la lista de columnas puede ser larga. */
.col-menu-wrap { position: relative; margin-left: auto; }
.col-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid var(--gray3); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 300;
  min-width: 170px; padding: 4px 0;
  max-height: 340px; overflow: auto;
}
.col-menu.visible { display: block; }
.col-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer;
  font-size: 13px; color: var(--gray7); user-select: none;
}
.col-menu-item:hover { background: var(--gray1); }
.col-menu-item input { accent-color: var(--primary); cursor: pointer; }

/* -- BARRA DE SELECCION MULTIPLE --
   Aparece sobre la tabla cuando hay filas tildadas. */
.selbar {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--primary-soft); border-bottom: 1px solid var(--border);
}
.selbar.visible { display: flex; }
.selbar-count { font-size: 13px; font-weight: 600; color: var(--primary); }

/* "Seleccionar todos" de la vista de tarjetas. En la tabla ese control es la
   casilla del encabezado, que en tarjetas no existe: sin esta barra, en el
   celular (que arranca en tarjetas) no habia forma de seleccionar nada. */
.cards-selall { display: flex; align-items: center; padding: 10px 16px 0; }
.cards-selall label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--gray6);
}
.cards-selall input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* -- MODAL DE UBICACION --
   Mismo markup en clientes, periodicos y turnos: mapa arriba, edicion de
   direccion abajo, y el editor oculto hasta que se toca "Editar". */
.modal-box.ancho { max-width: 700px; padding: 0; overflow: hidden; }
.modal-header.compacto { padding: 14px 18px; }
.modal-sub { font-size: 12px; color: var(--gray4); margin-top: 2px; }
.ubic-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 18px 0; }
.ubic-editor { display: none; padding: 12px 18px 0; }
.ubic-editor.visible { display: block; }
/* Ciudad angosta, calle ancha. */
.form-grid.ciudad-calle { grid-template-columns: 1fr 2fr; gap: 10px; }
.ubic-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ubic-coords { font-size: 12px; font-weight: 600; color: var(--gray6); }
.ubic-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ubic-map { width: 100%; background: var(--gray2); margin-top: 10px; }
.ubic-map.alto-380 { height: 380px; }
.ubic-map.alto-360 { height: 360px; }
.ubic-leyenda {
  display: flex; gap: 16px; padding: 10px 18px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--gray1);
}

/* -- APOYOS DE FORMULARIO -- */
/* El asterisco de campo obligatorio. */
.req { color: var(--red); }
/* Aclaracion gris al lado de una etiqueta. */
.lbl-nota { color: var(--gray4); font-weight: 400; }
/* Texto de ayuda debajo de un campo. */
.hint { font-size: 12px; color: var(--gray4); margin-top: 4px; }
.hint-medio { font-size: 12px; color: var(--gray5); }
.form-group.tope-10 { margin-top: 10px; }
/* El PIN: pocos digitos, grandes y separados. */
.inp.inp-pin { letter-spacing: 6px; font-size: 18px; text-align: center; }
.fila-8 { display: flex; gap: 8px; }
.inp-ancho { min-width: 190px; }
.ico-11 { font-size: 11px; }
.ml-auto { margin-left: auto; }
/* Error dentro de un modal: como .form-error pero con su propio aire. */
.form-error.tope-10 { margin-top: 10px; border-radius: 8px; }


/* -- MODALES: anchos -- */
.modal-box.angosto { max-width: 400px; }

/* -- REGISTRO DE HORAS -- */
.inp.inp-fecha-ancha { width: 145px; padding: 6px 10px; }
/* Las fichadas del dia, como tarjetas que fluyen en varias filas. */
.registro-grid { display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
/* Mensaje de estado que ocupa toda la fila de una grilla o de un flex. */
.estado-fila { text-align: center; color: var(--gray4); padding: 24px; width: 100%; }

/* -- TABLERO -- */
.filter-bar.wrap { flex-wrap: wrap; gap: 8px; }
.fbar-inp.inp-fecha-min { min-width: 140px; }
.tablero-body { padding: 16px 0; }
.tablero-cargando { color: var(--gray4); font-size: 13px; padding: 20px; }

/* -- NOTAS DE LA VERSION -- */
.md-cargando { color: var(--gray4); padding: 24px; font-size: 13px; }
.md-error { color: var(--red); padding: 24px; font-size: 13px; }
/* Cuando el markdown no se puede formatear se muestra crudo, pero con los
   renglones cortados al ancho de la caja en vez de con scroll horizontal. */
.md-crudo { white-space: pre-wrap; }

/* -- VISTA COLABORADOR (preview desde supervisor) --
   Dos pantallas dentro de la misma tarjeta: la grilla para elegir colaborador
   y el detalle de su jornada. Se turnan. */
.vista-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.op-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.card-header.punteado { border-bottom: 1px dashed var(--border); }
.card-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 3px; }
/* Grilla de avatares: tantas columnas como entren, minimo 150px. */
.op-avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; padding: 16px 0; overflow-y: auto; align-content: start;
}
/* El detalle arranca oculto; el JS le pone .visible al elegir un colaborador. */
.op-detail { display: none; flex-direction: column; flex: 1; }
.op-detail.visible { display: flex; }
.op-detail-bar {
  background: var(--background); border-bottom: 1px solid var(--border);
  padding: 12px 0; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.btn-volver {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 5px; font-family: inherit;
}
/* Barrita vertical que separa dos grupos dentro de una fila. */
.sep-vertical { width: 1px; height: 16px; background: var(--border); }
.op-detail-avatar {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.op-detail-nombre { font-size: 14px; font-weight: 700; color: var(--foreground); }
.inp.inp-fecha-op { width: 140px; padding: 5px 9px; margin-left: auto; }
/* Tarjetas de los turnos del colaborador elegido. */
.op-cards-area {
  flex: 1; overflow-y: auto; padding: 16px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; align-content: start;
}
.estado-grilla { color: var(--gray4); font-size: 13px; text-align: center; padding: 32px; width: 100%; }

/* Variante mas apretada de .fbar-row. */
.fbar-row.gap-6 { gap: 6px; }


/* -- PERIODICOS: barra de filtros --
   Chips de estado, los filtros que arma el JS en una fila propia, y el rango
   de vencimiento a la derecha. */
.per-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 0 0 16px; }
/* Ocupa el ancho completo para que las dos filas de filtros no se mezclen con
   los chips de estado ni con el rango de vencimiento. */
.per-filtros-campos { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 1 0 100%; }
.fila-6 { display: flex; align-items: center; gap: 6px; }
/* Etiqueta al lado de un campo, en la misma linea. */
.lbl-inline { font-size: 12px; color: var(--gray6); white-space: nowrap; }
.lbl-chico { font-size: 12px; color: var(--gray6); }
.inp.inp-fecha-chica { padding: 6px 8px; width: 135px; }
.inp.inp-150 { width: 150px; padding: 6px 10px; }

/* Variante suelta de la barra de seleccion: no va pegada a la tabla, asi que
   lleva borde y esquinas propias. */
.selbar.suelta {
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--primary-mid); border-radius: var(--r);
  border-bottom: 1px solid var(--primary-mid);
}
/* Fila tildada en una tabla con seleccion multiple. */
tr.fila-sel { background: var(--primary-soft); }

/* Anchos de columna. */
.col-check  { width: 34px; text-align: center; }
.col-horario{ width: 110px; }
.col-vigencia { width: 150px; }
.col-turnos { width: 80px; text-align: center; }
.col-estado { width: 120px; }
.col-accion { width: 48px; }

/* Pie sin la linea de arriba (cuando ya hay otro pie encima). */
.tabla-pie.sin-linea { border-top: none; }

/* -- PERIODICOS: formulario -- */
.modal-box.medio { max-width: 560px; }
.modal-body { padding-top: 8px; }
.mt-12 { margin-top: 12px; }
/* Separador entre el cuerpo del modal y sus botones. */
.hr-modal { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.entre { display: flex; justify-content: space-between; gap: 8px; }
.lbl.bloque { display: block; margin-bottom: 6px; }
.flex-1 { flex: 1; }
.chips-6 { display: flex; gap: 6px; flex-wrap: wrap; }
.pills-5 { display: flex; gap: 5px; flex-wrap: wrap; }
.inp.inp-70 { width: 70px; }
/* "cada [N] dia(s)": los tres pedazos en una linea. */
.per-dias { display: flex; align-items: center; gap: 8px; }
.txt-13 { font-size: 13px; color: var(--gray6); }
/* Aviso gris con un dato ya resuelto (las fechas fijas del periodico). */
.aviso-gris {
  font-size: 12px; color: var(--gray5);
  padding: 10px 12px; background: var(--gray1); border-radius: 8px;
}
/* Aire arriba, para el aviso que aparece debajo de un campo. */
.aviso-gris.tope-12 { margin-top: 12px; }
.hint-gris { font-size: 12px; color: var(--gray4); }
/* Link de la tabla que se subraya al pasar por encima. */
.link-hover:hover { text-decoration: underline; }
.mb-8 { margin-bottom: 8px; }


/* -- REPORTES: encabezado con filtros -- */
.card-header.columna { flex-direction: column; align-items: stretch; gap: 12px; }
.entre-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.inp.inp-160 { width: 160px; padding: 6px 10px; }
/* Mensaje centrado dentro de una tarjeta, cuando todavia no hay nada que mostrar. */
.estado-centro { text-align: center; color: var(--gray4); padding: 32px; font-size: 13px; }

/* -- AGENDA (turnos) -- */
.inp.inp-fecha-agenda { width: 130px; padding: 6px 10px; flex-shrink: 0; }
.flecha-rango-mut { color: var(--muted-foreground); font-size: 12px; flex-shrink: 0; }
/* Los dos botones de vista (tabla / tarjetas) pegados, como un solo control. */
.vista-toggle {
  display: flex; flex-shrink: 0; margin-left: auto;
  border: 1px solid var(--gray3); border-radius: var(--r); overflow: hidden;
}
.vista-btn {
  padding: 6px 11px; border: none; cursor: pointer;
  font-size: 13px; transition: all .12s;
  background: #fff; color: var(--gray5);
}
.vista-btn.active { background: var(--primary); color: #fff; }
.agenda-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* El menu de columnas de la agenda es mas angosto que el de las tablas grandes. */
.col-menu.angosto { min-width: 160px; max-height: none; }
/* Vista de tarjetas: arranca oculta, el JS la alterna con la tabla. */
.agenda-cards { display: none; padding: 16px; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
.agenda-cards.visible { display: flex; }
.agenda-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border);
}

/* -- MODALES DE LOTE (asignar / cancelar / controlar) -- */
.modal-box.chico { max-width: 440px; }
.modal-box.mediano { max-width: 480px; }
.modal-box.grande { max-width: 720px; }
/* Bajada del modal: explica que va a pasar con los turnos elegidos. */
.modal-p { font-size: 13px; color: var(--gray6); margin: 4px 0 14px; }
.form-actions.tope-18 { margin-top: 18px; }
.fila-16 { display: flex; gap: 16px; margin-bottom: 10px; }
/* Opcion de radio o checkbox con su texto al lado. */
.opt-linea { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
/* Idem pero con una descripcion abajo, asi que el control va arriba del todo. */
.opt-bloque { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; cursor: pointer; }
.opt-bloque input { margin-top: 2px; }
.opt-desc { display: block; font-size: 12px; color: var(--gray5); }
.opts-col { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mt-14 { margin-top: 14px; }
.mt-10 { margin-top: 10px; }
.mb-6 { margin-bottom: 6px; }

/* -- FORMULARIO DEL TURNO -- */
/* Titulillo de una sub-seccion del formulario. */
.sub-titulo {
  font-size: 11px; font-weight: 600; color: var(--gray5);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.dos-iguales { grid-template-columns: 1fr 1fr; }
/* Recuadros del horario real: verde el ingreso, azul la salida. */
.caja-dato { border-radius: var(--r); padding: 10px 14px; }
.caja-dato.verde { background: var(--green-soft); border: 1px solid #A7F3D0; }
.caja-dato.azul  { background: var(--primary-soft); border: 1px solid var(--primary-mid); }
.caja-dato-lbl {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
}
.caja-dato-lbl.verde { color: var(--green); }
.caja-dato-lbl.azul  { color: var(--primary); }
.caja-dato-val { font-size: 16px; font-weight: 700; color: var(--gray7); }
.ico-verde { color: var(--green); }
.ico-ambar { color: var(--amber); }
.hr-form { border: none; border-top: 1px solid var(--gray3); margin: 14px 0; }
.lbl.fuerte { font-weight: 700; }
/* Grilla de dos columnas que arranca oculta (las horas a facturar a mano). */
.grid-2.oculta-hasta { display: none; }
.grid-2.oculta-hasta.visible { display: grid; }

/* -- MODAL DE UBICACION DEL TURNO -- */
.ubic-alerts { padding: 0 18px; }
.ubic-map.alto-380 { height: 380px; }
.ubic-acciones.gap-10 { gap: 10px; }

/* La tabla y las tarjetas de la agenda se turnan. */
.table-wrap.oculta { display: none; }


/* -- FORMULARIO DE CLIENTE: armazon de la pantalla --
   Ocupa todo el alto: encabezado fijo arriba, contenido con scroll en el medio
   y la barra de botones fija abajo. */
.wiz-card {
  flex: 1; display: flex; flex-direction: column;
  min-height: calc(100vh - 101px);
  padding: 0; gap: 0; overflow: hidden;
}
.wiz-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px 32px; gap: 20px;
  border-bottom: 1px solid var(--border); background: var(--card); flex-shrink: 0;
}
.wiz-breadcrumb { display: flex; align-items: center; gap: 8px; }
.wiz-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted-foreground); text-decoration: none;
  font-size: 13px; font-weight: 500;
}
.wiz-back:hover { color: var(--primary); }
.wiz-sep { color: var(--border); font-size: 14px; }
.wiz-titulo { font-size: 13px; font-weight: 600; color: var(--foreground); }
.wiz-cancel-wrap { display: flex; justify-content: flex-end; }
.wiz-content { flex: 1; overflow-y: auto; background: #f1f4f8; }
.wiz-content-pad { padding: 24px 32px; }
.wiz-hoja {
  background: #fff; border-radius: 14px; padding: 32px 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
}
.wiz-footer {
  border-top: 1px solid var(--border); padding: 14px 40px;
  background: var(--card); flex-shrink: 0;
}
.wiz-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wiz-hint-txt { font-size: 13px; color: var(--muted-foreground); }
/* Los pasos se turnan: sólo uno visible por vez. */
.wiz-step { display: none; }
.wiz-step.visible { display: block; }

/* -- UBICACION DEL CLIENTE -- */
.dir-row { display: flex; gap: 6px; }
.dir-row .wiz-inp { flex: 1; min-width: 0; }
.btn-buscar-dir {
  flex-shrink: 0; padding: 0 10px; height: 42px;
  background: var(--primary-soft); border: 1.5px solid var(--primary-mid);
  border-radius: var(--r); color: var(--primary);
  cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: 'Geist', sans-serif;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: all .12s;
}
/* El hover estaba inline con onmouseover/onmouseout, que ademas en pantalla
   tactil se quedaba pegado despues de tocar el boton. */
.btn-buscar-dir:hover { background: var(--primary-mid); }
/* Cartel verde de "ya tiene coordenadas". */
.coords-badge { margin-bottom: 14px; }
.coords-badge-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: var(--r);
  background: #ecfdf5; border: 1.5px solid #a7f3d0;
  font-size: 13px; color: #059669;
}
.btn-x-suave {
  margin-left: auto; background: none; border: none;
  color: #9ca3af; cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
}
.mapa-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mapa-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.btn-mapa {
  padding: 5px 11px; background: var(--background);
  border: 1.5px solid var(--border); border-radius: var(--r);
  font-size: 12px; color: var(--foreground);
  cursor: pointer; font-family: 'Geist', sans-serif;
  display: flex; align-items: center; gap: 4px;
}
.btn-mapa.suave { color: var(--muted-foreground); display: block; }
/* El pin dibujado encima del centro del mapa, que no intercepta el arrastre. */
.mapa-wrap { position: relative; border-radius: var(--r2); overflow: hidden; border: 1.5px solid var(--border); }
.mapa-caja { width: 100%; height: 300px; }
.mapa-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  width: 32px; height: 32px; pointer-events: none; z-index: 10;
}
.btn-confirmar-punto {
  padding: 7px 14px; background: var(--primary); color: #fff;
  border: none; border-radius: var(--r);
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  font-family: 'Geist', sans-serif; transition: background .2s;
}

/* -- TURNOS PROGRAMADOS (paso 5) -- */
.pt-caja {
  background: var(--gray1); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 10px; margin-bottom: 10px;
}
.pt-titulo {
  font-size: 12px; font-weight: 700; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px;
}
.pt-titulo.mb-8 { margin-bottom: 8px; }
.grid-2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.grid-2-igual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wiz-lbl.chica { font-size: 12px; }
.wiz-lbl.media { font-size: 13px; }
.wiz-inp.alto-38 { height: 38px; }
.wiz-inp.alto-36 { height: 36px; }
.wiz-inp.ancho-55 { width: 55px; height: 36px; }
/* Par de botones pegados que eligen el modo (calendario / repeticion). */
.modo-toggle { display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; }
.modo-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: none;
  background: var(--background); color: var(--muted-foreground);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.modo-btn + .modo-btn { border-left: 1.5px solid var(--border); }
.modo-btn.active { background: var(--primary); color: #fff; }
.caja-borde { border: 1px solid var(--border); border-radius: var(--r2); padding: 8px; }
.caja-borde.pad-12 { padding: 12px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.btn-cal {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 10px; cursor: pointer; color: var(--muted-foreground); font-size: 12px;
}
.cal-titulo { font-size: 13px; font-weight: 700; color: var(--foreground); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-seleccion { font-size: 12px; color: var(--muted-foreground); min-height: 14px; }
.rep-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.rep-col { flex: 1; min-width: 80px; }
.rep-flecha { color: var(--muted-foreground); font-size: 14px; margin-top: 16px; }
.rep-dias { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pills-4 { display: flex; gap: 4px; flex-wrap: wrap; }
.day-pill.chica { width: 30px; height: 30px; font-size: 12px; }
.pt-acciones { display: flex; gap: 6px; margin-top: 6px; }
.wiz-btn-next.chico { padding: 7px 14px; font-size: 12px; }
.wiz-btn-prev.chico { padding: 7px 12px; font-size: 12px; }
.wiz-btn-prev.medio { padding: 7px 14px; }
.lista-col { display: flex; flex-direction: column; gap: 6px; }
.fila-10 { display: flex; gap: 10px; }
.chips-10 { display: flex; gap: 10px; flex-wrap: wrap; }
.chips-7 { display: flex; gap: 7px; flex-wrap: wrap; }
.mt-8-fila { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mt-8 { margin-top: 8px; }
.ico-12 { font-size: 12px; }
/* Error del formulario del cliente: mas grande que el de los modales. */
.wiz-error {
  display: none; color: var(--red); font-size: 13px;
  margin-top: 20px; padding: 10px 13px;
  background: var(--red-soft); border-radius: var(--r); border: 1px solid #fecaca;
}
.wiz-error.visible { display: block; }
.lbl-nota-14 { font-size: 14px; font-weight: 400; color: var(--muted-foreground); }
.rep-row.mb-8 { margin-bottom: 8px; gap: 10px; }

/* Boton "Confirmar ubicacion": se pinta de verde un instante al guardar. */
.btn-confirmar-punto.guardado { background: var(--green); }
/* El cuerpo plegable de la seccion de turnos del formulario. */
.turnos-body-wrap.oculto { display: none; }

/* -- FORMULARIO DE CLIENTE EN PANTALLA CHICA --
   El formulario esta pensado para escritorio: grillas de hasta 4 columnas,
   encabezado de tres bloques en una fila y mucho aire a los costados. En un
   celular eso deja campos de 60px y el contenido con la mitad del ancho
   comido por padding. Los dos cortes son los mismos que ya usa el resto del
   archivo (768 y 600). */
@media (max-width: 768px) {
  /* Cuatro columnas no entran en una tablet; tres todavia si. */
  .g4 { grid-template-columns: 1fr 1fr; }

  /* El encabezado deja de ser [breadcrumb | solapas | cancelar] en una fila:
     apilado, las solapas se llevan el ancho completo. */
  .wiz-header { grid-template-columns: 1fr; padding: 12px 16px; gap: 10px; }
  /* Cancelar tambien esta en el pie, siempre a la vista: aca sobra. */
  .wiz-cancel-wrap { display: none; }
  /* Las solapas se arrastran en horizontal en vez de partirse en dos filas.
     El margen negativo es para que el scroll llegue hasta el borde de la
     tarjeta, y el padding de abajo para que no se recorte el subrayado de la
     solapa activa. */
  .form-tabs {
    justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; padding: 0 16px 2px; margin: 0 -16px;
    scrollbar-width: none;
  }
  .form-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 600px) {
  /* Un campo por linea: cualquier grilla partida deja campos ilegibles. */
  .g2, .g3, .g4, .grid-2-1-1, .grid-2-igual { grid-template-columns: 1fr; }

  /* 24+32 de un lado y 32+40 del otro se comian 72px por lado de un ancho de
     360. La hoja blanca se queda, pero apretada contra los bordes. */
  .wiz-content-pad { padding: 12px; }
  .wiz-hoja { padding: 20px 16px; border-radius: 12px; }
  .wiz-step-title { font-size: 17px; }
  .wiz-step-desc { margin-bottom: 16px; }

  /* Menos de 16px hace que iOS haga zoom al enfocar el campo y despues deje
     la pagina corrida. */
  .wiz-inp { font-size: 16px; }

  /* Pie: la ayuda no entra y los botones toman el ancho completo, que es lo
     que se puede tocar con el pulgar. */
  .wiz-footer { padding: 12px 14px; }
  .wiz-hint-txt { display: none; }
  .wiz-footer-row .fila-10 { width: 100%; }
  .wiz-footer-row .fila-10 > button { flex: 1; justify-content: center; }

  /* Direccion: el boton del mapa pasa abajo en vez de robarle ancho al campo. */
  .dir-row { flex-wrap: wrap; }
  .dir-row .wiz-inp { flex: 1 1 100%; }
  .btn-buscar-dir { width: 100%; justify-content: center; }

  /* Mapa: los controles apilados y la caja mas baja, que en un celular el
     mapa solo ya ocupa media pantalla. */
  .mapa-header, .mapa-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .mapa-header .fila-6, .mapa-footer .btn-confirmar-punto { justify-content: center; }
  .mapa-caja { height: 240px; }

  /* Los siete dias entran justos en 360: 34px de circulo y 6 de separacion. */
  .day-pill { width: 34px; height: 34px; }
  .chips-7 { gap: 6px; }
  /* Las opciones de a una, para que el area tocable sea grande. */
  .chips-10 { flex-direction: column; align-items: stretch; }
  .toggle-chip { justify-content: center; }
}
/* Celda de tabla en gris medio. */
.td-gris-medio { color: var(--gray6); }


/* -- REPORTES: tarjetas plegables con el detalle por dia --
   Una tarjeta por cliente (o colaborador): encabezado con el total, y al
   tocarlo se despliega la tabla de turnos. */
.rep-lista { display: flex; flex-direction: column; gap: 10px; }
.rep-card { border: 1.5px solid var(--gray3); border-radius: 12px; overflow: hidden; background: #fff; }
.rep-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.rep-ava {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.rep-nombre { font-weight: 700; font-size: 14px; color: var(--gray7); }
.rep-sub { font-size: 12px; color: var(--gray4); margin-top: 2px; }
.rep-total { font-size: 18px; font-weight: 700; color: var(--primary); }
.rep-total-wrap { text-align: right; flex-shrink: 0; }
/* El detalle arranca plegado; el JS le pone .visible al tocar el encabezado. */
.rep-detalle { display: none; border-top: 1px solid var(--gray3); }
.rep-detalle.visible { display: block; }
.rep-chevron { color: var(--gray4); font-size: 14px; transition: transform .2s; flex-shrink: 0; }
.rep-chevron.abierto { transform: rotate(180deg); }
/* La tabla del detalle no se achica: si no entra, scrollea de costado. */
.rep-scroll { overflow-x: auto; }
.rep-tabla { min-width: 700px; margin: 0; }
.rep-th { font-size: 11px; padding: 8px 12px; }
.rep-th.centro { text-align: center; }
.rep-th.derecha { text-align: right; }
.rep-td { padding: 9px 12px; }
.rep-td.centro { text-align: center; }
.rep-td.gris { font-size: 13px; color: var(--gray5); }
.rep-td.fuerte { font-size: 13px; font-weight: 600; }
.rep-td.total { text-align: right; font-weight: 700; color: var(--primary); }
.rep-vacio { text-align: center; color: var(--gray4); padding: 24px; }
.rep-error { text-align: center; color: var(--red); padding: 24px; }
.mb-16 { margin-bottom: 16px; }
/* En el reporte por colaborador el avatar va en color pleno. */
.rep-ava.pleno { background: var(--primary); color: #fff; }


/* -- CELDAS Y TEXTOS SUELTOS DE LAS TABLAS -- */
.td-centro { text-align: center; }
.nowrap { white-space: nowrap; }
.nowrap.mut { color: var(--muted-foreground); }
.txt-gris4 { color: var(--gray4); }
.txt-gris5 { color: var(--gray5); }
.txt-gris6 { color: var(--gray6); }
.txt-mut { color: var(--muted-foreground); }
.txt-ambar { color: var(--amber); }
.txt-verde { color: var(--green); }
.txt-rojo { color: var(--red); }
.txt-11 { font-size: 11px; }
.txt-12 { font-size: 12px; }
.txt-gris4.txt-11 { color: var(--gray4); font-size: 11px; }
/* Link dentro de una tabla, con su iconito. */
.link-tabla {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--primary); cursor: pointer; text-decoration: none;
}
/* Encabezado de tabla que ordena al hacerle click. */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
/* Los selects de la barra de filtros tienen anchos distintos segun el filtro. */
.fbar-sel.ancho-120 { min-width: 120px; padding: 0 8px; cursor: auto; }
.bold { font-weight: 700; }
.txt-13px { font-size: 13px; }


/* -- TARJETAS DE TURNO (agenda en modo tarjetas, vista colaborador) -- */
.tcard-titulo {
  font-size: 14px; font-weight: 700; color: var(--gray7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tcard-meta { font-size: 12px; color: var(--gray6); line-height: 1.4; }
.tcard-obs { font-size: 12px; color: var(--gray7); white-space: pre-wrap; }
.tcard-lbl { font-weight: 600; margin-bottom: 3px; color: var(--gray6); }
.tcard-fila { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--gray7); }
.tcard-nota { font-size: 11px; color: var(--gray5); display: flex; gap: 5px; align-items: flex-start; }
.tcard-aviso {
  display: flex; gap: 7px; align-items: flex-start;
  padding: 8px 10px; border-radius: 8px;
  background: var(--amber-soft); border: 1px solid #FDE68A;
}
.tcard-cols { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tcard-acciones { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Recuadro chico con la hora de ingreso o salida real. El color del titulillo
   depende de si hay fichada: .ok cuando la hay, gris cuando no. */
.hora-lbl {
  font-size: 10px; font-weight: 600; color: var(--gray4);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px;
}
.hora-lbl.ok-verde { color: var(--green); }
.hora-lbl.ok-azul { color: var(--primary); }
.hora-val { font-size: 15px; font-weight: 700; color: var(--gray4); }
.hora-val.ok { color: var(--gray7); }
.hora-nota { font-size: 10px; color: var(--gray5); }

/* Puntito de color de un estado. El color sale del dato, así que viaja inline
   como --dot y la regla queda acá. */
.dot { border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--dot, var(--gray3)); }
.dot-5 { width: 5px; height: 5px; }
.dot-6 { width: 6px; height: 6px; }
.dot-9 { width: 9px; height: 9px; }
.dot-13 { width: 13px; height: 13px; }

/* Avatar de colaborador. El color sale de la paleta por operador. */
.ava-op { border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; background: var(--ava, var(--primary)); }
.ava-op.g52 { width: 52px; height: 52px; font-size: 18px; font-weight: 700; }
.ava-op.g36 { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.ava-op.g27 { width: 27px; height: 27px; font-size: 12px; }

/* Chip de conteo dentro de una fila. */
.chip-conteo {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 600;
}
.link-chico {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--primary); cursor: pointer; text-decoration: none;
}
.ico-sep { margin-right: 3px; }
.semibold { font-weight: 600; }
.elipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txt-nowrap-11 { white-space: nowrap; font-size: 11px; color: var(--gray5); }
.txt-gris4-top { color: var(--gray4); margin-top: 1px; }
.fila-sel-fondo { background: var(--primary-soft); }
.estado-grilla { color: var(--gray4); font-size: 13px; text-align: center; padding: 32px; }
.tabla-estado.rojo { color: var(--red); }

/* Solapas de estado de la agenda. */
.agenda-tab {
  padding: 9px 14px; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 13px; font-weight: 600; color: var(--gray5);
  cursor: pointer; transition: all .12s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.agenda-tab.active { border-bottom-color: var(--primary); color: var(--primary); }
.agenda-tab-total {
  margin-left: auto; align-self: center; padding: 0 14px;
  font-size: 12px; font-weight: 600; color: var(--gray5);
  white-space: nowrap; flex-shrink: 0;
}

/* Barra de filtros: el ancho de cada filtro sale de su definicion (f.ancho),
   asi que viaja inline como --ancho. */
.fbar-field { min-width: var(--ancho, auto); }
.fbar-drop-izq { left: 0; right: auto; top: calc(100% + 6px); min-width: var(--ancho, 220px); }

/* Mapa embebido del editor de ubicacion. */
.ubic-map-chico { width: 100%; height: 300px; background: var(--gray2); border-radius: 8px; }
.form-grid.ciudad-calle-12 { grid-template-columns: 1fr 2fr; gap: 12px; }
.min-200 { min-width: 200px; }


/* -- ETIQUETAS DE ESTADO --
   El color sale del estado del turno, asi que viaja inline como --bg / --fg y
   la forma queda aca. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--bg, var(--gray2)); color: var(--fg, var(--gray6));
}
.etiqueta.nowrap { white-space: nowrap; }
.etiqueta.roja { background: var(--red-soft); color: var(--red); }
.etiqueta.pill {
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.etiqueta.grande {
  padding: 4px 10px; border-radius: 20px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 600; gap: 6px;
}

/* -- TEXTOS CHICOS DE LAS TARJETAS Y LISTADOS -- */
.t11-gris4 { font-size: 11px; color: var(--gray4); }
.t11-gris4.fila { display: flex; align-items: center; gap: 4px; }
.t11-gris4.fila-6 { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.t11-gris4.tope-6 { margin-top: 6px; }
.t11-gris6 { font-size: 11px; color: var(--gray6); line-height: 1.35; }
.t11-gris6.inline { display: inline-flex; align-items: flex-start; gap: 4px; }
.t11-rojo { font-size: 11px; color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.t12-rojo { font-size: 12px; color: var(--red); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.t12-gris5 { font-size: 12px; color: var(--gray5); }
.t12-gris5.elipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t12-gris5.tope-2 { margin-top: 2px; }
.t12-gris6 { font-size: 12px; color: var(--gray6); }
.t12-gris6.semibold { font-weight: 600; }
.t12-mut { font-size: 12px; color: var(--muted-foreground); }
.t12-mut.fila { display: flex; gap: 10px; flex-wrap: wrap; }
.t13-mut { font-size: 13px; color: var(--muted-foreground); }
.t14-fuerte { font-size: 14px; font-weight: 700; color: var(--gray7); }
.t14-fuerte.apagado { color: var(--gray4); }
.dato-chip { font-size: 12px; background: var(--gray2); padding: 2px 6px; border-radius: 4px; }
.lbl-fija { font-size: 11px; font-weight: 600; color: var(--gray5); min-width: 92px; padding-top: 2px; }
.nombre-avatar {
  font-size: 13px; font-weight: 600; color: var(--foreground);
  text-align: center; line-height: 1.3; word-break: break-word; width: 100%;
}
.nombre-fuerte { font-weight: 600; color: var(--foreground); margin-bottom: 2px; }
.grid-2-chico { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; color: var(--gray5); }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted-foreground); padding: 3px 0; }
.pre-wrap { white-space: pre-wrap; }
.no-shrink { flex-shrink: 0; }
.ava-neutro { width: 36px; height: 36px; border-radius: 9px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ava-op.g28 { width: 28px; height: 28px; font-size: 12px; }
.txt-color { color: var(--fg, inherit); font-size: 13px; font-weight: 500; }

/* Dropdown de un filtro, alineado a la izquierda y mas ancho. */
.fbar-drop-izq.ancho-240 { min-width: 240px; }
.drop-abajo { top: calc(100% + 4px); }

/* Panel de preferencias de notificaciones del shell: arranca oculto. */
.notif-prefs { display: none; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.notif-prefs.visible { display: block; }
/* Boton de engranaje del panel: sólo aparece si el navegador soporta push. */
.btn-prefs { display: none; background: none; border: none; cursor: pointer; font-size: 15px; color: var(--primary); padding: 0; line-height: 1; }
.btn-prefs.visible { display: inline-block; }


/* -- TARJETA DE TURNO (agenda en tarjetas y vista colaborador) -- */
.turno-card {
  background: #fff; border: 1.5px solid var(--gray3); border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.turno-card.p16 { padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.turno-card.p14 { padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
/* En la agenda entran de a tres por fila. */
.turno-card.tercio { width: calc(33.33% - 10px); min-width: 260px; }
/* Tarjeta tildada para una accion en lote: la misma marca que la fila de la tabla. */
.turno-card.sel { border-color: var(--primary); background: var(--primary-soft); }
.tcard-check {
  width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--primary); cursor: pointer; flex-shrink: 0;
}
/* Boton-tarjeta para elegir un colaborador. */
.op-avatar-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px; width: 100%;
  background: var(--background); border: 1.5px solid var(--border);
  border-radius: 14px; cursor: pointer; transition: all .15s;
  font-family: inherit; box-sizing: border-box;
}
.op-avatar-btn:hover { border-color: var(--op, var(--primary)); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* Recuadro de una fichada. Verde si hay ingreso, azul si hay salida, gris si no. */
.fichada { border-radius: 8px; border: 1px solid var(--gray3); background: var(--gray1); }
.fichada.p12 { padding: 8px 12px; }
.fichada.p10 { padding: 8px 10px; }
.fichada.con-ingreso { background: var(--green-soft); border-color: #A7F3D0; }
.fichada.con-salida  { background: var(--primary-soft); border-color: var(--primary-mid); }

/* -- LAYOUTS CHICOS -- */
.grid-2-8 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-2-6 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.entre-centro { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pie-acciones { display: flex; justify-content: flex-end; gap: 5px; padding-top: 6px; border-top: 1px solid var(--gray3); }
.fila-8-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fila-8-top { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.fila-6-centro { display: flex; gap: 6px; align-items: center; }
.fila-10-centro { display: flex; gap: 10px; align-items: center; }
.fila-12-centro { display: flex; align-items: center; gap: 12px; }
.chips-4 { display: flex; gap: 4px; flex-wrap: wrap; }
.chips-3 { display: flex; gap: 3px; flex-wrap: wrap; }
/* Celda apilada: el chip arriba y su comentario debajo. El align-items es lo
   que hace que el chip mida lo que dice y no lo que mide la celda: en un flex
   en columna los hijos se estiran a lo ancho por defecto, y el fondo de color
   de la etiqueta terminaba mucho mas ancho que la palabra. */
.col-3 { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.col-3.min-150 { min-width: 150px; }
.col-3.min-140 { min-width: 140px; }
.fila-clic { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fila-dato {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 13px;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--r);
}
.fila-5-12 { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray5); }
/* Aviso con color segun el resultado: el color viaja inline. */
.aviso-color {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; margin: 8px 0 0; border-radius: 8px;
  background: var(--bg, var(--gray1)); border: 1.5px solid var(--bd, var(--gray3));
}

/* -- TEXTOS Y BOTONES SUELTOS -- */
.clic { cursor: pointer; }
.no-clic { cursor: default; border-style: dashed; }
.txt-rojo-24 { color: var(--red); padding: 24px; font-size: 13px; }
.txt-rojo-top { color: var(--red); margin-top: 1px; }
.txt-rojo-centro { color: var(--red); font-size: 13px; text-align: center; padding: 32px; }
.txt-rojo-20 { color: var(--red); font-size: 13px; padding: 20px; }
.txt-gris4-24 { color: var(--gray4); padding: 24px; font-size: 13px; }
.txt-gris5-top { color: var(--gray5); margin-top: 1px; }
.txt-gris3 { color: var(--gray3); }
.txt-primary { color: var(--primary); }
.txt-primary.sep { margin-right: 4px; }
.txt-primary.g15 { font-size: 15px; }
.txt-mut-12 { color: var(--muted-foreground); font-size: 12px; }
.txt-mut-11 { color: var(--muted-foreground); font-size: 11px; }
.txt-ambar-ico { color: var(--amber); font-size: 12px; flex-shrink: 0; }
.txt-ambar-ico.top-2 { margin-top: 2px; }
.txt-ambar-ico.top-1 { margin-top: 1px; }
.dir-corta { color: var(--gray6); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado-grilla.full { grid-column: 1 / -1; }
.chip-azul { background: var(--primary-soft); color: var(--primary); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.chip-ambar { background: #FFFBEB; color: #D97706; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.chip-gris { background: var(--gray2); color: var(--gray5); }
.btn-link {
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--primary);
  font-family: inherit; padding: 0;
}
.btn-ico-link {
  background: none; border: none; cursor: pointer;
  color: var(--primary); font-size: 16px; padding: 0 4px; align-self: flex-start;
}
/* Chip que alterna entre relleno (apagado) y contorno (activo). */
.chip-toggle {
  border: 1px solid var(--primary); border-radius: 6px;
  padding: 3px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  background: var(--primary); color: #fff;
}
.chip-toggle.activo { background: transparent; color: var(--primary); }
/* Buscador de la barra de filtros con ancho a medida. */
.fbar-inp.a-medida { min-width: 0; width: var(--ancho, 200px); padding: 0 6px; }
/* Numero de un indicador del tablero: gris cuando esta en cero. */
.kpi-val.cero { color: var(--gray4); }

/* Botones de accion mas chicos que el .btn-icon normal, para las filas densas. */
.btn-icon.g27 { width: 27px; height: 27px; font-size: 12px; }
.btn-icon.g28 { width: 28px; height: 28px; font-size: 12px; flex-shrink: 0; }
/* Texto muy chico y gris: el chevron de los desplegables, notas al pie. */
.t10-gris5 { font-size: 10px; color: var(--gray5); }
/* El icono de un indicador del tablero: los colores salen del propio indicador. */
.kpi-icon { background: var(--bg, var(--primary-soft)); color: var(--fg, var(--primary)); }
.kpi-val { color: var(--fg, var(--foreground)); }
.kpi-val.cero { color: var(--gray4); }


/* Boton de filtro del tablero cuando esta prendido. */
/* Atajo de rango del tablero cuando es el que esta aplicado. */
.btn-secondary.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
/* Mensaje de resultado del geocoding: gris mientras trabaja, verde si salio
   bien y rojo si fallo. */
.geo-msg { color: var(--gray5); }
.geo-msg.ok { color: var(--green); }
.geo-msg.error { color: var(--red); }
/* Contador de notificaciones sin leer: aparece solo si hay alguna. */
.notif-cnt { display: none; }
.notif-cnt.visible { display: flex; }
/* Fondo del overlay del menu lateral en mobile. */
.sidebar-overlay { display: none; }
.sidebar-overlay.visible { display: block; }
/* El host de un mapa embebido necesita ser el ancla del pin absoluto. */
.buscador-host { position: relative; }


/* -- MENU LATERAL: GRUPOS COLAPSABLES (shell.js) -- */
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; background: none; border: none; cursor: pointer;
  color: var(--gray6); font-size: 13px; font-weight: 500;
  border-radius: var(--r); margin: 1px 0; transition: background .12s, color .12s;
  text-align: left; font-family: inherit;
}
.nav-group-toggle:hover { background: var(--gray2); color: var(--gray7); }
.nav-group-toggle .chevron { margin-left: auto; font-size: 11px; transition: transform .2s; }
.nav-group-toggle.open .chevron { transform: rotate(180deg); }
.nav-group-items { display: none; }
.nav-group-items.open { display: block; }
.nav-item.sub { padding-left: 36px; font-size: 12.5px; }

/* -- AVISO FLOTANTE (login.js) --
   El cartelito que aparece abajo al guardar o al fallar algo. */
.toast-msg {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gray7); color: #fff;
  padding: 10px 20px; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  opacity: 0; transition: all .25s; z-index: 9999;
  pointer-events: none; white-space: nowrap;
}
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-msg.err { background: var(--red); }

/* -- DIA DEL CALENDARIO (cliente-form) --
   Tres estados que se combinan: .sel (elegido), .hoy y .pasado. El orden de
   las reglas importa: .sel gana sobre .hoy, y .pasado sólo apaga el texto de
   los que no están elegidos. */
.cal-dia {
  width: 100%; padding: 4px 2px;
  border: 1.5px solid transparent; border-radius: 6px;
  background: transparent; color: var(--foreground);
  font-size: 13px; font-weight: 400;
  cursor: pointer; font-family: inherit; transition: all .1s;
}
.cal-dia.pasado { color: var(--gray3); cursor: default; }
.cal-dia.hoy { border-color: var(--primary-mid); background: var(--primary-soft); }
.cal-dia.sel {
  border-color: var(--primary); background: var(--primary);
  color: #fff; font-weight: 700;
}