/* ══ Operación · un solo lenguaje para las 17 pantallas (29-sep-2026) ═════
   Paquete de maquetas de Operación V2: cabecera, indicadores, filtros, chips
   con conteo, vistas, cuerpo con panel de detalle, tarjetas, estados y
   vacíos. Tokens de flux.css (oro sobre tinta); los colores de estado son
   semánticos y no se usan como acento. Lo cargan los tres layouts (admin,
   piso y cocina) para que ninguna pantalla se sienta de otra aplicación.

   Botones: acción primaria de la marca = .btn-success (oro con tinta);
   acción de tinta = .btn-primary; secundaria = .btn-outline-secondary. */

.op { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Cabecera: título, subtítulo y acciones de la pantalla ── */
.op-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.op-cab__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.op-cab__titulo h1 { margin: 0; font-size: 1.6rem; font-weight: 750; line-height: 1.2; color: var(--flux-ink-900); display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.op-cab__titulo h1 .flux-ico { width: 1.4rem; height: 1.4rem; flex: none; }
.op-cab__titulo p { margin: 0; color: var(--flux-gray-600); max-width: 72ch; }
.op-cab__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-cab__acciones .btn { white-space: nowrap; }

/* ── Indicadores ── */
.op-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.op-kpi {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px;
    background: #fff; border: 1px solid var(--flux-gray-300); border-radius: 14px;
    color: var(--flux-ink-900); text-decoration: none !important;
}
a.op-kpi:hover { background: var(--flux-gold-100); border-color: var(--flux-gold-400); }
a.op-kpi:active { background: var(--flux-gold-300); }
a.op-kpi:focus-visible { outline: 3px solid var(--flux-gold-500); outline-offset: 2px; }
.op-kpi__ico {
    width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--flux-gray-200); color: var(--flux-ink-700);
}
.op-kpi__ico .flux-ico { width: 22px; height: 22px; }
.op-kpi__texto { display: flex; flex-direction: column; min-width: 0; }
.op-kpi__rotulo { font-size: .82rem; color: var(--flux-gray-600); font-weight: 500; line-height: 1.25; }
.op-kpi__valor { font-size: 1.55rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--flux-ink-900); }
.op-kpi__sub { font-size: .78rem; color: var(--flux-gray-600); font-variant-numeric: tabular-nums; }
.op-kpi--ok .op-kpi__ico { background: var(--flux-success-soft); color: var(--flux-success); }
.op-kpi--alerta .op-kpi__ico { background: var(--flux-warning-soft); color: var(--flux-warning); }
.op-kpi--peligro .op-kpi__ico { background: var(--flux-danger-soft); color: var(--flux-danger); }
.op-kpi--info .op-kpi__ico { background: var(--flux-info-soft); color: var(--flux-info); }
.op-kpi--oro .op-kpi__ico { background: var(--flux-gold-100); color: var(--flux-gold-700); }
.op-kpi--peligro.op-kpi--marcado { border-color: var(--flux-danger); }
.op-kpi--peligro.op-kpi--marcado .op-kpi__valor { color: var(--flux-danger); }
.op-kpi--alerta.op-kpi--marcado { border-color: var(--flux-warning); }

