/* Identidad de Nucleo (paleta y logo finales; el pulido fino es la subfase 1m): encabezado,
   menú lateral en compu / el menú inferior flotante del dueño en celular (dashboard.css), Centro de control. */
:root { --menu-ancho: 232px; }

.marca {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-weight: 700; font-size: 1.25rem; color: var(--texto); text-decoration: none;
}
.marca img { width: 32px; height: 32px; flex: none; }

/* Pantallas sin menú (login, 2FA, privacidad, eliminación de datos). */
.publico-caja { max-width: 440px; margin: 0 auto; padding: calc(1.5rem + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.publico-caja .marca { display: flex; justify-content: center; font-size: 2rem; margin-bottom: 1rem; gap: .75rem; }
.publico-caja .marca img { width: 56px; height: 56px; }
/* Privacidad y eliminación de datos: encabezado fijo con "Volver" (debajo de la barra de estado del iPhone). */
.encabezado-publico { justify-content: space-between; }
.encabezado-publico .marca { font-size: 1.1rem; }
.btn-volver { border-radius: 999px; padding: 0 1rem 0 .7rem; }
.publico-texto { max-width: 680px; padding-top: 1.5rem; }
.publico-texto h1 { font-size: 1.6rem; }
.publico-texto h2 { margin-top: 1.5rem; }

.encabezado {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem;
  padding: calc(.5rem + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) .5rem max(16px, env(safe-area-inset-left));
  background: var(--tarjeta); border-bottom: 1px solid var(--borde); min-height: 60px;
}
.encabezado .marca { flex: none; }
@media (max-width: 520px) { .encabezado .marca-texto { display: none; } .encabezado .marca { min-width: 44px; justify-content: center; } }

/* Selector compacto del negocio activo: el nombre completo (en dos líneas si hace falta), su estado y una flecha. */
.selector { position: relative; flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.selector summary { list-style: none; cursor: pointer; }
.selector summary::-webkit-details-marker { display: none; }
.selector-boton {
  display: flex; align-items: center; gap: .4rem; min-height: 44px; max-width: 100%; padding: .3rem .6rem .3rem .8rem;
  border-radius: 14px; background: var(--fondo); border: 1px solid var(--borde); color: var(--texto);
}
.selector[open] .selector-boton { border-color: var(--primario); }
.selector-actual { display: flex; align-items: center; flex-wrap: wrap; column-gap: .45rem; row-gap: .1rem; min-width: 0; }
.selector-actual strong { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.selector-actual .pastilla { font-size: .72rem; padding: .05rem .5rem; }
.selector-boton .icono { color: var(--suave); }
.encabezado .sin-negocio { color: var(--suave); font-weight: 600; }
.selector-panel {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 32px)); z-index: 1;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15); padding: .75rem;
}
.selector-panel input { margin-top: 0; }
.selector-panel ul { list-style: none; margin: .5rem 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.selector-panel li a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 44px; padding: 0 .5rem; border-radius: 6px; color: var(--texto); text-decoration: none; overflow-wrap: anywhere;
}
.selector-panel li a:hover, .selector-panel li a[aria-current] { background: var(--fondo); }
.selector-panel li[hidden] { display: none; }

.menu a, .menu button {
  display: flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 8px;
  color: #D5D8F2; text-decoration: none; font: inherit; font-weight: 600; background: none; border: 0; width: 100%; cursor: pointer;
}
.menu a[aria-current] { background: rgba(79, 70, 229, .45); color: #FFFFFF; }
.menu a:hover, .menu button:hover { background: rgba(255, 255, 255, .08); }
.menu .grupo { margin: .75rem .9rem .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #A9AED6; }
.menu form { margin: 0; }

.contenido { padding: 16px max(16px, env(safe-area-inset-right)) var(--hueco-menu) max(16px, env(safe-area-inset-left)); min-width: 0; max-width: 1000px; width: 100%; }
.volver { margin-bottom: 1rem; }
nav.volver { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-atras { border-radius: 999px; padding: 0 1rem 0 .7rem; max-width: 100%; min-width: 0; }
.atras-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* nombres largos en 375 */

/* Celular: solo el menú inferior flotante (el mismo del dueño). Compu: solo el menú lateral. */
@media (max-width: 899px) { .menu { display: none; } }
@media (min-width: 900px) {
  body.panel .menu-inferior { display: none; }
  body.panel .banner-novedades { bottom: 16px; }
  body.panel { display: grid; grid-template-columns: var(--menu-ancho) 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
  .encabezado { grid-column: 1 / -1; }
  /* Pegado abajo del encabezado y con su propio scroll: los enlaces del final (Dueños, Auditoría…) siempre se alcanzan. */
  .menu { grid-row: 2; padding: .75rem; background: var(--menu); position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; }
  .contenido { grid-row: 2; grid-column: 2; padding-bottom: 32px; }
}

/* Centro de control */
.tarjetas-negocio { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tarjetas-negocio { grid-template-columns: 1fr 1fr; } }
.semaforo { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--gris-fondo); }
.semaforo-verde { background: var(--verde); } .semaforo-ambar { background: var(--ambar); } .semaforo-rojo { background: var(--rojo); }
.semaforo-demo { background: var(--suave); } /* P-66: el negocio demo, en gris */
/* 1m bloque 2: cada negocio es una tarjeta que se toca entera (el enlace del nombre se estira encima con ::after);
   la razón del color, a la vista. */
.negocio-tarjeta { position: relative; padding: 14px 16px; }
.tarjetas-negocio .negocio-tarjeta { margin: 0; }
.negocio-cabeza { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.negocio-enlace { flex: 1; min-width: 0; font-size: 1.1rem; font-weight: 700; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.negocio-enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.negocio-enlace:focus-visible { outline: none; box-shadow: none; }
.negocio-tarjeta:has(.negocio-enlace:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; }
.negocio-cabeza .pastilla { flex: none; }
.razon { margin: .35rem 0 .6rem; font-weight: 600; color: var(--suave); overflow-wrap: anywhere; }
.razon-rojo { color: var(--rojo); } .razon-ambar { color: var(--ambar); } .razon-verde { color: var(--verde); }
.problemas { list-style: none; margin: 0 0 .75rem; padding: 0; }
.problemas li { padding: .4rem .6rem; border-radius: 6px; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; }
.titulo-seccion { margin: 1.25rem 0 .75rem; }
.resumen .numero b.numero-rojo { color: var(--rojo); }
.resumen .numero b.numero-ambar { color: var(--ambar); }
.metricas-admin { margin-bottom: 0; }
.problemas .rojo { background: var(--rojo-fondo); color: var(--rojo); }
.problemas .ambar { background: var(--ambar-fondo); color: var(--ambar); }
.todo-bien { color: var(--verde); font-weight: 600; }

/* Resumen con números grandes (componente reutilizable, también para el dueño) */
.resumen { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1rem; }
.resumen .numero { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; text-align: center; }
.resumen .numero b { display: block; font-size: 2.5rem; line-height: 1.1; color: var(--primario); }
.resumen .numero span { color: var(--suave); font-weight: 600; }

.horario-dia { border-top: 1px solid var(--borde); padding-top: .4rem; margin-top: .4rem; }
.horario-dia { border-left: 0; border-right: 0; border-bottom: 0; margin-inline: 0; padding-inline: 0; min-width: 0; }
/* 1m bloque 2: el día y "Cerrado" en el mismo renglón; menos aire entre días. */
.horario-dia legend { float: left; padding: 0; }
.horario-dia legend h2 { margin: 0; line-height: 44px; font-size: 1.05rem; }
.horario-dia .cerrado-dia { justify-content: flex-end; margin: 0; }
.rangos-dia { clear: both; }
.rango label { margin-bottom: .5rem; }
.otro-horario summary { min-height: 44px; }
.horario-dia:has(.cerrado-dia input:checked) .rangos-dia { display: none; }
.rango { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; width: 100%; }
.rango label { min-width: 0; }
.rango input { width: 100%; min-width: 0; max-width: 100%; }
.otro-horario summary { width: 100%; list-style: none; margin-bottom: .5rem; }
.otro-horario summary::-webkit-details-marker { display: none; }
.otro-horario[open] summary { display: none; }
/* Negocios (1m bloque 2): tarjetas que se tocan enteras. */
.lista-negocios { list-style: none; margin: 0; padding: 0; }
.negocio-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.negocio-giro { color: var(--suave); font-size: .85rem; text-transform: capitalize; }
.negocio-cabeza > .icono { color: var(--suave); flex: none; }
/* P-69: la acción de la tarjeta ("Conectar WhatsApp") es el enlace estirado; cuadros de arriba tocables y filtro. */
.negocio-nombre { flex: 1; min-width: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.negocio-accion { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; margin-bottom: .5rem; font-size: 1rem; color: var(--primario); }
.resumen .numero-tocable { position: relative; display: block; color: var(--texto); text-decoration: none; }
.resumen .numero-tocable .icono { position: absolute; top: 10px; right: 10px; color: var(--suave); }
.filtro-activo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.filtro-activo .btn { border-radius: 999px; }
/* Ficha: los enlaces del Centro de control llegan a una sección o un campo (debajo del encabezado fijo). */
[id^="campo-"], #plantillas, #recordatorios { scroll-margin-top: calc(80px + env(safe-area-inset-top)); }
/* P-68: catálogo, personal, preguntas, casos y auditoría como tarjetas (como Negocios y Tickets): título y pastilla
   arriba, un renglón de datos sin rótulos y las acciones de 44 px abajo. */
.lista-items { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lista-items { grid-template-columns: 1fr 1fr; } }
.item-tarjeta { margin: 0; padding: 14px 16px; min-width: 0; }
.item-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.item-titulo { flex: 1; min-width: 0; font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.item-cabeza .pastilla, .item-fecha { flex: none; }
.item-fecha { color: var(--suave); font-size: .85rem; white-space: nowrap; }
.item-orden { color: var(--suave); font-variant-numeric: tabular-nums; }
.item-texto { margin: .35rem 0 0; overflow-wrap: anywhere; }
.item-meta { margin: .35rem 0 0; color: var(--suave); font-size: .9rem; overflow-wrap: anywhere; }
.item-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.item-acciones form { margin: 0; flex: 1 1 0; display: flex; }
.item-acciones > .btn, .item-acciones form .btn { flex: 1 1 0; min-width: 0; padding: 0 .5rem; }
.item-detalle { margin: .5rem 0 0; padding: .5rem .6rem; background: var(--fondo); border-radius: 6px; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.filtros-auditoria { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 0 0 1rem; }
.filtros-auditoria label { flex: 1 1 10rem; min-width: 0; margin: 0; }
.filtros-auditoria select { width: 100%; min-height: 44px; }
.filtros-auditoria .btn { flex: none; }