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

:root {
  --sidebar-bg: #1B3B2F;
  --sidebar-bg-hover: #24493A;
  --bg: #F7F2EA;
  --card-bg: #FFFFFF;
  --card-soft-wortev: #EEF3EC;
  --card-soft-externos: #F1EBE0;
  --text-dark: #1B3B2F;
  --text-muted: #6B7280;
  --accent-primary: #2F5D42;
  --accent-secondary: #C8A97E;
  --border: #E7E1D6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  overflow-x: hidden;
}

.app-shell {
  display: flex;
  height: 100vh;
}

/* Techo de ancho para pantallas grandes/4K: sin esto el contenido se
   estira sin limite y las tarjetas de una sola columna (treemap,
   tendencia, tabla de arquitectos) quedan con espacio vacio enorme a
   los lados. Por debajo de este ancho no hace nada (el contenido ya
   ocupa el espacio disponible con normalidad). */
.page {
  max-width: 1800px;
  margin: 0 auto;
}

/* --- Menu movil (hamburguesa) --- */
/* El estado abierto/cerrado lo controla un callback de Dash (ver app.py:
   toggle_mobile_menu / apply_mobile_menu_state) que agrega/quita los
   modificadores --open / --visible de abajo -- no es un truco de CSS
   puro porque esta version de Dash no expone un <input> HTML crudo. */
.mobile-topbar {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

.mobile-hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  font-size: 19px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.mobile-hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mobile-topbar-title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #fff;
}

/* --- Sidebar --- */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 0;
  box-sizing: border-box;
}

.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sidebar-brand-title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.sidebar-brand-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 4px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.sidebar-link:hover {
  background: var(--sidebar-bg-hover);
  transform: translateX(2px);
}

.sidebar-link--active {
  background: var(--accent-primary);
  color: #fff;
}

.sidebar-link--active:hover {
  background: var(--accent-primary);
  transform: none;
}

/* --- Pantalla de login (split-screen: foto + panel de marca) --- */
.login-screen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.login-photo-panel {
  display: none;
  flex: 0 0 42%;
  max-width: 42%;
  background-image: url("login_photo.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

@media (min-width: 900px) {
  .login-photo-panel {
    display: block;
  }
}

.login-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 40, 30, 0.1), rgba(20, 40, 30, 0.5));
}

.login-green-panel {
  flex: 1;
  min-width: 0;
  background: #2a5136;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 56px 40px;
  box-sizing: border-box;
  min-height: 100vh;
}

.login-logo-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  flex-shrink: 0;
}

.login-vase-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  flex-shrink: 0;
}

.login-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
}

.login-field-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

.login-input,
.login-input:-webkit-autofill {
  /* 1. Un solo color de fondo, solido y uniforme -- nada de superponer
     un tono distinto en focus/autofill que se vea como "doble color". */
  display: block;
  width: 100%; /* 2 */
  box-sizing: border-box; /* 2 */
  height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: #1E3F2C; /* solido, no rgba -- ver nota autofill abajo */
  color: #F5F3EE; /* 3: blanco calido, alto contraste sobre el verde oscuro */
  font-size: 16px;
  font-family: inherit;
  line-height: normal;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.login-input::placeholder {
  color: rgba(245, 243, 238, 0.55); /* 3: gris claro legible, no el gris apagado de antes */
}

.login-input:focus,
.login-input:focus-visible {
  /* 4: fuera el outline azul/morado nativo del navegador... */
  outline: none;
  border-color: var(--accent-secondary);
  /* ...reemplazado por un anillo sutil del mismo tono de acento. */
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.35);
}

.login-input[type="password"] {
  letter-spacing: 3px;
}

