@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   casa.css — lo propio de Casa, encima del framework.
   Solo usa tokens var(--…) del tema: aquí no se inventa ningún
   color. Lo carga TODA la aplicación (kiosco, acceso y panel):
   además de las tarjetas del kiosco trae los ajustes de tableta
   que el framework exportado no cubre — el framework no tiene ni
   una media query.
   ═══════════════════════════════════════════════════════════ */

/* ── Marca y fecha en la barra superior ─────────────────────── */
.casa-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }

.casa-fecha {
  color: var(--ink-dim);
  font-size: var(--fs-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── KPIs del día: 4 en fila, valor más grande ──────────────────
   Con .ui delante para igualar la especificidad de .ui .ui-shell-grid
   del framework (esta hoja carga después, así que gana). */
.ui .casa-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.casa-kpis .ui-stat-value { font-size: calc(var(--fs-stat) * 1.25); }

/* ── Encabezado de sección ──────────────────────────────────── */
.casa-seccion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}

.casa-seccion-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-transform);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

/* ── Lista de tareas: tarjetas grandes y táctiles ───────────── */
.casa-lista { display: flex; flex-direction: column; gap: var(--space-3); }

/* Sin flex-wrap a propósito (hasta el corte de teléfono): con envoltura,
   flex NO encoge el cuerpo, lo baja de renglón — y todas las tarjetas
   pasaban a dos pisos en la tableta. La red de seguridad contra el
   desbordamiento está en .casa-tarea-lado, que sí encoge y envuelve. */
.casa-tarea {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 88px;
  padding: var(--space-3) var(--space-4);
  background: var(--panel-bg);
  border: var(--panel-border-width) solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.casa-tarea:hover { border-color: var(--line-strong); }
.casa-tarea:active { border-color: var(--accent); }

/* Sin esto, la tableta entiende el doble toque como "acercar la página"
   (zoom) y se come los clics: el doble toque para palomear no llegaba.
   Va en TODA la página (pellizcar para acercar sigue funcionando). */
html, body { touch-action: manipulation; }
.casa-tarea,
.casa-persona,
.ui .ui-btn { touch-action: manipulation; }

/* Casilla visual grande: el estado se ve desde lejos.
   Además es el BOTÓN de palomear al primer toque. */
.casa-check {
  flex: none;
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: transparent;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* Área de toque generosa alrededor del cuadro (el dibujo no cambia):
   un dedo no tiene que atinarle a 26px. */
/* top/right/bottom/left y no `inset`: el shorthand es Chrome 87+ y las
   tabletas viejas lo descartan (y con él, el área de toque). */
.casa-check::after { content: ""; position: absolute; top: -14px; right: -14px; bottom: -14px; left: -14px; }

.casa-tarea.is-hecha .casa-check { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.casa-tarea.is-no .casa-check { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

/* Tarea EN CURSO: la TARJETA entera cambia de color (barra lateral + fondo)
   y corre un contador; nada de letreros largos que se cortaban en tableta. */
.casa-tarea.is-curso {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm);
}

.casa-tarea.is-curso .casa-check {
  border-color: var(--accent);
  color: var(--accent);
  font-size: 15px;
}

.casa-curso {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: var(--fw-semibold);
}

/* El min-width NO puede ser 0: con flex:1 y min-width:0 el cuerpo se
   encogía hasta caber una letra por renglón cuando el lado (badges +
   botones) no dejaba sitio, y el título se pintaba en vertical. Con un
   mínimo real, o cabe al lado, o la tarjeta parte renglón como debe. */
.casa-tarea-cuerpo { flex: 1 1 auto; min-width: min(200px, 100%); }

.casa-tarea-titulo {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--ink-strong);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.casa-tarea.is-hecha .casa-tarea-titulo { color: var(--ink-dim); text-decoration: line-through; }

.casa-tarea-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--fs-body);
  color: var(--ink-dim);
}

.casa-tarea-motivo { color: var(--warn); }

/* Pegado a la derecha y capaz de ENCOGER y envolverse él solo: esa es la
   red de seguridad. Antes era flex:none y, cuando el título no dejaba
   sitio, el lado se salía de la tarjeta y de la pantalla — había que
   descubrir el deslizamiento lateral para llegar al último botón. Ahora,
   en el peor caso, el lado se parte en dos renglones dentro de la
   tarjeta. El min-width automático (el botón más ancho) es el suelo. */
.casa-tarea-lado {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-left: auto;
  max-width: 100%;
}

/* Cuando el lado encoge, que baje de renglón el botón ENTERO y no que se
   parta el texto del letrero ("SIN / JUSTIFICAR" en dos pisos). */
.casa-tarea-lado .ui-badge,
.casa-tarea-lado .ui-btn { white-space: nowrap; }

.casa-tarea-hora {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--ink-dim);
}

