:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --borde: #e2e5ea;
  --texto: #1f2430;
  --texto-suave: #667085;
  --acento: #2f6fed;
  --acento-suave: #eaf1ff;
  --ok: #1a7f4e;
  --ok-bg: #e6f6ee;
  --warn: #a15c00;
  --warn-bg: #fff3e0;
  --error: #b3261e;
  --error-bg: #fdecea;
  --amarillo: #d4a017;
  --sombra: 0 1px 2px rgba(20, 20, 43, 0.05);
  --radio: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a;
    --panel: #1a1d26;
    --panel-2: #20242f;
    --borde: #2c3040;
    --texto: #e7e9f0;
    --texto-suave: #9aa1b4;
    --acento: #6690ff;
    --acento-suave: #1d2740;
    --ok: #3ecb8c;
    --ok-bg: #12331f;
    --warn: #e8a33d;
    --warn-bg: #3a2c10;
    --error: #f27a75;
    --error-bg: #3a1a17;
    --amarillo: #f2c94c;
    --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #12141a;
  --panel: #1a1d26;
  --panel-2: #20242f;
  --borde: #2c3040;
  --texto: #e7e9f0;
  --texto-suave: #9aa1b4;
  --acento: #6690ff;
  --acento-suave: #1d2740;
  --ok: #3ecb8c;
  --ok-bg: #12331f;
  --warn: #e8a33d;
  --warn-bg: #3a2c10;
  --error: #f27a75;
  --error-bg: #3a1a17;
  --amarillo: #f2c94c;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
img, select { max-width: 100%; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.5;
  transition: background-color .15s ease, color .15s ease;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- header ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--texto);
}
.marca:hover { text-decoration: none; }
.marca .logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f7bf7, #7b5cf0);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(79, 123, 247, 0.35);
}

.topbar nav { display: flex; gap: 6px; flex: 1; }
.nav-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--panel-2);
}
.nav-boton svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-boton:hover { color: var(--texto); background: var(--bg); border-color: var(--borde); text-decoration: none; }
.nav-boton.activo { color: var(--acento); background: var(--acento-suave); border-color: transparent; }

.topbar-acciones { display: flex; align-items: center; gap: 10px; }

.boton-tema {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto-suave);
  cursor: pointer;
}
.boton-tema:hover { color: var(--texto); background: var(--bg); }
.boton-tema svg { width: 17px; height: 17px; }
.boton-tema .icono-luna { display: none; }
:root[data-theme="dark"] .boton-tema .icono-sol { display: none; }
:root[data-theme="dark"] .boton-tema .icono-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-tema .icono-sol { display: none; }
  :root:not([data-theme="light"]) .boton-tema .icono-luna { display: block; }
}

.pill { padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }

.nav-hamburguesa {
  display: none;
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto-suave); cursor: pointer;
}
.nav-hamburguesa svg { width: 19px; height: 19px; }
.nav-hamburguesa:hover { color: var(--texto); background: var(--bg); }

/* ---------- layout ---------- */

.contenido { max-width: 1180px; margin: 0 auto; padding: 26px 28px 60px; }
.contenido.ancho { max-width: 1440px; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 28px 0 12px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 20px; }
.opcional { font-weight: 400; color: var(--texto-suave); font-size: 0.85rem; }
.miga { margin-bottom: 12px; }
.ayuda { color: var(--texto-suave); font-size: 0.9rem; }
.ayuda code { background: var(--acento-suave); padding: 1px 5px; border-radius: 4px; }

