/* ==========================================================================
   Panel administrativo — armazon de escritorio (Fase E).

   Por que existe este archivo y no mas reglas en `app.css`
   --------------------------------------------------------
   `app.css` es el portal del residente: una columna de 28rem, navegacion al
   pie, todo pensado para el pulgar. El panel es lo contrario — la
   administradora pasa la jornada aqui, en un monitor, moviendose entre doce
   modulos. Meter las dos disposiciones en una sola hoja obligaria a que cada
   regla dijera para cual de las dos es.

   Lo que NO cambia: los tokens. Ni un color, ni un tamano de letra, ni un
   espacio literal. La identidad es la misma en las dos superficies; lo unico
   que cambia es como se reparte la pantalla.

   Se carga DESPUES de `app.css`, asi que reaprovecha `.tarjeta`, `.boton*`,
   `.campo*`, `.etiqueta*`, `.aviso*` y `.pie*` tal como estan.
   ========================================================================== */

/* --- Anulacion del armazon del residente ---------------------------------

   `app.css` centra `.app` en 28rem y en escritorio la dibuja como una tarjeta
   sobre el lienzo. El panel usa el ancho completo de la ventana: la tarjeta
   flotante era exactamente el sintoma de que el panel estaba usando ropa
   prestada.                                                                 */
.cuerpo-panel {
  background: var(--c-fondo-sutil);
  padding: 0;
}

.app.app--panel {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: var(--c-fondo-sutil);
}

/* Tarjetas del panel (2026-10-19): sobre el lienzo calido las estructura la
   SOMBRA (`--sombra-sutil`, el shadow-sm) con un contorno casi invisible,
   no un borde gris duro. Los campos conservan `--c-borde-fuerte` (1.4.11). */
.cuerpo-panel .tarjeta { border-color: var(--c-borde-tarjeta); box-shadow: var(--sombra-sutil); }

/* --- Armazon: lateral fija + area de trabajo ------------------------------ */
.panel {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-height: 0;
}

/* La barra lateral se queda quieta mientras el contenido rueda: en una tabla
   de trescientas filas, subir a buscar el menu es el movimiento que mas se
   repite en el dia.                                                         */
.panel__lateral {
  flex: none;
  width: 18rem;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--c-lateral);
  border-right: 1px solid var(--c-lateral-borde);
  color: var(--c-lateral-texto);
  /* La lateral es superficie de marca (jade profundo, tokens.css): aqui se
     re-declaran los tokens que consumen sus reglas, y items, opciones,
     rotulos y pie toman la paleta sin una regla de color propia cada uno. */
  --c-texto: var(--c-lateral-texto);
  --c-texto-secundario: var(--c-lateral-secundario);
  --c-texto-terciario: var(--c-lateral-terciario);
  --c-acento: var(--c-lateral-acento);
  --c-acento-suave: var(--c-lateral-hover);
  --c-borde: var(--c-lateral-borde);
  --c-critico-suave: var(--c-lateral-hover);
  /* Filas de 40px para todo (2026-10-21, pedido del dueno: «todo quedo muy
     pequeno»). Fitts: el objetivo que mas se toca en el dia no se achica
     para que todo entre; si a 768px de alto no entra, rueda la lista y el
     pie (Configuracion y la persona) queda fijo. Con dedo, 44px.          */
  --alto-item-lateral: 2.5rem;
  --alto-opcion-lateral: 2.5rem;
  --alto-pie-lateral: 2.5rem;
}

@media (max-width: 47.99rem), (pointer: coarse) {
  .panel__lateral {
    --alto-item-lateral: var(--alto-toque);
    --alto-opcion-lateral: var(--alto-toque);
    --alto-pie-lateral: var(--alto-toque);
  }
}


.panel__principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Piel: piezas flotantes sobre el lienzo -------------------------------

   De 48rem para arriba el panel deja de ser "bloques pegados a los bordes de
   la ventana" y pasa a ser tarjetas apoyadas sobre el lienzo: la lateral, la
   barra superior y cada bloque de trabajo tienen su propia superficie y su
   propio radio.

   No es decoracion. Con doce modulos, una tabla de trescientas filas y una
   barra de filtros, lo que ordena la pantalla es que se vea DONDE termina
   una cosa y empieza la otra; las lineas de 1px pegadas al borde de la
   ventana no lo consiguen, las superficies separadas si.

   En el telefono no aplica: ahi el ancho es escaso y cada margen exterior es
   ancho que se le quita al contenido.                                      */
@media (min-width: 48rem) {
  .cuerpo-panel,
  .app.app--panel { background: var(--c-lienzo); }

  /* La lateral va pegada al borde izquierdo y de alto completo (pedido del
     dueno, 2026-10-08): flotando como tarjeta se leia como un bloque mas del
     contenido y no como el menu. El area de trabajo conserva su margen. */
  .panel {
    gap: var(--s-6);
    padding: 0 var(--s-4) 0 0;
  }


  .panel__principal {
    gap: var(--s-4);
    min-height: 100vh;
  }

  /* Barra blanca de borde a borde del area de trabajo, como la del portal
     (pedido del dueno, 2026-10-19: sobre el lienzo gris se leia como parte
     del fondo). Los margenes negativos anulan el hueco de `.panel` y el
     relleno devuelve el contenido a la columna: el buscador sigue
     arrancando donde arranca el titulo de la pagina (2026-10-08). Selector
     mas especifico: la regla base de `.panel__barra` va despues. */
  .panel__principal > .panel__barra {
    flex: none;
    margin-inline: calc(-1 * var(--s-6)) calc(-1 * var(--s-4));
    padding-inline: calc(var(--s-6) + var(--s-4)) calc(var(--s-4) + var(--s-4));
    border: 0;
    border-bottom: 1px solid var(--c-borde-tarjeta);
    border-radius: 0;
    background: var(--c-fondo);
    box-shadow: none;
  }

  /* El area de trabajo no lleva superficie propia: las tarjetas de adentro
     ya la tienen, y una tarjeta dentro de otra tarjeta se lee como un error
     de maquetado.                                                         */
  .panel__contenido {
    background: transparent;
    padding: var(--s-2) var(--s-2) var(--s-8);
  }

  .pie { border: 0; background: transparent; }
}