/* 5: el navegador (Chrome/Edge) pinta su PROPIO fondo (normalmente
   amarillo/celeste) sobre un input autocompletado, sin importar el CSS
   de arriba -- por eso el "doble color". Este truco (fondo enorme en
   inset box-shadow + transition casi infinita) es la unica forma
   confiable de que el autofill respete el mismo color solido de arriba
   en vez del suyo. */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
  -webkit-text-fill-color: #F5F3EE !important;
  caret-color: #F5F3EE;
  -webkit-box-shadow: 0 0 0px 1000px #1E3F2C inset !important;
  box-shadow: 0 0 0px 1000px #1E3F2C inset !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Apaga los iconos nativos que Chrome/Edge dibujan DENTRO del input
   (ojo de mostrar contraseña, sugerencia de autocompletar, aviso de
   "contraseña filtrada") -- son ellos los que traen su propio fondo y
   crean el parche de color raro + el punto rojo. Son pseudo-elementos
   no estandar de motores basados en Chromium, por eso el selector
   "feo" con el prefijo -webkit-. */
.login-input::-webkit-credentials-auto-fill-button,
.login-input::-webkit-strong-password-auto-fill-button,
.login-input::-webkit-contacts-auto-fill-button,
.login-input::-webkit-caps-lock-indicator {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.login-submit {
  margin-top: 8px;
  background: var(--accent-secondary);
  color: #2a5136;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.login-submit:hover {
  background: #d4b48a;
}

.login-submit:active {
  transform: scale(0.97);
}

.login-error {
  color: #f3b9b9;
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}

/* --- Contenedor de pagina --- */
.page-container {
  flex: 1;
  padding: 40px 48px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
}

.page-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.page-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* --- Grid de 2 columnas (ej. Quien lo usa) --- */
.quien-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 980px) {
  .quien-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Lista de ranking --- */
.ranking-card {
  padding: 20px;
}

.ranking-list-title {
  font-size: 16px;
  font-weight: 800;
  margin: 4px 4px 12px 4px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
}

.ranking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--border);
}

.ranking-row:last-child {
  border-bottom: none;
}

.ranking-row-left {
  flex: 1 1 140px;
  min-width: 0;
}

.ranking-row-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  overflow-wrap: break-word;
}

.ranking-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge--wortev {
  background: var(--card-soft-wortev);
  color: var(--accent-primary);
}

.badge--externos {
  background: var(--card-soft-externos);
  color: #8a6a3d;
}

.ranking-row-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.ranking-row-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: var(--card-soft-wortev);
  padding: 6px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ranking-row-value-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-primary);
}

.ranking-row-value-suffix {
  font-size: 11px;
  color: var(--accent-primary);
}

/* --- Titulo/subtitulo genericos de seccion dentro de una tarjeta --- */
.section-title {
  font-size: 16px;
  font-weight: 800;
  margin: 4px 4px 4px 4px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 4px 12px 4px;
}

/* --- Fila de KPIs compactos (ej. Ocupacion) --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.mini-kpi-card {
  padding: 20px;
}

.mini-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1.2;
}

.mini-kpi-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.mini-kpi-caption {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-top: 4px;
}

/* --- Grid de Ocupacion: heatmap+barras a la izquierda, ranking a la derecha --- */
.ocupacion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ocupacion-left-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 980px) {
  .ocupacion-grid {
    grid-template-columns: 1fr;
  }
}

.heatmap-card {
  padding: 20px;
}

/* --- Ranking de salas (con badge de categoria por color dinamico) --- */
.sala-ranking-list {
  display: flex;
  flex-direction: column;
}

.sala-row {
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.sala-row:last-child {
  border-bottom: none;
}

.sala-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sala-row-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.sala-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.sala-row-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 8px 0;
}

.sala-row-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--card-soft-wortev);
}

.sala-row-bar-segment--wortev {
  background: var(--accent-primary);
}

.sala-row-bar-segment--externos {
  background: var(--accent-secondary);
}

/* --- Lista de barras horizontales (ej. horas por tipo de cliente) --- */
.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hbar-label {
  width: 100px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  flex-shrink: 0;
}

.hbar-track {
  flex: 1;
  min-width: 40px;
  height: 14px;
  background: var(--card-soft-wortev);
  border-radius: 8px;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 8px;
}