/* ── Rejilla de personas (selector y asistencia): ≥ 96px ────── */
.casa-avatares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-3);
}

.casa-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--surface-2);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: var(--ink);
}

.casa-persona:hover { border-color: var(--accent); }
.casa-persona.is-sel { border-color: var(--accent); background: var(--accent-soft); }

.casa-persona-avatar { min-width: 56px; width: 56px; height: 56px; font-size: 20px; }

.casa-persona-nombre {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.casa-persona-estado {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-faint);
}

/* ── Selector de "quién": chips tocables (sustituye al <select>) ──
   Con margen y no gap: debe verse bien también en la tableta vieja. */
.casa-quien { display: flex; flex-wrap: wrap; }

.casa-quien-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  margin: 0 8px 8px 0;
  background: var(--surface-2);
  border: var(--border-width) solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.casa-quien-chip .ui-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 10px;
  margin-right: 8px;
}

.casa-quien-chip:hover { border-color: var(--accent); }

.casa-quien-chip.is-sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink-strong);
  font-weight: var(--fw-semibold);
}

/* ── Deshacer palomeo: botón flotante 60 segundos ─────────────── */
.casa-deshacer {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  box-shadow: var(--shadow-md);
}

/* ── Teclado del PIN del kiosco ───────────────────────────────── */
.casa-pin-puntos {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.casa-pin-puntos span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  margin: 0 6px;
}

.casa-pin-puntos span.is-lleno {
  background: var(--accent);
  border-color: var(--accent);
}

.casa-pin-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.casa-pin-teclado button {
  font: inherit;
  font-size: 22px;
  font-weight: var(--fw-semibold);
  padding: 14px 0;
  background: var(--surface-2);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.casa-pin-teclado button:active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Timbre: marco destellando alrededor de toda la pantalla ──── */
@keyframes casaTimbre {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
  50% { box-shadow: inset 0 0 0 14px var(--accent); }
}

.casa-timbre-marco {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  animation: casaTimbre 0.5s ease-in-out 8;
}

/* Mientras el timbre siga sin atenderse, el marco no deja de destellar. */
.casa-timbre-marco.es-fijo {
  animation: casaTimbre 0.6s ease-in-out infinite;
}

/* Diálogo del timbre: mensaje bien grande (se lee desde lejos) y un solo
   botón, gordo, imposible de fallar con el dedo. */
#dlgTimbre .ui-dialog {
  width: min(560px, 100%);
  border: 2px solid var(--accent);
}

.casa-timbre-mensaje {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}

.casa-timbre-boton {
  width: 100%;
  font-size: 1.2rem;
  padding: var(--space-4);
}

/* ── Calendario del kiosco (próximos días) ──────────────────── */
#dlgCalendario .ui-dialog { width: min(640px, 100%); }

.casa-cal-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-3) 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.casa-cal-dia:first-child { margin-top: 0; }

/* ── Diálogos del kiosco ────────────────────────────────────── */
/* Los que llevan rejilla de personas piden más ancho que los 440px
   del diálogo estándar. */
#dlgQuien .ui-dialog,
#dlgMotivo .ui-dialog,
#dlgAsistencia .ui-dialog,
#dlgDetalle .ui-dialog { width: min(680px, 100%); }

/* Botones de acción del diálogo de detalle (un toque en la tarjeta) */
.casa-detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.casa-detalle-acciones:empty { margin: 0; }