/* --- Marca de la lateral --------------------------------------------------
   El condominio como "espacio de trabajo" (Notion, Linear): el logo en su
   propio cuadro claro —cualquier logo se ve sobre el jade—, el nombre y
   debajo para que es este panel.                                          */
.panel__marca {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--transicion);
}

.panel__marca:hover { background: var(--c-lateral-hover); }

.panel__logo-caja {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  /* Sin cuadro blanco: el logo va directo sobre la lateral (2026-10-08). */
  background: transparent;
}

.panel__logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.panel__marca-texto { display: grid; min-width: 0; gap: 1px; }

.panel__condominio {
  color: var(--c-texto);
  font-size: var(--t-base);
  font-weight: var(--p-semibold);
  line-height: var(--l-ajustado);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__marca-rotulo {
  color: var(--c-texto-terciario);
  font-size: var(--t-xs);
}

/* "Salir" es el que menos se usa: sin forma de boton y al fondo. */

/* --- Navegacion lateral ---------------------------------------------------

   Un grupo por bloque de sentido, con su rotulo. Doce modulos en una lista
   plana son doce cosas que leer; en dos grupos rotulados son dos.           */
.panel__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Lo unico que rueda, y solo si a una altura baja no entra (con Cobros
   abierto en una pantalla de 768px). El pie nunca queda tapado.           */
.panel__desplazable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-borde) transparent;
  /* Si no entra todo, el corte de abajo se desvanece en vez de partir un
     item por la mitad; el relleno deja ver completo el ultimo al llegar. */
  padding-bottom: var(--s-4);
  mask-image: linear-gradient(to bottom, var(--c-texto) calc(100% - var(--s-4)), transparent);
}

.panel__grupo {
  display: flex;
  flex-direction: column;
}

/* Mismo peso que la lateral del portal del residente: 16px, icono de 20px y
   la pastilla del activo con el radio de una tarjeta. Las dos superficies son
   el mismo producto y la navegacion es lo primero que se compara. A 14px con
   iconos chicos, la del panel parecia la version "de sistema" de la otra.  */
.panel__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--alto-item-lateral);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--p-medio);
  line-height: var(--l-ajustado);
  color: var(--c-texto-secundario);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.panel__item .icono { width: 1.25rem; height: 1.25rem; color: var(--c-texto-terciario); }

.panel__item:hover { background: var(--c-acento-suave); color: var(--c-texto); }

/* El item activo es una PILDORA de Acuario (2026-10-19): fondo teñido,
   contorno fino del mismo matiz, texto e icono en el acento y peso 600.
   Fondo, color Y peso: el tono solo no se distingue de un vistazo. Sin
   franja lateral de color (al dueno le parecio «muy IA» en la landing). */
.panel__item[aria-current="page"],
.panel__opcion[aria-current="page"] {
  background: var(--c-lateral-activo);
  box-shadow: inset 0 0 0 1px var(--c-lateral-activo-borde);
  color: var(--c-lateral-acento);
  font-weight: var(--p-semibold);
}

.panel__item[aria-current="page"] .icono,
.panel__item--actual .icono:not(.icono--chevron) { color: var(--c-acento); }

/* Iconos: 20px, trazo de 1.5, `currentColor`. Heredan el color del item, de
   modo que el estado activo los arrastra sin una regla propia.              */
.icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  stroke: currentColor;
  fill: none;
  /* 1.5 (2026-10-19): fue 2 desde el 2026-10-08, cuando cada icono iba en
     un cuadro de color; sin el cuadro, el trazo grueso pesaba mas que el
     texto. Constante en todo el panel: el mismo valor va en el partial. */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--grande { width: 1.5rem; height: 1.5rem; }

/* --- Barra superior del area de trabajo -----------------------------------
   A la izquierda, donde esta la persona (icono de la categoria y la ruta);
   a la derecha, herramientas compactas del mismo alto: buscar, «+ Nuevo»,
   campana, tema y avatar. Antes el buscador era un campo enorme flotando y
   cada control tenia su propio tamano (revision del dueno, 2026-10-08).
   Se queda pegada arriba al rodar, con el lienzo translucido detras.      */
.panel__barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  min-height: 3.5rem;
  padding: var(--s-2) var(--s-6);
  border-bottom: 1px solid var(--c-borde);
  background: color-mix(in srgb, var(--c-fondo) 92%, transparent);
  backdrop-filter: blur(10px);
}

.panel__ruta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-texto-secundario);
  white-space: nowrap;
}

.panel__ruta-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.75rem;
  /* Sin cuadro de color (2026-10-19): el icono suelto, en el acento. */
  color: var(--c-acento);
}

.panel__ruta-icono .icono { width: 1rem; height: 1rem; }
.panel__ruta-seccion { overflow: hidden; text-overflow: ellipsis; }
.panel__ruta-separador { color: var(--c-texto-terciario); }
.panel__ruta-actual { overflow: hidden; text-overflow: ellipsis; color: var(--c-texto); font-weight: var(--p-semibold); }

.cuerpo-panel .panel__barra a.panel__ruta-opcion {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-texto);
  font-weight: var(--p-semibold);
  text-decoration: none;
}

.cuerpo-panel .panel__barra a.panel__ruta-opcion:hover { text-decoration: underline; }

/* Herramientas de la derecha: todas de 36px. */
.panel__barra .selector-tema,
.panel__barra .campanita__boton,
.panel__barra .campanita-hueco {
  width: var(--alto-control);
  height: var(--alto-control);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
}

/* «+ Nuevo» en verde suave y no solido: esta en todas las pantallas, y la
   accion primaria de cada una (Verificar, Registrar pago) tiene que seguir
   siendo la unica que grita. */
.cuerpo-panel .panel__barra .panel__nuevo-boton {
  min-height: var(--alto-control);
  padding: 0 var(--s-3);
  border-color: transparent;
  background: var(--c-acento-suave);
  color: var(--c-acento);
  font-size: var(--t-sm);
  font-weight: var(--p-semibold);
}