.hbar-value {
  /* Zona reservada para 'valor · porcentaje' (ej. '125,000 · 67%') o
     textos mas largos (ej. '16/344 usados · 19 miembros' -- Membresias).
     min-width (no width fijo) para que el numero corto quede alineado en
     columna, pero un texto mas largo puede crecer sin romperse en 2
     lineas ni salirse de la tarjeta -- el que cede espacio es el track
     (flex:1), nunca el propio valor. white-space:nowrap se mantiene en
     desktop/tablet; solo en telefonos muy angostos (ver el media query
     de abajo) se permite bajar de linea, como ultimo recurso. */
  min-width: 90px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  flex-shrink: 0;
  white-space: nowrap;
}

.hbar-fill--secondary {
  background: var(--accent-secondary);
}

/* --- Finanzas: layout general --- */
.finanzas-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.finanzas-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 980px) {
  .finanzas-two-col {
    grid-template-columns: 1fr;
  }
}

.marketing-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.marketing-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 980px) {
  .marketing-two-col {
    grid-template-columns: 1fr;
  }
}

.servicios-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 40px;
}

@media (max-width: 700px) {
  .servicios-columns {
    grid-template-columns: 1fr;
  }
}

.finanzas-subsection {
  margin-bottom: 24px;
}

.finanzas-subsection:last-child {
  margin-bottom: 0;
}

/* --- Barra multi-segmento (ej. unidad de negocio) --- */
.segmented-bar-wrap {
  margin-top: 4px;
}

.segmented-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}

.segmented-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.segmented-bar-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.segmented-bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.segmented-bar-legend-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

/* --- Barra de 2 segmentos con etiqueta en cada extremo --- */
.two-way-bar-wrap {
  margin-top: 4px;
}

.two-way-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.two-way-bar-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Contactos por servicio, origen Google vs. Meta (pagina Marketing) --- */
.servicio-plataforma-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.servicio-plataforma-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.servicio-plataforma-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

.servicio-plataforma-row-total {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Calidad de datos --- */
.quality-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quality-list li {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.55;
}

/* --- Tendencia (grafico + ecuacion + advertencia) --- */
.trend-card {
  padding: 20px;
}

.confidence-warning {
  background: #FBF1DE;
  border: 1px solid #E8D5AA;
  color: #6B4E1E;
  font-size: 12.5px;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 4px 4px 12px 4px;
  line-height: 1.5;
}

.trend-equation {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  font-family: 'Courier New', monospace;
}

.trend-forecast-range {
  font-size: 13px;
  color: var(--text-dark);
  margin-top: 8px;
  font-weight: 600;
}

/* --- Treemap --- */
.treemap-card {
  padding: 20px;
}

/* --- Historial de eventos (Membresias) --- */
.history-list {
  display: flex;
  flex-direction: column;
}

.history-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.history-row:last-child {
  border-bottom: none;
}

.event-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.event-badge--cambio {
  background: var(--card-soft-wortev);
  color: var(--accent-primary);
}

.event-badge--renovacion {
  background: #E4EEF5;
  color: #2B5A78;
}

.history-row-name {
  flex: 1 1 160px;
  min-width: 0;
}

.history-row-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  overflow-wrap: break-word;
}

.history-row-clasif {
  font-size: 12px;
  color: var(--text-muted);
}

.history-row-right {
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}

.history-row-transicion {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg);
  border-radius: 14px;
  padding: 5px 12px;
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
}

.history-row-fecha {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Texto largo de transicion (ej. 'Membresia Campus Mensual (nueva) ->
   Membresia Campus Mensual (nueva)'): en vez de forzar una sola linea
   que empuja/se monta sobre el nombre, se le da su propia linea completa
   debajo del nombre y ahi si puede envolver en 2-3 lineas con comodidad. */
@media (max-width: 640px) {
  .history-row-right {
    flex-basis: 100%;
    text-align: left;
  }

  .history-row-transicion {
    display: block;
  }
}

/* --- Lista titulo/subtitulo + pastilla lateral (Bajas, etc.) --- */
.pill-list {
  display: flex;
  flex-direction: column;
}

.pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.pill-row:last-child {
  border-bottom: none;
}

.pill-row-left {
  flex: 1 1 140px;
  min-width: 0;
}

.pill-row-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  overflow-wrap: break-word;
}

.pill-row-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.pill-row-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--card-soft-externos);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  flex-shrink: 1;
}