/* ── Filtros y búsqueda ── */
.op-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-filtros .form-select { width: auto; min-width: 150px; }
.op-buscar { position: relative; flex: 1 1 240px; min-width: 200px; }
.op-buscar .flux-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--flux-gray-600); pointer-events: none; }
.op-buscar .form-control { padding-left: 38px; }
.op-filtros .form-check { margin: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* ── Chips de estado con conteo (filtros, no estados guardados) ── */
.op-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.op-chip {
    flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
    border: 1px solid var(--flux-gray-300); border-radius: 999px; background: #fff;
    color: var(--flux-ink-700) !important; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none !important; cursor: pointer;
}
.op-chip:hover { background: var(--flux-gold-100); }
.op-chip:active { background: var(--flux-gold-300); }
.op-chip:focus-visible { outline: 3px solid var(--flux-gold-500); outline-offset: 2px; }
.op-chip.activa, .op-chip[aria-pressed="true"], .op-chip[aria-current="page"] { background: var(--flux-ink-900); border-color: var(--flux-ink-900); color: #fff !important; }
.op-chip__n { min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--flux-gray-200); color: var(--flux-ink-700); font-size: .78rem; text-align: center; font-variant-numeric: tabular-nums; }
.op-chip.activa .op-chip__n, .op-chip[aria-pressed="true"] .op-chip__n, .op-chip[aria-current="page"] .op-chip__n { background: rgba(255, 255, 255, .2); color: #fff; }
.op-chip__punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ── Vistas (plano | lista, columnas | lista…) ── */
.op-vistas { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--flux-gray-300); border-radius: 12px; background: #fff; }
.op-vista {
    min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
    color: var(--flux-ink-700) !important; font: inherit; font-size: .88rem; font-weight: 600; text-decoration: none !important; cursor: pointer;
}
.op-vista:hover { background: var(--flux-gold-100); }
.op-vista.activa, .op-vista[aria-pressed="true"], .op-vista[aria-current="page"] { background: var(--flux-ink-900); color: #fff !important; }
.op-vista .flux-ico { width: 18px; height: 18px; }

/* ── Cuerpo con panel de detalle ── */
.op-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.op-cuerpo--ancho { grid-template-columns: minmax(0, 1fr) 420px; }
.op-cuerpo > * { min-width: 0; }
.op-panel {
    position: sticky; top: calc(var(--mnu-alto, 64px) + 12px);
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    background: #fff; border: 1px solid var(--flux-gray-300); border-radius: 16px;
    max-height: calc(100vh - var(--mnu-alto, 64px) - 24px); overflow-y: auto;
}
.op-panel__cab { display: flex; align-items: flex-start; gap: 10px; }
.op-panel__cab h2 { margin: 0; font-size: 1.15rem; font-weight: 750; flex: 1 1 auto; min-width: 0; }
.op-panel__cerrar { flex: none; }
.op-panel .nav-pills { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
.op-panel .nav-pills .nav-link { flex: 0 0 auto; min-height: 40px; padding: 0 12px; font-size: .88rem; }
.op-panel__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.op-panel__acciones .btn { flex: 1 1 140px; }
.op-panel-vacio { color: var(--flux-gray-600); text-align: center; padding: 24px 12px; margin: 0; }

/* ── Secciones y tarjetas ── */
.op-seccion { background: #fff; border: 1px solid var(--flux-gray-300); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.op-seccion__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.op-seccion__cab h2 { margin: 0; font-size: 1.1rem; font-weight: 750; }
.op-tarjeta { background: #fff; border: 1px solid var(--flux-gray-300); border-radius: 14px; padding: 12px 14px; min-width: 0; }
a.op-tarjeta, button.op-tarjeta { display: block; width: 100%; text-align: left; color: inherit !important; text-decoration: none !important; font: inherit; cursor: pointer; }
a.op-tarjeta:hover, button.op-tarjeta:hover { border-color: var(--flux-gold-400); background: var(--flux-gold-100); }
a.op-tarjeta:focus-visible, button.op-tarjeta:focus-visible { outline: 3px solid var(--flux-gold-500); outline-offset: 2px; }
.op-tarjeta.seleccionada { border-color: var(--flux-ink-900); box-shadow: inset 0 0 0 1px var(--flux-ink-900); }

/* ── Estados (pastillas semánticas) ── */
.op-estado { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--flux-gray-200); color: var(--flux-gray-700); }
.op-estado--ok { background: var(--flux-success-soft); color: #2f6b43; }
.op-estado--alerta { background: var(--flux-warning-soft); color: #8a5a12; }
.op-estado--peligro { background: var(--flux-danger-soft); color: #8e2f24; }
.op-estado--info { background: var(--flux-info-soft); color: #33506f; }
.op-estado--oro { background: var(--flux-gold-100); color: var(--flux-gold-700); }
.op-estado--tinta { background: var(--flux-ink-900); color: #fff; }

/* ── Tablas ── */
.op-tabla { overflow-x: auto; background: #fff; border: 1px solid var(--flux-gray-300); border-radius: 14px; }
.op-tabla table { margin: 0; min-width: 640px; }
.op-tabla thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--flux-gray-600); background: var(--flux-gray-100); font-weight: 700; white-space: nowrap; }
.op-tabla tbody tr.seleccionada { background: var(--flux-gold-100); }
.op-tabla tbody tr[data-fila] { cursor: pointer; }
.op-tabla tbody tr[data-fila]:hover { background: var(--flux-gray-100); }
.op-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Datos etiqueta / valor ── */
.op-datos { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: .92rem; }
.op-datos dt { color: var(--flux-gray-600); font-weight: 500; }
.op-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Vacío y avisos ── */
.op-vacio { padding: 28px 16px; text-align: center; color: var(--flux-gray-600); border: 1.5px dashed var(--flux-gray-300); border-radius: 14px; }
.op-nota { color: var(--flux-gray-600); font-size: .9rem; margin: 0; }
.op-info { padding: 10px 12px; border-radius: 10px; background: var(--flux-info-soft); color: #33506f; font-size: .88rem; }

/* ── Tableta: el panel pasa abajo; teléfono: todo en una columna ── */
@media (max-width: 1199px) {
    .op-cuerpo, .op-cuerpo--ancho { grid-template-columns: 1fr; }
    .op-panel { position: static; max-height: none; }
}
@media (max-width: 767px) {
    .op-cab__titulo h1 { font-size: 1.35rem; }
    .op-cab__acciones { width: 100%; }
    .op-cab__acciones .btn { flex: 1 1 auto; }
    .op-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .op-kpi { padding: 10px 12px; gap: 10px; }
    .op-kpi__ico { width: 36px; height: 36px; }
    .op-kpi__valor { font-size: 1.25rem; }
    .op-filtros .form-select { flex: 1 1 140px; min-width: 0; }
    .op-buscar { min-width: 0; flex-basis: 100%; }
    .op-datos { grid-template-columns: 104px minmax(0, 1fr); }
}
@media print {
    .lat, .mnu, .atajos, footer, .op-cab__acciones, .op-filtros, .op-chips { display: none !important; }
    .lat-hueco.abierto { padding-left: 0 !important; }
}