/* Panel del operador · REMODELACIÓN responsiva (se carga al final; todo cuelga de body.op, así el Administrativo no se toca).
   Pantallas: reloj (≤300), celular (≤699), tablet (700–1099), laptop/escritorio (≥1100) y monitores grandes (≥1700).
   Idea: un solo marco que se transforma — menú lateral con nombres en escritorio, solo íconos en tablet, barra inferior que se desliza en celular y reloj;
   los indicadores y las dos columnas se acomodan solas; las tablas pasan a tarjetas en celular. */

body.op { --rail: 252px; --alto-top: 64px; --gap: clamp(12px, 1.6vw, 22px); }

/* ======================= marco: barra de arriba ======================= */
body.op #app { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: var(--alto-top) minmax(0, 1fr); }
body.op .top { display: flex; flex-direction: row; align-items: center; height: var(--alto-top); padding: 0 clamp(12px, 2vw, 28px); gap: 14px; flex-wrap: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .14); }
body.op .top .marca { flex: none; gap: 12px; }
body.op .top .marca .logo-ph { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.1rem; flex: none; }
body.op .top .marca strong { font: 650 1.08rem var(--f-cifra); white-space: nowrap; }
body.op .top .usuario { display: flex; gap: 8px; flex: none; }
body.op .btn-ico { min-width: 42px; min-height: 42px; padding: 0 12px; font-weight: 700; }
body.op .busca-global { flex: 1 1 auto; max-width: 560px; margin: 0 auto 0 clamp(8px, 2vw, 28px); }
body.op .busca-global input { min-height: 42px; border-radius: 12px; font-size: .95rem; }

/* ======================= menú lateral ======================= */
body.op .rail { width: var(--rail); padding: 18px 14px; gap: 4px; overflow-y: auto; overflow-x: hidden; top: var(--alto-top); height: calc(100dvh - var(--alto-top)); box-sizing: border-box; }
body.op .rail a { min-height: 48px; padding: 0 14px; gap: 14px; font-size: .98rem; border-radius: 12px; white-space: nowrap; }
body.op .rail a svg { width: 22px; height: 22px; }
body.op .rail .pie { margin-top: auto; padding: 14px 6px 4px; border-top: 1px solid var(--regla); }