/* --- Lista de contactos (leads) --- */
.badge--neutral {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.contact-row:last-child {
  border-bottom: none;
}

.contact-row-left {
  min-width: 0;
}

.contact-row-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.contact-row-correo {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-all;
}

.contact-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.contact-row-fecha {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Control de actualizar datos --- */
.refresh-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.refresh-btn:hover {
  background: #24493A;
}

.refresh-btn:active {
  transform: scale(0.96);
}

.refresh-caption {
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Filtros (usados dentro del header de pagina, si aplica) --- */
.filter-bar {
  display: flex;
  gap: 16px;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.filter-dropdown {
  min-width: 130px;
}

/* --- Filtros dentro del sidebar (fondo oscuro) --- */
.sidebar-filters {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
}

.logout-btn {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.logout-btn:active {
  transform: scale(0.97);
}

.sidebar-filters .filter-bar {
  gap: 8px;
}

.sidebar-filters .filter-label {
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-filters .filter-dropdown {
  min-width: 0;
  flex: 1;
}

.sidebar-filters .filter-bar > div {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.sidebar-filters .Select,
.sidebar-filters .Select-control,
.sidebar-filters .Select-menu-outer,
.sidebar-filters div[class*="-control"],
.sidebar-filters div[class*="-menu"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* --- Tarjetas --- */
.card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(27, 59, 47, 0.06), 0 8px 24px rgba(27, 59, 47, 0.05);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(27, 59, 47, 0.08), 0 14px 32px rgba(27, 59, 47, 0.08);
}

.card-main {
  max-width: 640px;
}

.card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.card-value {
  font-size: 46px;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1.1;
  margin-top: 4px;
}

.card-sublabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* --- Filas de split (Wortev / externos) --- */
.split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.split-row--wortev { background: var(--card-soft-wortev); }
.split-row--externos { background: var(--card-soft-externos); }

.split-row-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.split-row-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark);
}

.split-row-label {
  font-size: 13px;
  color: var(--text-muted);
}

.split-row-sublabel {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.split-row-right {
  text-align: right;
}

.split-row-pct {
  font-size: 20px;
  font-weight: 800;
}

.split-row-pct-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Barra de progreso --- */
.progress-wrap {
  margin-top: 16px;
}

.progress-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.progress-segment--primary { background: var(--accent-primary); }
.progress-segment--secondary { background: var(--accent-secondary); }

.progress-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* --- Narrativa --- */
.narrative {
  margin-top: 28px;
  max-width: 640px;
}

.narrative-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px 0;
}

.narrative-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
}

.historial-grid {
  display: flex;
  flex-direction: column;
}

.empty-state {
  color: var(--text-muted);
  font-size: 15px;
  padding: 40px 0;
}

/* --- Tabla-matriz tipo embudo (ej. Contactos por Arquitecto) --- */
.funnel-table-wrap {
  overflow-x: auto;
}

.funnel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.funnel-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.funnel-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  white-space: nowrap;
}

.funnel-table tr:last-child td {
  border-bottom: none;
}

.funnel-table-name-col {
  font-weight: 700;
  text-align: left;
}

.funnel-table th:not(.funnel-table-name-col),
.funnel-table td:not(.funnel-table-name-col) {
  text-align: right;
}

.funnel-table-highlight-col {
  font-weight: 800;
  color: var(--accent-primary);
}

/* --- Historia del mes: linea de tiempo narrativa (primera pagina) --- */
.story-intro {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 8px 0;
}

.story-timeline {
  position: relative;
  padding-left: 56px;
  margin-top: 12px;
}

.story-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.story-section {
  position: relative;
  margin-bottom: 52px;
}

.story-section:last-child {
  margin-bottom: 0;
}

.story-section-marker {
  position: absolute;
  left: -56px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 0 0 6px var(--bg);
}

.story-section-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.story-section-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--text-dark);
}

.story-narrative {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dark);
  max-width: 760px;
  margin: 0 0 20px 0;
}