.cuerpo-panel .panel__barra .panel__nuevo-boton:hover,
.cuerpo-panel .panel__barra .panel__nuevo[open] > .panel__nuevo-boton {
  border-color: var(--c-acento);
  background: var(--c-acento-suave);
}

.panel__barra-condominio {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel__barra-nombre {
  font-weight: var(--p-semibold);
  letter-spacing: var(--e-titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__barra-rotulo {
  font-size: var(--t-xs);
  color: var(--c-texto-terciario);
}


/* --- Contenido ------------------------------------------------------------

   A todo el ancho, como Notion (revision del dueno, 2026-10-08): con un
   tope de 80rem centrado, en 1920px quedaba una caja con dos franjas vacias
   a los lados y "se veia como un div centrado". Lo que no debe estirarse
   —parrafos, formularios— lleva su propio ancho de lectura
   (`--ancho-contenido`); las tablas y las rejillas usan el espacio.        */
.panel__contenido {
  flex: 1;
  width: 100%;
  padding: var(--s-8) var(--s-6) var(--s-12);
}

.panel__avisos { margin-bottom: var(--s-6); }

/* Cabecera de pagina: h1 y una linea que dice para que sirve la pantalla.
   Es la diferencia entre un titulo y una pagina que se explica sola.        */
.panel__pagina {
  max-width: var(--ancho-contenido);
  margin-bottom: var(--s-8);
}

.panel__pagina-apoyo {
  margin-top: var(--s-2);
  color: var(--c-texto-secundario);
  text-wrap: pretty;
}

/* Ancho de lectura para pantallas de formulario o de texto seguido. */
.panel__columna { max-width: var(--ancho-contenido); }

/* --- Rejilla de modulos de la portada ------------------------------------- */
.panel__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s-4);
}

.modulo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion), background var(--transicion);
}

.modulo:hover { border-color: var(--c-borde-fuerte); background: var(--c-acento-suave); }

.modulo__encabezado {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-acento);
}

.modulo__nombre {
  font-weight: var(--p-semibold);
  color: var(--c-texto);
  letter-spacing: var(--e-titulo);
}

.modulo__descripcion {
  font-size: var(--t-sm);
  color: var(--c-texto-secundario);
  text-wrap: pretty;
}

/* --- Formularios del panel ------------------------------------------------

   Los widgets los pinta Django (`{{ form.campo }}`) y no aceptan una clase
   sin un filtro de plantilla que el repo no tiene. Se los envuelve y se estila
   el envoltorio: el resultado es identico a `.campo__control` de `app.css`,
   que es la definicion que manda.                                           */
.campo__control-envoltura > input,
.campo__control-envoltura > select,
.campo__control-envoltura > textarea {
  width: 100%;
  min-height: var(--alto-toque);
  padding: var(--s-3) var(--s-4);
  background: var(--c-fondo);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-md);
  transition: border-color var(--transicion);
}

.campo__control-envoltura > input:focus,
.campo__control-envoltura > select:focus,
.campo__control-envoltura > textarea:focus {
  border-color: var(--c-acento);
  outline-offset: 1px;
}

/* Campo de seis digitos: ancho de lo que va a recibir y no mas. Un input de
   ancho completo para seis cifras le dice a la persona que escriba parrafos. */
.campo__control--codigo {
  max-width: 11rem;
  font-family: var(--f-tabular);
  font-size: var(--t-lg);
  letter-spacing: 0.25em;
}

.campo--en-linea {
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --- Segundo factor ------------------------------------------------------- */
.mfa__qr {
  width: 13.75rem;
  height: 13.75rem;
  background: var(--c-fondo-qr);  /* el QR necesita blanco real para escanear */
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--s-2);
}

.mfa__secreto {
  font-family: var(--f-tabular);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  word-break: break-all;
  padding: var(--s-3) var(--s-4);
  background: var(--c-fondo-sutil);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
}

.mfa__paso {
  font-size: var(--t-lg);
  font-weight: var(--p-semibold);
  letter-spacing: var(--e-titulo);
}

/* --- Codigos de recuperacion ---------------------------------------------- */
.codigos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s-2);
}

.codigos__item {
  font-family: var(--f-tabular);
  font-size: var(--t-base);
  letter-spacing: 0.06em;
  padding: var(--s-2) var(--s-3);
  background: var(--c-fondo-sutil);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-sm);
  text-align: center;
}

/* --- Sesiones ------------------------------------------------------------- */
.sesion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.sesion__datos {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.sesion__titulo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-weight: var(--p-medio);
}

.sesion__meta {
  font-size: var(--t-sm);
  color: var(--c-texto-terciario);
  overflow-wrap: anywhere;
}

/* --- Interruptor del menu en pantalla angosta -----------------------------

   Checkbox oculto + etiqueta, sin una linea de JavaScript. El panel se usa en
   escritorio, pero la administradora que consulta algo desde el telefono en
   la garita no puede encontrarse con un menu de 17rem comiendose la pantalla.

   El checkbox no se oculta con `display:none`: asi dejaria de recibir foco y
   el menu quedaria inalcanzable con el teclado.                             */
.panel__interruptor {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.panel__boton-menu {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--alto-toque);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
  cursor: pointer;
  user-select: none;
}

.panel__interruptor:focus-visible + .panel__boton-menu {
  outline: 2px solid var(--c-acento);
  outline-offset: 2px;
}

/* Lateral plegada en el encabezado (boton «Menu») por debajo de 80rem, no
   solo en el telefono: en una tableta (768px, o 1024px horizontal) la
   lateral fija le dejaba 440-700px al contenido y las tablas rodaban
   (revision del 2026-10-09). */
@media (max-width: 79.99rem) {
  .panel { display: block; padding: 0; }

  .panel__lateral {
    width: auto;
    position: static;
    height: auto;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    border-right: 0;
    border-bottom: 1px solid var(--c-borde);
  }

  .panel__marca { flex: 1; min-width: 0; margin: 0; padding: 0; }

  .panel__boton-menu { display: inline-flex; }

  /* Desplegado, el menu es parte de la pagina: rueda con ella. */
  .panel__desplazable { overflow: visible; }

  /* Cerrado por defecto; la etiqueta lo despliega. */
  .panel__nav {
    display: none;
    order: 3;
    width: 100%;
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-borde);
  }

  .panel__interruptor:checked ~ .panel__nav { display: flex; }

  .panel__principal { min-height: 0; }

  .panel__barra { padding: var(--s-3) var(--s-4); }

  .panel__contenido { padding: var(--s-6) var(--s-4) var(--s-10); }

  .panel__rejilla { grid-template-columns: 1fr; }
}

