/* ============================================================
   CENTRAL PARK BARRACAS - ESTILO BASE44
   Manrope + gradient naranja-lavanda + header flotante píldora
   CTA verde lima + cards blancas flotantes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ===== PALETA BASE44 ===== */
  --color-naranja: #FF631F;
  --color-naranja-hover: #E5571A;
  --color-naranja-suave: #FFF2EB;
  --color-naranja-borde: #FFD9C2;

  --color-lima: #D4F875;
  --color-lima-hover: #BFE85F;
  --color-lima-oscuro: #95C53D;

  --color-negro: #0F0F0F;
  --color-negro-hover: #262626;

  --color-blanco: #FFFFFF;

  /* Color principal (botón CTA) */
  --color-primario: var(--color-lima);
  --color-primario-hover: var(--color-lima-hover);
  --color-primario-suave: rgba(212, 248, 117, 0.25);
  --color-primario-suave-2: rgba(212, 248, 117, 0.4);
  --color-primario-oscuro: var(--color-lima-oscuro);

  /* Tags multicolor estilo Base44 */
  --tag-amarillo-bg: #FEF08A;
  --tag-amarillo-txt: #713F12;
  --tag-lavanda-bg: #DDD6FE;
  --tag-lavanda-txt: #5B21B6;
  --tag-coral-bg: #FECACA;
  --tag-coral-txt: #991B1B;
  --tag-verde-bg: #BBF7D0;
  --tag-verde-txt: #166534;
  --tag-naranja-bg: #FED7AA;
  --tag-naranja-txt: #9A3412;
  --tag-azul-bg: #BFDBFE;
  --tag-azul-txt: #1E40AF;
  --tag-rosa-bg: #FBCFE8;
  --tag-rosa-txt: #9D174D;

  /* Semánticos */
  --color-exito: #16A34A;
  --color-exito-suave: #F0FDF4;
  --color-exito-borde: #BBF7D0;
  --color-exito-texto: #15803D;

  --color-advertencia: #EA580C;
  --color-advertencia-suave: #FFF7ED;
  --color-advertencia-borde: #FED7AA;
  --color-advertencia-texto: #C2410C;

  --color-error: #DC2626;
  --color-error-suave: #FEF2F2;
  --color-error-borde: #FECACA;
  --color-error-texto: #B91C1C;

  /* Texto */
  --color-texto: #0F0F0F;
  --color-texto-suave: #525252;
  --color-texto-mute: #A3A3A3;

  /* Backgrounds */
  --color-superficie: #FFFFFF;
  --color-superficie-hover: #FAFAFA;
  --color-fondo: #FAFAFA;

  /* GRADIENT BASE44 */
  --gradient-fondo: linear-gradient(180deg, #FFF2EB 0%, #FAFAFA 30%, #F5E6FF 100%);
  --gradient-hero: linear-gradient(135deg, #FFE5D4 0%, #FAF0FF 100%);

  /* Grises */
  --gris-50: #FAFAFA;
  --gris-100: #F5F5F5;
  --gris-200: #EAEAEA;
  --gris-300: #D4D4D4;
  --gris-400: #A3A3A3;
  --gris-500: #737373;

  --color-borde: #EAEAEA;
  --color-borde-suave: #F5F5F5;
  --color-borde-fuerte: #0F0F0F;

  /* Sombras (muy sutiles) */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --sombra: 0 2px 12px rgba(0, 0, 0, 0.04);
  --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --sombra-xl: 0 24px 48px rgba(0, 0, 0, 0.12);
  --sombra-flotante: 0 4px 20px rgba(0, 0, 0, 0.06);
  --sombra-primario: 0 2px 8px rgba(212, 248, 117, 0.4);
  --sombra-primario-hover: 0 4px 14px rgba(212, 248, 117, 0.55);

  /* Radios */
  --radio-sm: 8px;
  --radio: 12px;
  --radio-md: 16px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --radio-pill: 999px;

  /* Tipografía */
  --font-sans:'Manrope', -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, sans-serif;
  --font-display:'Manrope', sans-serif;
  --font-mono: ui-monospace,"SF Mono", Menlo, Consolas, monospace;

  /* Transiciones */
  --trans: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-rapida: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lenta: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-texto);
  background: var(--gradient-fondo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-texto);
  margin: 0 0 0.85rem;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1rem; }
a {
  color: var(--color-negro);
  text-decoration: none;
  transition: var(--trans);
  font-weight: 600;
}
a:hover { color: var(--color-naranja); text-decoration: underline; }
small { font-size: 0.825rem; }

/* ============================================================
   LOGIN
   ============================================================ */
.pagina-login,
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-fondo);
  padding: 1rem;
  margin: 0;
}
.login-container { width: 100%; max-width: 440px; }
.login-card {
  background: var(--color-blanco);
  padding: 2.5rem 2.5rem 2rem;
  border-radius: var(--radio-xl);
  width: 100%;
  animation: subir 0.4s ease-out;
  box-shadow: var(--sombra-flotante);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-card h1 {
  text-align: center;
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
}
.login-card .subtitulo {
  text-align: center;
  color: var(--color-texto-suave);
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.login-header { text-align: center; margin-bottom: 2rem; }
.logo-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-naranja);
  color: var(--color-negro);
  font-weight: 900;
  font-size: 1.4rem;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  letter-spacing: -0.04em;
  position: relative;
  overflow: hidden;
}
.logo-circle::after {
  content:"";
  position: absolute;
  bottom: 14px;
  width: 38px;
  height: 19px;
  background: var(--color-negro);
  border-radius: 19px 19px 0 0;
}
.login-header h1 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.login-header .subtitulo {
  color: #FF631F;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.login-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-borde-suave);
}

/* Créditos al pie de la página de login */
.login-credits {
  text-align: center;
  font-size: 0.78rem;
  color: #737373;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 1.75rem;
  padding: 0 1rem;
}
.login-credits a {
  color: #0F0F0F;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s;
}
.login-credits a:hover {
  color: #FF631F;
}
.btn-block {
  width: 100%;
  padding: 0.9rem 1.25rem;
  font-size: 0.95rem;
}

/* ============================================================
   HEADER FLOTANTE TIPO PÍLDORA
   ============================================================ */
.app-header {
  background: var(--color-blanco);
  border: none;
  padding: 0.55rem 0.6rem 0.55rem 1.5rem;
  margin: 1rem 1.25rem 0;
  border-radius: var(--radio-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 1rem;
  z-index: 100;
  box-shadow: var(--sombra-flotante);
  max-width: calc(1400px - 2.5rem);
  margin-left: auto;
  margin-right: auto;
}

.app-header .titulo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--color-negro);
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.app-header .titulo::before {
  content:"";
  width: 32px;
  height: 32px;
  background: var(--color-naranja);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  background-image: radial-gradient(ellipse at 50% 60%, var(--color-negro) 0%, var(--color-negro) 36%, transparent 36%);
}