.story-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.story-stat-chip {
  background: var(--card-soft-wortev);
  border-radius: 14px;
  padding: 14px 20px;
  min-width: 150px;
}

.story-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1.2;
}

.story-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.story-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.story-highlight-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(27, 59, 47, 0.06);
}

.story-highlight-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.story-highlight-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin-top: 6px;
}

.story-highlight-detail {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.story-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px) {
  .story-two-col {
    grid-template-columns: 1fr;
  }
}

.story-closing-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.story-closing-stat {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(27, 59, 47, 0.06);
}

.story-closing-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
}

.story-closing-label {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 8px 0;
}

.story-delta {
  font-size: 13px;
  font-weight: 700;
}

.story-delta-up {
  color: var(--accent-primary);
}

.story-delta-down {
  color: #B3452E;
}

.story-delta-flat {
  color: var(--text-muted);
}

.story-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.story-nav-link {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--card-soft-wortev);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}

.story-nav-link:hover {
  background: var(--accent-primary);
  color: #FFFFFF;
}

.story-auto-period-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: -4px 0 16px 0;
}

/* --- Breakpoints responsive globales ---
   Desktop grande/Desktop (>900px): sidebar fija visible, como siempre.
   Tablet/Mobile (<=900px): sidebar se convierte en drawer (oculta por
   defecto, aparece sobre el contenido al abrir el menu). Se eligio
   900px porque ya era el corte que usaba el login para la foto lateral
   (assets/style.css, .login-photo-panel) -- mismo lenguaje de breakpoints
   en toda la app en vez de un numero arbitrario nuevo. */
@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--sidebar-bg);
    padding: 14px 18px;
    position: sticky;
    top: 0;
    z-index: 120;
    flex-shrink: 0;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 82vw;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 210;
  }

  .sidebar.sidebar--open {
    transform: translateX(0);
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.3);
  }

  .mobile-menu-overlay.mobile-menu-overlay--visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 22, 0.55);
    z-index: 190;
    cursor: pointer;
    border: none;
    padding: 0;
  }

  .page-container {
    height: auto;
    min-height: calc(100vh - 65px);
    padding: 20px 16px 32px;
  }

  .page {
    max-width: 100%;
  }

  .page-header {
    margin-bottom: 20px;
  }

  .page-title {
    font-size: 22px;
  }

  /* Textos cortos ('180 · 73%') se mantienen en una sola linea aqui
     tambien -- lo que cede primero es la etiqueta de la izquierda, para
     dejarle mas aire a la barra. */
  .hbar-label {
    width: 76px;
    font-size: 12px;
  }

  .hbar-value {
    min-width: 82px;
  }
}

/* Telefonos muy angostos: unico lugar donde un valor largo (ej. '16/344
   usados · 19 miembros', Membresias) puede bajar a su propia linea en
   vez de arriesgar overflow -- ver nota en .hbar-value arriba. Los
   textos cortos ('180 · 73%') igual entran de sobra en una linea, asi
   que en la practica esto casi no se activa para ellos. */
@media (max-width: 480px) {
  .hbar-row {
    flex-wrap: wrap;
  }

  .hbar-value {
    white-space: normal;
    text-align: left;
    flex-basis: 100%;
    margin-top: 2px;
  }
}

/* Pantallas grandes/4K: un poco mas de aire alrededor del contenido en
   vez de dejarlo pegado al sidebar con el mismo padding que una laptop. */
@media (min-width: 1800px) {
  .page-container {
    padding: 48px 64px;
  }
}

/* --- Embudo horizontal (ej. Marketing: Contactos -> Calificados -> ...) --- */
.funnel-steps-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.funnel-steps-step {
  background: var(--card-soft-wortev);
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 120px;
  text-align: center;
}