/* --- Impresion ------------------------------------------------------------
   Los codigos de recuperacion se imprimen: es literalmente lo que se le pide
   a la persona que haga con ellos. El armazon no tiene nada que hacer en esa
   hoja de papel.                                                            */
@media print {
  .panel__lateral,
  .panel__barra,
  .pie,
  .no-imprime { display: none !important; }

  .panel__contenido { padding: 0; max-width: none; }

  .tarjeta, .codigos__item { border-color: var(--c-borde-fuerte); }
}

/* ===========================================================================
   Modulos de negocio — piezas propias de una pantalla
   ---------------------------------------------------------------------------
   El sistema de las pantallas de negocio —encabezado, pestanas, filtros,
   tabla, formulario, ficha, estado vacio— vive en `panel-negocio.css`. Lo que
   queda aqui es lo que pertenece a UNA pantalla y no se repite: el calendario
   de reservas, la agenda de operaciones, las fichas de mantenimiento y
   proveedores, y la invitacion imprimible.
   =========================================================================== */
.introduccion, .ayuda, .detalle { color: var(--c-texto-secundario); }
.ayuda { margin-top: var(--s-2); font-size: var(--t-sm); }
.detalle { display: block; font-size: var(--t-xs); }

/* Controles del panel. La altura densa la fija `panel-negocio.css` en la
   barra de filtros y en el formulario; esta es la forma de base para el
   control suelto que no cae en ninguno de los dos.                        */
.cuerpo-panel select,
.cuerpo-panel textarea,
.cuerpo-panel input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]) {
  font: inherit;
  width: 100%;
  min-height: var(--alto-toque);
  padding: var(--s-3);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-md);
  background: var(--c-fondo);
  color: var(--c-texto);
  transition: border-color var(--transicion);
}

.cuerpo-panel select:focus,
.cuerpo-panel textarea:focus,
.cuerpo-panel input:focus { border-color: var(--c-acento); }

.cuerpo-panel textarea { min-height: var(--s-16); resize: vertical; }
.cuerpo-panel input[type=checkbox] { width: var(--s-6); height: var(--s-6); accent-color: var(--c-acento); }

.insignia {
  display: inline-block;
  margin: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-acento-suave);
  color: var(--c-acento);
  font-size: var(--t-xs);
}

.logo-condominio { object-fit: contain; }

/* Cobros conserva el ritmo de los formularios y reportes del panel. */
.contenido-cobros > .tarjeta + .tarjeta { margin-top: var(--s-5); }

/* ===========================================================================
   Calendario mensual de reservas (E3)
   ---------------------------------------------------------------------------
   Siete columnas fijas: la semana tiene siete dias y una rejilla que se
   reacomoda deja de leerse como calendario. Por debajo de 48rem no cabe (son
   840px): se oculta y se pinta la agenda, un renglon por dia con reservas.
   =========================================================================== */
.calendario { padding: 0; overflow-x: auto; }
.calendario__rejilla { display: grid; grid-template-columns: repeat(7, minmax(7.5rem, 1fr)); min-width: 52.5rem; }
.calendario__encabezado { padding: var(--s-3); font-size: var(--t-xs); font-weight: var(--p-semibold); color: var(--c-texto-secundario); background: var(--c-fondo-sutil); text-align: center; }
.calendario__dia { min-height: 6rem; padding: var(--s-2); border-top: 1px solid var(--c-borde); border-left: 1px solid var(--c-borde); }
.calendario__dia--fuera { background: var(--c-fondo-sutil); color: var(--c-texto-secundario); }
.calendario__dia--hoy { box-shadow: inset 0 0 0 2px var(--c-acento); }
.calendario__numero { display: block; font-size: var(--t-xs); font-weight: var(--p-semibold); color: var(--c-texto-secundario); font-variant-numeric: tabular-nums; }
.calendario__reserva { display: block; margin-top: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--c-acento-suave); color: var(--c-texto); font-size: var(--t-xs); text-decoration: none; }
.calendario__reserva:hover { background: var(--c-fondo-elevado); }
.calendario__hora { font-weight: var(--p-semibold); font-variant-numeric: tabular-nums; }
.calendario__residencia { display: block; overflow-wrap: anywhere; }
.calendario__reservar { display: block; margin-top: var(--s-1); font-size: var(--t-xs); color: var(--c-texto-secundario); }
.calendario-agenda { display: none; }
.calendario-agenda__dia + .calendario-agenda__dia { margin-top: var(--s-4); }
.calendario-agenda__fecha { font-size: var(--t-sm); margin: 0 0 var(--s-2); }
@media (max-width: 47.99rem) {
  .calendario { display: none; }
  .calendario-agenda { display: block; }
}

/* Contadores de la portada de Operaciones y linea de tiempo de un ticket.
   La cifra va con la fuente de la interfaz y cifras tabulares: la
   monoespaciada dibuja el cero barrado, que dentro de una tarjeta de
   resumen se lee como un glifo roto y no como un cero.                    */
.contador-grande {
  font-family: var(--f-familia);
  font-size: var(--t-2xl);
  font-weight: var(--p-semibold);
  line-height: var(--l-ajustado);
  letter-spacing: var(--e-cifra);
  font-variant-numeric: tabular-nums;
}

.linea-tiempo__item { padding: var(--s-4) 0; border-top: 1px solid var(--c-borde); }
.linea-tiempo__item:first-of-type { border-top: 0; }