.app-header .acciones {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.nombre-usuario {
  color: var(--color-negro);
  font-weight: 700;
  font-size: 0.85rem;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-naranja);
  color: var(--color-negro);
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   NAVEGACIÓN (TAMBIÉN PÍLDORA FLOTANTE)
   ============================================================ */
.app-nav {
  background: var(--color-blanco);
  border: none;
  padding: 0.4rem;
  margin: 0.75rem 1.25rem 0;
  border-radius: var(--radio-pill);
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 76px;
  z-index: 99;
  box-shadow: var(--sombra-flotante);
  max-width: calc(1400px - 2.5rem);
  margin-left: auto;
  margin-right: auto;
}
.app-nav::-webkit-scrollbar { height: 4px; }
.app-nav::-webkit-scrollbar-thumb {
  background: var(--gris-300);
  border-radius: 2px;
}
.app-nav a {
  padding: 0.55rem 1rem;
  color: var(--color-texto-suave);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: var(--font-display);
  border-radius: var(--radio-pill);
  white-space: nowrap;
  transition: var(--trans);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.app-nav a svg { flex-shrink: 0; opacity: 0.7; transition: var(--trans); }
.app-nav a:hover {
  color: var(--color-negro);
  background: var(--gris-100);
  text-decoration: none;
}
.app-nav a:hover svg { opacity: 1; }
.app-nav a.activo {
  background: var(--color-negro);
  color: var(--color-blanco);
}
.app-nav a.activo svg { opacity: 1; }

@media (max-width: 640px) {
  .app-nav a span { display: none; }
  .app-nav a { padding: 0.55rem 0.75rem; }
  .app-header { margin: 0.5rem 0.75rem 0; padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .app-nav { margin: 0.5rem 0.75rem 0; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app-contenido {
  padding: 1.5rem 1.25rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.section-header h2 { margin: 0; letter-spacing: -0.035em; }

/* ============================================================
   CARDS BLANCAS FLOTANTES (estilo Base44)
   ============================================================ */
.card {
  background: var(--color-superficie);
  border-radius: var(--radio-xl);
  padding: 1.75rem;
  box-shadow: var(--sombra-flotante);
  margin-bottom: 1rem;
  transition: var(--trans);
  border: none;
}
.card:hover {
  box-shadow: var(--sombra-md);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-borde-suave);
}
.card-header h3 { margin: 0; }

/* ============================================================
   KPIS (cards blancas flotantes con número grande)
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: var(--color-superficie);
  border-radius: var(--radio-lg);
  padding: 1.5rem;
  box-shadow: var(--sombra-flotante);
  transition: var(--trans);
  cursor: default;
  position: relative;
  overflow: hidden;
  border: none;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}
.kpi-card .label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.kpi-card .valor {
  font-size: 2.75rem;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--color-negro);
  letter-spacing: -0.05em;
}
.kpi-card .subtitulo {
  font-size: 0.825rem;
  color: var(--color-texto-suave);
  margin-top: 0.6rem;
  font-weight: 500;
}

/* Variantes de KPI con sólidos sutiles */
.kpi-card.kpi-error,
.kpi-card.kpi-danger {
  background: var(--color-negro);
}
.kpi-card.kpi-error .label,
.kpi-card.kpi-danger .label { color: rgba(255,255,255,0.6); }
.kpi-card.kpi-error .valor,
.kpi-card.kpi-danger .valor { color: var(--color-blanco); }
.kpi-card.kpi-error .subtitulo,
.kpi-card.kpi-danger .subtitulo { color: var(--color-naranja); }

.kpi-card.kpi-exito,
.kpi-card.kpi-success { background: var(--color-lima); }

.kpi-card.kpi-advertencia,
.kpi-card.kpi-warning { background: var(--color-naranja); }
.kpi-card.kpi-advertencia .label,
.kpi-card.kpi-warning .label { color: rgba(15,15,15,0.7); }

.kpi-card.kpi-primario .valor { color: var(--color-naranja); }
.kpi-card.kpi-info .valor { color: var(--tag-azul-txt); }

/* ============================================================
   BOTONES ESTILO BASE44 (PÍLDORA)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radio-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.01em;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* Primario = LIMA (CTA destacado) */
.btn-primario {
  background: var(--color-lima);
  color: var(--color-negro);
  box-shadow: var(--sombra-primario);
}
.btn-primario:hover {
  background: var(--color-lima-hover);
  box-shadow: var(--sombra-primario-hover);
  color: var(--color-negro);
}

/* Secundario = blanco con borde */
.btn-secundario {
  background: var(--color-blanco);
  color: var(--color-negro);
  border: 1.5px solid var(--color-borde);
}
.btn-secundario:hover {
  background: var(--gris-50);
  border-color: var(--color-negro);
}

/* Negro = acción importante */
.btn-negro {
  background: var(--color-negro);
  color: var(--color-blanco);
}
.btn-negro:hover {
  background: var(--color-negro-hover);
  color: var(--color-blanco);
}

.btn-exito {
  background: var(--color-exito);
  color: white;
}
.btn-exito:hover { background: #15803D; color: white; }

.btn-peligro {
  background: var(--color-error);
  color: white;
}
.btn-peligro:hover { background: #B91C1C; color: white; }

.btn-texto {
  background: transparent;
  color: var(--color-negro);
  padding: 0.5rem 0.85rem;
  box-shadow: none;
}
.btn-texto:hover {
  background: var(--gris-100);
  color: var(--color-negro);
}

.btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.campo:last-child { margin-bottom: 0; }
.campo label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-negro);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="month"], input[type="search"], input[type="tel"],
select, textarea {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
  transition: var(--trans);
  width: 100%;
  outline: none;
  font-weight: 500;
}
input:hover, select:hover, textarea:hover { border-color: var(--gris-300); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-negro);
  box-shadow: 0 0 0 3px rgba(15, 15, 15, 0.08);
}
textarea { resize: vertical; min-height: 80px; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F0F0F'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2.5rem;
}

/* ============================================================
   BADGES (estilo Base44 tags coloridos)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radio-sm);
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Por estado de tickets */
.badge-abierto { background: var(--tag-azul-bg); color: var(--tag-azul-txt); }
.badge-asignado { background: var(--tag-lavanda-bg); color: var(--tag-lavanda-txt); }
.badge-en_progreso { background: var(--tag-naranja-bg); color: var(--tag-naranja-txt); }
.badge-pausado { background: var(--gris-200); color: var(--color-texto-suave); }
.badge-resuelto { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }
.badge-cerrado { background: var(--gris-100); color: var(--color-texto-suave); }

.badge-estado-abierto { background: var(--tag-azul-bg); color: var(--tag-azul-txt); }
.badge-estado-asignado { background: var(--tag-lavanda-bg); color: var(--tag-lavanda-txt); }
.badge-estado-en_progreso { background: var(--tag-naranja-bg); color: var(--tag-naranja-txt); }
.badge-estado-pausado { background: var(--gris-200); color: var(--color-texto-suave); }
.badge-estado-resuelto { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }
.badge-estado-cerrado { background: var(--gris-100); color: var(--color-texto-suave); }

/* Por prioridad */
.badge-critica { background: var(--tag-coral-bg); color: var(--tag-coral-txt); }
.badge-alta { background: var(--tag-naranja-bg); color: var(--tag-naranja-txt); }
.badge-media { background: var(--tag-amarillo-bg); color: var(--tag-amarillo-txt); }
.badge-baja { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }

.badge-prio-critica { background: var(--tag-coral-bg); color: var(--tag-coral-txt); }
.badge-prio-alta { background: var(--tag-naranja-bg); color: var(--tag-naranja-txt); }
.badge-prio-media { background: var(--tag-amarillo-bg); color: var(--tag-amarillo-txt); }
.badge-prio-baja { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }

/* Genéricos */
.badge-primario { background: var(--tag-lavanda-bg); color: var(--tag-lavanda-txt); }
.badge-exito { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }
.badge-error { background: var(--tag-coral-bg); color: var(--tag-coral-txt); }
.badge-adv { background: var(--tag-amarillo-bg); color: var(--tag-amarillo-txt); }

/* Vacaciones */
.badge-vac-solicitada { background: var(--tag-amarillo-bg); color: var(--tag-amarillo-txt); }
.badge-vac-aprobada { background: var(--tag-azul-bg); color: var(--tag-azul-txt); }
.badge-vac-tomada { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }
.badge-vac-rechazada { background: var(--tag-coral-bg); color: var(--tag-coral-txt); }

/* ============================================================
   TABLAS
   ============================================================ */
.tabla-wrap {
  overflow-x: auto;
  border-radius: var(--radio-md);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 0.875rem;
}
.tabla th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-texto-suave);
  background: transparent;
  border-bottom: 1.5px solid var(--color-borde);
  white-space: nowrap;
}
.tabla td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-borde-suave);
  vertical-align: middle;
  font-weight: 500;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tr { transition: var(--trans); }
.tabla tbody tr:hover { background: var(--gris-50); }

/* ============================================================
   MENSAJES
   ============================================================ */
.mensaje-error, .mensaje-exito {
  padding: 0.85rem 1rem;
  border-radius: var(--radio-md);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.75rem 0;
  animation: subir 0.3s ease-out;
  border: none;
}
.mensaje-error {
  background: var(--tag-coral-bg);
  color: var(--tag-coral-txt);
}
.mensaje-exito {
  background: var(--tag-verde-bg);
  color: var(--tag-verde-txt);
}

.oculto { display: none !important; }

/* ============================================================
   MODALES
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: fade-in 0.2s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--color-superficie);
  border-radius: var(--radio-xl);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-xl);
  animation: subir 0.25s ease-out;
}
.modal-header {
  padding: 1.5rem 1.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 { margin: 0; letter-spacing: -0.025em; }
.modal-body { padding: 0 1.75rem 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 1rem 1.75rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  background: transparent;
}
.modal-cerrar {
  background: transparent;
  border: none;
  color: var(--color-texto-suave);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: var(--trans);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-cerrar:hover { background: var(--gris-100); color: var(--color-negro); }

/* ============================================================
   LOADING / ESTADOS
   ============================================================ */
.loading-centrado { text-align: center; padding: 2rem; color: var(--color-texto-suave); }
.loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15,15,15,0.2);
  border-top-color: var(--color-negro);
  border-radius: 50%;
  animation: girar 0.6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   LOADER GLOBAL UNIFICADO (glass + degradé de marca)
   Usado en todos los paneles: jefe, seguridad, empresa, operario.
   Estructura HTML esperada:
     <div class="cmo-loader" id="cmo-loader">
       <div class="cmo-loader-card">
         <div class="cmo-loader-ring"></div>
         <div class="cmo-loader-marca">CMO</div>
         <div class="cmo-loader-sub">Cargando...</div>
       </div>
     </div>
   Para ocultarlo: agregar la clase"oculto" o"listo" al contenedor o al body.
   ============================================================ */
.cmo-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fondo con degradé suave de marca */
  background:
    radial-gradient(circle at 25% 20%, rgba(212, 248, 117, 0.30) 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(255, 99, 31, 0.25) 0%, transparent 45%),
    #FFF1E5;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* Estados para ocultarlo (cualquiera de los dos funciona) */
.cmo-loader.oculto,
body.listo .cmo-loader,
body.cmo-listo .cmo-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Tarjeta glass que contiene el spinner */
.cmo-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2.25rem 2.75rem;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 20px 60px rgba(255, 99, 31, 0.15),
    0 4px 16px rgba(15, 15, 15, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: cmo-loader-entrada 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes cmo-loader-entrada {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Anillo con degradé naranja → lima usando conic-gradient + máscara */
.cmo-loader-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #FF631F 0%,
    #FF8A4D 25%,
    #D4F875 55%,
    rgba(212, 248, 117, 0) 80%,
    rgba(255, 99, 31, 0) 100%
  );
  /* Hueco en el centro: máscara radial que deja solo el borde */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: cmo-loader-girar 0.9s linear infinite;
}
@keyframes cmo-loader-girar { to { transform: rotate(360deg); } }

/* Marca CMO con pulso sutil */
.cmo-loader-marca {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0F0F0F;
  animation: cmo-loader-pulso 1.6s ease-in-out infinite;
}
@keyframes cmo-loader-pulso {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.cmo-loader-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: #737373;
  letter-spacing: 0.01em;
}

.estado-vacio { text-align: center; padding: 3rem 1rem; color: var(--color-texto-suave); }
.estado-vacio .icono { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--gris-100);
  border-radius: var(--radio-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-lima);
  border-radius: var(--radio-pill);
  transition: width 0.4s ease-out;
}

/* ============================================================
   ALERTAS / CARGA / TICKETS MINI (dashboard)
   ============================================================ */
