/* ============================================================================
   MetaResponses — hoja de estilos base
   ----------------------------------------------------------------------------
   Híbrido deliberado, decidido con el usuario el 05/08/2026:

   - ESTRUCTURA de seleccionpersonal: plantillas Django planas y un CSS escrito a
     mano. Sin Bootstrap, sin Tailwind, sin paso de build de node. El servidor es
     un CentOS 7 sin cadena de herramientas JS y el deploy no va a adquirir una.
   - ASPECTO de tia-carmela: paleta azul, tarjetas de radio 10px, sombras suaves,
     cabeceras de tabla en versalitas.
   - TIPOGRAFÍA propia: tia-carmela usa Grandstander, que es una tipografía de
     centro infantil. Aquí el usuario es un emprendedor pequeño — el registro es
     informal pero adulto. Outfit para títulos (geométrica, cercana, seria) e
     IBM Plex Sans para la interfaz (la de la casa, y con diacríticos correctos
     en español).

   ORDEN DE PRIORIDAD: escritorio primero, teléfono después pero de verdad.
   El acceso principal es laptop/escritorio, como el resto de los módulos. El
   teléfono es una vía de acceso real (la asistente del inquilino #1 trabaja
   desde el navegador del móvil porque la coexistencia de WhatsApp prohíbe los
   dispositivos vinculados), no una idea a futuro: todo lo que aquí se ve en
   escritorio tiene que ser usable a 360px.
   ========================================================================== */

:root {
  --brand: #2552b0;
  --brand-dark: #1c3e86;
  --brand-soft: #eef2ff;
  --accent: #f99d1c;
  --ok: #2f9e2a;
  --ok-soft: #f0fdf4;
  --warn: #92400e;
  --warn-soft: #fffbeb;
  --danger: #b3161f;
  --danger-soft: #fff5f5;

  --ink: #2d3748;
  --ink-strong: #1a202c;
  --muted: #718096;
  --line: #e2e8f0;
  --line-soft: #f0f4f8;
  --surface: #fff;
  --bg: #f5f7fb;

  /* Color del inquilino. base.html lo sobreescribe con tenant.brand_color. */
  --tenant: #2552b0;

  /* Cromo del entorno. Local = pizarra oscura; producción = azul (.env-prod). */
  --chrome: #22303f;
  --chrome-2: #2b3b4d;
  --chrome-text: #cbd5e0;
}

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

html, body {
  min-height: 100%;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

a { color: var(--brand); }
button, select, input, textarea { font-family: inherit; }

.app { min-height: 100vh; display: flex; flex-direction: column; }


/* --- Barra superior ------------------------------------------------------ */

.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  padding: 0 20px;
  background: var(--chrome);
  /* La franja del color del inquilino. El fondo lo decide el ENTORNO (local vs
     producción) y la marca del inquilino entra por aquí y por el monograma: si
     el inquilino tiñera la barra entera, se perdería la señal de "esto es
     producción" que evita tocar datos reales creyendo estar en local. */
  border-bottom: 3px solid var(--tenant);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 60;
  flex: none;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; min-width: 0; }

/* Monograma en lugar de logo fijo: la plataforma es multi-inquilino y cada uno
   trae su nombre y su color, no un archivo de imagen que habría que subir. */
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--tenant);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.brand-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-name em {
  display: block;
  font-style: normal;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  opacity: .62;
}