.casa-dialogo-tarea {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

/* Un diálogo NUNCA debe pasar del alto de la pantalla.
   El .ui-dialog del framework no tiene tope ni scroll, y su contenedor lo
   centra (place-items: center): en cuanto el contenido crece —el checador
   con varias personas, o la tableta acostada— el diálogo se recorta ARRIBA
   Y ABAJO a la vez, así que quedan fuera de alcance los primeros avatares
   y el botón Cerrar. Con esto la lista se desliza y el pie siempre se ve.

   El tope es 100% del hueco de la rejilla, NO 100vh ni 100dvh:
   · en Android, 100vh es el viewport GRANDE (el de las barras escondidas),
     así que con la barra del navegador a la vista el diálogo salía MÁS ALTO
     que lo que se ve y se recortaba arriba y abajo;
   · el WebView viejo de la tableta ni siquiera entiende dvh y se quedaba
     con ese 100vh de respaldo;
   · con el teclado en pantalla abierto (escribir un comentario) ninguna de
     las dos unidades encoge, y el diálogo se iba detrás del teclado.
   El contenedor de todos los diálogos está fijo a los cuatro bordes con su
   propio padding, así que ese 100% ES exactamente el alto disponible, sea
   cual sea el navegador. El viewport de las páginas lleva además
   interactive-widget=resizes-content para que ese hueco encoja con el
   teclado.

   Para que ese 100% signifique lo que debe hace falta la regla de abajo: sin
   ella la rejilla crea una fila AUTOMÁTICA, la fila mide lo que mide el
   contenido y el porcentaje se acababa midiendo contra el propio diálogo —
   es decir, no topaba nada. Con una fila de 1fr la referencia pasa a ser la
   pantalla. (No se puede poner en el style= de cada diálogo porque son
   dieciocho cajas repetidas en seis archivos; aquí se arregla una vez.) */
.ui [role="dialog"][aria-modal="true"] {
  grid-template-rows: minmax(0, 1fr);
}

.ui .ui-dialog {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  max-width: 100%;
}

/* Varios diálogos meten el cuerpo Y el pie dentro de un <form> (nueva
   tarea, nuevo rol, nuevo usuario). Ese formulario es entonces el único
   hijo que puede repartir el alto, y sin esto no lo repartía: el cuerpo
   nunca se deslizaba y el pie —con el botón Guardar— se salía por debajo
   del diálogo, fuera de la pantalla y sin manera de alcanzarlo. Pasaba en
   cuanto la tableta se quedaba con menos de ~600 px de alto (acostada, o
   con el teclado abierto). */
.ui .ui-dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ui .ui-dialog-head,
.ui .ui-dialog-foot { flex: none; }

.ui .ui-dialog-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Al llegar al final de la lista, el gesto no debe seguir arrastrando la
     página de atrás (en tableta se sentía como que el diálogo "se movía"). */
  overscroll-behavior: contain;
}

/* La descripción no debe estirar la tarjeta: una línea y elipsis. */
.casa-tarea-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(52ch, 100%);
}

/* ── TABLETAS Y PANTALLAS MEDIANAS: modo compacto ───────────────
   El diseño grande ("legible a 3 metros") es para la tele del kiosco.
   En una tableta —sobre todo en vertical— esas tarjetas de 88px con
   título de 24px dejan ver apenas cuatro tareas. Aquí se baja todo
   para que quepan el doble, sin quitar nada de información. */