/* Operaciones: agenda mensual y conversacion con la misma identidad del panel. */
.comentario-operaciones { margin-bottom: var(--s-4); }
.calendario-operaciones { overflow-x: auto; border: 1px solid var(--c-borde); border-radius: var(--r-lg); }
.calendario-operaciones table { min-width: 47.5rem; width: 100%; table-layout: fixed; }
.calendario-operaciones td { height: 7.5rem; vertical-align: top; padding: var(--s-2); }
.bloque-reserva { display: flex; flex-direction: column; padding: var(--s-2); margin-top: var(--s-2); border-left: 3px solid var(--c-acento); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--c-acento-suave); overflow-wrap: anywhere; font-size: var(--t-xs); }

.contenido-operaciones td small { display: block; margin-top: var(--s-1); color: var(--c-texto-terciario); }

/* Ficha de un activo, un plan o un proveedor: etiqueta y valor en dos
   columnas, que es como se consulta un registro que ya existe.            */
.contenido-mantenimiento td small,
.contenido-proveedores td small { display: block; margin-top: var(--s-1); color: var(--c-texto-terciario); }

.contenido-mantenimiento dl,
.contenido-proveedores dl {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  gap: var(--s-3) var(--s-6);
  margin: 0;
}

.contenido-mantenimiento dt,
.contenido-proveedores dt { color: var(--c-texto-secundario); font-weight: var(--p-semibold); }

.contenido-mantenimiento dd,
.contenido-proveedores dd { margin: 0; overflow-wrap: anywhere; }

.contenido-mantenimiento section + section,
.contenido-proveedores section + section { margin-top: var(--s-6); }

@media (max-width: 40rem) {
  .contenido-mantenimiento dl,
  .contenido-proveedores dl { grid-template-columns: 1fr; }
  .contenido-mantenimiento dd { margin-bottom: var(--s-3); }
}

@media print {
  .no-imprimir { display: none !important; }
}

/* ===========================================================================
   Navegacion plana, busqueda global y "+ Nuevo" (docs/09 §2.2, §2.3, §2.5)
   ---------------------------------------------------------------------------
   Arriba lo de todos los dias, suelto; debajo las categorias (enlace +
   chevron) agrupadas en "Día a día" y "Administración", y al pie
   Configuracion y Mi cuenta (docs/03, 2026-10-21). No hay
   pestanas encima del contenido: la opcion activa se ve en la lateral.
   =========================================================================== */
.panel__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pie: Configuracion, Mi cuenta y Salir, separados por una linea. Fuera de
   la zona que rueda, siempre a la vista. Un poco mas bajo que el menu: se
   usa menos.                                                              */
.panel__lista--pie {
  flex: none;
  margin-top: var(--s-1);
  padding-top: var(--s-1);
  border-top: 1px solid var(--c-borde);
}

.panel__lista--pie .panel__item {
  min-height: var(--alto-pie-lateral);
  font-size: var(--t-base);
}

/* Rotulo de bloque ("Día a día", "Administración"): agrupa sin competir con
   las categorias (Miller: bloques pequenos que se escanean). */
.panel__bloque {
  /* Proximidad: 24px entre grupos contra 2px entre filas. */
  margin: var(--s-6) 0 var(--s-2);
  padding: 0 var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  font-weight: var(--p-semibold);
  color: var(--c-texto-terciario);
}

/* Lista suelta de arriba (2026-10-21): lo de todos los dias, sin categoria
   que abrir. Mismo item que una categoria, a la altura de una opcion: son
   diez filas y tienen que entrar con las categorias en 768px de alto. */
.panel__lista--suelta .panel__item { min-height: var(--alto-opcion-lateral); }

/* «Día a día» va arriba del todo: sin el margen que separa bloques. */
.panel__bloque--primero { margin-top: 0; }

/* Cifra de pendientes junto a una opcion suelta. Llega vacia y la llena la
   respuesta de la campanita; vacia no ocupa lugar. Azul de la interfaz,
   texto blanco: 4.5:1 o mas en los dos temas. */
.panel__contador {
  flex: none;
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 var(--s-2);
  border-radius: var(--r-full);
  background: var(--c-lateral-acento);
  color: var(--c-lateral);
  font-size: var(--t-xs);
  font-weight: var(--p-semibold);
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.panel__contador:empty { display: none; }

/* Categoria: el nombre lleva a su primera opcion; el chevron, un boton
   aparte, solo despliega. Dos objetivos de 32px con raton (44px con dedo). */
.panel__categoria {
  display: flex;
  align-items: center;
  gap: 2px;
}

.panel__categoria > .panel__item { flex: 1; min-width: 0; }

.panel__desplegar {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--alto-item-lateral);
  height: var(--alto-item-lateral);
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-texto-terciario);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.panel__desplegar:hover { background: var(--c-acento-suave); color: var(--c-texto); }

.panel__desplegar .icono--chevron {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transicion);
}

.panel__desplegar[aria-expanded="true"] .icono--chevron { transform: rotate(180deg); }

.panel__desplegar:focus-visible,
.panel__item:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .panel__desplegar .icono--chevron { transition: none; }
}

/* La categoria de la pantalla actual: texto pleno y su icono en el azul,
   para que se vea donde esta la persona aunque la pliegue. La pildora es
   solo de la opcion actual: una sola marcada (regla 4). */
.panel__item--actual {
  color: var(--c-texto);
  font-weight: var(--p-semibold);
}

/* Las opciones arrancan bajo el texto de la categoria, no bajo su icono. */
/* Las opciones cuelgan de una guia vertical bajo el icono de la categoria:
   se ve que son "de" Cobros sin repetir la palabra.                       */
.panel__opciones {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 var(--s-2) calc(var(--s-3) + 0.625rem - 0.5px);
  padding: 0 0 0 var(--s-2);
  border-left: 1px solid var(--c-borde);
  list-style: none;
}

/* `hidden` lo pone el servidor (categoria cerrada) y lo quita el chevron;
   el `display:flex` de arriba le ganaba al del navegador. */
.panel__opciones[hidden] { display: none; }

/* Opcion: texto mas chico que la categoria; la actual, con la misma pildora
   que un item activo. */
.panel__opcion {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--alto-opcion-lateral);
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-texto-secundario);
  font-size: 0.9375rem;
  line-height: var(--l-ajustado);
  text-decoration: none;
}

.panel__opcion .icono { width: 1.125rem; height: 1.125rem; color: var(--c-texto-terciario); }

.panel__opcion:hover { background: var(--c-acento-suave); color: var(--c-texto); }