/* ======================= contenido ======================= */
body.op main { padding: clamp(16px, 2.4vw, 36px) clamp(14px, 2.8vw, 44px) 72px; max-width: 1800px; width: 100%; box-sizing: border-box; margin-inline: auto; }
body.op main > .cabecera { margin-bottom: var(--gap); }
body.op .cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
body.op .cabecera h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.15; }
body.op .franja { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--gap); }
body.op .franja .cifra { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); }
body.op .dos-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
body.op .dos-col > * { min-width: 0; }
body.op .suc-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
body.op .tabla-envoltura, body.op main .seccion:has(> table), body.op main .seccion:has(> .tabla) { overflow-x: auto; }
body.op .tabla { width: 100%; }
body.op .acciones-rapidas .btn, body.op .barra-herramientas .btn { flex: 0 0 auto; }
/* filtros: una sola fila que se desliza (no se amontonan en filas desiguales) */
body.op .filtros { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
body.op .filtros::-webkit-scrollbar { display: none; }
body.op .filtros button { flex: none; white-space: nowrap; scroll-snap-align: start; }
@media (min-width: 1500px) { body.op .filtros { flex-wrap: wrap; overflow: visible; } }

/* ======================= tablet (700–1099): menú solo con íconos ======================= */
@media (min-width: 700px) and (max-width: 1099px) {
  body.op { --rail: 80px; }
  body.op .rail { padding: 14px 10px; align-items: stretch; }
  body.op .rail a { justify-content: center; padding: 0; min-height: 52px; }
  body.op .rail a span { display: none; }
  body.op .rail a[aria-current="page"]::before { display: none; }
  body.op .rail .pie { display: none; }
  body.op .dos-col { grid-template-columns: minmax(0, 1fr); }
}

/* ======================= celular y reloj (<700): barra de abajo que se desliza ======================= */
@media (max-width: 699px) {
  body.op { --alto-top: 56px; --rail: 0px; }
  body.op #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--alto-top) minmax(0, 1fr); grid-template-areas: "top" "main"; padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body.op .top { gap: 8px; padding: 0 10px; }
  body.op .top .marca strong { display: none; }
  body.op .top .marca .logo-ph { width: 36px; height: 36px; }
  body.op .busca-global { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
  body.op .busca-global input { font-size: 16px; padding-inline: 12px; }
  body.op .btn-ico { min-width: 40px; min-height: 40px; padding: 0 10px; }
  body.op .rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: calc(70px + env(safe-area-inset-bottom, 0px)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 2px;
    overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--regla); z-index: 40; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%); }
  body.op .rail::-webkit-scrollbar { display: none; }
  body.op .rail a { flex: 0 0 auto; min-width: 74px; min-height: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 0 8px; font-size: .7rem; font-weight: 650; scroll-snap-align: center; }
  body.op .rail a svg { width: 22px; height: 22px; }
  body.op .rail a[aria-current="page"]::before { display: none; }
  body.op .rail .pie { display: none; }
  body.op main { padding: 14px 12px 24px; }
  body.op .dos-col { grid-template-columns: minmax(0, 1fr); }
  body.op .franja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.op .franja > div, body.op .franja > a { padding: 12px 14px; }
  body.op .franja .rotulo { font-size: .78rem; }
  body.op .seccion { padding: 14px 14px 6px; }
  body.op .acciones-rapidas { margin-top: 0; }
  body.op .acciones-rapidas .btn { flex: 1 1 140px; }
  body.op .barra-herramientas { flex-direction: column; align-items: stretch; }
  body.op .barra-herramientas > * { width: 100%; }
  body.op .panel { width: 100%; border-left: 0; }
  body.op input[type=text], body.op input[type=email], body.op input[type=password], body.op input[type=number], body.op input[type=date], body.op input[type=search], body.op select, body.op textarea { font-size: 16px; }
  /* tablas → tarjetas: cada fila es una tarjeta y cada celda lleva su título (lo pone operador-remodelo.js) */
  body.op .tabla.en-tarjetas { display: block; border: 0; }
  body.op .tabla.en-tarjetas thead { display: none; }
  body.op .tabla.en-tarjetas tbody { display: grid; gap: 10px; }
  body.op .tabla.en-tarjetas tr { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); }
  body.op .tabla.en-tarjetas td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 2px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  body.op .tabla.en-tarjetas td::before { content: attr(data-etq); flex: none; color: var(--tinta-suave); font-size: .78rem; font-weight: 700; text-align: left; }
  body.op .tabla.en-tarjetas td:empty { display: none; }
  body.op .tabla.en-tarjetas td.sin-etq::before { display: none; }
  body.op .tabla.en-tarjetas td.sin-etq { justify-content: flex-start; text-align: left; font-weight: 650; }
}