.alerta-flotante {
  background: var(--color-naranja);
  color: var(--color-negro);
  border: none;
  border-radius: var(--radio-lg);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  animation: subir 0.3s ease-out;
  font-weight: 600;
}
.alerta-icono-grande { font-size: 1.75rem; flex-shrink: 0; }

.carga-item {
  display: grid;
  grid-template-columns: 1fr 80px auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  transition: var(--trans);
  background: var(--gris-50);
  margin-bottom: 0.4rem;
}
.carga-item:hover {
  background: var(--gris-100);
}
.carga-item:last-child { margin-bottom: 0; }
.carga-nombre {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-negro);
}
.carga-barra {
  height: 8px;
  background: var(--color-borde);
  border-radius: var(--radio-pill);
  overflow: hidden;
}
.carga-fill {
  height: 100%;
  background: var(--color-lima);
  border-radius: var(--radio-pill);
  transition: width 0.4s ease-out;
}
.carga-numero {
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--color-negro);
  font-size: 1rem;
  min-width: 24px;
  text-align: right;
  letter-spacing: -0.02em;
}

.ticket-mini {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--gris-50);
  border-radius: var(--radio-md);
  margin-bottom: 0.5rem;
  transition: var(--trans);
  border: none;
}
.ticket-mini:hover {
  background: var(--gris-100);
}
.ticket-mini:last-child { margin-bottom: 0; }
.ticket-mini .numero {
  font-weight: 900;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-negro);
  white-space: nowrap;
  background: var(--color-lima);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-sm);
  letter-spacing: -0.02em;
}
.ticket-mini .titulo {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-negro);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitulo {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.icono { display: inline-block; }

/* ============================================================
   DASHBOARD GRID
   ============================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ============================================================
   FILTROS COMPACTOS
   ============================================================ */
.card > .form-row:only-child {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0;
}
.card > .form-row:only-child .campo {
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.card:has(> .form-row:only-child) {
  padding: 1rem 1.25rem;
}
.card > .form-row:only-child select,
.card > .form-row:only-child input[type="text"],
.card > .form-row:only-child input[type="search"],
.card > .form-row:only-child input[type="month"],
.card > .form-row:only-child input[type="date"] {
  width: auto;
  min-width: 160px;
  max-width: 240px;
  padding: 0.55rem 2.25rem 0.55rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 700;
  background-color: var(--gris-100);
  border: 1.5px solid transparent;
  border-radius: var(--radio-pill);
  color: var(--color-negro);
  cursor: pointer;
}
.card > .form-row:only-child select:hover,
.card > .form-row:only-child input:hover {
  background-color: var(--gris-200);
}
.card > .form-row:only-child select:focus,
.card > .form-row:only-child input:focus {
  background-color: var(--color-blanco);
  border-color: var(--color-negro);
  box-shadow: none;
}
.card > .form-row:only-child .campo label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
  margin-bottom: 0.3rem;
}

@media (max-width: 640px) {
  .card > .form-row:only-child {
    flex-direction: column;
    align-items: stretch;
  }
  .card > .form-row:only-child .campo { width: 100%; }
  .card > .form-row:only-child select,
  .card > .form-row:only-child input {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   ASISTENCIA - CALENDARIO
   ============================================================ */
.calendario-asistencia { overflow-x: auto; }
.cal-tabla-wrap { overflow-x: auto; }
.cal-tabla {
  border-collapse: separate;
  border-spacing: 1px;
  font-size: 0.78rem;
  background: var(--gris-100);
  border-radius: var(--radio);
  overflow: hidden;
}
.cal-tabla th, .cal-tabla td { padding: 0; background: var(--color-superficie); }
.cal-th-op {
  text-align: left;
  padding: 0.55rem 0.85rem !important;
  font-weight: 800;
  position: sticky;
  left: 0;
  background: var(--gris-50) !important;
  z-index: 2;
  min-width: 140px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
}
.cal-th-dia {
  width: 26px;
  height: 30px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-texto-suave);
  font-weight: 700;
}
.cal-th-dia.no-lab { color: var(--gris-300); }
.cal-th-total {
  text-align: center;
  font-size: 0.7rem;
  padding: 0 0.5rem !important;
  background: var(--gris-50) !important;
  min-width: 55px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.cal-op-nombre {
  text-align: left !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.85rem;
  font-weight: 700;
  position: sticky;
  left: 0;
  background: var(--color-superficie) !important;
  z-index: 1;
  border-right: 1px solid var(--color-borde-suave);
}
.cal-celda {
  width: 26px;
  height: 26px;
  text-align: center;
  font-size: 0.72rem;
  cursor: default;
  transition: var(--trans-rapida);
}
.cal-celda.presente {
  background: var(--tag-verde-bg) !important;
  color: var(--tag-verde-txt);
}
.cal-celda.ausente { cursor: pointer; color: white; font-weight: 700; }
.cal-celda.ausente:hover { transform: scale(1.15); z-index: 3; position: relative; }
.cal-celda.no-laboral { background: var(--gris-100) !important; }
.cal-total {
  text-align: center;
  font-weight: 800;
  font-family: var(--font-display);
  padding: 0.3rem !important;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}
.cal-bueno { color: var(--color-exito); }
.cal-medio { color: var(--color-naranja); }
.cal-malo { color: var(--color-error); }

.calendario-leyenda {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-borde-suave);
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}
.ley-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--gris-100);
  border-radius: var(--radio-pill);
  font-weight: 600;
}
.ley-cuadro {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.ley-cuadro.presente { background: var(--tag-verde-bg); }
.ley-cuadro.no-laboral { background: var(--gris-100); border: 1px solid var(--gris-300); }

.ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio-md);
  background: var(--gris-50);
  transition: var(--trans);
  border: none;
}
.rank-item:hover {
  background: var(--gris-100);
}
.rank-item.top { background: var(--color-lima); }
.rank-pos {
  font-size: 1.5rem;
  font-weight: 900;
  width: 40px;
  text-align: center;
  font-family: var(--font-display);
  color: var(--color-negro);
  letter-spacing: -0.04em;
}
.rank-info { flex: 1; min-width: 0; }
.rank-valor {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

/* ============================================================
   VACACIONES - SALDOS
   ============================================================ */
.saldo-row {
  display: block;
  padding: 1.25rem 1.15rem;
  border-radius: var(--radio-md);
  margin-bottom: 0.75rem;
  transition: var(--trans);
  background: var(--gris-50);
  border: none;
}
.saldo-row:hover { background: var(--gris-100); }
.saldo-row:last-child { margin-bottom: 0; }
.saldo-nombre { font-size: 0.95rem; }
.saldo-nombre strong { font-weight: 800; letter-spacing: -0.02em; }
.saldo-desglose {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-weight: 600;
}
.saldo-bonus-tag {
  background: var(--tag-lavanda-bg);
  color: var(--tag-lavanda-txt);
  padding: 0.15rem 0.65rem;
  border-radius: var(--radio-sm);
  font-weight: 800;
  font-size: 0.7rem;
}
.saldo-detalle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: 0.85rem;
}
.saldo-barra-cont { min-width: 0; }
.saldo-barra {
  height: 12px;
  background: var(--color-borde);
  border-radius: var(--radio-pill);
  overflow: hidden;
  display: flex;
  position: relative;
}
.barra-tomados { background: var(--color-exito); }
.barra-planificados { background: var(--color-lima); }
.saldo-leyenda {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  font-weight: 700;
}
.saldo-acciones { display: flex; gap: 0.4rem; flex-shrink: 0; }

.saldo-bonus-lista {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--color-borde);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bonus-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  background: var(--color-blanco);
  border-radius: var(--radio);
  font-size: 0.85rem;
}
.bonus-item:hover { background: var(--color-superficie-hover); }
.bonus-dias {
  font-weight: 800;
  font-family: var(--font-display);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radio-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.bonus-positivo { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }
.bonus-negativo { background: var(--tag-coral-bg); color: var(--tag-coral-txt); }
.bonus-motivo { font-weight: 600; color: var(--color-negro); }
.bonus-meta { font-size: 0.72rem; color: var(--color-texto-suave); font-weight: 500; }
.btn-bonus-anular {
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
}
.btn-bonus-anular:hover {
  background: var(--color-error);
  color: white;
}

/* Timeline vacaciones */
.timeline-vac {
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--color-superficie);
}
.timeline-header {
  display: flex;
  background: var(--gris-50);
  border-bottom: 1px solid var(--color-borde-suave);
}
.timeline-col-op {
  width: 150px;
  padding: 0.6rem 0.95rem;
  font-weight: 800;
  font-size: 0.78rem;
  flex-shrink: 0;
  border-right: 1px solid var(--color-borde-suave);
  background: var(--gris-50);
  letter-spacing: -0.01em;
}
.timeline-meses { display: flex; flex: 1; }
.timeline-mes {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--color-texto-suave);
  padding: 0.6rem 0;
  border-right: 1px solid var(--color-borde-suave);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.timeline-mes:last-child { border-right: none; }
.timeline-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-borde-suave);
  height: 40px;
  transition: var(--trans);
}
.timeline-row:hover { background: var(--gris-50); }
.timeline-row:last-child { border-bottom: none; }
.timeline-row .timeline-col-op {
  background: transparent;
  font-weight: 700;
  font-size: 0.85rem;
}
.timeline-barras { position: relative; flex: 1; height: 100%; }
.vac-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  border-radius: var(--radio);
  cursor: pointer;
  transition: var(--trans);
}
.vac-bar:hover { height: 24px; z-index: 2; }
.vac-bar-tomada { background: var(--tag-verde-bg); border: 2px solid var(--color-exito); }
.vac-bar-aprobada { background: var(--tag-lavanda-bg); border: 2px solid var(--tag-lavanda-txt); }
.vac-bar-solicitada {
  background: var(--tag-amarillo-bg);
  border: 2px dashed var(--tag-amarillo-txt);
}

