/*
 * opfar-ventanas.css — las ventanas del Kit de interfaz OPFAR que usa Ontime: «Instalar la app» y el aviso «Novedad»
 * (js/opfar-instalar.js). COPIA de las secciones 1, 9, 10, 14, 15 y 15 quater de css/opfar-interfaz.css del kit
 * (_PROYECTOS/_MANUAL DE MARCA OPFAR/Kit de interfaz OPFAR/), tal cual. No se cambia aquí: se cambia en el kit y se
 * vuelve a copiar. Todo va dentro de .op-ui / .op-… : no toca nada de Ontime. D-87, 19/10/2026.
 */
/* ---------- 1. La página (o solo las cajas del kit) ---------- */
/* las letras del kit, con nombre propio para no pisar las variables de cada web */
.op-pagina, .op-ui, .ot-lista, .ot-cal, dialog.op-dialogo, .op-mensaje-flotante {
  --op-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --op-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --op-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.op-ui { color: #123B44; font: 16px var(--op-body); -webkit-font-smoothing: antialiased; text-align: left; }
:is(.op-pagina, .op-ui) *, :is(.op-pagina, .op-ui) *::before, :is(.op-pagina, .op-ui) *::after, .op-ui { box-sizing: border-box; }
/* :where() deja estas reglas sin peso: las de cada pieza (.op-btn, .op-boton-cab…) mandan siempre */
:is(.op-pagina, .op-ui) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:is(.op-pagina, .op-ui) :where(button) { cursor: pointer; touch-action: manipulation; }
:is(.op-pagina, .op-ui) button:disabled { opacity: .5; cursor: default; }
:is(.op-pagina, .op-ui) button:focus-visible, :is(.op-pagina, .op-ui) a:focus-visible { outline: 3px solid #5BD0D6; outline-offset: 3px; }
:is(.op-pagina, .op-ui) :where(h1, h2, h3) { font-family: var(--op-display); letter-spacing: -.035em; }
:is(.op-pagina, .op-ui) :where(a) { color: #0c7b88; }
:is(.op-pagina, .op-ui) [hidden], .op-ui[hidden] { display: none !important; }
.op-iconos svg, .op-ico { width: 18px; height: 18px; flex: none; }

/* ---------- 9. Los apartados de una sección (botones redondos debajo del título) ---------- */
.op-apartados { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.op-apartados button, .op-apartados a { padding: 10px 17px; border: 1px solid #dce9eb; border-radius: 25px; font-size: 14px; background: white; color: #123B44; text-decoration: none; }
.op-apartados .activo { background: #d8edef; color: #1c606b; border-color: #bedde1; font-weight: 600; }
.op-pastillas { display: inline-flex; gap: 5px; padding: 4px; background: #e9f0f1; border-radius: 8px; }
.op-pastillas button { border: 0; padding: 7px 12px; background: transparent; font-size: 12px; border-radius: 5px; }
.op-pastillas button.activo { background: white; box-shadow: 0 1px 5px #123b440e; }

/* ---------- 10. Botones ---------- */
.op-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #0FA3B4; border-radius: 24px; padding: 11px 16px; min-height: 42px; color: white; background: #087d89; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.op-btn:hover { background: #096671; }
.op-btn svg { width: 16px; height: 16px; }
.op-btn.claro { background: white; color: #123B44; border-color: #dce7e8; }
.op-btn.claro:hover { background: #f0f8f8; }
.op-btn.peligro { background: #B3261E; border-color: #B3261E; color: #fff; }
.op-btn.peligro:hover { background: #941f18; }
.op-btn.claro.peligro { background: white; color: #B3261E; border-color: #dce7e8; }
.op-texto-btn { background: none; border: 0; padding: 0; color: #0a7984; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.op-texto-btn:hover { text-decoration: underline; }
.op-acciones { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------- 14. Etiquetas, paneles, tablas y avisos en la página ---------- */
.op-etiqueta { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 20px; background: #e8f5f2; color: #226e66; }
.op-etiqueta.aviso { background: #fff2d6; color: #825b21; }
.op-etiqueta.neutra { background: #edf2f3; color: #536c73; }
.op-etiqueta.bien { background: #E3F4EC; color: #14694A; }
/* el rojo de error oficial (--opfar-danger #D0453B, --opfar-danger-soft #FBE5E3): «Rechazada», «Cancelada», un error al guardar */
.op-etiqueta.mal { background: #FBE5E3; color: #8a2a22; }
.op-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 26px; }
.op-antetitulo { font: 400 10px var(--op-mono); text-transform: uppercase; letter-spacing: .1em; color: #487079; margin-bottom: 9px; }
.op-cabeza h1 { font-size: 1.75rem; margin: 0 0 9px; line-height: 1.3; }
.op-cabeza p { font-size: .875rem; margin: 0; color: #627a80; line-height: 1.6; }
.op-panel { background: white; border: 1px solid #dfebec; border-radius: 20px; overflow: hidden; box-shadow: 0 3px 10px #123b4403; }
.op-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 23px; border-bottom: 1px solid #dce7e8; }
.op-panel-cab h2 { font-size: 16px; margin: 0; }
.op-panel-cab p { font-size: 12px; color: #627a80; margin: 5px 0 0; }
.op-panel-cuerpo { padding: 23px; }
.op-tabla { border-collapse: collapse; width: 100%; font-size: .8125rem; }
.op-tabla th { background: #f8fbfb; text-align: left; padding: 15px 20px; font-size: .75rem; font-weight: 500; color: #627a80; }
.op-tabla td { padding: 18px 20px; border-top: 1px solid #dce7e8; line-height: 1.7; }
/* la tabla densa de los informes (Control): filas de unos 30 px, para ver al menos 8 filas por listado */
.op-tabla.densa { font-size: 12.5px; }
.op-tabla.densa th { padding: 7px 12px; font-size: 11.5px; }
.op-tabla.densa td { padding: 6px 12px; line-height: 1.4; }
.op-tabla.densa .op-numero { font-size: 12px; }
.op-tabla .derecha, .op-tabla.densa .op-numero { text-align: right; }
.op-tabla-scroll { overflow-x: auto; }
.op-numero { font-family: var(--op-mono); font-size: .8125rem; }
.op-nota-caja { padding: 14px 17px; border: 1px solid #d5e8e9; background: #f1f9f9; color: #456c73; font-size: .8125rem; line-height: 1.7; border-radius: 9px; margin-bottom: 23px; }
.op-nota-caja.aviso { background: #fff5df; border-color: #eadcc0; color: #805b24; }
.op-nota-caja.mal { background: #FBE5E3; border-color: #f0c4bf; color: #8a2a22; }
.op-vacio { padding: 40px; text-align: center; color: #627a80; line-height: 1.7; }

/* ---------- 15. Diálogos y el mensaje de abajo ---------- */
dialog.op-dialogo { width: min(580px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; border: 1px solid #dce7e8; border-radius: 25px; padding: 30px; color: #123B44; background: white; box-shadow: 0 25px 100px #123b4433; font-family: var(--op-body); }
dialog.op-dialogo::backdrop { background: #123b4455; backdrop-filter: blur(3px); }
dialog.op-dialogo h2 { font-family: var(--op-display); letter-spacing: -.035em; font-size: 1.2rem; margin: 0 0 17px; }
/* sin peso (:where): una nota (.op-nota) o un mensaje (.op-mensaje) dentro de la ventana mandan, como en Ontime */
:where(dialog.op-dialogo) p { font-size: .875rem; line-height: 1.7; color: #627a80; }
dialog.op-dialogo .op-acciones { justify-content: flex-end; margin-top: 25px; }
.op-mensaje-flotante { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); padding: 14px 22px; background: #123B44; color: white; border-radius: 9px; z-index: 1500; font-size: .8125rem; font-family: var(--op-body); box-shadow: 0 10px 30px #123b4433; }

/* ---------- 15 quater. Instalar la app (js/opfar-instalar.js): la ventana y el aviso «Novedad» ---------- */
dialog.op-dialogo.op-instalar-dlg { width: min(480px, calc(100vw - 32px)); }
.op-instalar-ya { width: 100%; margin: 2px 0 12px; }
.op-instalar-dlg .op-mensaje:empty { display: none; }
.op-instalar-dlg .op-mensaje { margin-bottom: 12px; }
.op-instalar-pasos { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: .875rem; line-height: 1.6; color: #123B44; }
.op-novedad-dlg .op-etiqueta { display: inline-block; margin-bottom: 12px; }
@media (max-width: 640px) { dialog.op-dialogo.op-instalar-dlg { padding: 24px 20px; } }