/* ======================= reloj (≤300): íconos solos, una columna ======================= */
@media (max-width: 300px) {
  body.op #app { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body.op .top { padding: 0 6px; gap: 5px; }
  body.op .busca-global { display: none; }
  body.op .top .usuario { margin-left: auto; }
  body.op .rail { height: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body.op .rail a { min-width: 52px; padding: 0 6px; }
  body.op .rail a span { display: none; }
  body.op main { padding: 10px 8px 18px; }
  body.op .franja { grid-template-columns: minmax(0, 1fr); }
  body.op .cabecera h1 { font-size: 1.2rem; }
  body.op .btn, body.op .btn.chico { min-height: 42px; padding: 0 10px; font-size: .86rem; }
  body.op .seccion, body.op .tarjeta { padding: 10px 10px 6px; }
}

/* ======================= monitores grandes ======================= */
@media (min-width: 1700px) {
  body.op { --rail: 272px; }
  body.op main { padding-inline: clamp(40px, 3vw, 72px); }
  body.op .franja { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  body.op .rail a { font-size: 1.02rem; min-height: 52px; }
}
@media (min-width: 2300px) { body.op { font-size: 1.12rem; } body.op main { max-width: 2200px; } }

/* ======================= entrada (login) ======================= */
/* tablet: la foto de arriba con la marca y el texto centrados, y el formulario ancho y centrado */
@media (min-width: 700px) and (max-width: 960px) {
  body.op .entrada .caja { flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; min-height: 260px; }
  body.op .entrada .texto-caja { margin: 0 auto; text-align: center; max-width: 560px; padding-top: 0; }
  body.op .entrada .texto-caja h1 { max-width: none; font-size: clamp(1.7rem, 4.4vw, 2.3rem); margin-bottom: 8px; }
  body.op .entrada .chips { justify-content: center; }
  body.op .entrada form { max-width: 460px; margin-inline: auto; }
}
/* el formulario nunca queda minúsculo en monitores grandes */
@media (min-width: 1700px) {
  body.op .entrada form { max-width: 600px; }
  body.op .entrada form h2 { font-size: 2.2rem; }
  body.op .entrada .campo input { min-height: 56px; font-size: 1.05rem; }
  body.op .entrada .btn.principal { min-height: 58px; font-size: 1.1rem; }
  body.op .entrada .texto-caja h1 { font-size: clamp(3rem, 3.2vw, 4.2rem); }
  body.op .entrada .texto-caja p { font-size: 1.2rem; }
}
/* reloj: el formulario llena la pantalla sin recortar el correo */
@media (max-width: 300px) {
  body.op .entrada form { padding-inline: 10px; }
  body.op .entrada .campo input { font-size: 14px; padding-inline: 6px; }
  body.op .entrada .con-ico svg:first-child { display: none; }
  body.op .entrada .con-ico input { padding-left: 10px; }
}

/* ======================= Finanzas ======================= */
body.op .fin-periodo { margin-bottom: 14px; align-items: center; }
body.op .fin-rango { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
body.op .fin-rango input { min-height: 40px; width: 150px; }
body.op .fin-barras { display: grid; gap: 10px; padding: 8px 0 12px; }
body.op .fin-barra { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
body.op .fin-et { font-weight: 600; font-size: .92rem; }
body.op .fin-pista { height: 12px; border-radius: 6px; background: var(--papel-2); overflow: hidden; }
body.op .fin-pista i { display: block; height: 100%; border-radius: 6px; background: var(--etiqueta); }
body.op .fin-socio { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: end; margin-bottom: 8px; }
body.op .fin-socio .campo { margin: 0; }
@media (max-width: 699px) {
  body.op .fin-barra { grid-template-columns: 1fr auto; } body.op .fin-pista { grid-column: 1 / -1; order: 3; }
  body.op .fin-socio { grid-template-columns: minmax(0, 1fr) 96px; } body.op .fin-socio .btn { grid-column: 1 / -1; }
  body.op .fin-rango { flex: 1 1 100%; } body.op .fin-rango input { width: 100%; }
}

/* Activación y demos: cada ajuste es una fila con el título arriba y su explicación debajo (antes iban pegados en una sola línea), y el formulario de la demo alinea sus campos y el botón */
.seccion-acti .fila-check { align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--regla, rgba(128,128,128,.25)); cursor: pointer; }
.seccion-acti .fila-check:first-of-type { padding-top: 6px; }
.seccion-acti .fila-check input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.seccion-acti .fila-check > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.seccion-acti .fila-check strong { font-size: 1.02rem; font-weight: 700; }
.seccion-acti .fila-check small { display: block; font-size: .9rem; line-height: 1.4; font-weight: 400; color: var(--tinta-suave, #6b7a80); max-width: 70ch; }
.seccion-acti > .nota { margin: 14px 0 0; }
.form-cfg { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)) auto; gap: 14px 16px; align-items: end; margin-bottom: 6px; }
.form-cfg > .campo { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.form-cfg > .campo small { display: block; font-weight: 400; color: var(--tinta-suave, #6b7a80); line-height: 1.3; min-height: 1.3em; }
.form-cfg > .campo input { width: 100%; }
.form-cfg > .btn { align-self: end; justify-self: start; min-height: 44px; padding: 0 28px; }
@media (max-width: 640px) { .form-cfg { grid-template-columns: 1fr 1fr; } .form-cfg > .btn { grid-column: 1 / -1; } }
@media (max-width: 380px) { .form-cfg { grid-template-columns: 1fr; } }

.resumen-acti { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--acento, #2a9aa8) 14%, transparent); font-weight: 600; line-height: 1.4; }