.topnav nav { display: flex; align-items: center; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.topnav nav::-webkit-scrollbar { display: none; }
.topnav nav a {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 13px;
  color: var(--chrome-text);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px; /* muerde el borde del inquilino para que el activo lo tape */
}
.topnav nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.topnav nav a.active { color: #fff; font-weight: 600; border-bottom-color: #fff; }

.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #a7b6c6; }
.topnav-user { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.role-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
  background: rgba(255, 255, 255, .13); color: #fff;
}
.logout-form { display: inline; }
.logout-btn {
  background: none; border: none; cursor: pointer;
  color: #a7b6c6; font-size: 12.5px; padding: 0;
  text-decoration: none;
}
.logout-btn:hover { color: #fff; text-decoration: underline; }


/* --- Cuerpo y barra lateral ---------------------------------------------- */

.body { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 216px; flex: none;
  background: var(--chrome-2);
  color: #aebbc8;
  display: flex; flex-direction: column;
  padding: 16px 0;
}
.sidebar-label {
  padding: 0 20px 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #7b8b9c;
}
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 8px; padding: 8px 12px;
  border-radius: 8px;
  color: #aebbc8; text-decoration: none;
  font-size: 13px; font-weight: 500;
}
.nav-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-btn.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.nav-btn .icon { width: 18px; display: inline-flex; justify-content: center; }
.nav-btn .count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .16); color: #fff;
  padding: 1px 7px; border-radius: 20px;
}

.main-content { flex: 1; min-width: 0; overflow: auto; padding: 22px 24px 56px; }


/* --- Pie ------------------------------------------------------------------ */

.footer { background: var(--chrome); color: #8fa0b2; padding: 9px 20px; flex: none; }
.footer-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; }
.footer .env-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}


