/* ===== Hik-Asistencia SaaS — estilos del panel ISCOM, login y asistente =====
 * Los tokens (colores, radios, tiempos, curvas) viven en /legacy/css/tokens.css,
 * que cada página enlaza ANTES que este archivo. Aquí no se declara ningún
 * color a mano salvo el blanco sobre --primario (la empresa fija su color y
 * el texto encima debe seguir siendo blanco en los dos temas). */

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente);
  background: var(--fondo); color: var(--texto); font-size: var(--tx-m); line-height: var(--interlinea);
  min-height: 100dvh;
}

/* En login y asistente el botón de tema flota sobre la tarjeta: con borde. */
.login-caja > .btn-tema, .asistente-cab > .btn-tema {
  width: 36px; height: 36px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.login-caja > .btn-tema .icono, .asistente-cab > .btn-tema .icono { width: 20px; height: 20px; }

/* ---- Login ---- */
.login-centro { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 16px; }
.login-caja {
  position: relative;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-xl);
  box-shadow: var(--sombra-alta); padding: 34px 38px; width: 400px; max-width: 100%;
}
.login-caja > .btn-tema { position: absolute; top: 12px; right: 12px; }
.login-logo {
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  width: 56px; height: 56px; border-radius: 50%; background: var(--primario-suave); color: var(--primario-texto);
}
.login-logo .icono { width: 30px; height: 30px; }
.login-titulo { text-align: center; font-size: var(--tx-xl); font-weight: 700; margin-bottom: 2px; }
.login-sub { text-align: center; color: var(--texto-suave); margin-bottom: 22px; font-size: var(--tx-s); }
.login-caja .campo { margin-bottom: 12px; }
.login-caja .campo.ultimo { margin-bottom: 18px; }
.login-caja .boton { width: 100%; }
.login-caja .boton + .boton { margin-top: 10px; }
.login-pie { text-align: center; font-size: var(--tx-xs); margin: 16px 0 0; }
.login-pie + .login-pie { margin-top: 8px; }
/* Aviso de por qué se volvió al login (sesión terminada) */
.login-motivo { margin: 0 0 12px; }
@media (max-width: 479.98px) {
  .login-caja { padding: 30px 20px 26px; }
}