.funnel-steps-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-primary);
}

.funnel-steps-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.funnel-steps-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  min-width: 52px;
}

.funnel-steps-arrow-icon {
  font-size: 18px;
  color: var(--text-muted);
}

.funnel-steps-arrow-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-secondary);
}

.marketing-note-card {
  background: var(--card-soft-externos);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.55;
}

/* --- Boton "Descargar reporte" (PDF) en Historia del mes --- */
.historia-pdf-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.historia-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  background: var(--accent-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.historia-pdf-btn:hover {
  background: #24493A;
}

.historia-pdf-btn:active {
  transform: scale(0.98);
}

.historia-email-btn {
  background: transparent;
  color: var(--accent-primary);
  border: 1.5px solid var(--accent-primary);
}

.historia-email-btn:hover {
  background: var(--card-soft-wortev);
}

.historia-email-status {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 13px;
}

.historia-email-status--ok {
  color: var(--accent-primary);
}

.historia-email-status--error {
  color: #B3452E;
}

@media (max-width: 640px) {
  .historia-pdf-row {
    justify-content: stretch;
    flex-wrap: wrap;
    gap: 10px;
  }

  .historia-pdf-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Chat de IA ("Preguntale a tus datos") --- */
.ai-chat-panel {
  margin-top: 24px;
}

.ai-chat-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0;
  max-height: 640px;
  overflow-y: auto;
}

.ai-chat-question {
  align-self: flex-start;
  background: var(--card-soft-wortev);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  max-width: 85%;
}

.ai-chat-error {
  background: #FBEAEA;
  color: #8A3B3B;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
}

.ai-chat-info {
  background: var(--card-soft-wortev, #F1EBE0);
  color: var(--text-dark);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
}

.ai-chat-input-row {
  display: flex;
  gap: 10px;
}

.ai-chat-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-family: inherit;
}

.ai-chat-send-btn {
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 22px;
  font-weight: 700;
  cursor: pointer;
}

.ai-chat-send-btn:hover {
  background: var(--sidebar-bg-hover);
}

.ai-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ai-result-table td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}

/* --- Chat IA (pagina completa, components/ai_chat_full.py) --- */
.chat-ia-page {
  height: 100%;
}

.ai-chat-full-page {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}

.ai-chat-full-header {
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.ai-chat-full-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

.ai-chat-full-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ai-chat-full-clear-btn {
  margin-top: 10px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.ai-chat-full-clear-btn:hover {
  color: var(--text-dark);
  border-color: var(--text-muted);
}

.ai-chat-full-log {
  /* Scroll PROPIO y acotado, en vez de depender de un 100vh que no
     siempre coincide con el alto real disponible dentro de tu layout
     (sidebar + contenido) -- así el input nunca queda empujado fuera
     de la pantalla. */
  max-height: 65vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 4px 24px;
}

.ai-chat-full-empty {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  margin-top: 60px;
}

/* Las burbujas de usuario (.ai-chat-question) y de error
   (.ai-chat-error) se reutilizan de ai_chat_panel.py, pero aqui se ven
   como chat de pagina completa: usuario a la derecha, asistente
   ocupando el ancho disponible a la izquierda. */
.ai-chat-full-log .ai-chat-question {
  align-self: flex-end;
  background: var(--accent-primary);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 16px 16px 4px 16px;
  max-width: 75%;
}

.ai-chat-full-log .card {
  align-self: flex-start;
  max-width: 90%;
  width: 100%;
}

.ai-chat-full-log .ai-chat-error,
.ai-chat-full-log .ai-chat-info {
  align-self: flex-start;
  max-width: 75%;
}

/* Respuestas del modo de charla general: texto simple, sin tarjeta
   blanca -- se ve conversacional, distinto a una respuesta de datos. */
.ai-chat-full-log .ai-chat-text-reply {
  align-self: flex-start;
  max-width: 90%;
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  padding: 4px 2px;
}

.ai-chat-full-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 25px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
}

.ai-chat-full-input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.ai-chat-full-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.ai-chat-full-send-btn {
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  height: 48px;
  padding: 0 28px;
  font-weight: 700;
  cursor: pointer;
}

.ai-chat-full-send-btn:hover {
  background: var(--sidebar-bg-hover);
}

/* El disclaimer, al final del flujo normal de la página, es lo que
   garantiza el respiro de 25px antes del borde inferior -- no depende
   de calculos de 100vh que pueden fallar dentro de otro layout. */
.ai-chat-full-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  margin-bottom: 25px;
}