/* --- Encabezado de página ------------------------------------------------- */

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-title { font-size: 23px; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 68ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* --- Tarjetas ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
  overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--brand-dark);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-header .hint { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.card-body { padding: 16px; }
.card-footer {
  padding: 9px 16px; background: #f8fafc;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}


/* --- Rejillas ------------------------------------------------------------- */

.grid { display: grid; gap: 14px; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
  display: block; text-decoration: none; color: inherit;
}
a.stat:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(37, 82, 176, .12); }
.stat-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.stat-value { font-family: 'Outfit', sans-serif; font-size: 27px; font-weight: 600; color: var(--brand-dark); line-height: 1; }
.stat-note { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.stat-strong { border-left: 4px solid var(--accent); }


/* --- Tablas --------------------------------------------------------------- */

/* El envoltorio es obligatorio: en un teléfono la tabla desborda y lo que debe
   desplazarse es ella, nunca la página entera. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.tbl thead th {
  text-align: left; padding: 9px 14px;
  background: #f8fafc; border-bottom: 2px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: #f0f5ff; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl a { text-decoration: none; font-weight: 600; }
.tbl a:hover { text-decoration: underline; }
.cell-main { font-weight: 600; color: var(--ink-strong); }
.cell-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }


/* --- Botones -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 7px;
  padding: 8px 15px;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-quiet { background: #fff; border-color: #cbd5e0; color: var(--ink); font-weight: 600; }
.btn-quiet:hover { background: #f8fafc; }
.btn-sm { font-size: 12px; padding: 5px 11px; border-radius: 6px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }


/* --- Avisos --------------------------------------------------------------- */

.alert {
  border-radius: 9px; padding: 11px 15px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
}
.alert-success { background: var(--ok-soft); color: #166534; border-left: 4px solid var(--ok); }
.alert-error, .alert-danger { background: var(--danger-soft); color: #991b1b; border-left: 4px solid var(--danger); }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-left: 4px solid var(--accent); }
.alert-info { background: var(--brand-soft); color: var(--brand-dark); border-left: 4px solid var(--brand); }


/* --- Insignias ------------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.badge-neutral { background: #edf2f7; color: #4a5568; }
.badge-brand { background: var(--brand-soft); color: var(--brand-dark); }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-warn { background: #fef3c7; color: var(--warn); }
.badge-danger { background: #fee2e2; color: #991b1b; }

/* Estado de la ventana de servicio de 24h de Meta. No es decoración: fuera de
   la ventana el texto libre es IMPOSIBLE y sólo caben plantillas aprobadas, así
   que quien va a responder tiene que verlo antes de escribir. */
.win-open { background: #dcfce7; color: #166534; }
.win-closed { background: #fee2e2; color: #991b1b; }

.score { display: inline-grid; place-items: center; min-width: 38px; height: 26px; border-radius: 7px; font-weight: 700; font-size: 12.5px; }
.score-high { background: #dcfce7; color: #166534; }
.score-mid { background: #fef3c7; color: var(--warn); }
.score-low { background: #fee2e2; color: #991b1b; }
.score-none { background: #edf2f7; color: #a0aec0; }


/* --- Formularios ---------------------------------------------------------- */

.form-row { margin-bottom: 14px; }
.form-label { display: block; font-size: 12.5px; font-weight: 700; color: #4a5568; margin-bottom: 5px; }
.form-control {
  display: block; width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e0; border-radius: 7px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 82, 176, .12); }
.form-control::placeholder { color: #a0aec0; }
.form-help { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.form-error { font-size: 12px; color: #991b1b; margin-top: 5px; font-weight: 600; }


/* --- Estado vacío y notas ------------------------------------------------- */

.empty-state { text-align: center; padding: 40px 16px; color: #a0aec0; }
.empty-state .icon { font-size: 30px; display: block; margin-bottom: 10px; }
.empty-state p { font-size: 13px; margin: 0; }

/* Nota de andamiaje: marca a la vista lo que todavía NO está construido, para
   que nadie confunda una pantalla en pie con una pantalla terminada. */
.scaffold-note {
  border: 1px dashed #cbd5e0; border-radius: 9px;
  padding: 11px 14px; margin-top: 14px;
  background: #fbfcfe; color: var(--muted);
  font-size: 12.5px;
}
.scaffold-note strong { color: #4a5568; }

.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); }
.muted { color: var(--muted); }


/* --- Pantallas sin cromo (entrar, sin acceso) ----------------------------- */

.centered {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(37, 82, 176, .10), transparent 70%),
    var(--bg);
}
.panel {
  width: 100%; max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 13px;
  padding: 28px 26px;
  box-shadow: 0 12px 34px -20px rgba(16, 24, 40, .45);
}
.panel-head { text-align: center; margin-bottom: 22px; }
.panel-mark {
  width: 50px; height: 50px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 13px; background: var(--tenant); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 21px;
}
.panel-head h1 { font-size: 20px; }
.panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.panel-foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--muted); }


/* --- Producción ----------------------------------------------------------- */
/* El cromo cambia de color entre local y producción a propósito: en seleccion
   ya demostró que evita editar datos reales creyendo estar en la copia local. */

body.env-prod { --chrome: #1c3e86; --chrome-2: #2552b0; --chrome-text: #c3d0ea; }
body.env-prod .footer { color: #a8bde3; }
body.env-prod .sidebar { color: #d3ddf2; }
body.env-prod .nav-btn { color: #d3ddf2; }


/* --- Teléfono y tableta ---------------------------------------------------- */
/* El escritorio es el acceso principal, pero la asistente del inquilino #1
   trabaja desde el navegador del móvil y no tiene alternativa: la coexistencia
   de WhatsApp prohíbe los dispositivos vinculados, así que no puede usar
   WhatsApp Web con el número del negocio. Estas reglas son requisito, no
   cortesía. La barra lateral no se esconde tras un botón — se convierte en una
   tira horizontal desplazable, que se ve y no necesita JavaScript. */

@media (max-width: 900px) {
  .body { flex-direction: column; }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(0, 0, 0, .18);
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-label { display: none; }
  .nav-btn { margin: 0; flex: none; white-space: nowrap; padding: 7px 11px; }
  .nav-btn .count { margin-left: 4px; }

  .main-content { padding: 16px 14px 44px; }
  .page-title { font-size: 20px; }
  .grid-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 620px) {
  .topnav { height: auto; flex-wrap: wrap; padding: 9px 14px 0; gap: 10px; row-gap: 8px; }
  .topnav nav { order: 3; width: 100%; height: 40px; }
  .topnav nav a { padding: 0 11px; }
  .topnav-right { font-size: 12px; gap: 9px; }
  .topnav-user { max-width: 108px; }
  .brand-name em { display: none; }
  .stat-value { font-size: 23px; }
  .card-header { flex-wrap: wrap; }
}