.panel__opcion[aria-current="page"] .icono { color: var(--c-acento); }

/* Por dentro (offset negativo): con offset positivo el contorno salia de la
   pastilla y el area que rueda lo recortaba por los lados (2026-10-19). */
.panel__opcion:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: -2px;
}

/* Regreso al indice desde una pantalla de Configuracion (y demas «volver»).
   Pildora en el azul de la interfaz con un chevron de trazo, como los iconos
   del panel. La flecha «←» de texto que traen las plantillas se oculta: se
   veia delgada y suelta (2026-10-21). El chevron va por mascara para tomar
   el color del texto en los dos temas. */
.panel__volver {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-1);
  min-height: 2.25rem;
  margin-bottom: var(--s-2);
  margin-left: calc(var(--s-2) * -1);
  padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: 999px;
  color: var(--c-acento);
  font-size: var(--t-sm);
  font-weight: var(--p-semibold);
  text-decoration: none;
  transition: background var(--transicion);
}
.panel__volver > span[aria-hidden="true"]:first-child { display: none; }
.panel__volver::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--transicion);
}
.panel__volver:hover { background: var(--c-acento-suave); }
.panel__volver:hover::before { translate: -2px 0; }
.panel__volver:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .panel__volver::before { transition: none; } }

/* Indice de Configuracion: grupos en tarjetas, cada opcion con su ayuda. */
.configuracion-grupos {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.configuracion-opciones {
  display: flex;
  flex-direction: column;
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

.configuracion-opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-texto);
  text-decoration: none;
}

.configuracion-opcion:hover { background: var(--c-acento-suave); }

.configuracion-opcion__nombre { font-weight: var(--p-medio); }

.configuracion-opcion__ayuda {
  color: var(--c-texto-secundario);
  font-size: var(--t-sm);
}

.panel__buscar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 15rem;
  min-width: 0;
}

.panel__buscar > .icono {
  position: absolute;
  left: var(--s-3);
  color: var(--c-texto-terciario);
  pointer-events: none;
}

/* El ID prevalece sobre el padding de los campos genericos del panel. */
.cuerpo-panel .panel__buscar #buscar-global {
  width: 100%;
  min-height: var(--alto-control);
  height: var(--alto-control);
  margin: 0;
  padding-block: 0;
  padding-inline: calc(var(--s-3) + 1.5rem) 3.75rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  background: var(--c-fondo);
  font-size: var(--t-sm);
}

.cuerpo-panel .panel__buscar #buscar-global:focus { border-color: var(--c-acento); }

.panel__atajo {
  position: absolute;
  right: var(--s-3);
  padding: 0 var(--s-2);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-sm);
  color: var(--c-texto-terciario);
  font-family: inherit;
  font-size: var(--t-xs);
  pointer-events: none;
}

.panel__nuevo { position: relative; }

.panel__nuevo > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  cursor: pointer;
}

.panel__nuevo > summary::-webkit-details-marker { display: none; }

.panel__nuevo > summary .icono { width: 1rem; height: 1rem; }

.panel__nuevo-menu {
  position: absolute;
  right: 0;
  z-index: 50;
  min-width: 14rem;
  margin: var(--s-2) 0 0;
  padding: var(--s-2);
  list-style: none;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  background: var(--c-fondo-elevado);
  box-shadow: var(--sombra-elevada);
}

.panel__nuevo-menu a {
  display: flex;
  align-items: center;
  min-height: var(--alto-control);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-texto);
  font-size: var(--t-sm);
  text-decoration: none;
}

.panel__nuevo-menu a:hover,
.panel__nuevo-menu a:focus-visible { background: var(--c-acento-suave); }

@media (max-width: 47.99rem) {
  /* En el telefono la ruta la dice el titulo de la pantalla. */
  .panel__ruta { display: none; }
  .panel__buscar { order: 3; flex-basis: 100%; max-width: none; }
  .panel__atajo { display: none; }
  .panel__buscar #buscar-global { padding-inline-end: var(--s-3); }
}

/* --- Bandeja de pendientes y acciones de Inicio --------------------------- */
/* Rediseno del 2026-10-19: la fila entera es el enlace, con un fondo leve al
   pasar y una flecha discreta al final; el unico boton es el de la tarea mas
   urgente (la accion primaria de Inicio). El icono va suelto, sin cuadro de
   color: gris neutro, y en el rojo critico cuando la tarea esta vencida. */
.bandeja { display: grid; gap: var(--s-3); margin-block: var(--s-6); }
.bandeja > h2 { font-size: var(--t-lg); font-weight: var(--p-semibold); }

.bandeja__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-borde-tarjeta);
  border-radius: var(--r-lg);
  background: var(--c-fondo-elevado);
  box-shadow: var(--sombra-sutil);
  overflow: hidden;
}

.bandeja__lista li + li { border-top: 1px solid var(--c-borde-tabla); }

.bandeja__fila {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
  color: var(--c-texto);
  text-decoration: none;
  transition: background var(--transicion);
}

.bandeja__fila:hover { background: var(--c-fila-hover); }

/* El foco se dibuja DENTRO de la fila: la lista recorta lo que sobresale. */
.bandeja__fila:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: -2px;
  border-radius: var(--r-lg);
}

.bandeja__icono { flex: none; display: inline-flex; color: var(--c-texto-terciario); }
.bandeja__fila--critica .bandeja__icono { color: var(--c-critico); }
.cuerpo-panel .bandeja__texto { flex: 1; min-width: 0; color: var(--c-texto); font-weight: var(--p-medio); }

.bandeja__ir {
  flex: none;
  display: inline-flex;
  color: var(--c-texto-terciario);
  transition: transform var(--transicion), color var(--transicion);
}
.bandeja__ir .icono { width: 1.125rem; height: 1.125rem; }
.bandeja__fila:hover .bandeja__ir,
.bandeja__fila:focus-visible .bandeja__ir { color: var(--c-texto); transform: translateX(2px); }

.bandeja__vacia {
  padding: var(--s-6) var(--s-5);
  border: 1px dashed var(--c-borde);
  border-radius: var(--r-lg);
  color: var(--c-texto-secundario);
  text-align: center;
}