.timeline-leyenda-vac {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  font-weight: 600;
}
.vac-bar-leyenda {
  display: inline-block;
  width: 24px;
  height: 12px;
  border-radius: 4px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.cruce-item {
  padding: 0.95rem 1.1rem;
  background: var(--tag-amarillo-bg);
  color: var(--tag-amarillo-txt);
  border-radius: var(--radio-md);
  margin-bottom: 0.65rem;
  transition: var(--trans);
}
.cruce-item:hover { transform: translateX(2px); }
.cruce-item:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .saldo-detalle { grid-template-columns: 1fr; }
  .saldo-acciones { justify-content: flex-start; }
  .bonus-item { grid-template-columns: auto 1fr auto; gap: 0.5rem; }
  .bonus-meta { grid-column: 1 / -1; padding-left: 3rem; }
}

/* ============================================================
   PLANOS
   ============================================================ */
.planos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.plano-card {
  background: var(--color-superficie);
  border-radius: var(--radio-lg);
  padding: 1rem;
  box-shadow: var(--sombra-flotante);
  transition: var(--trans);
  cursor: pointer;
  overflow: hidden;
}
.plano-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 13px; }
  h2 { font-size: 1.35rem; }
  .app-contenido { padding: 1rem 0.75rem; }
  .login-card { padding: 2rem 1.5rem; }
  .card { padding: 1.25rem; border-radius: var(--radio-lg); }
  .nombre-usuario { display: none; }
  .kpi-card .valor { font-size: 2rem; }
  .tabla th, .tabla td { padding: 0.65rem 0.75rem; font-size: 0.8rem; }
}

/* SCROLLBARS */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gris-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gris-400); }

/* ============================================================
   ELEMENTOS DEL HEADER QUE VIENEN DE LAYOUT.JS
   ============================================================ */

/* Logo mini estilo sunset Base44 */
.app-header .logo-mini {
  width: 36px;
  height: 36px;
  background: var(--color-naranja);
  border-radius: 50%;
  color: var(--color-negro);
  font-weight: 900;
  font-size: 0.65rem;
  font-family: var(--font-display);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  letter-spacing: -0.04em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.app-header .logo-mini::after {
  content:"";
  position: absolute;
  bottom: 9px;
  width: 24px;
  height: 12px;
  background: var(--color-negro);
  border-radius: 12px 12px 0 0;
}
/* El ::before del .titulo solo es la"C" naranja del CSS, ocultarlo si hay logo-mini */
.app-header:has(.logo-mini) .titulo::before { display: none; }

.app-header .titulo span {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-negro);
  letter-spacing: -0.035em;
}

/* "Centro de Monitoreo de Operaciones" - subordinado al CMO */
.app-header .titulo-modulo {
  color: #525252 !important;
  font-weight: 700 !important;
}

/* Separadores en gris claro */
.app-header .titulo-separador {
  color: #C0C0C0 !important;
  font-weight: 400 !important;
}

/* "Central Park Barracas" - destacado en naranja */
.app-header .titulo-sitio {
  color: #FF631F !important;
}

/* Bloque de usuario a la derecha */
.app-header .usuario-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.app-header .avatar-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-negro);
  color: var(--color-blanco);
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.app-header .nombre-usuario {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-negro);
  letter-spacing: -0.01em;
}

/* Botón"Demo" - secundario sutil */
.app-header .btn-demo {
  background: var(--gris-100);
  color: var(--color-negro);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radio-pill);
  text-decoration: none;
  transition: var(--trans);
  letter-spacing: -0.01em;
}
.app-header .btn-demo:hover {
  background: var(--gris-200);
  text-decoration: none;
  color: var(--color-negro);
}

/* Botón"Cerrar sesión" - CTA principal LIMA */
.app-header .btn-logout {
  background: var(--color-lima);
  color: var(--color-negro);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radio-pill);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--trans);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  box-shadow: var(--sombra-primario);
}
.app-header .btn-logout:hover {
  background: var(--color-lima-hover);
  box-shadow: var(--sombra-primario-hover);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .app-header .btn-demo { display: none; }
  .app-header .nombre-usuario { display: none; }
  .app-header .btn-logout { padding: 0.45rem 0.85rem; font-size: 0.75rem; }
  .app-header .titulo span { font-size: 0.95rem; }
}

/* ============================================================
   HERO EDITORIAL ESTILO BASE44 (opcional, para Dashboard)
   ============================================================ */
.hero-editorial {
  background: var(--color-blanco);
  border-radius: var(--radio-xl);
  padding: 2rem 2.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-flotante);
}
.hero-editorial .hero-pretitulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  letter-spacing: -0.01em;
}
.hero-editorial .hero-pretitulo .num-paso {
  font-weight: 800;
  color: var(--color-negro);
}
.hero-editorial .hero-pretitulo .num-total {
  color: var(--color-texto-mute);
}
.hero-editorial h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-bottom: 0.85rem;
}
.hero-editorial .hero-descripcion {
  font-size: 1rem;
  color: var(--color-texto-suave);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

@media (max-width: 640px) {
  .hero-editorial { padding: 1.5rem 1.25rem; }
  .hero-editorial h2 { font-size: 1.5rem; }
}

/* ============================================================
   HEADER - TÍTULO NUEVO (sin isologo)
"Central Park Barracas / Mantenimiento"
   ============================================================ */
.app-header .titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
}
.app-header .titulo::before { display: none !important; }
.app-header .titulo-marca {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-negro);
  letter-spacing: -0.035em;
}
.app-header .titulo-separador {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-texto-mute);
}
.app-header .titulo-modulo {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .app-header .titulo-modulo,
  .app-header .titulo-separador { display: none; }
  .app-header .titulo-marca { font-size: 0.95rem; }
}

/* ============================================================
   BARRA-FILTROS (tickets, operarios, horas-extras)
   Estilo Base44 píldoras compactas
   ============================================================ */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--color-superficie);
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-flotante);
  margin-bottom: 1rem;
}

.barra-filtros label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-texto-suave);
  margin-right: 0.3rem;
  white-space: nowrap;
}

.barra-filtros select,
.barra-filtros input[type="text"],
.barra-filtros input[type="search"],
.barra-filtros input[type="month"],
.barra-filtros input[type="date"] {
  width: auto;
  min-width: 140px;
  max-width: 220px;
  padding: 0.5rem 2.25rem 0.5rem 0.95rem;
  font-size: 0.825rem;
  font-weight: 700;
  background-color: var(--gris-100);
  border: 1.5px solid transparent;
  border-radius: var(--radio-pill);
  color: var(--color-negro);
  cursor: pointer;
  transition: var(--trans);
}
.barra-filtros select:hover,
.barra-filtros input:hover {
  background-color: var(--gris-200);
}
.barra-filtros select:focus,
.barra-filtros input:focus {
  background-color: var(--color-blanco);
  border-color: var(--color-negro);
  box-shadow: none;
  outline: none;
}

/* Botones dentro de barra-filtros (ej: filtros por chips) */
.barra-filtros .btn,
.barra-filtros button:not([class*="btn-"]) {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  border-radius: var(--radio-pill);
  background: var(--gris-100);
  color: var(--color-negro);
}

/* ============================================================
   HEADER - TÍTULO NUEVO (sin isologo)
   ============================================================ */
.app-header .titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
}
.app-header .titulo::before { display: none !important; }
.app-header .titulo-marca {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-negro);
  letter-spacing: -0.035em;
}
.app-header .titulo-separador {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-texto-mute);
}
.app-header .titulo-modulo {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .app-header .titulo-modulo,
  .app-header .titulo-separador { display: none; }
  .app-header .titulo-marca { font-size: 0.95rem; }
}

/* ============================================================
   BARRA-FILTROS (tickets, operarios, horas-extras)
   ============================================================ */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--color-superficie);
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-flotante);
  margin-bottom: 1rem;
}
.barra-filtros label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-texto-suave);
  margin-right: 0.3rem;
  white-space: nowrap;
}
.barra-filtros select,
.barra-filtros input[type="text"],
.barra-filtros input[type="search"],
.barra-filtros input[type="month"],
.barra-filtros input[type="date"] {
  width: auto;
  min-width: 140px;
  max-width: 220px;
  padding: 0.5rem 2.25rem 0.5rem 0.95rem;
  font-size: 0.825rem;
  font-weight: 700;
  background-color: var(--gris-100);
  border: 1.5px solid transparent;
  border-radius: var(--radio-pill);
  color: var(--color-negro);
  cursor: pointer;
  transition: var(--trans);
}
.barra-filtros select:hover,
.barra-filtros input:hover {
  background-color: var(--gris-200);
}
.barra-filtros select:focus,
.barra-filtros input:focus {
  background-color: var(--color-blanco);
  border-color: var(--color-negro);
  box-shadow: none;
  outline: none;
}
.barra-filtros .btn,
.barra-filtros button:not([class*="btn-"]) {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  border-radius: var(--radio-pill);
  background: var(--gris-100);
  color: var(--color-texto-suave);
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-display);
  transition: var(--trans);
}
.barra-filtros .btn.activo,
.barra-filtros button.activo {
  background: var(--color-negro);
  color: var(--color-blanco);
}
.barra-filtros .btn:hover,
.barra-filtros button:not([class*="btn-"]):hover {
  background: var(--gris-200);
  color: var(--color-negro);
}
@media (max-width: 640px) {
  .barra-filtros {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radio-lg);
  }
  .barra-filtros select,
  .barra-filtros input {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* OPERARIOS - acciones, estados */
.acciones { display: flex; gap: 0.4rem; align-items: center; }
.estado-activo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radio-sm);
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--tag-verde-bg);
  color: var(--tag-verde-txt);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.estado-activo::before {
  content:"";
  width: 6px;
  height: 6px;
  background: var(--tag-verde-txt);
  border-radius: 50%;
  display: inline-block;
}
.estado-activo.estado-inactivo { background: var(--gris-200); color: var(--color-texto-suave); }
.estado-activo.estado-inactivo::before { background: var(--color-texto-suave); }