/* ---- Panel (admin) ---- */
.panel { display: flex; min-height: 100vh; min-height: 100dvh; }
.lateral {
  width: var(--ancho-lateral); background: var(--lateral-fondo); color: var(--lateral-texto); flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh;
}
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--lateral-linea); }
.lateral .marca .icono { width: 26px; height: 26px; }
.lateral .marca b { font-size: 15px; display: block; line-height: 1.2; }
.lateral .marca .sub { font-size: var(--tx-xs); opacity: .75; }
.menu { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
/* Fundido inferior mientras haya entradas por debajo (ui.js pone la clase) */
.menu.desborda { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.menu .menu-item {
  display: flex; gap: 10px; align-items: center; background: none; border: none;
  color: var(--lateral-texto); padding: 10px 12px; border-radius: var(--radio); cursor: pointer;
  font: inherit; text-align: left; width: 100%;
  transition: background var(--t-corto) ease, color var(--t-corto) ease;
}
.menu .menu-item .icono { width: 20px; height: 20px; opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  /* el lateral es oscuro en los dos temas: al pasar el ratón el texto se aclara hacia blanco */
  .menu .menu-item:hover { background: var(--lateral-hover); color: color-mix(in srgb, var(--lateral-texto) 45%, #fff); }
}
.menu .menu-item.activo { background: var(--primario); color: var(--sobre-primario); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.menu .menu-item.activo .icono { opacity: 1; }
/* Títulos de grupo (plegables; la mecánica vive en componentes.css + UI.gruposMenu) */
.menu .menu-titulo { padding: 8px 12px 2px; color: var(--lateral-texto); }
.lateral .pie { padding: 12px 16px; border-top: 1px solid var(--lateral-linea); font-size: var(--tx-xs); }
.lateral .pie-acciones { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.lateral .pie-acciones .boton { flex: 1; }
.lateral .pie .boton { background: var(--lateral-hover); border-color: var(--lateral-linea); color: inherit; }
.lateral .pie .btn-tema { background: var(--lateral-hover); border: 1px solid var(--lateral-linea); color: inherit; width: 38px; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .lateral .pie .boton:hover, .lateral .pie .btn-tema:hover { background: var(--lateral-linea); border-color: var(--lateral-hover); }
}

/* Buscador global bajo la marca (Ctrl+K) */
.menu-buscar {
  display: flex; align-items: center; gap: 8px; margin: 10px 8px 0; padding: 8px 12px; width: calc(100% - 16px);
  border: 1px solid var(--lateral-linea); border-radius: var(--radio); background: var(--lateral-hover);
  color: var(--lateral-texto); font: inherit; font-size: var(--tx-s); cursor: pointer; text-align: left;
}
.menu-buscar span { flex: 1; opacity: .85; }
.menu-buscar kbd { font: inherit; font-size: 11px; font-family: var(--mono); opacity: .6; border: 1px solid var(--lateral-linea); border-radius: 4px; padding: 1px 5px; }
@media (hover: hover) and (pointer: fine) { .menu-buscar:hover { background: rgba(255,255,255,.12); color: #fff; } }
.paleta { max-width: 560px; padding: 0; overflow: hidden; }
.paleta-campo { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--borde); }
.paleta-campo .icono { width: 20px; height: 20px; color: var(--texto-suave); }
.paleta-campo input, .paleta-campo input:focus { border: none !important; box-shadow: none !important; outline: none !important; padding: 10px 0; font-size: var(--tx-l); background: transparent; min-height: 0; }
.paleta-lista { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55dvh); overflow: auto; }
.paleta-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radio); cursor: pointer; line-height: 1.3; }
.paleta-lista li .icono { width: 18px; height: 18px; color: var(--texto-suave); flex: none; }
.paleta-lista li .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-lista li .tipo { font-size: var(--tx-xs); color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.paleta-lista li[aria-selected="true"] { background: var(--primario-suave); }
.paleta-lista li[aria-selected="true"] .icono, .paleta-lista li[aria-selected="true"] .texto { color: var(--primario-texto); }
.paleta-lista li.vacio { color: var(--texto-suave); cursor: default; justify-content: center; }
.paleta-titulo { font-size: var(--tx-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); padding: 8px 10px 2px; }
.paleta-pie { display: flex; gap: 6px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--borde); font-size: var(--tx-xs); }
.paleta-pie kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--borde); border-radius: 4px; padding: 0 5px; }
.sy-panel .caja, .bd-panel .caja { max-width: none; }

/* Barra superior: sólo en teléfono (hamburguesa + título + tema) */
.barra-superior { display: none; }
.cajon-velo { display: none; }
.barra-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: var(--tx-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.contenido { flex: 1; min-width: 0; padding: 24px 28px 60px; background: var(--superficie); }
.vista { display: none; position: relative; max-width: var(--ancho-contenido); }
.vista.activa { display: block; }
.vista > h1 { padding-right: 48px; }
/* «?» contextual: abre el manual del panel en la sección de la vista */
.btn-ayuda-vista {
  position: absolute; right: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-suave); cursor: pointer;
}
.btn-ayuda-vista .icono { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .btn-ayuda-vista:hover { color: var(--primario-texto); border-color: var(--primario); } }
/* Inicio: tarjetas que llevan a su vista */
.tarjeta-dato.enlace { cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color var(--t-corto) ease; }
@media (hover: hover) and (pointer: fine) { .tarjeta-dato.enlace:hover { border-color: var(--primario); } }
.tarjeta-dato.aviso .valor { color: var(--aviso-texto); }
/* Inicio: aire entre las tarjetas de indicador y la sección «Atención» */
#vista-inicio .tarjetas-resumen { margin-bottom: 24px; }
.atencion { list-style: none; margin: 0; padding: 0; }
.atencion li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); }
.atencion li:last-child { border-bottom: none; }
.atencion li .icono { flex: none; width: 18px; height: 18px; }
.atencion li.grave .icono { color: var(--error); }
.atencion li.aviso .icono { color: var(--aviso-texto); }
.atencion li span { flex: 1; }
/* Lista de empresas: el nombre abre la ficha */
/* Ficha de empresa: cabecera con regreso, pestañas y barra de guardar pegajosa */
.ficha-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ficha-cab h1 { margin: 0; padding-right: 0; }
.ficha-sub { color: var(--texto-suave); margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fe-panel .caja { max-width: 980px; }
.barra-guardar {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  max-width: 980px; margin-top: 8px; padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-alta);
}
/* Apariencia (estilos) dentro de la ficha: mismas muestras que la app de RH */
.estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.estilo-op { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); cursor: pointer; }
.estilo-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estilo-op:has(input:checked) { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario-suave); }
.estilo-muestra { display: flex; height: 46px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); }
.estilo-muestra .em-lateral { width: 34%; display: flex; flex-direction: column; gap: 3px; padding: 6px 5px; }
.estilo-muestra .em-lateral i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.estilo-muestra .em-lateral i.activo { background: var(--em-primario); }
.estilo-muestra .em-cuerpo { flex: 1; background: #f4f6f8; display: flex; align-items: center; justify-content: center; gap: 6px; }
.estilo-muestra .em-boton { width: 34px; height: 12px; border-radius: 4px; background: var(--em-primario); }
.estilo-muestra .em-texto { width: 26px; height: 4px; border-radius: 2px; background: #cfd8dc; }
.estilo-nombre { font-size: var(--tx-s); font-weight: 600; }
.estilo-nota { font-size: var(--tx-xs); color: var(--texto-suave); }
table td .boton.chico { padding: 4px 10px; min-height: 0; }
h1 { font-size: var(--tx-xl); margin: 0 0 4px; letter-spacing: -.015em; text-wrap: balance; }
.sub-cabecera, .vista > .sub { color: var(--texto-suave); margin: 0 0 18px; }
/* El subtítulo explicativo de cada vista vive en la ayuda «?», como en la app
   de RH: UI.cabeceraVista lo mete en la cabecera y componentes.css lo oculta. */

/* Secciones sin caja: espacio y un título con línea fina (ver styles.css) */
.caja { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 28px; box-shadow: none; }
.caja > h3, .caja > .fila-entre:first-child { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.caja > h3 { font-size: var(--tx-m); font-weight: 600; }
.caja > .fila-entre:first-child > h3 { margin: 0; padding: 0; border: 0; font-size: var(--tx-m); font-weight: 600; }
.caja.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 16px 18px; box-shadow: var(--sombra); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } }



/* Tablas sueltas del panel (sin la clase .tabla): mismas medidas que las compartidas */
table { border-collapse: collapse; width: 100%; font-size: var(--tx-s); font-variant-numeric: tabular-nums; }
th { text-align: left; background: var(--superficie-2); padding: 9px 10px; font-size: var(--tx-xs); color: var(--texto-suave); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 1; }
td { padding: 8px 10px; border-bottom: 1px solid var(--borde-suave); }
tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  tbody tr:hover td { background: var(--superficie-hover); }
}