.bandeja__vacia strong { display: block; color: var(--c-texto); margin-bottom: var(--s-1); }

.acciones-inicio { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Cifras del tablero que llevan a su lista: la tarjeta entera es el enlace. */
.tablero__dato--enlace { text-decoration: none; color: inherit; }
.tablero__dato--enlace { transition: box-shadow var(--transicion); }
.cuerpo-panel .tablero__dato--enlace:hover { border-color: var(--c-borde-tarjeta); background: var(--c-fondo-elevado); box-shadow: var(--sombra-media); }

/* --- Resultados de la busqueda global ------------------------------------- */
.resultados-busqueda { display: grid; gap: var(--s-6); }
.resultados-busqueda h2 { font-size: var(--t-base); margin-bottom: var(--s-2); }
.resultados-busqueda .bandeja__fila small { display: block; color: var(--c-texto-secundario); }

/* --- Pasos de un flujo con aprobacion (panel/partials/pasos.html) --------- *
   Factura de proveedor y planilla: cada paso con su numero, los cumplidos en
   verde y el actual con el acento. El color nunca va solo: el actual lleva
   peso y aria-current, los cumplidos un texto para lectores de pantalla.   */
.pasos-flujo { display: grid; gap: var(--s-3); justify-items: start; margin-block: var(--s-4); }

.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos__paso {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-texto-secundario);
  font-size: var(--t-sm);
  counter-increment: paso;
}

.pasos__paso::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-6);
  height: var(--s-6);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--r-full);
  background: var(--c-fondo-elevado);
  font-weight: var(--p-semibold);
}

.pasos__paso--hecho { color: var(--c-texto); }

.pasos__paso--hecho::before {
  content: "✓";
  border-color: var(--c-positivo);
  background: var(--c-positivo-suave);
  color: var(--c-positivo);
}

.pasos__paso[aria-current="step"] { color: var(--c-texto); font-weight: var(--p-semibold); }

.pasos__paso[aria-current="step"]::before {
  border-color: var(--c-acento);
  background: var(--c-acento-suave);
  color: var(--c-acento);
}

.pasos__falta { margin: 0; color: var(--c-texto); }

/* ===========================================================================
   Navegacion sin recarga (hx-boost, js/navegacion.js)
   ---------------------------------------------------------------------------
   Cada cambio de pantalla pasa por una transicion de vista: la lateral y la
   barra tienen nombre propio y se quedan quietas; solo el contenido se funde.
   `@view-transition` hace lo mismo en las navegaciones completas (descargas
   aparte), p. ej. al entrar desde el ingreso. Con movimiento reducido, nada
   se anima.
   =========================================================================== */
@view-transition { navigation: auto; }

@media (min-width: 48rem) {
  .panel__lateral { view-transition-name: panel-lateral; }
  .panel__barra { view-transition-name: panel-barra; }
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 140ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* El contenido recibe el foco tras cada cambio de pantalla (lectores de
   pantalla); no lleva anillo porque no es un control.                      */
.panel__contenido:focus { outline: none; }

/* ===========================================================================
   Responsive generico del panel
   ---------------------------------------------------------------------------
   Reglas que valen para cualquier pantalla sin tocar su plantilla: nada
   empuja la pagina a lo ancho, una tabla suelta rueda dentro de si misma y
   con el dedo todo control mide al menos 44px.
   =========================================================================== */
.panel__contenido { overflow-wrap: break-word; }
/* Dentro de una tabla no: con `break-word` una celda apretada partia una fecha
   a la mitad ("08/10/20 / 26"). La tabla rueda dentro de su contenedor.     */
.panel__contenido :is(td, th) { overflow-wrap: normal; }

/* Contenedores que ruedan en horizontal: sin `position: relative`, el texto
   para lectores de pantalla (`.solo-lectores`, absoluto) de las celdas toma
   de referencia un ancestro de afuera y ensancha la pagina entera.        */
.panel__contenido :is(.tabla-contenedor, .calendario, .calendario-operaciones) { position: relative; }

/* Encabezado de pantalla con varias acciones: bajan de linea antes que
   salirse por la derecha (tableta en vertical, con la lateral abierta).    */
.cuerpo-panel .panel__contenido :is(.encabezado-modulo, .negocio-cabecera) { flex-wrap: wrap; }
.cuerpo-panel .panel__contenido .encabezado-modulo .acciones { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; }

.panel__contenido :is(img, video, canvas, iframe) { max-width: 100%; }

@media (max-width: 47.99rem) {
  /* Una tabla sin `.tabla-contenedor` rueda en horizontal dentro de si misma
     en vez de ensanchar la pagina. */
  .panel__contenido table:not(:is(.tabla-contenedor, .calendario, .calendario-operaciones) table) {
    display: block;
    position: relative;
    max-width: 100%;
    overflow-x: auto;
  }

  /* "+ Nuevo" queda a la izquierda de la barra: su menu abre hacia la
     derecha y no se sale de la pantalla. */
  .panel__nuevo-menu {
    right: auto;
    left: 0;
    max-width: calc(100vw - 2 * var(--s-4));
  }

  .panel__buscar #buscar-global { min-height: var(--alto-toque); }
}

@media (max-width: 47.99rem), (pointer: coarse) {
  .cuerpo-panel .panel__contenido :is(
    .boton,
    button,
    select,
    input:not([type=checkbox]):not([type=radio]):not([type=hidden])
  ),
  .cuerpo-panel .panel__barra :is(.boton, button),
  .panel__nuevo-menu a { min-height: var(--alto-toque); }
}

/* El sobretitulo en mayusculas que cada pantalla ponia sobre su titulo
   («COBROS · BOLETAS POR REVISAR») ahora es la ruta de la barra superior.
   Se oculta aqui y no en cada plantilla porque son decenas y las pruebas lo
   usan para leer las migas; en el telefono, sin ruta en la barra, vuelve. */
@media (min-width: 48rem) {
  .cuerpo-panel .panel__contenido :is(.encabezado-modulo, .negocio-cabecera, .negocio-encabezado, .condominio-encabezado) .eyebrow,
  .cuerpo-panel .panel__contenido > .eyebrow,
  .cuerpo-panel .unidad-migas { display: none; }
}

/* --- Persona al pie de la lateral ----------------------------------------
   Tarjeta que lleva a «Mi cuenta» y, a su lado, Salir. Vive dentro de la
   lateral, asi que toma su paleta jade.                                    */
.panel__persona {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-borde);
}

