/* s3 · Pieza 1 «Uso correcto» (24-oct-2026): bloqueo a pantalla completa, franja fija y sección de la ficha.
   Solo tokens de css/app.css (claro y oscuro salen solos). Prefijo .au-. Teléfono primero (390 px): botones de 48 px, sin scroll horizontal. */

.bloqueo.au-bloqueo { z-index: 4550; }
.au-caja { background: var(--superficie); border-radius: 20px; box-shadow: var(--sombra-alta); border: 1px solid var(--linea); padding: 22px 18px; margin: auto; width: 100%; max-width: 560px; min-width: 0; }
.au-n { font-size: 12px; font-weight: 650; color: var(--texto-3); margin-bottom: 6px; }
.au-sobre { font-size: 12px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.1em; }
.au-sobre.au-rojo { color: var(--rojo-texto); background: var(--rojo-fondo); display: inline-block; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.06em; }
.au-caja h2 { font-size: 22px; letter-spacing: -0.02em; margin: 8px 0 6px; line-height: 1.2; overflow-wrap: anywhere; }
.au-trabajo { font-size: 15px; color: var(--texto-2); margin: 0 0 10px; overflow-wrap: anywhere; line-height: 1.45; }
.au-trabajo b { color: var(--texto); }
.au-cita { font-size: 14px; color: var(--texto-2); background: var(--campo); border-radius: var(--radio-chico); padding: 8px 12px; margin: 0 0 10px; overflow-wrap: anywhere; }
.au-cuando { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--texto-2); }
.au-cuando b { color: var(--texto); display: inline-block; min-width: 110px; }
.au-riesgo { font-size: 15px; line-height: 1.5; color: var(--rojo-texto); background: var(--rojo-fondo); border-radius: var(--radio-chico); padding: 10px 12px; margin: 0 0 14px; }
.au-ayuda { margin: 0 0 12px; }

.au-campo { display: grid; gap: 6px; margin: 0 0 12px; font-size: 14px; border: 0; padding: 0; min-width: 0; }
.au-campo > span, fieldset.au-campo > legend { font-weight: 650; font-size: 14px; padding: 0; }
.au-campo textarea, .au-campo input[type="text"], .au-campo input:not([type]), .au-campo input[type="datetime-local"], .au-campo select, .au-persona select {
  width: 100%; box-sizing: border-box; min-height: 46px; font-size: 16px; padding: 10px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  background: var(--campo); color: var(--texto); font-family: inherit; min-width: 0;
}
.au-campo textarea { resize: vertical; }
.au-persona { margin-top: 8px; display: grid; gap: 6px; }
.au-persona[hidden], .au-otro[hidden], .au-descartar[hidden], .au-franja[hidden] { display: none; }

.au-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.au-op { min-height: 52px; padding: 8px 10px; font: inherit; font-size: 15px; font-weight: 600; text-align: center; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); cursor: pointer; line-height: 1.2; }
.au-op.on { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
/* 28-oct: «La tomo al terminar la OT X» ocupa toda la fila */
.au-op.au-op-ancha { grid-column: 1 / -1; }
.au-al-terminar { margin: 4px 0 12px; font-size: 14px; color: var(--texto-2); background: var(--campo); border-radius: var(--radio-chico); padding: 10px 12px; }
.au-escribir[hidden] { display: none; }
@media (max-width: 380px) { .au-ops { grid-template-columns: 1fr; } }

.au-caja .btn { width: 100%; min-height: 50px; margin-top: 4px; }
.au-caja .btn[disabled] { opacity: 0.45; }
.au-link { display: block; width: 100%; margin: 12px 0 4px; padding: 10px; background: none; border: 0; font: inherit; font-size: 14px; color: var(--texto-2); text-decoration: underline; cursor: pointer; min-height: 44px; }
.au-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.4; }
.au-check input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--acento, #12b5a5); }
.au-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .au-fechas { grid-template-columns: 1fr; } }
.au-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.au-chip { min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); font: inherit; font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; }

.au-cola { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.au-cola li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--campo); border-radius: var(--radio-chico); padding: 8px 8px 8px 12px; min-width: 0; }
.au-cola li > div { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.au-cola li .small { display: block; color: var(--texto-3); }
.au-cola .btn { width: auto; min-width: 84px; margin: 0; flex: 0 0 auto; }

/* Franja fija arriba del contenido */
.au-franja { position: sticky; top: 0; z-index: 40; display: grid; gap: 1px; background: var(--linea); border-bottom: 1px solid var(--linea-fuerte); }
.au-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--amarillo-fondo); color: var(--amarillo-texto); font-size: 14px; line-height: 1.35; flex-wrap: wrap; }
.au-fila.au-alerta { background: var(--rojo-fondo); color: var(--rojo-texto); }
.au-fila.au-ok { background: var(--verde-fondo); color: var(--verde-texto); }
.au-msg { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.au-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.au-fila .btn { min-height: 44px; flex: 0 0 auto; }

/* Sección de la ficha */
.au-ficha-fila { padding: 8px 0; border-top: 1px solid var(--linea); display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.au-ficha-fila:first-of-type { border-top: 0; }
.au-ficha-gestion { display: flex; gap: 8px; margin-top: 4px; }
.au-ficha-gestion input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; padding: 8px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--campo); color: var(--texto); }
.au-ficha-gestion .btn { flex: 0 0 auto; min-height: 44px; }