/* HORAS EXTRAS - badges */
.badge-he-pendiente { background: var(--tag-amarillo-bg); color: var(--tag-amarillo-txt); }
.badge-he-en_revision { background: var(--tag-lavanda-bg); color: var(--tag-lavanda-txt); }
.badge-he-finalizada { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }
.badge-he-rechazada { background: var(--tag-coral-bg); color: var(--tag-coral-txt); }

/* Animación parpadeo */
@keyframes parpadeo-sutil {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.parpadeo-sutil { animation: parpadeo-sutil 1.5s ease-in-out infinite; }

/* ============================================================
   VISTA 3D - CON TRANSFORMACIONES CORRECTAS
   ============================================================ */
.contenedor-3d-wrap {
  position: relative;
  background: var(--color-blanco);
  border-radius: var(--radio-xl);
  padding: 0;
  box-shadow: var(--sombra-flotante);
  margin-bottom: 1rem;
  min-height: 700px;
  overflow: hidden;
}

.contenedor-escena {
  position: relative;
  width: 100%;
  min-height: 700px;
  perspective: 2000px;
  perspective-origin: 50% 30%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.vista-3d-escena {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
  display: inline-flex;
  align-items: flex-end;
  gap: 4rem;
  --separacion: 60px;
}

/* TORRES */
.torre-3d {
  position: relative;
  transform-style: preserve-3d;
  margin: 0 1rem;
}
.torre-titulo {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-negro);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--color-negro);
  color: var(--color-blanco);
  padding: 0.4rem 1rem;
  border-radius: var(--radio-pill);
  z-index: 100;
}
.torre-pisos {
  position: relative;
  transform-style: preserve-3d;
  width: 320px;
  height: 100px;
}

/* PISOS 3D - posicionamiento clave con --piso-pos y --separacion */
.piso-3d {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 100px;
  background: var(--color-blanco);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  transform: translateZ(calc(var(--piso-pos, 0) * var(--separacion, 60px)));
  transform-style: preserve-3d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.piso-3d:hover {
  z-index: 50;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.piso-3d.color-ninguno { background: var(--color-blanco); border-color: var(--gris-200); }
.piso-3d.color-bajo { border-color: var(--color-exito); }
.piso-3d.color-medio { border-color: var(--color-naranja); }
.piso-3d.color-alto { border-color: var(--color-error); }

/* Superficie del piso (con la imagen del plano) */
.piso-superficie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.piso-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  display: block;
  pointer-events: none;
}

/* Etiqueta del piso (nombre, torre) */
.piso-etiqueta {
  position: absolute;
  top: 0.4rem;
  left: 0.6rem;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radio);
}
.piso-nombre {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--color-negro);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.piso-torre {
  font-size: 0.7rem;
  color: var(--color-texto-suave);
  margin-top: 0.1rem;
  font-weight: 600;
}

/* Stats del piso (cantidad + operarios) */
.piso-stats {
  position: absolute;
  bottom: 0.4rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}
.piso-cantidad {
  background: var(--color-negro);
  color: var(--color-blanco);
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radio-pill);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  display: inline-block;
}
.piso-cantidad strong { font-weight: 900; }
.piso-3d.color-ninguno .piso-cantidad {
  background: var(--gris-200);
  color: var(--color-texto-suave);
}
.piso-3d.color-bajo .piso-cantidad { background: var(--color-exito); }
.piso-3d.color-medio .piso-cantidad { background: var(--color-naranja); }
.piso-3d.color-alto .piso-cantidad { background: var(--color-error); }

.piso-operarios {
  display: flex;
  gap: 2px;
  align-items: center;
}
.op-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-naranja);
  color: var(--color-negro);
  font-weight: 800;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-blanco);
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.op-extra {
  background: var(--color-negro);
  color: var(--color-blanco);
  font-weight: 800;
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radio-pill);
  font-family: var(--font-display);
}

/* PINES de tickets */
.piso-pin-wrap {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all;
  transform: translate(-50%, -50%);
}
.piso-pin-wrap.arriba { flex-direction: column; }
.piso-pin-wrap.abajo { flex-direction: column-reverse; }

.piso-pin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-blanco);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.15s;
}
.piso-pin:hover { transform: scale(1.4); }
.piso-pin.pin-prio-critica { background: var(--color-error); }
.piso-pin.pin-prio-alta { background: var(--color-naranja); }
.piso-pin.pin-prio-media { background: #EAB308; }
.piso-pin.pin-prio-baja { background: var(--color-exito); }

.piso-pin-etiqueta {
  background: var(--color-negro);
  color: var(--color-blanco);
  font-size: 0.62rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radio-sm);
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-display);
  margin: 2px 0;
  letter-spacing: -0.01em;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piso-pin-etiqueta.etiq-progreso { background: var(--color-naranja); color: var(--color-negro); }
.piso-pin-etiqueta.etiq-asignado { background: var(--tag-lavanda-txt); }
.piso-pin-etiqueta.etiq-pausado { background: var(--gris-400); }
.piso-pin-etiqueta.etiq-abierto { background: var(--tag-azul-txt); }
.etiq-nombre { font-weight: 700; }

/* ===== PANELES FLOTANTES ===== */
.panel-flotante {
  position: absolute;
  background: var(--color-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  z-index: 20;
  min-width: 220px;
  max-width: 280px;
  border: 1px solid var(--color-borde-suave);
  overflow: hidden;
}
.panel-controles { top: 1rem; left: 1rem; }
.panel-leyenda { top: 1rem; right: 1rem; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-borde-suave);
  cursor: move;
  background: var(--gris-50);
  user-select: none;
}
.panel-titulo {
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--color-negro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.panel-titulo svg { color: var(--color-naranja); }
.panel-toggle {
  background: transparent;
  border: none;
  color: var(--color-texto-suave);
  cursor: pointer;
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
  line-height: 1;
}
.panel-toggle:hover { background: var(--gris-200); color: var(--color-negro); }
.panel-body { padding: 0.85rem; }

/* Controles del panel */
.control-grupo-flotante { margin-bottom: 0.85rem; }
.control-grupo-flotante:last-child { margin-bottom: 0; }
.control-grupo-flotante label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.control-grupo-flotante input[type="range"] {
  width: 100%;
  accent-color: var(--color-naranja);
  cursor: pointer;
}
.control-grupo-flotante select {
  width: 100%;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  border-radius: var(--radio);
  font-weight: 600;
}
.valor-control {
  font-weight: 800;
  color: var(--color-negro);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Leyenda */
.leyenda-seccion { margin-bottom: 0.85rem; }
.leyenda-seccion:last-child { margin-bottom: 0; }
.leyenda-titulo {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-borde-suave);
}
.leyenda-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.leyenda-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-negro);
  font-weight: 500;
}
.leyenda-total {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-borde-suave);
  font-size: 0.72rem;
  color: var(--color-texto-suave);
  font-weight: 600;
  text-align: center;
}

/* Dots leyenda */
.dot-estado,
.dot-piso,
.dot-prio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-piso.color-ninguno { background: var(--gris-200); border: 1.5px solid var(--gris-300); }
.dot-piso.color-bajo { background: var(--color-exito); }
.dot-piso.color-medio { background: var(--color-naranja); }
.dot-piso.color-alto { background: var(--color-error); }

.dot-prio.pin-prio-critica { background: var(--color-error); }
.dot-prio.pin-prio-alta { background: var(--color-naranja); }
.dot-prio.pin-prio-media { background: #EAB308; }
.dot-prio.pin-prio-baja { background: var(--color-exito); }

.dot-estado.etiq-abierto { background: var(--tag-azul-txt); }
.dot-estado.etiq-asignado { background: var(--tag-lavanda-txt); }
.dot-estado.etiq-progreso { background: var(--color-naranja); }
.dot-estado.etiq-pausado { background: var(--gris-400); }

/* Ayuda flotante */
.ayuda-flotante {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: var(--color-blanco);
  padding: 0.7rem 1rem;
  border-radius: var(--radio-md);
  font-size: 0.75rem;
  color: var(--color-texto-suave);
  box-shadow: var(--sombra-md);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--color-borde-suave);
}
.ayuda-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ayuda-item kbd {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radio-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-negro);
  min-width: 60px;
  text-align: center;
}

/* Grid tickets debajo del 3D */
.grid-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

/* RESPONSIVE 3D */
@media (max-width: 768px) {
  .panel-controles, .panel-leyenda {
    position: static;
    margin: 0.5rem;
    max-width: 100%;
  }
  .ayuda-flotante { position: static; margin: 0.5rem; }
  .contenedor-escena { padding: 2rem 1rem; }
  .torre-pisos, .piso-3d { width: 260px; }
}

/* ============================================================
   RECORRIDOS - timeline, heatmap, blobs
   ============================================================ */

.tabs-recorrido {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1rem;
  background: var(--gris-100);
  padding: 0.35rem;
  border-radius: var(--radio-pill);
  width: fit-content;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1.2rem;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
  border-radius: var(--radio-pill);
  transition: var(--trans);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-negro); }
.tab-btn.activo {
  background: var(--color-negro);
  color: var(--color-blanco);
}