/* El avatar se centra en la misma vertical que los iconos del menu (20px a
   12px del borde del item): 28px de avatar con 8px de relleno. Salir no
   queda pegado al borde derecho (revision del 2026-10-08). */
.cuerpo-panel .panel__persona-enlace {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-md);
  color: var(--c-texto);
  text-decoration: none;
  transition: background var(--transicion);
}

.cuerpo-panel .panel__persona-enlace:hover,
.cuerpo-panel .panel__persona-enlace[aria-current="page"] { background: var(--c-lateral-activo); }

.panel__persona .avatar-usuario {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.6875rem;
  background: var(--c-lateral-activo);
  color: var(--c-lateral-acento);
}

.panel__persona-texto { display: grid; min-width: 0; gap: 1px; }

.panel__persona-nombre,
.panel__persona-rol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel__persona-nombre { font-size: var(--t-sm); font-weight: var(--p-semibold); }
.panel__persona-rol { font-size: var(--t-xs); color: var(--c-texto-terciario); }

.panel__persona form { margin: 0 var(--s-1) 0 0; }

.panel__persona-salir {
  display: grid;
  place-items: center;
  width: var(--alto-control);
  height: var(--alto-control);
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-texto-secundario);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.panel__persona-salir:hover { background: var(--c-lateral-activo); color: var(--c-texto); }
.panel__persona-salir .icono { width: 1.125rem; height: 1.125rem; }

/* --- Pagina Mi cuenta ------------------------------------------------------
   Perfil a la izquierda, opciones a la derecha; una columna en el telefono. */
.cuenta-rejilla { display: grid; gap: var(--s-6); align-items: start; }

@media (min-width: 64rem) {
  .cuenta-rejilla { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
}

.cuenta-perfil {
  display: grid;
  justify-items: start;
  gap: var(--s-1);
  padding: var(--s-6);
}

.cuenta-perfil .cuenta-perfil__avatar {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--s-3);
  font-size: var(--t-xl);
}

.cuerpo-panel .cuenta-perfil__nombre { margin: 0; font-size: var(--t-xl); }
.cuenta-perfil__rol { margin: 0; color: var(--c-texto-secundario); font-size: var(--t-sm); }

.cuenta-perfil__datos {
  display: grid;
  gap: var(--s-4);
  width: 100%;
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-borde);
}

.cuenta-perfil__datos dt { color: var(--c-texto-terciario); font-size: var(--t-xs); }
.cuenta-perfil__datos dd { margin: 2px 0 0; overflow-wrap: anywhere; }

.cuenta-fila__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-md);
  background: var(--c-acento-suave);
  color: var(--c-acento);
}

/* El sol/luna del tema viene con trazo 1.6 en su SVG: el mismo 2 que el resto. */
.cuerpo-panel .selector-tema svg { stroke-width: 2; }

/* Cabecera de marca en la lateral (2026-10-20): el campo de bandas del
   isotipo, como en el ingreso, sobre el nombre del condominio. Es la
   identidad Apto del panel sin pintar la lateral entera: el panel se usa
   todo el dia y en el el rojo es el estado critico (mora, vencido); una
   lateral roja competiria con esas alertas. Solo con la lateral en columna. */
@media (min-width: 80rem) {
  .panel__lateral::before {
    content: "";
    flex: none;
    height: 4.5rem;
    margin: calc(var(--s-4) * -1) calc(var(--s-3) * -1) var(--s-3);
    background: url("../img/apto-logo.afd3d5f30551.svg") center 35% / cover no-repeat;
  }
}

/* Lateral en una pantalla baja (2026-10-21, segunda vuelta): las filas NO
   se achican con el alto de la ventana (eran 26/24px a 768px y el dueno las
   rechazo por chicas). Lo que cede es lo decorativo: la cabecera de bandas
   y el aire de la marca. Si aun asi no entra, rueda `.panel__desplazable`. */
@media (min-width: 80rem) and (max-height: 60rem) {
  .panel__lateral::before { height: 1.75rem; }
}

@media (min-width: 80rem) and (max-height: 52rem) {
  .panel__lateral::before { display: none; }
  .panel__marca { margin-bottom: var(--s-1); padding-block: var(--s-1); }
  .panel__bloque { margin-top: var(--s-4); }
  .panel__bloque--primero { margin-top: 0; }
}

/* Detalle de ticket (auditoria J7): «Responder» bajo la linea de tiempo y
   «Más acciones» plegado (revelacion progresiva). */
.ticket-responder { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-borde); }
.ticket-responder__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ticket-responder__pie .campo { margin: 0; }
.ticket-mas { display: grid; gap: var(--s-4); }
.ticket-mas > summary { min-height: var(--alto-control); display: flex; align-items: center; font-weight: var(--p-semibold); cursor: pointer; }
.ticket-mas h3, #siguiente h3 { margin: 0 0 var(--s-2); font-size: var(--t-base); }

/* Texto que avisa un vencimiento junto a un estado (apps/panel/tonos.py). */
.texto-critico { color: var(--c-critico); }

.menu-acciones { display: inline-flex; }

/* Registrar pago: indicador de paso (gradiente de meta) y buscador. */
.pago-paso { margin: 0 0 var(--s-2); color: var(--c-texto-secundario); font-size: var(--t-sm); font-weight: var(--p-semibold); }
[data-vista-pago][aria-busy="true"] { opacity: 0.6; transition: opacity var(--transicion); }

/* Ficha de unidad: zona de acciones delicadas al pie (auditoria J5). */
.unidad-delicado { margin-top: var(--s-6); border-color: var(--c-critico-suave); }
.unidad-delicado h2 { margin: 0 0 var(--s-2); font-size: var(--t-base); }
@media (max-width: 47.99rem) { .menu-acciones { display: flex; } .menu-acciones > .boton { flex: 1; } }