.flashes { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 10px 14px; border-radius: var(--radio); font-size: 0.92rem; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.flash-error { background: var(--error-bg); color: var(--error); }

/* ---------- dashboard: barra de acciones y filtros ---------- */

.barra-superior {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.acciones-dashboard { display: flex; gap: 8px; flex-wrap: wrap; }

.filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.filtros select, .filtros input { padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 0.92rem; background: var(--panel); color: var(--texto); max-width: 100%; }
.filtros input[type="search"] { flex: 1; min-width: 200px; }

.filtros-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.etiqueta-filtro { font-size: 0.8rem; color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.etiqueta-filtro-sep { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--borde); }

/* todos los chips (status, categorías, estado del pedido) en un solo
   contenedor con wrap, para que se acomoden en la menor cantidad de filas
   posible en vez de tener una fila fija por grupo. Cada grupo salta entero a
   la línea siguiente si no entra (no lo parte a mitad) — "Piden" es la
   excepción: tiene tantos chips que se le permite acomodarse internamente. */
.filtros-chips { display: flex; gap: 14px 8px; flex-wrap: wrap; align-items: center; }
.filtro-grupo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filtro-grupo-compacto { flex-wrap: nowrap; }
.filtro-grupo-iconos { gap: 10px; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto-suave); font-size: 0.85rem; font-weight: 600;
  user-select: none; transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.chip-filtro:hover { border-color: var(--acento); }
.chip-filtro input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-filtro.activo { background: var(--acento); color: #fff; border-color: var(--acento); }
.chip-filtro-chico { padding: 5px 10px; font-size: 0.78rem; }
.chip-filtro-icono {
  padding: 5px 8px; min-width: 30px; justify-content: center; font-size: 0.95rem;
}
.chip-filtro-icono.activo { background: var(--acento); border-color: var(--acento); }

/* colores por significado — mismo lenguaje que las tarjetas/indicadores:
   rojo pendiente, amarillo en proceso, verde resuelto/cerrado, violeta en
   espera. "Pendiente" se repite en status del lead y del pedido a propósito
   (mismo significado), por eso comparten color; la etiqueta de cada grupo
   aclara a cuál de los dos corresponde cada chip. */
.chip-filtro.chip-color-pendiente.activo { background: var(--error); border-color: var(--error); }
.chip-filtro.chip-color-en-espera.activo { background: #6b3fc9; border-color: #6b3fc9; }
.chip-filtro.chip-color-cerrado.activo,
.chip-filtro.chip-color-si.activo { background: var(--ok); border-color: var(--ok); }
.chip-filtro.chip-color-en-proceso.activo { background: var(--amarillo); border-color: var(--amarillo); color: #1f2430; }

/* ---------- tabla del dashboard: pensada para no necesitar scroll horizontal ---------- */

.tabla-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid var(--borde); }
.tabla-eventos { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--panel); font-size: 0.87rem; }
.tabla-eventos th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .01em;
  color: var(--texto-suave); padding: 10px 6px; border-bottom: 1px solid var(--borde);
  background: var(--panel-2); word-break: break-word; overflow-wrap: break-word; hyphens: auto;
  line-height: 1.25;
}
.tabla-eventos td { padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; word-break: break-word; overflow-wrap: break-word; }
.tabla-eventos td.col-titulo { font-size: 0.88rem; }
.tabla-eventos tbody tr:hover { background: var(--acento-suave); }
.tabla-eventos th.col-indicadores, .tabla-eventos td.col-indicadores { width: 172px; padding-left: 4px; padding-right: 4px; }
.tabla-eventos th.col-check, .tabla-eventos td.col-check { width: 30px; text-align: center; padding-left: 10px; padding-right: 2px; }
.tabla-eventos th.col-id, .tabla-eventos td.col-id { width: 48px; color: var(--texto-suave); }
.tabla-eventos th.col-fecha, .tabla-eventos td.col-fecha { width: 92px; }
.tabla-eventos th.col-status, .tabla-eventos td.col-status { width: 108px; }
.tabla-eventos th:last-child, .tabla-eventos td:last-child { width: 46px; text-align: center; }

.th-orden { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.th-orden:hover { color: var(--acento); text-decoration: none; }
.th-orden.activo { color: var(--acento); }
.th-orden-flecha { font-size: 0.65rem; }
.th-orden-flecha-tenue { opacity: .35; }
.vacio { color: var(--texto-suave); }

.fila-evento { cursor: default; }

.col-detalles { width: 22%; cursor: pointer; }
.detalle-linea { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.45; }
.detalle-linea strong { color: var(--texto); font-weight: 600; }

.enlace-titulo { color: var(--texto); font-weight: 600; }
.enlace-titulo:hover { color: var(--acento); text-decoration: none; }

.boton-obs {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto-suave);
  border-radius: 7px; width: 30px; height: 30px; padding: 0; cursor: pointer;
}
.boton-obs svg { width: 15px; height: 15px; }
.boton-obs:hover { color: var(--acento); border-color: var(--acento); }

/* los 12 indicadores de un lead, agrupados en una grilla de 6x2 dentro de una sola columna */
.grid-indicadores { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 5px 3px; }
.enlace-indicador {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 3px 0; border-radius: 5px;
}
.enlace-indicador:hover { background: var(--acento-suave); text-decoration: none; }

.tooltip-flotante {
  position: fixed; z-index: 1000; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--texto); color: var(--bg);
  padding: 8px 12px; border-radius: 7px; font-size: 0.8rem;
  line-height: 1.35; max-width: 260px; box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 0; transition: opacity .08s ease;
}
.tooltip-flotante.visible { opacity: 1; }
.tooltip-flotante .tt-linea { display: block; }
.tooltip-flotante .tt-label { font-weight: 700; }
.tooltip-flotante .tt-status { opacity: .7; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .02em; }
.tooltip-flotante .tt-detalle { opacity: .92; }
.punto { display: inline-block; width: 11px; height: 11px; border-radius: 999px; background: #d5d8de; }
.punto[data-status="Pendiente"] { background: var(--error); }
.punto[data-status="En Proceso"] { background: var(--amarillo); }
.punto[data-status="Si"] { background: var(--ok); }
.punto[data-status="No"] { background: #d5d8de; }

/* ---------- badges ---------- */

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: #eee; color: #444; white-space: nowrap; }
.badge-pendiente { background: var(--warn-bg); color: var(--warn); }
.badge-en-proceso { background: var(--acento-suave); color: var(--acento); }
.badge-en-espera { background: #f1eaff; color: #6b3fc9; }
.badge-cerrado { background: var(--ok-bg); color: var(--ok); }

/* ---------- evento: cabecera y resumen ---------- */

.cabecera-evento { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cabecera-acciones { display: flex; align-items: center; gap: 10px; }

.resumen-evento { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.resumen-evento > div { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; }
.resumen-evento strong { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 3px; }
.descripcion-evento { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; color: var(--texto-suave); }

/* ---------- checklist: toggle tarjetas / lista ---------- */

.seccion-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.toggle-vista { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.toggle-vista button {
  border: none; background: var(--panel); color: var(--texto-suave);
  padding: 6px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border-radius: 0;
}
.toggle-vista button + button { border-left: 1px solid var(--borde); }
.toggle-vista button.activo { background: var(--acento); color: #fff; }

.grid-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tarjeta-categoria { background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid #ccc; border-radius: var(--radio); padding: 14px 16px; scroll-margin-top: 80px; }
.tarjeta-categoria.resaltado { animation: destello-tarjeta 1.6s ease; }
@keyframes destello-tarjeta {
  0%, 100% { box-shadow: none; }
  15% { box-shadow: 0 0 0 3px var(--acento); }
}
.tarjeta-categoria.estado-si { border-left-color: var(--ok); }
.tarjeta-categoria.estado-pendiente { border-left-color: var(--error); }
.tarjeta-categoria.estado-en-proceso { border-left-color: var(--amarillo); }
.tarjeta-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tarjeta-header h3 { margin: 0; font-size: 0.98rem; }
.estado-pedido { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.estado-pedido[data-status="No"] { color: var(--texto-suave); }
.estado-pedido[data-status="Pendiente"] { color: var(--error); }
.estado-pedido[data-status="En Proceso"] { color: var(--amarillo); }
.estado-pedido[data-status="Si"] { color: var(--ok); }
.form-pedido { display: flex; flex-direction: column; gap: 8px; }
.form-pedido select, .form-pedido input { padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; font-size: 0.88rem; background: var(--panel); color: var(--texto); }
.tarjeta-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* vista lista: mismas tarjetas, dispuestas como filas densas.
   Cada tarjeta es su propio grid — para que las columnas alineen entre
   filas (incluida la de "Otros", que no tiene botón "Generar"), el form y
   sus acciones se vuelven "display:contents" y sus hijos pasan a ser ítems
   directos del grid de la tarjeta, con columnas de ancho fijo compartido.
   El detalle del pedido se lleva la mayor parte del espacio (1fr generoso). */
.grid-categorias.vista-lista { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.grid-categorias.vista-lista .tarjeta-categoria {
  border-radius: 0; border-left-width: 4px; border-top: none; border-right: none; border-bottom: 1px solid var(--borde);
  display: grid; grid-template-columns: 1.3fr 110px 2.4fr 140px; gap: 10px; align-items: center; padding: 10px 16px;
}
.grid-categorias.vista-lista .tarjeta-categoria:last-child { border-bottom: none; }
.grid-categorias.vista-lista .tarjeta-header { flex-direction: column; align-items: flex-start; gap: 2px; }
.grid-categorias.vista-lista .form-pedido,
.grid-categorias.vista-lista .tarjeta-acciones { display: contents; }
.grid-categorias.vista-lista .form-pedido select,
.grid-categorias.vista-lista .form-pedido input { width: 100%; }

.observaciones { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; font-family: inherit; font-size: 0.92rem; }

/* ---------- formularios generales ---------- */

.formulario, .form-detalle, .form-generar { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.formulario label, .form-detalle label, .form-generar label { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; font-weight: 600; color: var(--texto-suave); }
.formulario input, .formulario select, .formulario textarea,
.form-detalle input, .form-generar textarea {
  font-family: inherit; font-size: 0.95rem; color: var(--texto); font-weight: 400;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel);
}
.form-generar textarea { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.88rem; line-height: 1.6; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

.formulario input:focus, .formulario textarea:focus, .formulario select:focus,
.form-generar textarea:focus, .form-detalle input:focus, .modal-cuerpo input:focus, .modal-cuerpo textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave);
}

.separador-form {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--borde);
}

.zona-peligro {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 28px; padding: 14px 18px; border: 1px solid var(--error); border-radius: var(--radio);
}
.zona-peligro p { margin: 2px 0 0; }
.modal-footer form { margin: 0; }

.campo-status { display: flex; flex-direction: column; gap: 5px; }
.etiqueta-campo { font-size: 0.88rem; font-weight: 600; color: var(--texto-suave); }

.status-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.status-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.status-pill {
  cursor: pointer; padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  border: 2px solid transparent; opacity: .5; transition: opacity .1s ease;
}
.status-pill:hover { opacity: .8; }
.status-radio:checked + .status-pill { opacity: 1; border-color: currentColor; }
.status-radio:focus-visible + .status-pill { outline: 2px solid var(--acento); outline-offset: 2px; }

.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* barra de guardado que queda "a mano": se pega abajo del viewport mientras
   se scrollea el formulario/la grilla, en vez de tener que bajar hasta el
   final para encontrar el botón. */
.barra-fija {
  position: sticky; bottom: 0; background: var(--bg);
  padding: 14px 0; margin-top: 20px; border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); z-index: 5;
}
.barra-guardar-pedidos {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; margin-bottom: 14px;
}
.barra-guardar-pedidos #guardar-pedidos-estado.sucio { color: var(--warn); font-weight: 600; }
.barra-guardar-pedidos button:disabled { opacity: .5; cursor: default; }

button, .boton, .boton-secundario {
  display: inline-block; padding: 9px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-align: center; font-family: inherit;
}
button, .boton { background: var(--acento); color: #fff; }
button:hover, .boton:hover { background: #2058c9; text-decoration: none; color: #fff; }
.boton-secundario { background: var(--panel); color: var(--texto); border-color: var(--borde); }
.boton-secundario:hover { background: var(--bg); text-decoration: none; }
.boton-chico { padding: 5px 11px; font-size: 0.8rem; }
.boton-peligro { background: var(--error-bg); color: var(--error); border-color: transparent; }
.boton-peligro:hover { background: var(--error); color: #fff; }

.plantilla { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; margin-bottom: 18px; }
.plantilla-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.plantilla-header h2 { margin: 0; }
.plantilla textarea { width: 100%; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.88rem; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 10px; background: var(--panel); color: var(--texto); }

textarea { resize: vertical; }

/* ---------- modal (dialog nativo) ---------- */

dialog.modal {
  border: none; border-radius: 14px; padding: 0; background: var(--panel); color: var(--texto);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: min(720px, 92vw);
  max-height: 88vh;
}
dialog.modal.modal-angosto { width: min(480px, 92vw); }
dialog.modal::backdrop { background: rgba(15, 17, 23, 0.55); backdrop-filter: blur(1px); }

.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-header p { margin: 3px 0 0; color: var(--texto-suave); font-size: 0.85rem; }
.modal-cerrar { border: none; background: transparent; color: var(--texto-suave); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.modal-cerrar:hover { background: var(--bg); color: var(--texto); }

.modal-cuerpo { padding: 18px 22px; overflow-y: auto; max-height: calc(88vh - 130px); display: flex; flex-direction: column; gap: 14px; }
.modal-cuerpo label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); }
.modal-cuerpo input, .modal-cuerpo textarea {
  font-family: inherit; font-size: 0.92rem; color: var(--texto); font-weight: 400;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel-2);
}
.modal-cuerpo textarea.texto-documento { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.86rem; line-height: 1.6; min-height: 300px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--borde); }
.modal-footer .a-la-izquierda { margin-right: auto; }

.modal-estado { font-size: 0.85rem; color: var(--texto-suave); }
.modal-estado.ok { color: var(--ok); }
.modal-estado.error { color: var(--error); }

.mi-seccion { margin-bottom: 16px; }
.mi-seccion:last-child { margin-bottom: 0; }
.mi-seccion h3 { margin: 0 0 8px; font-size: 0.92rem; }
.mi-lista { margin: 0; padding-left: 0; font-size: 0.88rem; list-style: none; }
.mi-lista > li { margin-bottom: 8px; }
.mi-sublista { margin: 4px 0 0; padding-left: 38px; font-size: 0.82rem; color: var(--texto-suave); list-style: circle; }
.mi-sublista li { margin-bottom: 2px; }

.mi-lista-seleccionable > li.mi-item { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); }
.mi-item-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mi-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400 !important; color: var(--texto) !important; cursor: pointer; }
.mi-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--acento); flex-shrink: 0; }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--borde); border-top-color: var(--acento); border-radius: 50%; animation: girar .7s linear infinite; vertical-align: -2px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- CRM de Leads ---------- */

.subnav-leads { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--borde); }
.subnav-item { padding: 9px 14px; margin-bottom: -1px; color: var(--texto-suave); font-weight: 600; font-size: 0.9rem; border-bottom: 2px solid transparent; }
.subnav-item:hover { color: var(--texto); text-decoration: none; }
.subnav-item.activo { color: var(--acento); border-bottom-color: var(--acento); }

.badge-postulado { background: #e4ecff; color: #3454d1; }
.badge-desestimado { background: #eee; color: #666; }
.badge-perdido { background: var(--error-bg); color: var(--error); }
.badge-ganado { background: var(--ok-bg); color: var(--ok); }

.badge-ambito-local { background: var(--panel-2); color: var(--texto-suave); border: 1px solid var(--borde); }
.badge-ambito-nacional { background: var(--acento-suave); color: var(--acento); }
.badge-ambito-internacional { background: #f1eaff; color: #6b3fc9; }

.campo-con-boton { display: flex; gap: 8px; align-items: center; min-width: 0; }
.campo-con-boton select { flex: 1; min-width: 0; }

.campo-relacion { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.85rem; color: var(--texto-suave); font-weight: 600; }
.campo-relacion select { padding: 6px 9px; border: 1px solid var(--borde); border-radius: 7px; background: var(--panel); color: var(--texto); font-weight: 400; font-size: 0.85rem; }

.barra-masiva[hidden] { display: none; }
.barra-masiva {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--acento-suave); border: 1px solid var(--acento); border-radius: var(--radio);
  padding: 10px 14px; margin-bottom: 12px; font-size: 0.85rem;
}
.barra-masiva select { padding: 6px 9px; border: 1px solid var(--borde); border-radius: 7px; background: var(--panel); color: var(--texto); font-size: 0.85rem; }

.importar-mapeo { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel-2); padding: 12px 14px; margin-top: 14px; }
.importar-mapeo h3 { margin: 0 0 4px; font-size: 1rem; }
.importar-mapeo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.campo-mapeo { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--texto-suave); font-weight: 600; }
.campo-mapeo select { padding: 6px 9px; border: 1px solid var(--borde); border-radius: 7px; background: var(--panel); color: var(--texto); font-weight: 400; font-size: 0.85rem; }

.timeline-leads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline-item { background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; }
.timeline-item.timeline-reunion { border-left-color: var(--acento); }
.timeline-fecha { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; margin-bottom: 4px; }
.timeline-texto { white-space: pre-wrap; }

/* ---------- responsive ---------- */

/* Menú colapsado: la barra de arriba tiene 4 secciones + varios indicadores
   + botones de git-sync + tema — no entra en una pantalla chica. Se
   esconde todo eso atrás de la hamburguesa salvo la marca, la hamburguesa
   y el botón de tema, que quedan siempre visibles y livianos. */
@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap; gap: 10px; padding: 10px 14px; position: relative; }
  .marca { flex: 1; min-width: 0; }
  .nav-hamburguesa { display: flex; }

  .topbar-panel {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--panel); border-bottom: 1px solid var(--borde);
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    max-height: calc(100vh - 62px); overflow-y: auto;
    z-index: 30;
  }
  .topbar-panel.abierto { display: flex; }
  .topbar-panel nav { flex-direction: column; gap: 6px; flex: none; }
  .topbar-panel .nav-boton { width: 100%; }
  .topbar-acciones { flex-direction: column; align-items: stretch; gap: 8px; }
  .topbar-acciones .pill { text-align: center; }
}

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-categorias.vista-lista .tarjeta-categoria { grid-template-columns: 1fr; }

  .contenido { padding: 18px 14px 40px; }
  h1 { font-size: 1.3rem; }

  /* objetivos de toque más grandes (mínimo recomendado ~44px) */
  button, .boton, .boton-secundario, .boton-peligro { padding: 11px 16px; min-height: 44px; }
  .boton-chico { min-height: 36px; padding: 7px 12px; }
  .chip-filtro { padding: 9px 14px; }
  .formulario input, .formulario select, .formulario textarea,
  .filtros input, .filtros select { min-height: 42px; font-size: 16px; } /* 16px: evita el auto-zoom de iOS al enfocar */
  .modal-cuerpo input, .modal-cuerpo textarea { font-size: 16px; }

  /* tablas: con table-layout:fixed + width:100%, en una pantalla angosta
     las columnas sin ancho fijo (título, detalles) se aplastan hasta
     partir el texto letra por letra. Se les da un ancho mínimo real y que
     sea el contenedor (.tabla-wrap, con scroll horizontal) el que se
     encargue de no desbordar la página — así cada columna queda legible y
     se desliza el dedo para ver el resto. */
  .tabla-eventos { width: max-content; min-width: 100%; }
  .tabla-eventos th, .tabla-eventos td { min-width: 90px; }
  .tabla-eventos th.col-id, .tabla-eventos td.col-id,
  .tabla-eventos th.col-check, .tabla-eventos td.col-check { min-width: 0; }
  .tabla-eventos td.col-titulo, .tabla-eventos th.col-titulo-th { min-width: 160px; }

  /* la primera columna "de texto" queda fija para no perder el contexto de
     qué fila es cuál mientras se desliza el resto */
  .tabla-eventos td.col-titulo, .tabla-eventos th:nth-child(2) {
    position: sticky; left: 0; background: var(--panel); z-index: 1;
  }
  .tabla-eventos tbody tr:hover td.col-titulo { background: var(--acento-suave); }

  .filtro-grupo-compacto { flex-wrap: wrap; }
  .subnav-leads { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .subnav-item { flex-shrink: 0; }
  .filtros-fila input[type="search"] { min-width: 0; }

  .barra-superior { flex-direction: column; align-items: stretch; }
  .acciones-dashboard { justify-content: stretch; }
  .acciones-dashboard > * { flex: 1; }

  .cabecera-evento, .cabecera-acciones { width: 100%; }
  .cabecera-acciones { justify-content: stretch; }
  .cabecera-acciones > * { flex: 1; }

  /* <dialog> trae un max-width propio del navegador (algo como
     calc(100% - 38px)) que si no se pisa, deja el modal más angosto de lo
     que pide "width" acá arriba. */
  dialog.modal { width: 100vw; max-width: 100%; max-height: 100vh; height: 100dvh; border-radius: 0; margin: 0; }
  .modal-cuerpo { max-height: calc(100dvh - 130px); }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer button, .modal-footer .boton-secundario { flex: 1; min-width: 120px; }
  .modal-footer .a-la-izquierda { flex: 1 0 100%; margin-right: 0; order: -1; }

  .barra-fija { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}