/* Timeline plano - Vista 1 */
.timeline-plano-wrap {
  position: relative;
  width: 100%;
  background: var(--gris-50);
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--color-borde-suave);
  min-height: 400px;
}
.timeline-plano-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}
.timeline-plano-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.timeline-plano-puntos {
  position: absolute;
  inset: 0;
}
.timeline-path {
  stroke: var(--color-naranja);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  opacity: 0.7;
}
.timeline-punto {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  pointer-events: all;
}
.punto-numero {
  background: var(--color-negro);
  color: var(--color-blanco);
  font-weight: 800;
  font-size: 0.75rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--color-blanco);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.timeline-punto.tipo-inicio .punto-numero {
  background: var(--color-naranja);
  color: var(--color-negro);
}
.timeline-punto.tipo-resolucion .punto-numero {
  background: #EAB308;
  color: var(--color-negro);
}
.timeline-punto.tipo-cierre .punto-numero {
  background: var(--color-exito);
}

/* Heatmap - Vista 3 */
.heatmap-wrap {
  position: relative;
  width: 100%;
  background: var(--gris-50);
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--color-borde-suave);
}
.heatmap-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}
.heatmap-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.heatmap-blob {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  cursor: pointer;
  transition: transform 0.2s;
}
.heatmap-blob.intensidad-baja {
  background: radial-gradient(circle, rgba(255,99,31,0.4) 0%, rgba(255,99,31,0.05) 70%, transparent 100%);
}
.heatmap-blob.intensidad-media {
  background: radial-gradient(circle, rgba(255,99,31,0.6) 0%, rgba(255,99,31,0.1) 70%, transparent 100%);
}
.heatmap-blob.intensidad-alta {
  background: radial-gradient(circle, rgba(255,99,31,0.85) 0%, rgba(255,99,31,0.2) 70%, transparent 100%);
}
.heatmap-blob:hover {
  transform: translate(-50%, -50%) scale(1.15);
}
.blob-numero {
  background: var(--color-negro);
  color: var(--color-blanco);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radio-pill);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Dots por tipo */
.dot-recorrido {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.dot-recorrido.tipo-inicio { background: var(--color-naranja); }
.dot-recorrido.tipo-resolucion { background: #EAB308; }
.dot-recorrido.tipo-cierre { background: var(--color-exito); }

/* Badges por tipo */
.badge-tipo-inicio { background: var(--tag-naranja-bg); color: var(--tag-naranja-txt); }
.badge-tipo-resolucion { background: var(--tag-amarillo-bg); color: var(--tag-amarillo-txt); }
.badge-tipo-cierre { background: var(--tag-verde-bg); color: var(--tag-verde-txt); }

/* Timeline leyenda */
.timeline-leyenda {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--gris-50);
  border-radius: var(--radio-md);
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  font-weight: 600;
}
.timeline-leyenda >div,
.timeline-leyenda >span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Item activo del menú: Jornada (verde lima) */
.app-nav a[href*="jornada"].activo {
  background: rgba(22, 163, 74, 0.12);
  color: #16A34A;
}

/* ============================================================
   MENÚS FLOTANTES (lateral izq + sidebar der)
   ============================================================ */

/* Quitar el nav horizontal viejo (si quedó cargado de otra página) */
.app-nav { display: none !important; }


/* ============================================================
   MENÚ LATERAL OPERATIVO (izquierda - se desliza al hover)
   Efecto liquid glass para diferenciarse del sidebar admin derecho.
   ============================================================ */

/* Zona invisible para activar el menú al acercarse al borde izquierdo */
.menu-lateral-trigger {
  position: fixed;
  top: 100px;
  left: 0;
  bottom: 32px;
  width: 24px;
  z-index: 100;
}

/* Indicador visual de que hay menú a la izquierda */
.menu-lateral-trigger::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 4px;
  height: 60px;
  background: #FF631F;
  border-radius: 4px;
  transform: translateY(-50%);
  opacity: 0.45;
  transition: opacity 0.2s, width 0.2s;
}
.menu-lateral-trigger:hover::before {
  opacity: 1;
  width: 6px;
}

/* Panel del menú lateral con liquid glass */
.menu-lateral {
  position: fixed;
  top: 84px;
  left: 0;
  bottom: 24px;
  width: 240px;
  z-index: 150;
  display: flex;
  flex-direction: column;

  /* Liquid glass effect: vidrio esmerilado + borde sutil */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: none;
  border-radius: 0 24px 24px 0;
  box-shadow:
    0 12px 40px rgba(15, 15, 15, 0.12),
    0 2px 8px rgba(15, 15, 15, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.4);

  /* Estado cerrado: oculto a la izquierda */
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease-out;
  overflow: hidden;
}

/* Halo difuso naranja detrás del panel para reforzar el liquid glass */
.menu-lateral::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle at center,
    rgba(255, 99, 31, 0.35) 0%,
    rgba(255, 99, 31, 0.18) 30%,
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.8;
}

/* Halo lima en la parte inferior */
.menu-lateral::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle at center,
    rgba(212, 248, 117, 0.30) 0%,
    rgba(212, 248, 117, 0.12) 35%,
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

.menu-lateral.abierto {
  transform: translateX(0);
  opacity: 1;
}

.menu-lateral-header {
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid rgba(15, 15, 15, 0.06);
  margin-bottom: 0.5rem;
}

.menu-lateral-titulo {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #525252;
}

.menu-lateral-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.menu-lateral-nav::-webkit-scrollbar {
  width: 4px;
}
.menu-lateral-nav::-webkit-scrollbar-thumb {
  background: rgba(15, 15, 15, 0.15);
  border-radius: 4px;
}

.menu-lateral-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  color: #0F0F0F;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.menu-lateral-item:hover {
  background: rgba(15, 15, 15, 0.06);
  transform: translateX(2px);
}

.menu-lateral-item.activo {
  background: #FF631F;
  color: #0F0F0F;
  box-shadow: 0 4px 12px rgba(255, 99, 31, 0.35);
}
.menu-lateral-item.activo:hover {
  background: #E5571A;
  transform: translateX(0);
}

.menu-lateral-icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.menu-lateral-icono svg {
  width: 20px;
  height: 20px;
}

.menu-lateral-label {
  flex: 1;
}


/* ============================================================
   MENÚ CONTROL Y REPORTES (inferior - se desliza desde abajo)
   Mismo estilo liquid glass que el lateral, pero horizontal.
   ============================================================ */

/* Zona invisible para activar el menú al acercarse al borde inferior */
.menu-control-trigger {
  position: fixed;
  bottom: 0;
  left: 80px;
  right: 80px;
  height: 20px;
  z-index: 100;
}

/* Indicador visual de que hay menú abajo */
.menu-control-trigger::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 60px;
  height: 4px;
  background: #FF631F;
  border-radius: 4px;
  transform: translateX(-50%);
  opacity: 0.45;
  transition: opacity 0.2s, height 0.2s;
}
.menu-control-trigger:hover::before {
  opacity: 1;
  height: 6px;
}

/* Panel del menú control con liquid glass */
.menu-control {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(720px, calc(100vw - 48px));
  z-index: 150;
  display: flex;
  flex-direction: column;

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow:
    0 -12px 40px rgba(15, 15, 15, 0.12),
    0 -2px 8px rgba(15, 15, 15, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease-out;
  overflow: hidden;
}

/* Halo difuso naranja a un lado */
.menu-control::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, rgba(255, 99, 31, 0.30) 0%, rgba(255, 99, 31, 0.15) 35%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.8;
}
/* Halo lima al otro lado */
.menu-control::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, rgba(212, 248, 117, 0.30) 0%, rgba(212, 248, 117, 0.12) 35%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

.menu-control.abierto {
  transform: translate(-50%, 0);
  opacity: 1;
}

.menu-control-header {
  padding: 0.85rem 1.25rem 0.5rem;
  border-bottom: 1px solid rgba(15, 15, 15, 0.06);
}
.menu-control-titulo {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #525252;
}

.menu-control-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.85rem 1rem 1.15rem;
}

.menu-control-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem;
  border-radius: 12px;
  color: #0F0F0F;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.menu-control-item:hover {
  background: rgba(15, 15, 15, 0.06);
  transform: translateY(-2px);
}
.menu-control-item.activo {
  background: #FF631F;
  color: #0F0F0F;
  box-shadow: 0 4px 12px rgba(255, 99, 31, 0.35);
}
.menu-control-item.activo:hover {
  background: #E5571A;
  transform: translateY(0);
}
.menu-control-icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.menu-control-icono svg { width: 18px; height: 18px; }


/* ============================================================
   SIDEBAR ADMINISTRATIVA (derecha)
   ============================================================ */

/* Zona invisible para activar el sidebar al acercarse al borde derecho */
.sidebar-trigger {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 32px;
  width: 24px;
  z-index: 100;
}

/* Indicador visual de que hay menú a la derecha */
.sidebar-trigger::before {
  content:"";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 4px;
  height: 60px;
  background: #FF631F;
  border-radius: 4px;
  transform: translateY(-50%);
  opacity: 0.45;
  transition: opacity 0.2s, width 0.2s;
}
.sidebar-trigger:hover::before {
  opacity: 0.85;
  width: 6px;
}

/* Sidebar en sí */
.sidebar-admin {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 32px;
  width: 260px;
  background: #fff;
  border-radius: 24px 0 0 24px;
  box-shadow: -8px 4px 32px rgba(0,0,0,0.12), -2px 2px 8px rgba(0,0,0,0.04);
  padding: 1.25rem 0.85rem;
  z-index: 150;
  transform: translateX(calc(100% + 4px));
  transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}
.sidebar-admin.abierta {
  transform: translateX(0);
}

