/* =====================================================================
   VERSIÓN WEB: estilos extra (inicio de sesión, celular, impresión)
   No afecta al diseño del PDF (eso está en documento.css).
   ===================================================================== */

/* ---------- inicio de sesión ---------- */
body:not(.sesion-iniciada) > header, body:not(.sesion-iniciada) > main { visibility: hidden; }
.login { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, #17375E 0%, #24507f 100%); display: flex; align-items: center; justify-content: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); }
.login-caja { background: #fff; border-radius: 16px; padding: 26px 24px; width: min(400px, 100%); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.login-logo { width: 190px; max-width: 70%; align-self: center; margin-bottom: 4px; }
.login-caja h2 { margin: 4px 0 6px; color: var(--azul); text-align: center; }
.login-caja label { font-weight: 600; font-size: 15px; margin-top: 6px; }
.login-caja input[type=text], .login-caja input[type=password] { font-size: 17px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 8px; width: 100%; font-family: inherit; }
.login-caja .casilla { padding-top: 4px; font-weight: 400; }
.login-boton { margin-top: 12px; min-height: 50px; font-size: 18px; }
.login-error { background: #fcecea; color: #8d2318; border-radius: 8px; padding: 10px 12px; font-weight: 600; font-size: 15px; }
.login-aviso { background: #fdf6e7; color: #7a4f0e; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- ventana "PDF listo" y cuenta ---------- */
.nombre-pdf { font-weight: 700; word-break: break-word; }
.seccion-cuenta { margin-top: 30px; }
.botones-cuenta { display: flex; flex-wrap: wrap; gap: 8px; }
.campo-clave { width: 100%; font-size: 17px; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 8px; margin: 6px 0; font-family: inherit; }

/* ---------- barra inferior del editor (solo celular) ---------- */
.barra-movil { display: none; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }
.punto.rojo { background: var(--rojo); } .punto.ambar { background: var(--ambar); }

/* =====================================================================
   CELULAR Y TABLETAS PEQUEÑAS
   ===================================================================== */
@media (max-width: 860px) {
  html, body { height: 100%; }
  body { height: 100dvh; font-size: 16px; }
  .cabecera { padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); gap: 6px; }
  .cabecera .logo { height: 30px; }
  .pestanas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 2px; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestana { padding: 12px 12px; white-space: nowrap; font-size: 15px; flex: 0 0 auto; }
  #btnAyuda { font-size: 0; padding: 0; width: 42px; min-height: 42px; flex: 0 0 42px; }
  #btnAyuda::before { content: '?'; font-size: 20px; }

  /* botones grandes y fáciles de tocar */
  .btn { min-height: 46px; font-size: 16px; }
  .btn-mini { min-height: 40px; padding: 4px 12px; font-size: 15px; }
  .btn-icono { min-width: 42px; min-height: 42px; font-size: 16px; }
  .btn-texto { min-height: 42px; font-size: 15px; padding: 8px 6px; }
  /* 16 px o más: el iPhone no agranda la pantalla al escribir */
  .campo input[type=text], .campo input[type=date], .campo input[type=number], .campo select, .campo textarea,
  .filtros input, .filtros select, .cat-filtros input[type=search], .cat-filtros select { font-size: 16px; padding: 10px 12px; }
  .casilla input { width: 22px; height: 22px; }
  .casilla { padding-top: 26px; }
  .casilla.sola { padding-top: 0; min-height: 40px; }

  /* editor: formulario y vista previa de a uno */
  .editor { flex-direction: column; }
  .panel-form { width: 100%; flex: 1 1 auto; border-right: 0; min-height: 0; }
  .panel-vista { display: none; }
  body.ver-vista .panel-form { display: none; }
  body.ver-vista .panel-vista { display: flex; flex: 1 1 auto; }
  .barra-movil { display: flex; order: 3; gap: 8px; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--borde); box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
  .barra-movil .btn { flex: 1; min-height: 50px; }
  .barra-movil .btn.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
  .barra-acciones { padding: 8px 10px; gap: 6px; }
  .barra-acciones .btn { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }
  .barra-acciones .btn-principal { flex: 1 1 100%; order: -1; margin-left: 0; }
  .estado { padding: 6px 12px; }
  .formulario { padding: 4px 12px 40px; }
  .fila-campos { flex-wrap: wrap; gap: 8px; }
  .fila-campos > .campo { flex: 1 1 140px !important; }
  .barra-vista { padding: 6px 10px; }
  .titulo-vista small { display: none; }
  .lienzo { padding: 8px; }
  .avisos { padding: 6px 10px; max-height: 120px; }

  /* listas y tablas del formulario: botones en columna para dejar espacio al texto */
  .item .botones { flex-direction: column; }
  .item .num { display: none; }
  .cabecera-tabla { display: none; }
  .fila-tabla { grid-template-columns: 1fr auto !important; }
  .fila-tabla > .num { display: none; }
  .fila-tabla > textarea { grid-column: 1; }
  .fila-tabla > .botones { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 2px; }
  .fila-tabla > textarea:first-of-type { font-weight: 600; }
  .lista-items { gap: 10px; }
  .imagen-zona { flex-wrap: wrap; }

  /* catálogo: primero la lista, luego el modelo */
  .cat-panel-lista { width: 100%; flex: 1 1 auto; border-right: 0; }
  .cat-editor { display: none; }
  body.cat-editando .cat-panel-lista { display: none; }
  body.cat-editando .cat-editor { display: block; flex: 1 1 auto; }
  .cat-acciones { padding: 10px 10px 4px; }
  .cat-acciones .btn { flex: 1; }
  .cat-filtros { padding: 6px 10px 10px; }
  .cat-item { padding: 8px; }
  .cat-mini { width: 54px; height: 54px; flex-basis: 54px; }
  .cat-editor > *:not(.cat-barra) { margin-left: 12px; margin-right: 12px; }
  .cat-barra { flex-wrap: wrap; padding: 8px 10px; justify-content: flex-start; gap: 6px; }
  .cat-barra .cat-estado { order: 10; width: 100%; margin: 0; font-size: 13px; }
  .cat-barra .btn-principal { flex: 1 1 100%; order: 11; }
  .tarjeta-cab { flex-wrap: wrap; }
  .tarjeta-cuerpo { padding: 0 8px 6px; }

  /* guardados, configuración, ayuda */
  .contenido-simple { padding: 14px 12px 60px; }
  .filtros { flex-direction: column; }
  .tarjeta { flex-wrap: wrap; }
  .tarjeta .acciones { width: 100%; justify-content: flex-start; }
  .tarjeta .acciones .btn { flex: 1 1 auto; }
  .ayuda-texto { font-size: 16px; }

  /* ventanas de mensajes */
  .modal { align-items: flex-end; }
  .modal-caja { width: 100%; border-radius: 16px 16px 0 0; padding: 20px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom)); max-height: 90dvh; overflow-y: auto; }
  .modal-botones { gap: 8px; }
  .modal-botones .btn { flex: 1 1 40%; }
}

/* ---------- impresión (botón "Imprimir" de la ventana PDF listo) ---------- */
#impresion { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.imprimiendo > *:not(#impresion) { display: none !important; }
  body.imprimiendo { display: block; height: auto; overflow: visible; background: #fff; }
  body.imprimiendo #impresion { display: block; }
  body.imprimiendo #impresion .hoja { box-shadow: none; margin: 0; page-break-after: always; break-after: page; }
}