@media (max-width: 720px) {
  .ai-chat-full-page {
    max-width: 100%;
  }
  .ai-chat-full-log .ai-chat-question,
  .ai-chat-full-log .ai-chat-error {
    max-width: 90%;
  }
}

/* --- /resumen: tarjeta ejecutiva de 4 KPIs --- */
.ai-resumen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.ai-resumen-tile {
  background: var(--card-soft-wortev, #F1EBE0);
  border-radius: 12px;
  padding: 14px 16px;
}

.ai-resumen-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}

.ai-resumen-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ai-resumen-delta {
  font-size: 11px;
  color: var(--accent-primary);
  margin-top: 6px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .ai-resumen-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Chat IA: tarjeta del modo analista (ai/analyst.py) --- */
.ai-analisis-card .ai-analisis-texto {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark);
  margin: 4px 0 10px;
}

.ai-analisis-card .ai-analisis-texto p {
  margin: 0 0 6px;
}

.ai-analisis-card .ai-analisis-texto ul {
  margin: 4px 0 6px;
  padding-left: 20px;
}

.ai-analisis-details {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.ai-analisis-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
}

.ai-analisis-details > summary::before {
  content: "▸ ";
}

.ai-analisis-details[open] > summary::before {
  content: "▾ ";
}

.ai-analisis-details > summary + * {
  margin-top: 8px;
}

.ai-analisis-codigo pre {
  background: #F4F1EA;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
}

.ai-chat-full-log .ai-chat-text-reply p {
  margin: 0 0 6px;
}

.ai-chat-full-log .ai-chat-text-reply ul,
.ai-chat-full-log .ai-chat-text-reply ol {
  margin: 4px 0 6px;
  padding-left: 20px;
}

/* --- Filtro por rango de fechas (components/date_range_filter.py) --- */
.sidebar-filters .filter-bar--rango {
  flex-direction: column;
  gap: 0;
}

.sidebar-filters .filter-bar--rango > div {
  flex: none;
}

.rango-fechas .mantine-DatePickerInput-input,
.rango-fechas button.mantine-InputBase-input,
.rango-fechas .mantine-Input-input {
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 40px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.rango-fechas .mantine-Input-input:hover {
  border-color: var(--accent-secondary, #C8A97E);
}

.rango-fechas .mantine-Input-input[data-expanded],
.rango-fechas .mantine-Input-input:focus {
  border-color: #C8A97E;
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.35);
}

.rango-fechas .mantine-Input-placeholder,
.rango-fechas .mantine-DatePickerInput-placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.rango-fechas-hint {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

/* Calendario desplegable */
.mantine-DatePickerInput-dropdown,
.mantine-Popover-dropdown {
  border-radius: 16px !important;
  border: 1px solid var(--border, #E7E1D6) !important;
  box-shadow: 0 12px 40px rgba(27, 59, 47, 0.18) !important;
}

.mantine-DatePickerInput-presetButton {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.mantine-DatePickerInput-presetButton:hover {
  background: var(--card-soft-wortev, #EEF3EC);
}

.mantine-DatePickerInput-calendarHeaderLevel {
  font-weight: 700;
  text-transform: capitalize;
}

.mantine-DatePickerInput-weekday {
  text-transform: capitalize;
  font-weight: 600;
  color: var(--text-muted);
}

.mantine-DatePickerInput-day[data-in-range] {
  background: #D8E5DB;
}

.mantine-DatePickerInput-day[data-selected] {
  background: #2F5D42;
  color: #FFFFFF;
}