@media (max-width: 1200px), (orientation: portrait) {
  .casa-fecha { display: none; }

  /* Cuerpo y barra superior con menos aire.
     La barra TIENE que poder envolver: con los botones del kiosco no cabe
     todo en 800px y, con alto fijo, se salía encimándose. */
  .ui .ui-shell-body { padding: var(--space-3); }
  .ui .ui-shell-top {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
    gap: var(--space-2);
    row-gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .ui .ui-shell-actions { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  .ui .ui-shell-actions .ui-btn { padding: 7px 11px; }

  /* "No hay tareas para hoy" no necesita media pantalla */
  .casa-lista .ui-empty { padding: var(--space-4) var(--space-3); }
  .casa-lista .ui-empty-icon { width: 34px; height: 34px; font-size: 17px; margin-bottom: var(--space-2); }

  /* KPIs: siguen los 4 en fila, pero bajitos */
  .ui .casa-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .ui .casa-kpis .ui-stat { padding: var(--space-2) var(--space-3); }
  .casa-kpis .ui-stat-value { font-size: 22px; }

  .casa-seccion { margin: var(--space-3) 0 var(--space-2); }

  /* Tarjeta de tarea compacta: ~58px en vez de ~88px (o ~140px cuando
     el lado se iba a un segundo renglón) */
  .casa-lista { gap: var(--space-2); }
  .casa-tarea {
    min-height: 0;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }
  .casa-tarea-titulo { font-size: 17px; line-height: 1.3; }
  .casa-tarea-meta { font-size: var(--fs-label); gap: var(--space-1) var(--space-2); margin-top: 2px; }
  .casa-tarea-desc { max-width: min(38ch, 100%); }
  /* Motivo/justificación largos: puntos suspensivos, no encimarse. El texto
     completo vive en el diálogo de detalle (un toque). */
  .casa-tarea-motivo {
    max-width: min(34ch, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .casa-check { width: 26px; height: 26px; font-size: 17px; border-width: 2px; }
  .casa-tarea-hora { font-size: 14px; letter-spacing: 0; }

  /* El lado (letrero + acción) se queda en el MISMO renglón mientras quepa:
     bajarlo era lo que hacía crecer tanto la tarjeta en vertical. Si no
     cabe, envuelve (base) en vez de salirse de la pantalla. */
  .casa-tarea-lado { gap: var(--space-2); margin-left: auto; }
  .casa-tarea-lado .ui-btn { padding: 6px 10px; font-size: var(--fs-label); }
  .casa-tarea-lado .ui-badge { font-size: 10px; }

  .casa-persona-avatar { min-width: 48px; width: 48px; height: 48px; font-size: 18px; }
  .casa-avatares { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* La primera columna de las tablas "work" del framework está pensada para
   una CASILLA de selección de 34px (.ui-table-work td:first-child
   {width:34px; text-align:center}). En Casa la primera columna es el
   TÍTULO: sin esto se aplastaba a una palabra por renglón, también en
   monitor. */
.ui .ui-table-work td:first-child {
  width: auto;
  text-align: left;
}

/* ── Filas de tarea en las tablas del panel ─────────────────────
   La fila trae DOS controles: la acción principal y "⋯ Acciones", que abre
   la hoja con todo lo demás. Antes venían hasta siete botones: la celda
   los envolvía en cuatro renglones, la tabla se estiraba y las últimas
   acciones quedaban fuera de la pantalla. Los márgenes van en los hijos,
   no gap: la tableta vieja lo ignora (ver .sin-gap). */
/* nowrap y NO un min-width en porcentaje: dentro de una tabla de ancho
   automático, un min-width con % es circular y el navegador lo ignora, así
   que la columna se quedaba del ancho de un botón y "Acciones" caía debajo
   de "Hecha". Con nowrap el ancho mínimo de la celda es la pareja entera y
   la tabla se lo reserva. Son dos botones: no hay riesgo de que se salgan
   (y en teléfono vuelven a envolver, más abajo). */
.casa-acciones-fila {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.casa-acciones-fila > * {
  margin: 2px 0 2px 6px;
  white-space: nowrap;
}

/* Sin sangría delante del primero: en tableta la celda se pinta como
   tarjeta y el botón quedaba despegado de la etiqueta de su columna. */
.casa-acciones-fila > :first-child { margin-left: 0; }

/* La hoja de acciones lleva icono + nombre + explicación: con los 440px
   del diálogo estándar cada nota se partía en tres renglones. */
#dlgAcciones .ui-dialog { width: min(520px, 100%); }

/* Botón "⋯ Acciones" / "⋯ Resolver": lo comparten la fila del panel y la
   tarjeta atrasada del kiosco. Los tres puntos van CON la palabra, no
   solos: un icono suelto no dice qué hace y en la tableta nadie lo toca. */
.casa-mas {
  display: inline-flex;
  align-items: center;
}

/* margin y no gap: el WebView viejo de la tableta ignora el gap de flex */
.casa-mas-punto {
  font-size: 17px;
  line-height: 1;
  margin-right: 6px;
}

/* La fila entera es el control: tocarla abre la hoja de acciones. Es la
   forma de escoger una tarea sin llenar la tabla de botones. */
.casa-fila-tarea { cursor: pointer; }
.ui .ui-table tbody tr.casa-fila-tarea:hover { background: var(--surface-inset); }

/* ── Hoja de acciones de una tarea (dlgAcciones) ────────────────
   Cada acción en su renglón, con icono y con lo que hace explicado en
   una línea. Cabe entera, se lee de un vistazo y con el dedo no hay que
   atinarle a un botón de 11px entre otros seis. */
.casa-hoja-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-label);
  color: var(--ink-dim);
}

.casa-hoja {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.casa-hoja-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.casa-hoja-item:hover,
.casa-hoja-item:focus-visible {
  background: var(--surface-inset);
  border-color: var(--line);
}

.casa-hoja-icono {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  font-size: 16px;
  line-height: 1;
}

/* min-width:0 para que una nota larga corte en vez de estirar el diálogo */
.casa-hoja-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.casa-hoja-texto b {
  font-weight: var(--fw-semibold);
  color: var(--ink-strong);
}

.casa-hoja-texto .ui-meta { font-size: var(--fs-label); }

.casa-hoja-item.is-primary .casa-hoja-icono {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent);
  color: var(--accent);
}

.casa-hoja-item.is-danger .casa-hoja-icono {
  background: var(--danger-soft);
  color: var(--danger);
}

.casa-hoja-item.is-danger .casa-hoja-texto b { color: var(--danger); }

/* Columna de fecha de la lista de pendientes: no se parte. */
.casa-celda-fecha { white-space: nowrap; }

/* El título de la tarea es lo que se lee primero: no puede quedar de
   dos palabras de ancho porque la botonera se llevó la tabla. */
.casa-celda-tarea { min-width: 210px; }

/* Descripción y justificación dentro de una celda: dos renglones y basta.
   Sin esto una descripción larga estiraba la fila a media pantalla y
   dejaba las demás columnas de una palabra de ancho. */
.casa-celda-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 46ch;
}

/* La rejilla de tarjetas del panel no traía separación abajo, así que el
   siguiente bloque quedaba pegado a ella y parecía que se encimaban. */
.ui .ui-dash { margin-bottom: var(--gap); }

/* Cuatro tarjetas de resumen en fila piden ~190px cada una. Por debajo de
   eso se ponen de dos en dos: es lo que hacía que en la tableta salieran
   flacas, con los títulos partidos y de alturas distintas. */
@media (max-width: 780px) {
  .ui .ui-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .ui .ui-dash { grid-template-columns: 1fr; }
}

/* ── Tabletas chicas / vertical angosto ─────────────────────────
   Sin el nombre "CASA" cabe una fila menos de barra, y con los KPIs
   siempre en 4 columnas se ganan ~70px de alto. */
@media (max-width: 900px) {
  /* Solo el de la barra superior: el del menú lateral sí se queda. */
  .ui .ui-shell-top .ui-shell-name { display: none; }
  /* Que los botones compartan renglón con el logotipo en vez de bajarse
     todos juntos: así la barra son dos filas y no tres. La base 0 es la
     clave: flex reparte los renglones ANTES de encoger, así que con base
     automática el bloque entero se iba abajo aunque cupiera encogido. */
  .ui .ui-shell-actions { flex: 1 1 0; min-width: 0; }
  .ui .ui-shell-actions .ui-btn { padding: 6px 9px; font-size: var(--fs-label); }
  .ui .casa-kpis .ui-stat { padding: var(--space-2); }
  .casa-kpis .ui-stat-value { font-size: 19px; }
  .ui .casa-kpis .ui-stat-label { font-size: 10px; letter-spacing: 0; }

  .casa-tarea { gap: var(--space-2); }
  .casa-tarea-titulo { font-size: 15px; }
  .casa-tarea-lado .ui-btn { padding: 5px 8px; font-size: 10px; }
  .casa-check { width: 24px; height: 24px; font-size: 15px; }

  /* Un solo renglón de datos: lo que no cabe se recorta en vez de
     empujar la tarjeta a tres pisos. Ceden la descripción y el motivo. */
  .casa-tarea-meta { flex-wrap: nowrap; overflow: hidden; }
  .casa-tarea-meta > * { flex: none; }
  .casa-tarea-desc,
  .casa-tarea-motivo { flex: 0 1 auto; min-width: 0; max-width: none; }

  /* "Instalar app" pasa a icono: en la barra del kiosco esos 100px
     eran los que mandaban todo a un segundo renglón. */
  .ui .ui-shell-actions [data-instalar] { font-size: 0; padding: 6px 8px; }
  .ui .ui-shell-actions [data-instalar]::after { content: "⤓ APP"; font-size: 10px; }
  .ui .ui-clock { font-size: 12px; }
}

/* ── Teléfonos: aquí sí hay que envolver ────────────────────── */
@media (max-width: 480px) {
  .ui .casa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Aquí la tarjeta del panel sí puede ser más angosta que la pareja de
     botones: que envuelvan antes que salirse. */
  .casa-acciones-fila { flex-wrap: wrap; justify-content: flex-start; }
  .casa-tarea { flex-wrap: wrap; }
  .casa-tarea-cuerpo { min-width: min(150px, 100%); }
  /* En teléfono el lado baja bajo el título, alineado con él (no a la
     derecha): así se lee como una segunda línea de la misma tarjeta. */
  .casa-tarea-lado {
    justify-content: flex-start;
    margin-left: calc(24px + var(--space-2));
  }
}

/* ── Menú del panel en tableta: barra fija, sin cajón ────────────
   En monitor se queda el menú lateral de siempre. En tableta (o en
   vertical) el lateral se retira y mandan las pestañas de inc_admin.php,
   que están SIEMPRE visibles.

   Por qué no un cajón con hamburguesa: abrirlo dependía del atributo
   data-layout, del CSS del framework, del click de ui.js, de nuestro JS y
   del atributo hidden — y sincronizaNav() de ui.js, en modo hamburguesa,
   solo sabe ocultar el menú, nunca volver a mostrarlo. Cinco piezas para
   un menú es una invitación a que no funcione. Esto es HTML y CSS: no hay
   estado que se pueda quedar a medias. */
.casa-tabs { display: none; }

@media (max-width: 1100px), (orientation: portrait) {
  /* Fuera el lateral y todo su aparato. !important porque ui.js escribe
     el atributo hidden por su cuenta y aquí manda el CSS. */
  .ui .ui-shell-nav,
  .ui .ui-shell-veil,
  .ui .ui-burger { display: none !important; }

  .casa-tabs {
    display: flex;
    gap: var(--space-1);
    flex: none;
    padding: 0 var(--space-2);
    background: var(--topbar-bg);
    border-bottom: var(--border-width) solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .casa-tabs::-webkit-scrollbar { display: none; }

  .casa-tab {
    flex: none;
    padding: 11px 13px;
    color: var(--ink-dim);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    border-bottom: 3px solid transparent;
    -webkit-tap-highlight-color: transparent;
  }

  .casa-tab.is-activa {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  .casa-tab:active { background: var(--surface-2); }

  .casa-tab-salir { margin-left: auto; color: var(--ink-faint); }
}

/* Los títulos de las tarjetas del panel NO se parten a media palabra.
   El framework les pone overflow-wrap:anywhere, que está bien para el
   texto que escribe la gente pero deja "Cumplimi/ento" y "COMPLETAD/AS"
   en cuanto la columna se estrecha. */
@media (max-width: 1200px), (orientation: portrait) {
  .ui .ui-dash-head,
  .ui .ui-dash-card .ui-stat-label,
  .ui .ui-panel-title { overflow-wrap: normal; word-break: normal; }
}

/* ── Tablas del panel en pantalla angosta: filas como tarjetas ──
   Antes la tabla conservaba sus columnas y se deslizaba de lado dentro
   de su marco; en la tableta eso se veía como "la tabla está cortada" y
   había que descubrir el gesto. Ahora cada FILA se apila como tarjeta:
   la primera celda hace de título y las demás llevan delante la etiqueta
   de su columna (el data-t lo copia js/admin.js desde el <th>).
   Todo visible, nada que deslizar. */
@media (max-width: 1100px), (orientation: portrait) {
  .ui .ui-table-wrap { overflow-x: visible; }
  .ui table.ui-table { display: block; width: 100%; }
  .ui .ui-table thead { display: none; }
  .ui .ui-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ui .ui-table tbody tr {
    display: block;
    background: var(--panel-bg);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
  }
  .ui .ui-table tbody td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    padding: 3px 0;
    border: 0;
    height: auto;      /* el framework fija la altura de fila y aquí encimaba el texto */
    width: auto;       /* ui-table-work aprieta la primera columna a 34px */
    text-align: left;
    font-size: var(--fs-body);
    white-space: normal !important; /* gana a los style="nowrap" de las celdas de acciones */
    overflow-wrap: anywhere;
  }
  .ui .ui-table tbody td::before {
    content: attr(data-t);
    font-size: var(--fs-label);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .4px;
  }
  /* Todos los hijos de la celda van en la columna del dato y sin estirarse:
     sin esto la rejilla los alterna (el segundo hijo caía bajo la etiqueta)
     y los badges se pintaban de borde a borde. */
  .ui .ui-table tbody td > * { grid-column: 2; justify-self: start; min-width: 0; }

  /* Celdas de acciones: los botones en fila, envolviendo si no caben. */
  .ui .ui-table tbody td:has(> .ui-btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .ui .ui-table tbody td:has(> .ui-btn)::before { flex: 0 0 96px; }
  /* La primera celda es el título de la tarjeta: ancho completo y sin
     etiqueta. Las celdas sin data-t (colspan de "sin datos") igual. */
  .ui .ui-table tbody td:first-child,
  .ui .ui-table tbody td:not([data-t]) { display: block; }
  .ui .ui-table tbody td:first-child::before,
  .ui .ui-table tbody td:not([data-t])::before { content: none; }

  .ui .ui-table .ui-btn {
    padding: 6px 10px;
    font-size: var(--fs-label);
    margin: 2px 6px 2px 0;
  }
}

/* ── Pantalla de acceso en vertical ─────────────────────────────
   .ui-auth del framework es una rejilla fija de dos columnas SIN media
   query: en una tableta en vertical la tarjeta de acceso (400px) se lleva
   casi todo y el panel de marca queda de un carácter de ancho, con el
   texto escrito en vertical, letra por renglón. En angosto se apila:
   el panel verde es decorativo, así que se retira y manda la tarjeta. */
@media (max-width: 860px), (orientation: portrait) {
  .ui .ui-auth { grid-template-columns: 1fr; }
  .ui .ui-auth-aside { display: none; }
  .ui .ui-auth-main { padding: var(--space-4); }
  .ui .ui-auth-card { max-width: 460px; }
}

/* ── Modo pantalla completa / app instalada ─────────────────────
   Sin barras del navegador ganamos alto: la lista aprovecha todo. */
@media (display-mode: fullscreen), (display-mode: standalone) {
  .ui .ui-shell { min-height: 100dvh; }
}

/* ── Tabletas viejas: sin gap de FLEXBOX (Chrome < 84) ──────────
   js/instalar.js lo detecta midiendo y pone .sin-gap en <html>; aquí
   van los márgenes de respaldo de los contenedores flex que se veían
   amontonados (todo pegado). El gap de GRID funciona desde antes:
   kpis, avatares y tablas-tarjeta no necesitan nada. */
.sin-gap .casa-lista > * + * { margin-top: var(--space-3); }
.sin-gap .casa-tarea > * + * { margin-left: var(--space-3); }
.sin-gap .casa-tarea-meta > * { margin: 2px var(--space-2) 2px 0; }
.sin-gap .casa-tarea-lado > * + * { margin-left: var(--space-2); }
.sin-gap .casa-seccion > * + * { margin-left: var(--space-3); }
.sin-gap .casa-detalle-acciones > * { margin: 0 var(--space-2) var(--space-2) 0; }
.sin-gap .casa-brand > * + * { margin-left: 10px; }
.sin-gap .casa-persona > * + * { margin-top: var(--space-2); }
.sin-gap .casa-tabs .casa-tab + .casa-tab { margin-left: var(--space-1); }
/* Hoja de acciones del panel */
.sin-gap .casa-hoja > * + * { margin-top: var(--space-1); }
.sin-gap .casa-hoja-item > * + * { margin-left: var(--space-3); }
.sin-gap .casa-hoja-meta > * { margin: 2px var(--space-2) 2px 0; }
.sin-gap .ui .ui-shell-actions > * + * { margin-left: var(--space-2); }
.sin-gap .ui .ui-dialog-foot > * + * { margin-left: var(--space-2); }
.sin-gap .ui .ui-toolbar > * + * { margin-left: var(--space-3); }
/* Tablas-tarjeta del panel (tbody se vuelve flex en angosto) */
.sin-gap .ui .ui-table tbody tr + tr { margin-top: var(--space-2); }

/* ═══ Encabezado del kiosco (rediseño 7 ago 2026) ═══════════════
   Antes TODO (marca, fecha, reloj, utilidades y 5 botones grandes)
   peleaba por una sola barra y en tableta envolvía en dos o tres
   renglones amontonados. Ahora: una fila DELGADA que nunca envuelve
   + una barra de acciones propia con botones parejos. La separación
   es con MÁRGENES, no con gap: el WebView viejo de la tableta ignora
   el gap de flex y lo dejaba todo pegado. Va al FINAL del archivo a
   propósito: debe ganarle a las media queries de arriba. */
.ui .ui-shell-top.casa-top {
  flex-wrap: nowrap;
  height: auto;
  min-height: 50px;
  gap: 0;
  padding: var(--space-2) var(--space-4);
}

.casa-top > * + * { margin-left: var(--space-3); }
.casa-top-hueco { flex: 1 1 0; min-width: 0; }
.casa-top .casa-fecha { flex: 0 1 auto; }
.casa-top .ui-clock { flex: none; }

.casa-top-utiles { display: flex; align-items: center; flex: none; }
.casa-top-utiles > * + * { margin-left: var(--space-2); }

/* Utilidades chicas y serenas: no compiten con las acciones. */
.ui .casa-top-utiles .ui-btn {
  min-height: 0;
  padding: 7px 11px;
  font-size: 11px;
}

/* Barra de acciones: los botones se reparten el ancho por igual,
   sin MAYÚSCULAS gritonas y con alto táctil de verdad. */
.casa-acciones {
  display: flex;
  align-items: stretch;
  padding: var(--space-3) var(--space-4) 0;
}

.casa-acciones > * + * { margin-left: var(--space-2); }

.ui .casa-acciones .ui-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  min-height: 46px;
  padding: 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 1200px), (orientation: portrait) {
  .ui .ui-shell-top.casa-top { padding: var(--space-2) var(--space-3); }
  .casa-acciones { padding: var(--space-2) var(--space-3) 0; }
  .ui .casa-acciones .ui-btn { font-size: 13px; min-height: 42px; }
}

@media (max-width: 900px) {
  .casa-top > * + * { margin-left: var(--space-2); }
  .ui .casa-acciones .ui-btn { font-size: 12px; min-height: 40px; padding: 0 var(--space-1); }
}

/* Teléfonos: dos por renglón en vez de cuatro aplastados. */
@media (max-width: 520px) {
  .casa-acciones { flex-wrap: wrap; }
  .ui .casa-acciones .ui-btn { flex: 1 1 45%; margin: 0 0 var(--space-2); }
  .ui .casa-acciones .ui-btn + .ui-btn { margin-left: 0; }
  .ui .casa-acciones .ui-btn:nth-child(even) { margin-left: var(--space-2); }
}

/* El botón de instalar pasa a icono también en la barra nueva. */
@media (max-width: 900px) {
  .ui .casa-top-utiles [data-instalar] { font-size: 0; padding: 6px 8px; }
  .ui .casa-top-utiles [data-instalar]::after { content: "⤓ APP"; font-size: 10px; }
}