.sidebar-admin-header {
  padding: 0 0.85rem 0.5rem;
  border-bottom: 1px solid #F5F5F5;
  margin-bottom: 0.5rem;
}
.sidebar-admin-titulo {
  font-size: 0.65rem;
  font-weight: 900;
  color: #FF631F;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-admin-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  text-decoration: none;
  color: #525252;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  transition: all 0.15s;
}
.sidebar-admin-item:hover {
  background: #FAFAFA;
  color: #0F0F0F;
  transform: translateX(-2px);
}
.sidebar-admin-item.activo {
  background: #FF631F;
  color: #0F0F0F;
}
.sidebar-admin-item.activo:hover {
  background: #E5571A;
  color: #0F0F0F;
  transform: translateX(0);
}
.sidebar-admin-icono {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-admin-label {
  flex: 1;
}

/* ============================================================
   RESPONSIVE: en mobile el menú lateral se oculta (se usa bottom nav)
   ============================================================ */
@media (max-width: 768px) {
  .menu-lateral,
  .menu-lateral-trigger {
    display: none;
  }
  .menu-control,
  .menu-control-trigger {
    display: none;
  }
  .sidebar-trigger {
    display: none;
  }
  .sidebar-admin {
    transform: translateX(100%);
  }
}

/* ============================================================
   PADDING DEL CONTENIDO PRINCIPAL
   Ajustar para no chocar con el FAB ni con el indicador derecho
   ============================================================ */
.app-contenido {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  /* Espacio para el bottom-nav fijo + FAB que sobresale +
     safe area iOS. Calculado para que el último ítem no quede tapado. */
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important;
}

@media (min-width: 769px) {
  .app-contenido {
    padding-left: 2rem !important;
    padding-right: 3rem !important;
  }
}


/* ============================================================
   TICKETS / SOLPED (clases tk-*)
   Movidas desde el <style> interno de jefe/tickets.html
   ============================================================ */
.tk-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
    .tk-header h2 { margin:0; font-size:1.75rem; font-weight:800; letter-spacing:-0.035em; }

    .tk-controls { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
    .tk-search {
      flex:1; min-width:200px;
      padding:0.65rem 1rem 0.65rem 2.6rem;
      border:1.5px solid #EAEAEA;
      border-radius:999px;
      background:#fff url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center;
      font-family:inherit; font-size:0.9rem; font-weight:500; letter-spacing:-0.01em;
    }
    .tk-search:focus { outline:none; border-color:#0F0F0F; }

    .tk-btn-filtros {
      padding:0.65rem 1.1rem; border:1.5px solid #EAEAEA;
      border-radius:999px; background:#fff;
      font-family:inherit; font-size:0.85rem; font-weight:700;
      cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem;
      letter-spacing:-0.01em; color:#0F0F0F;
    }
    .tk-btn-filtros.con-filtros { background:#0F0F0F; color:#fff; border-color:#0F0F0F; }
    .tk-filtros-count {
      background:#FF631F; color:#0F0F0F;
      border-radius:999px; padding:0.05rem 0.45rem;
      font-size:0.7rem; font-weight:800;
      min-width:18px; text-align:center;
    }

    .tk-filtros-desktop { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
    .tk-filtros-desktop select {
      width:auto; min-width:160px;
      padding:0.55rem 2.5rem 0.55rem 0.95rem;
      border:1.5px solid #EAEAEA;
      border-radius:999px; background-color:#fff;
      font-family:inherit; font-size:0.85rem; font-weight:600;
      letter-spacing:-0.01em; cursor:pointer;
    }
    .tk-filtros-desktop select:hover { border-color:#0F0F0F; }
    .tk-filtros-desktop select:focus { border-color:#0F0F0F; box-shadow:none; outline:none; }

    /* TABLA (desktop) */
    .tk-tabla-wrap { background:#fff; border-radius:18px; box-shadow:0 4px 20px rgba(0,0,0,0.06); overflow:hidden; }
    .tk-tabla { width:100%; border-collapse:collapse; }
    .tk-tabla thead { background:#FAFAFA; }
    .tk-tabla th {
      padding:0.85rem 1rem; text-align:left;
      font-size:0.7rem; font-weight:800; color:#525252;
      text-transform:uppercase; letter-spacing:0.07em;
      border-bottom:1px solid #EAEAEA;
    }
    .tk-tabla td { padding:0.9rem 1rem; border-bottom:1px solid #F5F5F5; font-size:0.875rem; color:#0F0F0F; font-weight:500; }
    .tk-tabla tbody tr { cursor:pointer; transition:background 0.1s; }
    .tk-tabla tbody tr:hover { background:#FAFAFA; }

    /* CARDS (mobile) */
    .tk-cards { display:flex; flex-direction:column; gap:0.65rem; }
    .tk-card {
      background:#fff; border-radius:16px;
      padding:0.95rem 1.05rem;
      box-shadow:0 2px 12px rgba(0,0,0,0.05);
      cursor:pointer; transition:all 0.15s;
      -webkit-tap-highlight-color:transparent;
    }
    .tk-card:active { transform:scale(0.98); background:#FAFAFA; }
    .tk-card-head {
      display:flex; justify-content:space-between; align-items:flex-start;
      gap:0.5rem; margin-bottom:0.5rem;
    }
    .tk-card-numero {
      font-family:'Manrope',sans-serif; font-weight:800;
      font-size:0.78rem; color:#FF631F; letter-spacing:-0.01em;
    }
    .tk-card-titulo {
      font-weight:700; font-size:0.95rem; letter-spacing:-0.02em;
      color:#0F0F0F; margin-bottom:0.35rem; line-height:1.3;
    }
    .tk-card-ubic { font-size:0.75rem; color:#737373; font-weight:600; margin-bottom:0.55rem; }
    .tk-card-meta { display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; margin-bottom:0.5rem; }
    .tk-card-foot {
      display:flex; justify-content:space-between; align-items:center;
      gap:0.5rem; padding-top:0.55rem;
      border-top:1px solid #F5F5F5; font-size:0.78rem;
    }
    .tk-card-asignado { color:#525252; font-weight:600; }
    .tk-card-asignado strong { color:#0F0F0F; }
    .tk-card-sla { font-weight:700; letter-spacing:-0.01em; font-size:0.78rem; }

    .tk-tag {
      display:inline-block; padding:0.2rem 0.6rem;
      border-radius:999px; font-size:0.7rem;
      font-weight:800; letter-spacing:-0.01em;
    }

    .tk-vacio { padding:3rem 1rem; text-align:center; color:#737373; font-weight:500; background:#fff; border-radius:18px; box-shadow:0 4px 20px rgba(0,0,0,0.06); }

    /* BOTTOM SHEET FILTROS */
    .bs-overlay {
      position:fixed; inset:0;
      background:rgba(15,15,15,0.55);
      backdrop-filter:blur(6px);
      z-index:200; opacity:0; pointer-events:none;
      transition:opacity 0.25s;
    }
    .bs-overlay.abierto { opacity:1; pointer-events:auto; }
    .bs {
      position:fixed; bottom:0; left:0; right:0;
      background:#fff; border-radius:28px 28px 0 0;
      max-height:88vh; max-height:88dvh;
      z-index:201; transform:translateY(100%);
      transition:transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
      display:flex; flex-direction:column;
      box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    }
    .bs.abierto { transform:translateY(0); }
    .bs-handle { width:36px; height:4px; background:#E0E0E0; border-radius:999px; margin:0.75rem auto 0; flex-shrink:0; }
    .bs-header {
      padding:0.95rem 1.5rem 0.85rem;
      display:flex; justify-content:space-between; align-items:center;
      flex-shrink:0;
    }
    .bs-header h3 { margin:0; font-size:1.1rem; font-weight:800; letter-spacing:-0.025em; }
    .bs-limpiar {
      background:none; border:none; color:#FF631F;
      font-weight:700; font-size:0.85rem; cursor:pointer;
      letter-spacing:-0.01em;
    }
    .bs-body {
      padding:0 1.5rem 1.5rem;
      padding-bottom:max(1.5rem, env(safe-area-inset-bottom));
      overflow-y:auto; flex:1;
    }
    .bs-grupo { margin-bottom:1.25rem; }
    .bs-grupo-titulo {
      font-size:0.7rem; font-weight:800;
      color:#737373; text-transform:uppercase;
      letter-spacing:0.08em; margin-bottom:0.5rem;
    }
    .bs-chips { display:flex; flex-wrap:wrap; gap:0.4rem; }
    .bs-chip {
      padding:0.6rem 1rem; background:#FAFAFA;
      border:1.5px solid #F5F5F5; border-radius:999px;
      font-family:inherit; font-size:0.85rem; font-weight:700;
      cursor:pointer; color:#525252; letter-spacing:-0.01em;
      -webkit-tap-highlight-color:transparent;
    }
    .bs-chip:active { transform:scale(0.95); }
    .bs-chip.activo { background:#0F0F0F; color:#fff; border-color:#0F0F0F; }
    .bs-aplicar {
      width:100%; padding:1.05rem;
      background:#0F0F0F; color:#fff;
      border:none; border-radius:999px;
      font-family:inherit; font-size:0.95rem; font-weight:800;
      cursor:pointer; letter-spacing:-0.02em;
      margin-top:0.5rem;
    }

    /* MOBILE/DESKTOP toggle */
    .tk-tabla-wrap { display:block; }
    .tk-cards { display:none; }
    .tk-btn-filtros { display:none; }

    @media (max-width: 768px) {
      .tk-tabla-wrap { display:none; }
      .tk-cards { display:flex; }
      .tk-btn-filtros { display:inline-flex; }
      .tk-filtros-desktop { display:none; }
      .tk-header h2 { font-size:1.4rem; }
      .tk-header .btn { padding:0.5rem 0.9rem; font-size:0.8rem; }
    }

    /* Badges */
    .badge-prio-baja    { background:#D4F875; color:#0F0F0F; }
    .badge-prio-media   { background:#FED7AA; color:#9A3412; }
    .badge-prio-alta    { background:#FECACA; color:#991B1B; }
    .badge-prio-urgente,
    .badge-prio-critica { background:#0F0F0F; color:#fff; }
    .badge-estado-abierto     { background:#FED7AA; color:#9A3412; }
    .badge-estado-asignado    { background:#DDD6FE; color:#5B21B6; }
    .badge-estado-en_progreso { background:#BFDBFE; color:#1E40AF; }
    .badge-estado-pausado     { background:#FEF08A; color:#713F12; }
    .badge-estado-resuelto    { background:#BBF7D0; color:#166534; }
    .badge-estado-cerrado     { background:#E5E5E5; color:#525252; }

/* ============================================================
   BOTTOM NAV (mobile) — Liquid Glass premium
   Floating, blur intenso, halo lima en el item activo.
   Visible solo en mobile; en desktop se oculta.
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Fondo liquid glass: blanco translúcido + saturate + blur fuerte.
     Las 2 capas con gradientes radiales dan ese efecto "luz interior". */
  background:
    radial-gradient(circle at 20% -20%, rgba(212, 248, 117, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 85% -10%, rgba(255, 99, 31, 0.12) 0%, transparent 50%),
    rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  /* Sin border-top: la profundidad la dan las sombras (perspectiva flotante).
     Múltiples capas: una grande arriba, una media, y un highlight interno
     superior muy sutil que reemplaza el borde duro. */
  box-shadow:
    0 -20px 50px -8px rgba(15, 15, 15, 0.10),
    0 -8px 24px -4px rgba(15, 15, 15, 0.06),
    0 -2px 6px rgba(15, 15, 15, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 100;
  padding: 0.5rem 0.5rem 0.4rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-around;
  gap: 0.25rem;
  -webkit-user-select: none;
  user-select: none;
}

.bottom-nav-item {
  flex: 1;
  max-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.45rem 0.25rem 0.35rem;
  text-decoration: none;
  color: #737373;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  /* Transición suave para el cambio entre activo/inactivo */
  transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

/* El SVG va dentro de un pseudo-container con su propio fondo (halo) */
.bottom-nav-item svg {
  width: 24px;
  height: 24px;
  /* Stroke un poco más fino que se va a engrosar en activo */
  stroke-width: 1.9;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
              stroke-width 0.22s ease,
              filter 0.22s ease;
  position: relative;
  z-index: 1;
}

/* Halo radial lima detrás del ícono activo */
.bottom-nav-item::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 50%;
  width: 44px;
  height: 32px;
  transform: translateX(-50%) scale(0.6);
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
              rgba(212, 248, 117, 0.95) 0%,
              rgba(212, 248, 117, 0.55) 40%,
              rgba(212, 248, 117, 0) 75%);
  opacity: 0;
  transition: opacity 0.28s ease,
              transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  z-index: 0;
}

/* Indicador de punto arriba (tipo iOS) */
.bottom-nav-item::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #D4F875;
  box-shadow: 0 0 8px rgba(212, 248, 117, 0.8);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 0.22s ease;
}

/* ESTADO ACTIVO: ícono lima fuerte + halo + indicador arriba */
.bottom-nav-item.activo {
  color: #0F0F0F;
}
.bottom-nav-item.activo svg {
  stroke: #0F0F0F;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(212, 248, 117, 0.6));
}
.bottom-nav-item.activo::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bottom-nav-item.activo::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Animación de "tap" */
.bottom-nav-item:active {
  transform: scale(0.9);
}
.bottom-nav-item:active svg {
  transform: scale(0.92);
}

/* ============================================================
   FAB CENTRAL — Liquid glass + naranja CMO
   ============================================================ */
.bottom-nav-fab {
  flex: 0 0 60px;
  height: 60px;
  margin-top: -22px;
  position: relative;
  background: linear-gradient(135deg, #FF631F 0%, #FF8A4D 100%);
  color: #0F0F0F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Sin borde duro: usamos sombras + highlights internos para profundidad */
  border: none;
  box-shadow:
    /* Sombra grande hacia abajo-derecha (luz desde arriba-izq) */
    0 12px 28px -4px rgba(255, 99, 31, 0.55),
    /* Sombra media para definir el contorno */
    0 6px 14px -2px rgba(255, 99, 31, 0.35),
    /* Halo sutil exterior */
    0 0 0 1px rgba(255, 99, 31, 0.12),
    /* Highlights internos: brillo arriba (luz) + oscuro abajo (profundidad) */
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(154, 52, 18, 0.28);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.18s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Halo lima detrás del FAB (sutil resplandor exterior) */
.bottom-nav-fab::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(212, 248, 117, 0.4) 0%,
              transparent 60%);
  z-index: -1;
  opacity: 0.7;
  filter: blur(4px);
}

.bottom-nav-fab svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  /* Pequeño drop-shadow para que el "+" tenga profundidad */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.bottom-nav-fab:active {
  transform: scale(0.92);
  box-shadow:
    0 4px 12px -2px rgba(255, 99, 31, 0.4),
    0 2px 6px rgba(255, 99, 31, 0.25),
    inset 0 2px 4px rgba(154, 52, 18, 0.35),
    inset 0 -1px 2px rgba(255, 255, 255, 0.2);
}


/* ============================================================
   BOTTOM SHEET "MÁS" — Liquid Glass premium
   ============================================================ */
.mob-sheet-overlay {
  position: fixed;
  inset: 0;
  /* Backdrop más sutil: el blur hace el trabajo, no necesita oscurecer tanto.
     Tinte neutro con un toque de oscuro y blur fuerte para "extender" el glass
     más allá del propio sheet, dándole sensación de profundidad espacial. */
  background: rgba(15, 15, 15, 0.35);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mob-sheet-overlay.abierto {
  opacity: 1;
  pointer-events: auto;
}

.mob-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Mismo cóctel del bottom-nav: tintes lima + naranja sutiles, fondo blanco
     translúcido, blur fuerte. Da continuidad visual con el nav. */
  background:
    radial-gradient(circle at 15% -5%, rgba(212, 248, 117, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(255, 99, 31, 0.12) 0%, transparent 50%),
    rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-radius: 28px 28px 0 0;
  max-height: 85vh;
  max-height: 85dvh;
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  /* Sombras de perspectiva: el sheet "flota" sobre el fondo blureado.
     Multi-capa sin borde duro, igual que el bottom-nav. */
  box-shadow:
    0 -28px 60px -10px rgba(15, 15, 15, 0.18),
    0 -12px 28px -6px rgba(15, 15, 15, 0.10),
    0 -2px 8px rgba(15, 15, 15, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden; /* para que los hijos respeten el border-radius */
}
.mob-sheet.abierto { transform: translateY(0); }

.mob-sheet-handle {
  width: 40px;
  height: 4px;
  /* Glass handle: gris semitransparente con ligero highlight */
  background: rgba(15, 15, 15, 0.18);
  border-radius: 999px;
  margin: 0.75rem auto 0;
  flex-shrink: 0;
}
.mob-sheet-header {
  padding: 1rem 1.5rem 0.5rem;
  flex-shrink: 0;
}
.mob-sheet-titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.mob-sheet-user {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.5rem 1rem;
  /* Separador suave que funciona sobre fondo glass: gradiente horizontal
     que se desvanece en los extremos. */
  border-bottom: 1px solid rgba(15, 15, 15, 0.06);
}
.mob-sheet-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FF631F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mob-sheet-user-info {
  flex: 1;
}
.mob-sheet-user-nombre {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.mob-sheet-user-rol {
  font-size: 0.7rem;
  color: #737373;
  font-weight: 600;
  margin-top: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.mob-sheet-body {
  padding: 1rem 1rem 0;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  flex: 1;
}
.mob-sheet-grupo {
  margin-bottom: 1rem;
}
.mob-sheet-grupo-titulo {
  font-size: 0.65rem;
  font-weight: 800;
  color: #737373;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0.5rem 0.5rem;
}
.mob-sheet-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.mob-sheet-item {
  /* Items con glass leve: blanco translúcido sobre el fondo del sheet.
     Da una jerarquía visual sin romper el glass general. */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 0.95rem 0.5rem;
  text-decoration: none;
  color: #0F0F0F;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
  /* Sombras sutiles de perspectiva (sin borde duro) */
  box-shadow:
    0 2px 6px rgba(15, 15, 15, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.mob-sheet-item:active {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.95);
  box-shadow:
    0 1px 3px rgba(15, 15, 15, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.mob-sheet-item.activo {
  /* Activo: tinte lima sutil + ícono naranja (consistente con el nav) */
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 248, 117, 0.55) 0%, transparent 70%),
    rgba(255, 255, 255, 0.7);
  color: #0F0F0F;
  box-shadow:
    0 4px 12px rgba(212, 248, 117, 0.35),
    0 2px 6px rgba(15, 15, 15, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mob-sheet-item-icono {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Ícono sobre disco glass blanco con leve sombra interna */
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #525252;
  box-shadow:
    0 1px 3px rgba(15, 15, 15, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.mob-sheet-item-icono svg {
  width: 20px;
  height: 20px;
}
.mob-sheet-item.activo .mob-sheet-item-icono {
  background: linear-gradient(135deg, #FF631F 0%, #FF8A4D 100%);
  color: #fff;
  box-shadow:
    0 4px 10px rgba(255, 99, 31, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.mob-sheet-logout {
  margin-top: 0.75rem;
  padding: 0.85rem;
  /* Glass con tinte rojo suave en vez del rojo plano */
  background:
    radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.18) 0%, transparent 70%),
    rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #991B1B;
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  width: 100%;
  cursor: pointer;
  letter-spacing: -0.01em;
  font-family: inherit;
  box-shadow:
    0 2px 6px rgba(220, 38, 38, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.15s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.mob-sheet-logout:active {
  transform: scale(0.97);
  box-shadow:
    0 1px 3px rgba(220, 38, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Activar el bottom-nav solo en mobile */
@media (max-width: 768px) {
  .bottom-nav { display: flex; }
}