.num-rojo { color: var(--error); font-weight: 700; }
.fila { margin-top: 0; margin-bottom: 8px; }
.lista-avisos { margin: 10px 0 0; padding-left: 18px; font-size: var(--tx-s); }
.lista-avisos li { margin: 3px 0; }
.lista-avisos .grave { color: var(--error); }
.lista-avisos .aviso { color: var(--aviso-texto); }
.lista-avisos .info { color: var(--texto-suave); }

.preset-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tabla-dias td input { padding: 4px 8px; width: 80px; }

/* SecretKey enmascarada sin ser type=password: los administradores de contraseñas del navegador no la guardan ni la rellenan */
input.secreto { -webkit-text-security: disc; }
input.secreto:focus { -webkit-text-security: none; }

/* ===== Ayuda (manual completo) y vista previa de textos legales ===== */
.ay-caja { padding-top: 10px; }
/* Estado de la búsqueda del manual (el campo vive ahora en la cabecera) */
.ay-barra { margin: 0 0 8px; }
.ay-barra:empty { display: none; }
.ay-cuerpo { display: flex; gap: 20px; align-items: flex-start; }
.ay-indice { width: 250px; flex: 0 0 250px; border-right: 1px solid var(--borde); padding-right: 12px; font-size: var(--tx-s); }
.ay-indice a { display: block; padding: 3px 6px; border-radius: 5px; color: var(--texto-fuerte); text-decoration: none; }
.ay-indice a:hover { background: var(--superficie-2); color: var(--texto); }
.ay-indice a.n2 { padding-left: 14px; }
.ay-indice a.n3 { padding-left: 26px; font-size: var(--tx-xs); }
.ay-indice a.activa { background: var(--primario); color: var(--sobre-primario); }
.ay-cuerpo .ay-contenido { flex: 1; min-width: 0; padding-right: 6px; }
.ay-marca { background: var(--resalte); border-radius: 3px; }
.ay-contenido img.ay-img { display: block; max-width: 100%; border: 1px solid var(--borde); border-radius: var(--radio-l); margin: 10px 0 14px; box-shadow: var(--sombra); }
@media (max-width: 767.98px) { .ay-cuerpo { flex-direction: column; } .ay-indice { width: auto; flex: none; max-height: 200px; border-right: none; border-bottom: 1px solid var(--borde); padding: 0 0 8px; } }
/* La vista previa reproduce el formato que verá el cliente en su Ayuda */
.ay-contenido { line-height: 1.6; }
.ay-contenido h2 { font-size: var(--tx-l); margin: 16px 0 8px; border-bottom: 1px solid var(--borde); padding-bottom: 4px; }
.ay-contenido h3 { font-size: var(--tx-l); margin: 14px 0 6px; }
.ay-contenido ul, .ay-contenido ol { margin: 7px 0 7px 22px; }
.ay-contenido blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--primario);
  background: var(--superficie-2); border-radius: 0 var(--radio) var(--radio) 0; }
.ay-contenido code { background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; font-size: var(--tx-xs); font-family: var(--mono); }
.ay-tabla { overflow-x: auto; margin: 10px 0; }
.ay-tabla table { border-collapse: collapse; width: 100%; font-size: var(--tx-s); }
.ay-tabla th, .ay-tabla td { border: 1px solid var(--borde); padding: 6px 9px; text-align: left; position: static; }

/* ===== Aceptaciones de los textos legales ===== */
/* Advertencia de "al publicar, todos vuelven a aceptar" (mismo color que .chip-aviso) */
.tarjetas-resumen { display: flex; gap: 12px; flex-wrap: wrap; }
.tarjeta-dato {
  border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 10px 16px;
  min-width: 160px; background: var(--superficie-2);
}
.tarjeta-dato .etiqueta { font-size: var(--tx-xs); color: var(--texto-suave); font-weight: 600; }
.tarjeta-dato .valor { font-size: var(--tx-xxl); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tarjeta-dato .nota { font-size: var(--tx-xs); color: var(--texto-suave); }
.tarjeta-dato.ok .valor { color: var(--ok); }
.tarjeta-dato.pendiente { border-color: color-mix(in srgb, var(--error) 35%, var(--borde)); background: color-mix(in srgb, var(--error-fondo) 55%, var(--superficie)); }
.tarjeta-dato.pendiente .valor { color: var(--error); }
.chips-lista { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ===== Asistente de configuración (asistente.html) ===== */
body.pagina-asistente { background: var(--fondo-hundido); }
.asistente { max-width: 760px; margin: 26px auto 60px; padding: 0 14px; }
.asistente-cab { position: relative; text-align: center; margin-bottom: 18px; }
.asistente-cab > .btn-tema { position: absolute; top: 0; right: 0; }
.asistente-cab h1 { font-size: var(--tx-xl); margin: 6px 0 2px; }
.asistente-cab .sub { color: var(--texto-suave); font-size: var(--tx-m); }
.asistente-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; background: var(--primario-suave); color: var(--primario-texto);
}
.asistente-logo .icono { width: 32px; height: 32px; }
.pasos-barra { display: flex; gap: 6px; margin-bottom: 18px; }
.pasos-barra .p { flex: 1; text-align: center; font-size: var(--tx-xs); color: var(--texto-suave); padding: 8px 4px; border-bottom: 3px solid var(--borde-fuerte); }
.pasos-barra .p.activo { color: var(--primario-texto); font-weight: 700; border-color: var(--primario); }
.pasos-barra .p.hecho { color: var(--ok); border-color: var(--ok); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-xl); box-shadow: var(--sombra); padding: 22px 24px; }
.tarjeta h2 { font-size: var(--tx-l); margin: 0 0 12px; }
.tarjeta p { font-size: var(--tx-m); }
.tarjeta p.intro { font-size: var(--tx-s); margin: 0 0 12px; }
.chequeo { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--tx-m); border-bottom: 1px solid var(--borde-suave); }
.chequeo:last-child { border-bottom: none; }
.chequeo > .icono { width: 22px; height: 22px; flex: none; }
.chequeo.ok > .icono { color: var(--ok); }
.chequeo.falla > .icono { color: var(--aviso-texto); }
.chequeo .det { color: var(--texto-suave); font-size: var(--tx-xs); }
.pie-botones { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.pie-botones .espacio { flex: 1; }
.log-pasos { background: var(--superficie-2); border-radius: var(--radio-l); padding: 12px 14px; font-size: var(--tx-s); margin-top: 12px; }
.log-pasos div { padding: 2px 0; }
@media (max-width: 479.98px) {
  .asistente { margin-top: 14px; }
  .asistente-cab h1 { font-size: var(--tx-xl); }
  .pasos-barra { gap: 3px; }
  .pasos-barra .p { font-size: 11px; padding: 6px 2px; }
  .tarjeta { padding: 18px 16px; }
}

/* ===== Responsivo ===== */
/* Tableta: carril con sólo iconos (el title de cada botón lleva el texto) */
@media (min-width: 768px) and (max-width: 1023.98px) and (min-height: 500px) {
  .lateral { width: var(--ancho-carril); }
  .lateral .marca { justify-content: center; padding: 16px 0; }
  .lateral .marca > div { display: none; }
  .menu { padding: 8px 6px; }
  .menu-buscar { margin: 8px 6px 0; width: calc(100% - 12px); padding: 10px 0; justify-content: center; }
  .menu-buscar span, .menu-buscar kbd { display: none; }
  .menu .menu-item { justify-content: center; padding: 10px 0; }
  .menu .menu-item span { display: none; }
  .menu .menu-titulo { display: none; }
  .menu-grupo.plegado .menu-items { display: flex; } /* en el carril no hay título que pulsar */
  .menu-grupo + .menu-grupo { border-top: 1px solid var(--lateral-linea); padding-top: 6px; }
  .lateral .pie { padding: 10px 6px; }
  .lateral .pie #quien { display: none; }
  .lateral .pie-acciones { flex-direction: column; margin-top: 0; }
  .lateral .pie-acciones .boton { padding: 9px 0; }
  .lateral .pie-acciones .boton span { display: none; }
  .lateral .pie .btn-tema { width: 100%; height: 38px; }
  .contenido { padding: 18px 20px 48px; }
}

/* Teléfono: el lateral es un cajón que abre la hamburguesa */
@media (max-width: 767.98px), (max-width: 1023.98px) and (max-height: 499px) {
  .panel { display: block; }
  html { scroll-padding-top: calc(var(--alto-barra) + 12px); }
  .barra-superior {
    display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 40;
    height: var(--alto-barra); padding: 0 8px 0 4px;
    background: var(--superficie); border-bottom: 1px solid var(--borde);
  }
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    height: 100dvh; width: min(280px, 85vw);
    transform: translateX(-100%);
    transition: transform var(--t-medio) var(--suave), box-shadow var(--t-medio) var(--suave);
  }
  body.menu-abierto .lateral { transform: translateX(0); box-shadow: var(--sombra-alta); }
  .cajon-velo {
    display: block; position: fixed; inset: 0; z-index: 55; background: var(--velo);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-corto) var(--salida), visibility 0s linear var(--t-corto);
  }
  body.menu-abierto .cajon-velo { opacity: 1; visibility: visible; transition: opacity var(--t-corto) var(--salida); }
  body.menu-abierto { overflow: hidden; }
  .contenido { padding: clamp(12px, 3vw, 28px); }
  .vista { max-width: none; }
  .caja[style*="max-width"] { max-width: none !important; }
  .fila-entre { align-items: flex-start; }
}
@media (max-width: 599.98px) {
  .linea > .boton { flex: 1 1 auto; }
  .pie-botones .boton { flex: 1 1 auto; }
}

@media (pointer: coarse) {
  .menu .menu-item { min-height: var(--alto-toque); }
  .tabla-dias td input { min-height: 0; }
}

@media print {
  .lateral, .barra-superior, .cajon-velo { display: none !important; }
  .panel { display: block; }
  .contenido { padding: 0; max-width: none; }
  .caja { box-shadow: none; break-inside: avoid; }
  .tabla-envoltura { max-height: none; overflow: visible; }
}