/* Modo Sala — paleta clara y minimalista ya acordada con el cliente (ver el
   mockup de layouts): el peso visual va en el stack de válvulas, no en cromo
   de navegación. Sin Bootstrap a propósito en esta pantalla. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --border: #dde3e8;
  --text: #1b2430;
  --text-dim: #5c6773;
  --text-faint: #8a94a0;
  --accent: #2f6fed;
  --accent-wash: #e7f0fe;

  --st-open: #189a5c;
  --st-open-bg: #e5f5ec;
  --st-closed: #4b6a85;
  --st-intermediate: #c98a1a;
  --st-fault: #d23c34;
  --st-fault-bg: #fceceb;
  --st-nodata: #8b95a0;

  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  height: 100%;
}

/* body = header + contenido de la página (flex:1, puede scrollear) + footer,
   los tres apilados y el footer siempre anclado abajo del viewport. */
body {
  display: flex;
  flex-direction: column;
}

/* Header compartido (logo) — chico y quieto a propósito, no compite con el
   stack. Separado del "topbar" de cada página (nombre de la locación,
   estado de conexión), que sigue siendo cosa de cada vista. */
/* Una sola franja: logos a la izquierda, nombre de la locación centrado (si
   la página lo define) y una columna vacía simétrica a la izquierda a la
   derecha, para que el centrado sea real sobre todo el ancho — no solo
   respecto del espacio libre después de los logos. */
.app-header {
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-self: start;
}

.app-header-location {
  justify-self: center;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-logo {
  display: block;
}

.app-logo-fepco {
  height: 58px;
}

.app-logo-quickfrac {
  height: 42px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

/* "by Fractech" — pegado al logo de QuickFrac, gap chico y propio (no el
   gap grande que separa FEPCO de QuickFrac). Gris claro (--text-faint) y
   letra chica: crédito del desarrollador, nunca debe competir con QuickFrac. */
.app-brand-quickfrac {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.app-brand-by {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  padding-bottom: 3px; /* alineado cerca de la base del logo, no del medio */
}

/* Sesión de Operador — rincón superior derecho del header (ver
   _SesionWidget.cshtml/OperatorSessionService). justify-self: end simétrico
   con .app-header-brand (justify-self: start), así el nombre de la locación
   sigue centrado sobre el ancho completo. */
.app-header-session {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Reloj del sistema — hora del SERVIDOR (ver _RelojSistema.cshtml), no la
   del navegador de quien mira la pantalla. Último lugar de la fila derecha
   del footer (ver _SalaLayout.cshtml) — mismo rincón que usa Windows para
   el reloj de la bandeja del sistema. */
.system-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
}

.system-clock-time {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.system-clock-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-faint);
}

.op-session {
  display: flex;
  align-items: center;
  gap: 8px;
}

.op-session-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.op-session-anon {
  font-weight: 400;
  color: var(--text-faint);
}

.op-session-countdown {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  min-width: 34px;
  text-align: right;
}

.op-session-form {
  display: contents; /* el <form> no debería afectar el layout flex del padre */
}

.op-session-btn {
  padding: 6px 12px;
  font-size: 12.5px;
}

.sala {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* si no, un hijo con overflow no se achica dentro de un flex item */
  overflow: auto;
}

/* Footer compartido — mismo lugar y misma idea que la referencia que
   pasaste (estado de conexión a la izquierda, accesos a la derecha), con
   nuestro propio estilo. */
.app-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.app-footer-left,
.app-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-btn {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-dim);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* también se usa en un <a> (el ícono de Configuración) */
}

/* Globo numerado (ver app-footer.js) — solo el ícono de Alarmas lo necesita
   hoy, así que es un wrapper propio en vez de tocar .footer-btn en sí (lo
   usan todos los demás íconos del footer). */
.footer-btn-wrap {
  position: relative;
}

.footer-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--st-fault);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  pointer-events: none; /* el click sigue yendo al ícono de abajo */
}

.footer-badge[hidden] { display: none; }

.footer-btn:hover:not(:disabled) { background: var(--accent-wash); border-color: #cfe0fb; color: var(--accent); }
/* Alarmas/Registros están deshabilitados ("próximamente", ver doc/Pendientes.md)
   pero tienen que seguir siendo bien visibles como accesos futuros del panel —
   no tan apagados que parezcan invisibles. */
.footer-btn:disabled { opacity: .65; cursor: not-allowed; }

.conn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}

.conn .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-nodata);
}

.conn.live .dot { background: var(--st-open); }
.conn.down .dot { background: var(--st-fault); }

/* Mismo patrón que .conn (punto + texto), para "sin Operación de Fractura
   activa" — visible en el footer de CUALQUIER página (ver app-footer.js).
   Color propio (accent), no el rojo de .conn.down: no es una falla. */
#mode-indicator .dot { background: var(--accent); }
#mode-indicator { color: var(--accent); font-weight: 600; }
/* .conn fija display:flex — le gana al display:none que el navegador aplica
   por defecto al atributo [hidden] (regla de autor vs. regla de user-agent).
   Mismo problema ya resuelto en .alarm-banner[hidden], acá igual. */
#mode-indicator[hidden] { display: none; }

/* Indicador de conexión con la red de campo (ver app-footer.js) — reusa
   .conn/.dot/.live/.down (mismos colores que #conn-indicator), separado
   de él porque significan cosas distintas: ver el comentario en
   ConfiguracionController.EstadoConexionCampo. */
#field-indicator[hidden] { display: none; }

/* El stack ocupa TODO el espacio disponible (ancho y alto), en cualquier
   proporción de pantalla — sin recortarse, sin quedar chico, sin dejar
   franjas en blanco. No hace falta JS ni nada por-navegador para esto: es
   el propio mecanismo de escalado del SVG (`preserveAspectRatio`, default
   "xMidYMid meet" — encajar completo y centrado, como `object-fit: contain`
   en una imagen), aplicado dándole al <svg> el 100% del ancho Y el alto del
   contenedor (no "height: auto", que es lo que antes lo limitaba solo por
   ancho). Es un estándar de SVG desde siempre, igual en todos los navegadores.*/
/* Wrapper de .stack-wrap + .well-cards (ver el comentario en Sala.cshtml) —
   columna en desktop (dibujo arriba, control box abajo), fila en tablet
   (ver el media query más abajo). Separado de .sala para que .alarm-banner
   siga ocupando el ancho completo en los dos casos. */
.stack-row {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.stack-wrap {
  flex: 1;
  min-height: 0; /* si no, un flex item no se achica más allá del contenido */
  padding: 2px 16px 0; /* casi sin margen arriba a propósito: correr el dibujo hacia arriba para ganarle altura al control box de abajo */
  overflow: hidden;
}

#stack-svg {
  width: 100%;
  height: 100%;
}

#stack-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  /* El dibujo no es texto para seleccionar: sin esto, un clic sobre la cajita
     de presión (o cualquier rótulo) la dejaba seleccionada y el mouse pasaba
     a cursor de texto, como si se pudiera escribir. Las válvulas y botones
     ponen su propio cursor de mano. */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* Gris de fondo de TODO el dibujo (cañerías, cuerpos de válvula, etc. — el
   propio SVG lo trae como .cls-1) — pisado acá para que sea el MISMO gris
   claro que usan las válvulas sin dato (SensorFault/NoData, ver
   ValveColorOptions en appsettings.json, "ValveColors" — si se cambia uno,
   cambiar los tres). Gana por especificidad (id + clase) sin necesidad de
   !important. */
#stack-svg .cls-1 {
  fill: #bcc2c8;
}

/* Callout de presión anclado al dado real (ver layoutPressurePins en
   frac-stack-sala.js) — un <g> agregado DENTRO del propio <svg> del dibujo
   (no un overlay aparte), así que line/rect/text quedan en el mismo sistema
   de coordenadas que el resto del dibujo (Z2, VM, etc.) y escalan solas con
   él en cualquier tamaño de pantalla — nada de convertir píxeles acá.

   "Modelo D" (de las 4 opciones mostradas antes de implementar esto): línea
   punteada + punto que late en el dado en vez de una flecha con punta —
   comunica "sensor en vivo", no solo "el valor viene de acá". */
.pressure-pin-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 2.5;
  fill: none;
}

@keyframes pressure-pin-pulse {
  0%, 100% { r: 3; opacity: 1; }
  50% { r: 5; opacity: .35; }
}

.pressure-pin-dot {
  fill: var(--accent);
  animation: pressure-pin-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.pressure-pin-box {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1;
}

/* font-size en unidades del propio dibujo (el <g> vive DENTRO del <svg>, sin
   viewBox propio) — la caja pasó a "pill" (68x22, ver frac-stack-sala.js)
   justamente para poder agrandar la letra y mostrar la unidad al lado, sin
   desbordar. */
.pressure-pin-text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* 3x el que igualaba la letra de las válvulas, y después -10% a pedido
   (ver commits anteriores) — ya no busca igualar ese alto, es a propósito
   más grande. */
.pressure-pin-value {
  font-size: 13.5px;
  font-weight: 600; /* menos gorda que 700, a pedido */
}

/* La unidad, chica y aparte del valor. */
.pressure-pin-unit {
  font-size: 8.1px;
  font-weight: 600;
  fill: var(--text-dim);
}

/* Etiqueta "HPU 1"/"HPU 2" a la IZQUIERDA de su cajita, a pedido (ver
   layoutHpuChips en frac-stack-sala.js) — los chips de HPU no tienen un
   dado al que apuntar como los de presión de pozo, así que necesitan SU
   propia identificación; mismo tamaño que .pressure-pin-unit, misma
   familia visual. text-anchor "end": se ancla por su borde derecho (x =
   borde izquierdo de la caja menos un margen), así no hace falta medir el
   ancho del texto para que quede pegada a la caja sin overlap. */
.pressure-pin-hpu-label {
  font-size: 8.1px;
  font-weight: 600;
  fill: var(--text-dim);
  text-anchor: end;
  dominant-baseline: middle;
}

/* Insignia de sirena de baja presión (coil HPU{n}.CommandSiren, ver
   AlarmRuleId.HpuLowPressureSirenActive) — pegada a la esquina superior
   derecha de la cajita de HPU (ver buildSirenBadge en frac-stack-sala.js).
   Oculta por default; .is-active la muestra y la hace parpadear — misma
   idea que .footer-badge (que ya usa --st-fault) pero animada, porque acá
   SÍ es una condición activa "ahora mismo", no un contador quieto. */
.pressure-pin-siren {
  opacity: 0;
}

.pressure-pin-siren circle:first-child {
  fill: var(--text);
}

.pressure-pin-siren-glyph path {
  fill: none;
  stroke: var(--surface);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes pressure-pin-siren-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.pressure-pin-siren.is-active {
  opacity: 1;
  animation: pressure-pin-siren-blink 1s step-start infinite;
}

/* Indicadores de cada HPU, al lado de su cajita (ver HPU_INDICATORS en
   frac-stack-sala.js): motor encendido, recargar diésel, recargar fluido
   hidráulico. Sin .is-active no se dibujan — con todo normal no hay nada.
   Negro y gris del propio dibujo, sin color: son información, no alarma. */
.hpu-indicator {
  display: none;
}

.hpu-indicator.is-active {
  display: inline;
}

.hpu-indicator-glyph path {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hpu-indicator-glyph path.is-solid {
  fill: var(--text);
  stroke: none;
}

.hpu-indicator-legend {
  font-size: 6.5px;
  font-weight: 600;
  fill: var(--text-dim);
  dominant-baseline: middle;
}

/* Nombre completo del pozo, centrado debajo de VM (ver layoutWellNameLabels
   en frac-stack-sala.js). Misma letra que tenía el número suelto junto a V3
   al que reemplaza (30px), a la mitad de tamaño a pedido. `y` es el TOPE
   del texto (text-before-edge), no la línea de base — así el JS lo apoya
   justo debajo de la válvula sin tener que saber la altura de la letra. */
.pressure-pin-well-name {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  fill: var(--accent); /* mismo azul que el borde de .pressure-pin-box, a pedido */
  text-anchor: middle;
  dominant-baseline: text-before-edge;
}

/* Botón "Secuencia de operaciones" de cada stack, debajo de la etiqueta V3
   (ver layoutSequenceMenuButtons en frac-stack-sala.js). A pedido: dibujo en
   negro (el mismo de los rótulos de válvula del dibujo) dentro de un
   cuadrado de esquinas redondeadas con borde de línea fina. */
.seq-menu-btn {
  cursor: pointer;
  color: #111;
  outline: none;
}

.seq-menu-btn-bg {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: .6;
}

/* Con una secuencia en curso en ese pozo, las dos flechas giran alrededor
   de la válvula (el grupo de las flechas tiene su origen en el centro del
   ícono, ver layoutSequenceMenuButtons). */
.seq-menu-btn.is-running .seq-menu-btn-arrows {
  transform-origin: 0 0;
  animation: seq-menu-spin 2s linear infinite;
}

@keyframes seq-menu-spin { to { transform: rotate(360deg); } }

.seq-menu-btn-fill { fill: currentColor; }
.seq-menu-btn-valve { stroke: currentColor; stroke-width: .9; stroke-linejoin: round; }
.seq-menu-btn-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.seq-menu-btn:hover .seq-menu-btn-bg,
.seq-menu-btn:focus-visible .seq-menu-btn-bg,
.seq-menu-btn[aria-expanded="true"] .seq-menu-btn-bg {
  fill: #e6e9ed;
  stroke-width: 1;
}

/* Las opciones del diálogo que abre ese botón (#seq-panel, un .panel común):
   una debajo de la otra, a todo el ancho, con el mismo .btn del resto. */
.seq-panel-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "PUMP-DOWN" / "FLOWBACK" debajo de cada par de válvulas laterales, visible
   solo con las dos abiertas (ver layoutLineLabels/updateLineLabels en
   frac-stack-sala.js). Negro y en la misma familia que los rótulos de
   válvula del propio dibujo (L1, L2...), un poco más chico para que el
   texto entre en el ancho del par. `y` es el TOPE del texto. */
.line-mode-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 6px; /* "PUMP-DOWN" entra justo en el ancho de L1+L2 (~40 unidades) */
  font-weight: 700;
  fill: #111;
  text-anchor: middle;
  dominant-baseline: text-before-edge;
}

/* Estado operativo del pozo ("WIRELINE", "FRACTURA") arriba de V3, visible
   solo mientras las válvulas están en esa combinación (ver
   layoutWellStateLabels/updateWellStateLabel en frac-stack-sala.js). Misma
   familia y negro que los rótulos de válvula del dibujo. `y` es la BASE del
   texto: el JS lo apoya justo encima de la válvula. */
.well-state-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  fill: #111;
  text-anchor: middle;
  dominant-baseline: text-after-edge;
}

/* Fila de "control box" por pozo — nombre, estado operativo, presión.
   El fondo es el color identificatorio de CADA pozo (configurable, ver
   WellOptions.Color); el texto se calcula server-side para que siempre
   se lea, sea cual sea el color elegido.

   A propósito quedan CONTINUOS (sin espacio entre uno y otro, una sola
   barra) y cada uno alineado horizontalmente bajo SU pozo en el SVG — el
   ancho de cada tramo no es parejo, es el que le corresponde a ese pozo
   en el dibujo real (frac-stack-sala.js lo calcula leyendo la posición del
   grupo del SVG y lo aplica acá vía left/width en línea). Por eso .well-card
   es position:absolute con top/height fijos por CSS, y left/width en JS. */
.well-cards {
  position: relative;
  height: 132px; /* lo justo para los cuatro renglones (pozo, etapa, inicio/duración, secuencia) sin aire de más — a pedido, para dejarle más alto al dibujo */
  margin: 6px 16px 8px;
  border-radius: 8px;
  overflow: hidden; /* también recorta las puntas de los .well-card para que la barra quede con esquinas redondeadas */
  box-shadow: 0 8px 20px -14px rgba(20, 30, 45, .35);
}

.well-card {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 10px 16px; /* vertical chico a pedido (la tarjeta baja, el dibujo crece) — horizontal sin cambios */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* filas apiladas arriba, separadas por gap — no space-between (dejaba demasiado aire entre renglones) */
  gap: 5px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .25); /* separa sin cortar la continuidad de la barra */
}

.well-card:last-child { border-right: none; }

.well-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: none; /* alto fijo por contenido — que no lo termine achicando el flex para hacerle lugar a otra fila */
}

.well-card-label {
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .8;
  flex: none;
  white-space: nowrap;
}

.well-card-value {
  font-weight: 600;
  font-size: 19px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bloque de datos del pozo debajo de su nombre: etapa (con su inicio y
   duración) y, si la hay, la secuencia en curso. Mismo look que el resto de
   la tarjeta (fondo del color del pozo, letra blanca/oscura heredada). */
.well-card-state {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

/* Un renglón del bloque: etiqueta a la izquierda, valor o control a la
   derecha — solo en pantalla grande: en tablet (ver el media query) la
   etiqueta va en su propio renglón arriba. */
.well-card-state-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.well-card-state-row .well-card-label {
  align-self: center;
}

/* Etapa de ESE pozo (ver Sala.cshtml/etapa-actual.js): a la derecha, el
   número + el botón de incrementar. */
.well-card-stage {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
}

.well-card-stage-number {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
}

.well-card-stage-btn {
  width: 22px;
  height: 22px;
  line-height: 1;
  flex: none;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .18);
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.well-card-stage-btn:hover { background: rgba(255, 255, 255, .32); }

/* Corrección de etapa (restar una): el mismo botón, más apagado — está para
   deshacer un error, no es parte de la operación normal. */
.well-card-stage-btn-minus { opacity: .55; }
.well-card-stage-btn-minus:hover { opacity: 1; }

/* Inicio/Duración — mismo renglón de siempre, pero sin el label a la
   izquierda (son dos valores, no un control): los dos comparten el
   ancho, cada uno con su propia etiqueta corta pegada al valor. */
.well-card-stage-times {
  justify-content: space-between;
  font-size: 14.5px;
  opacity: .9;
}

.well-card-stage-time {
  white-space: nowrap;
}

.well-card-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  margin-left: 3px;
}

/* La secuencia de operaciones en curso de ese pozo (ver updateSequenceUi en
   frac-stack-sala.js): nombre y paso. El renglón entero se oculta con el
   atributo hidden mientras no haya ninguna — sin este override,
   .well-card-state-row fuerza display:flex y pisa el hidden del navegador. */
.well-card-sequence-row[hidden] {
  display: none;
}

.well-card-sequence-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aviso de la última falla de comando de ese pozo — dato real (viene de
   valve_operations), no un motor de alarmas todavía. Ver doc/Pendientes.md. */
.well-card-alarm-badge {
  /* Adentro del propio card (no sobresaliendo): .well-cards recorta con
     overflow:hidden para que la barra continua tenga esquinas prolijas,
     así que un badge "flotando afuera" quedaría cortado. */
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--st-fault);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.well-card-alarm-badge[hidden] { display: none; }

/* Banner global de alarmas — aparece SOLO si hay algo activo, arriba del
   stack. Mismo dato que el badge de cada control box, en un solo lugar. */
.alarm-banner {
  margin: 0 24px;
  padding: 10px 14px;
  background: var(--st-fault-bg, #fceceb);
  border: 1px solid var(--st-fault);
  border-radius: 8px;
  color: #8f2a24;
  font-size: 13.5px;
  font-family: var(--font-mono);
}

.alarm-banner[hidden] { display: none; }

/* "Operación peligrosa" (ver Sala.cshtml): más fuerte que un aviso — fondo
   lleno, no un borde — porque no es una falla de un equipo sino un estado de
   las válvulas que no se tiene que dar. */
.hazard-banner {
  margin: 4px 24px 0;
  padding: 10px 14px;
  background: var(--st-fault, #d23c34);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.hazard-banner strong {
  margin-right: 10px;
  letter-spacing: 0.04em;
}

.hazard-banner span {
  display: block;
  margin-top: 2px;
  font-weight: 500;
}

.hazard-banner strong + span {
  display: inline;
  margin-top: 0;
}

.hazard-banner[hidden] { display: none; }

/* Por debajo de 1400px (ver frac-stack-sala.js, MIN_INTERACTIVE_WIDTH) —
   por encima del ancho real de la tablet de campo en horizontal (1280px,
   datasheet EXO Rugged R10): a ese tamaño comandar válvulas con el dedo no
   es cómodo, así que el click sobre una válvula queda deshabilitado (el
   modo sigue siendo de solo lectura, ahora sin un aviso de texto aparte —
   el layout vertical angosto ya es la señal). Los control box pasan de
   franja horizontal (bajo el dibujo) a columna vertical A LA DERECHA del
   dibujo — así el stack, que es lo que de verdad importa mirar, se queda
   con casi toda la pantalla. alignWellCards (frac-stack-sala.js) deja de
   calcular left/width por pozo en este modo: acá el ancho/alto de cada
   tarjeta lo da el flex de la columna, no la posición de SU pozo en el SVG. */
@media (max-width: 1399px) {
  .stack-row {
    flex-direction: row;
  }

  .stack-wrap {
    padding: 8px 4px 8px 12px;
  }

  /* Acá abajo de 1400px, CUALQUIER click en el dibujo abre el diálogo
     "Operar" (ver frac-stack-sala.js) — no hace falta acertarle a una
     válvula puntual. El cursor de mano en todo el SVG (no solo en cada
     válvula, como en pantalla grande) es la señal de que es así. */
  #stack-svg svg {
    cursor: pointer;
  }

  .well-cards {
    position: static;
    flex: none;
    width: 220px;
    height: auto;
    margin: 8px 12px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .well-card {
    position: static;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    width: 100%;
    padding: 8px 10px;
    gap: 5px;
    justify-content: space-between; /* acá SÍ reparte el aire libre entre renglones (a diferencia de desktop) — deja cada tarjeta usando todo su alto disponible en la columna */
    border-radius: 8px;
    border-right: none;
    box-shadow: 0 4px 14px -10px rgba(20, 30, 45, .4);
  }

  /* Achicado a fondo (ver el pedido del usuario: el contenido quedaba
     tapado por overflow:hidden cuando 4 tarjetas comparten el alto real de
     la tablet, más bajo que el de este monitor de referencia) — todo el
     contenido de la tarjeta más chico, no solo el contenedor. */
  .well-card-label { font-size: 13px; }
  .well-card-value { font-size: 15.5px; }

  .well-card-state { gap: 2px; }

  /* En desktop la etiqueta va pegada al valor, en la misma fila (ver la
     regla sin media query) — acá va en su propio renglón, con flex-wrap
     forzando el salto de línea. */
  .well-card-state-row {
    gap: 4px;
    flex-wrap: wrap;
  }

  .well-card-state-row .well-card-label {
    flex: 0 0 100%;
    align-self: auto;
  }

  /* Mismo criterio de "achicado a fondo" de acá arriba, para las dos filas
     de Etapa/Inicio/Duración agregadas después — si no, en una tablet real
     (más baja que este monitor de referencia) se recortan igual que pasaba
     antes con el resto de la tarjeta. */
  .well-card-stage-number { font-size: 18px; }
  .well-card-stage-btn { width: 22px; height: 22px; font-size: 15px; }
  .well-card-stage-times { font-size: 13px; }
}

/* Panel de comando — flotante (no fijo a un costado): aparece al clickear
   una válvula del SVG, con posición default en el hueco libre del dibujo
   (debajo del "misil"/manifold central, entre C2 y C3 — ver
   defaultPanelPosition en frac-stack-sala.js) para no tapar ningún pozo, y
   se puede arrastrar desde su cabecera a cualquier otro lugar. `left`/`top`
   los pone JS en cada apertura y durante el arrastre; acá solo el tamaño y
   la apariencia de tarjeta flotante. */
.panel {
  position: fixed;
  width: 330px; /* entra "Posición de la válvula" + la píldora "Posición intermedia" en un renglón */
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(20, 30, 45, .45), 0 4px 14px -6px rgba(20, 30, 45, .25);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.panel[hidden] { display: none; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  background: var(--bg);
  cursor: move; /* agarradera: de acá se arrastra todo el panel */
  touch-action: none; /* si no, el navegador scrollea la página en vez de dejar arrastrar en touch */
  user-select: none;
}

.panel-header.dragging { cursor: grabbing; }

.panel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-faint);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
}

.panel-close:hover { background: var(--accent-wash); color: var(--accent); }

.panel h2 {
  margin: 0;
  font-size: 18px;
}

.panel-state {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}

/* Ángulo de palanca — auxiliar, mismo criterio visual que .panel-state (no
   es una alarma ni un mensaje de resultado, solo un dato extra). */
.panel-info {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Sin uso actual — quedó del diseño viejo de usuario/contraseña por
   formulario (ver doc/Pendientes.md ítem 5), reemplazado por el diálogo
   compartido de Sesión de Operador (operator-session.js). Ningún
   .cshtml/.js referencia esta clase hoy. */
.panel-firma {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-firma label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.panel-firma input {
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
}

.panel-actions {
  display: flex;
  gap: 10px;
}

/* Posición declarada por el operador (válvula manual sin sensor) — dos
   radios, a propósito NO un combo: se ve de un vistazo cuál está marcada y
   un toque la cambia (pensado para la tablet). Ver #panel-manual-position
   en Sala.cshtml. */
.panel-manual-position {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #d6dbe3);
  border-radius: 8px;
}

/* `display: flex` de arriba le gana al `display: none` que trae de fábrica
   el atributo `hidden` — sin esto, ocultar por JS (panelActions.hidden =
   true en una válvula manual) no ocultaba nada. */
.panel-actions[hidden],
.panel-manual-position[hidden] {
  display: none;
}

.panel-manual-position legend {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 0 4px;
}

.panel-manual-position label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.panel-manual-position input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

.btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 600;
  cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-open { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-open:hover:not(:disabled) { color: #fff; opacity: .9; }

/* Única acción irreversible de la app hoy (Eliminar usuario, ver
   Usuarios/Eliminar.cshtml) — mismo --st-fault que ya se usa para "falla"
   en el resto de la app, no un rojo nuevo inventado para la ocasión. */
.btn-danger { background: var(--st-fault); border-color: var(--st-fault); color: #fff; }
.btn-danger:hover:not(:disabled) { color: #fff; opacity: .9; }

.panel-msg {
  font-size: 13px;
  color: var(--text-dim);
}

.panel-msg:empty,
.panel-state:empty { display: none; }

/* --- Diálogos de operación: válvula y secuencia ---------------------------
   Los dos comparten cuerpo y criterio de color (elegido por el usuario
   entre tres propuestas, "monocromo"): todo en grises y negro, y el ÚNICO
   color es el de los botones de operación — verde abrir, rojo cerrar, los
   mismos con los que se pintan las válvulas en el dibujo (ValveColors; los
   pisa frac-stack-sala.js sobre .panel con los de la configuración, los de
   acá son solo el default). */
.panel {
  --valve-open: #00c853;
  --valve-closed: #ff2b2b;
  --mono: #5c6773; /* el gris de todo lo que antes llevaba color: pasos hechos, cronómetro */
}

.panel-body[hidden] { display: none; }

.panel-status {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-status[hidden] { display: none; }

.panel-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-status dt { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.panel-status dd { margin: 0; }

/* Posición de palanca / de válvula: texto simple, sin píldora ni color. */
.panel-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.btn-valve-open { --tone: var(--valve-open); }
.btn-valve-close { --tone: var(--valve-closed); }

/* Abrir SIEMPRE verde, Cerrar SIEMPRE rojo. Deshabilitado: el mismo color,
   más apagado y con borde punteado — se sigue leyendo cuál es cuál. */
.btn-valve-open,
.btn-valve-close {
  background: color-mix(in srgb, var(--tone) 18%, #fff);
  border: 1.5px solid var(--tone);
  color: color-mix(in srgb, var(--tone) 55%, #000);
  font-size: 15px;
}

.btn-valve-open:hover:not(:disabled),
.btn-valve-close:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tone) 32%, #fff);
  border-color: var(--tone);
  color: color-mix(in srgb, var(--tone) 45%, #000);
}

.btn-valve-open:disabled,
.btn-valve-close:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--tone) 7%, #fff);
  border: 1.5px dashed color-mix(in srgb, var(--tone) 40%, #fff);
  color: color-mix(in srgb, var(--tone) 40%, #fff);
}

/* "Engrasar": tercer botón de la fila, neutro (no mueve la válvula, no lleva
   el color de abrir ni de cerrar). Deshabilitado: mismo criterio que los
   otros dos, apagado y con borde punteado. */
.btn-grease {
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 14px;
  padding-inline: 4px;
}

.btn-grease:hover:not(:disabled) { border-color: var(--text); color: var(--text); }

.btn-grease:disabled {
  opacity: 1;
  border-style: dashed;
  color: color-mix(in srgb, var(--text) 35%, #fff);
}

/* "Confirmar" de una pregunta de la secuencia: negro, no es abrir ni cerrar. */
.btn-confirm { background: var(--text); border-color: var(--text); color: #fff; font-size: 15px; }
.btn-confirm:hover:not(:disabled) { color: #fff; opacity: .88; }

/* Resumen de la operación: cronómetro centrado + una línea de texto. */
.panel-op {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.panel-op[hidden] { display: none; }

.panel-op-ring {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--mono) 14%, #fff);
  color: color-mix(in srgb, var(--mono) 55%, #000);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
}

.panel-op-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--mono) 55%, #fff);
}

/* Operando: el borde gira. */
.panel-op-ring.is-running::before {
  border-color: color-mix(in srgb, var(--mono) 22%, #fff);
  border-top-color: var(--mono);
  animation: panel-op-spin 1s linear infinite;
}

@keyframes panel-op-spin { to { transform: rotate(360deg); } }

.panel-op-text { font-size: 14px; font-weight: 600; }

/* Falla: el cronómetro detenido con un "!" negro, y el motivo en su propio renglón. */
.panel-op-ring.is-failed::after {
  content: "!";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font: 700 14px/20px Arial, Helvetica, sans-serif;
  text-align: center;
}

.panel-op-reason {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
}

/* --- Diálogo de secuencia (ver #seq-panel en Sala.cshtml) ------------------
   La fila de pasos: un círculo numerado por paso, unidos por una línea, con
   la etiqueta corta debajo (código de válvula, o el nombre de la pregunta). */
.seq-steps {
  display: flex;
  align-items: flex-start;
}

.seq-step {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
}

.seq-step::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #d5dbe1;
}

.seq-step:first-child::before { display: none; }

.seq-step.is-done::before,
.seq-step.is-current::before,
.seq-step.is-failed::before { background: #9aa5b1; }

.seq-step-circle {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #d5dbe1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px Arial, Helvetica, sans-serif;
}

.seq-step.is-done,
.seq-step.is-current,
.seq-step.is-failed { color: var(--text); }

.seq-step.is-done .seq-step-circle { background: var(--mono); border-color: var(--mono); color: #fff; }
.seq-step.is-current .seq-step-circle { border-color: var(--text); color: var(--text); }
.seq-step.is-failed .seq-step-circle { background: var(--text); border-color: var(--text); color: #fff; }

/* "Paso 2 de 5  Abrir L2" */
.seq-step-title { font-size: 14px; font-weight: 700; }
.seq-step-title[hidden] { display: none; }
.seq-step-title small { margin-right: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); }

/* La pregunta de una secuencia usa el mismo círculo, con un "?" (va arriba
   del botón "Confirmar"; el cronómetro, debajo del botón). Con la secuencia
   finalizada el círculo se oculta: queda solo el texto ("Secuencia
   finalizada en 20 segundos"). */
.panel-op-ring.is-question { background: #fff; color: var(--text); font: 700 30px Arial, Helvetica, sans-serif; }
.panel-op-ring.is-question::before { border-color: var(--mono); }
.panel-op-ring[hidden] { display: none; }

/* Con el avance automático activo, el botón de operación manual del paso
   sigue a la vista pero deshabilitado, en gris. */
.is-auto .btn-valve-open:disabled,
.is-auto .btn-valve-close:disabled {
  background: #eef1f4;
  border: 1.5px solid #cfd6dd;
  color: #9aa5b1;
}

.seq-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.seq-footer[hidden] { display: none; }

/* "Avanzar automáticamente" / activo: "Parar avance automático" (negro). */
.seq-auto {
  padding: 9px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 600 14px var(--font-ui);
  cursor: pointer;
}

.seq-auto:hover { border-color: var(--text); }
.seq-auto.is-on { border-color: var(--text); background: var(--text); color: #fff; }

.seq-cancel {
  align-self: center;
  padding: 0 6px;
  border: 0;
  background: none;
  font: 600 12.5px var(--font-ui);
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}

.seq-cancel:hover { color: var(--text); }

/* Páginas de Configuración (de Proyecto) — mismo header/footer que Modo
   Sala, pero el contenido es una página normal que scrollea, no un
   tablero fijo — de ahí el max-width centrado, distinto de .sala. */
.config-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  width: 100%;
  flex: 1;
  min-height: 0; /* mismo motivo que .sala: si no, el footer no queda anclado abajo cuando el contenido es más corto que la pantalla */
  overflow-y: auto;
}

/* Alarmas: mismas tarjetas/título/aviso que .config-page (formulario), pero
   MUCHO más ancha — es una tabla de datos, no un formulario angosto. Sin
   esto, la tabla queda apretada en 640px con scroll horizontal aunque sobre
   espacio a los costados. */
.alarmas-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px 48px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Grafana embebido (ver GrafanaController) — mismo motivo de flex:1 que
   .sala/.config-page, para que el iframe ocupe todo el espacio entre header
   y footer, sin scroll propio de la página (el scroll queda adentro del
   dashboard de Grafana). */
.grafana-embed {
  flex: 1;
  min-height: 0;
}

.grafana-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Tablero que tiene que entrar entero en la pantalla: grafana-embed.js le da
   al iframe un tamaño mayor que este contenedor y lo achica en proporción. */
.grafana-embed--fit {
  position: relative;
  overflow: hidden;
}

.grafana-embed--fit iframe {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.config-title {
  margin: 0 0 6px;
  font-size: 22px;
}

.config-hint {
  margin: 0 0 20px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
}

.config-notice {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.config-notice-ok { background: var(--accent-wash); color: var(--accent); }
.config-notice-error { background: #fceceb; color: #8f2a24; border: 1px solid var(--st-fault); }
.config-notice-error ul { margin: 4px 0 0; padding-left: 18px; }
.config-notice-warning { background: #fdf3e0; color: #8a5a12; border: 1px solid var(--st-intermediate); }

.config-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.config-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
}

.config-card-compact {
  padding: 10px 14px;
}

.config-card-compact h2 {
  margin: 0 0 8px;
  font-size: 13px;
}

.config-card-compact .config-hint {
  margin-bottom: 8px !important;
  font-size: 12px;
}

.config-card-compact .config-notice {
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.config-card-compact .btn {
  padding: 6px 10px;
  font-size: 12.5px;
}

.config-op-info { margin: 0 0 12px; }

.config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.config-field:last-child { margin-bottom: 0; }

/* Dos campos cortos en una fila (nombre y apellido, DNI y empresa — ver
   Usuarios/Crear.cshtml). */
.config-field-row {
  display: flex;
  gap: 14px;
}

.config-field-row .config-field { flex: 1; }

/* --- Página Permisos (ver Views/Permisos/Index.cshtml, permisos.js) ------- */

.permisos-page { max-width: 1840px; }

.permisos-pozos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.permiso-pozo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
}

.permiso-pozo-vigente {
  border-color: var(--st-open);
  box-shadow: inset 4px 0 0 var(--st-open);
}

.permiso-pozo h2 {
  margin: 0;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.permiso-estado {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.permiso-estado-none, .permiso-estado-expired { background: #eef1f4; color: var(--text-dim); }
.permiso-estado-active { background: var(--st-open-bg); color: var(--st-open); }
.permiso-estado-used { background: var(--accent-wash); color: var(--accent); }
.permiso-estado-annulled { background: var(--st-fault-bg); color: var(--st-fault); }

.permiso-vacio {
  margin: auto 0;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.permiso-pozo .permiso-otorgar { flex: none; align-self: center; padding: 8px 16px; background: var(--accent); border-color: var(--accent); color: #fff; }
.permiso-pozo .permiso-anular { flex: none; align-self: flex-start; color: var(--st-fault); border-color: #f0b9b5; padding: 4px 10px; font-size: 12px; }

.permiso-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.permiso-items li::before { content: "○ "; color: var(--text-faint); }
.permiso-items li.usada::before { content: "✓ "; color: var(--st-open); }
.permiso-items li.usada { color: var(--text-dim); }

.permiso-meta {
  margin: auto 0 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* El diálogo de otorgar: más ancho que el de sesión, tiene el armado de
   operaciones y una firma por autorizador. */
.op-session-dialog.permiso-dialog { width: 760px; text-align: left; }
.op-session-dialog.permiso-dialog h2, .op-session-dialog.permiso-dialog .config-hint { text-align: left; }

.permiso-paso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 12px 0 6px;
}

.permiso-paso b {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.permiso-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.permiso-chips-vacio { font-size: 12.5px; color: var(--text-faint); }

.permiso-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
}

.permiso-chip-seq { border-color: var(--accent); background: var(--accent-wash); }

.permiso-chip-x {
  border: 0;
  background: none;
  color: var(--text-faint);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
}

.permiso-agregar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}

.permiso-agregar .config-field { margin-bottom: 0; }
.permiso-agregar .permiso-agregar-ancho { flex: 1; min-width: 200px; }
.permiso-agregar .btn { flex: none; padding: 7px 12px; margin-left: auto; }

/* Una firma debajo de la otra: con dos autorizadores lado a lado los cuatro
   campos no entraban en el diálogo y la contraseña del tipo 2 quedaba
   recortada (reportado 2026-10-02). */
.permiso-firmas { display: flex; flex-direction: column; gap: 10px; }

.permiso-firma {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}
.permiso-firma-campos input { width: 100%; min-width: 0; box-sizing: border-box; }
.permiso-firmas-ayuda { font-size: 12px; color: var(--text-dim); margin: 6px 0 0; }
.permiso-firmas-ayuda a, #permiso-dialog-cambiar-contrasena, #anular-dialog-cambiar-contrasena { color: var(--accent); font-weight: 600; }

.permiso-firma h3 { margin: 0 0 8px; font-size: 13px; }
.permiso-firma h3 small { color: var(--text-dim); font-weight: 500; }
.permiso-firma-campos { display: flex; gap: 10px; }
.permiso-firma-campos .config-field { flex: 1; margin-bottom: 0; }

.permiso-dialog-actions { flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 14px; }
.permiso-dialog-actions .btn { flex: none; padding: 8px 18px; }
.permiso-dialog #permiso-dialog-error, .op-session-dialog #anular-dialog-error { margin: 10px 0 0; }

/* Opciones excluyentes con su explicación debajo (el modo de autorización,
   ver Configuracion/Proyecto.cshtml). */
.config-field-radios { gap: 8px; }

.config-field-radios label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

.config-field-radios label small {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
}

.config-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.config-field-hint {
  font-weight: 400;
  opacity: .8;
}

.config-field input[type="text"],
.config-field input[type="number"],
.config-field input[type="password"],
.config-field select {
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.config-field input:disabled { opacity: .5; cursor: not-allowed; }

.config-well-names { margin-bottom: 14px; }

/* Página de Alarmas — filtro en fila (envuelve en pantallas chicas) + tabla
   de resultados. Mismas tarjetas (.config-card) que el resto de las páginas
   de configuración, para que se sienta parte de la misma app. */
.alarm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.alarm-filter .config-field { margin-bottom: 0; min-width: 160px; }

.config-field-checkbox label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 400;
  white-space: nowrap;
}

/* Ancho variable de contenido (fechas, mensajes largos) — scroll propio en
   vez de romper el ancho de la página, igual que cualquier tabla ancha. */
.alarm-table-wrap { overflow-x: auto; }

.alarm-table {
  width: 100%;
  table-layout: fixed; /* respeta el <colgroup> — Mensaje se lleva el ancho sobrante, el resto queda fijo */
  border-collapse: collapse;
  font-size: 13.5px;
}

.alarm-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.alarm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: break-word; /* table-layout:fixed no ajusta el ancho solo — hay que permitir que el texto largo (Mensaje) rompa línea */
}

/* Franja de color a la izquierda según severidad — no repinta toda la fila,
   solo marca de un vistazo sin competir con el texto. */
.alarm-row-critical td:first-child { border-left: 3px solid var(--st-fault); }
.alarm-row-warning td:first-child { border-left: 3px solid var(--st-intermediate); }

/* Cuántas veces se repitió la misma alarma (regla+sujeto) sin reconocerse —
   ver EfAlarmStore.Raise*Async, que reafirma la fila en vez de duplicarla. */
.alarm-occurrence-count {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.alarm-table .btn {
  padding: 6px 10px;
  font-size: 12.5px;
  flex: none;
}

/* Página de Alarmas compacta en vertical (a pedido: que entren más alarmas
   en pantalla) — un poco menos de aire en la página y en las tarjetas; las
   filas, iguales a las de Registros. Solo Alarmas/Index.cshtml lleva esta clase;
   Registros y Modo de Prueba, que comparten .alarmas-page/.alarm-table,
   quedan como estaban. */
.alarmas-compact { padding: 14px 32px 20px; }
.alarmas-compact .config-title { margin-bottom: 2px; font-size: 20px; }
.alarmas-compact .config-hint { margin-bottom: 10px; line-height: 1.35; }
.alarmas-compact .config-notice { padding: 6px 12px; margin-bottom: 10px; }
.alarmas-compact .config-card { padding: 10px 16px; margin-bottom: 10px; }
.alarmas-compact .config-card h2 { margin-bottom: 6px; }
.alarmas-compact .config-card .config-hint { margin-bottom: 6px; }
.alarmas-compact .config-field select { padding: 5px 8px; }
.alarmas-compact .alarm-filter { gap: 12px; }
.alarmas-compact .alarm-filter .btn { padding: 7px 10px; }

/* Filas de la tabla: MISMO padding y misma altura que las de Registros (a
   pedido — la primera versión compacta las había dejado mucho más bajas).
   No se pisa el padding de .alarm-table; lo único propio es el botón
   Reconocer, chico para que entre en el alto de un renglón de texto y no
   estire la fila, y el centrado vertical del texto contra él. */
.alarmas-compact .alarm-table td { vertical-align: middle; }
.alarmas-compact .alarm-table form { display: flex; margin: 0; } /* sin esto el botón, como elemento en línea, le suma unos píxeles de renglón a la fila */
.alarmas-compact .alarm-table .btn { padding: 0 10px; font-size: 12px; line-height: 16px; }

/* Página de Registros (la bitácora, Registros/Index.cshtml). Misma base que
   Alarmas (.alarmas-page, .alarm-table) pero con MUCHAS columnas: la tabla
   reparte el ancho sola (no hay <colgroup>), nada corta renglón salvo el
   Detalle, y cada columna se oculta poniéndole a la tabla "sin-{columna}"
   (lo maneja registros.js con las casillas del botón "Columnas"). */
.registros-page { max-width: 1840px; }

.registros-campo-corto { min-width: 0 !important; width: 100px; }
.registros-page .config-field input[type="datetime-local"],
.registros-page .config-field input[type="number"] {
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.registros-filtrar { flex: none; padding: 9px 22px; }

.registros-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.registros-cabecera h2 { margin: 0; }
.registros-truncado { font-weight: 400; font-size: 13px; color: var(--text-dim); }
.registros-acciones { position: relative; display: flex; gap: 8px; flex: none; }

.registros-boton {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 600 13px var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}
.registros-boton:hover { border-color: var(--text); }

.registros-columnas {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 5;
  width: 260px;
  max-height: min(58vh, 520px); /* son muchas columnas: que el menú no se salga de la pantalla ni quede debajo del pie */
  overflow-y: auto;
  display: grid;
  gap: 5px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(20, 30, 45, .45);
  font-size: 13px;
}
.registros-columnas[hidden] { display: none; }
.registros-columnas b { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.registros-columnas label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.registros-columnas-reset { margin-top: 6px; padding: 5px; border: 0; background: none; color: var(--text-dim); font: 600 12.5px var(--font-ui); text-decoration: underline; cursor: pointer; }

.registros-tabla { table-layout: auto; }
.registros-tabla th, .registros-tabla td { white-space: nowrap; }
.registros-tabla td.registros-detalle { white-space: normal; min-width: 220px; }

/* Inicio y fin de la Operación de Fractura: se destacan. Inicio y fin de una
   secuencia: sombreado suave, para ver dónde empieza y dónde termina. */
.registros-hito td { background: var(--accent-wash); font-weight: 600; }
.registros-borde td { background: var(--bg); }

.registros-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 17px;
  color: var(--text-dim);
}

.registros-tabla.sin-fecha [data-col="fecha"],
.registros-tabla.sin-operacion [data-col="operacion"],
.registros-tabla.sin-pozo [data-col="pozo"],
.registros-tabla.sin-etapa [data-col="etapa"],
.registros-tabla.sin-estado [data-col="estado"],
.registros-tabla.sin-secnum [data-col="secnum"],
.registros-tabla.sin-secuencia [data-col="secuencia"],
.registros-tabla.sin-registro [data-col="registro"],
.registros-tabla.sin-detalle [data-col="detalle"],
.registros-tabla.sin-acumuladas [data-col="acumuladas"],
.registros-tabla.sin-antesdespues [data-col="antesdespues"],
.registros-tabla.sin-resultado [data-col="resultado"],
.registros-tabla.sin-duracion [data-col="duracion"],
.registros-tabla.sin-palanca [data-col="palanca"],
.registros-tabla.sin-recorrido [data-col="recorrido"],
.registros-tabla.sin-avance [data-col="avance"],
.registros-tabla.sin-presionpozo [data-col="presionpozo"],
.registros-tabla.sin-presionhpu [data-col="presionhpu"],
.registros-tabla.sin-usuario [data-col="usuario"],
.registros-tabla.sin-tipo [data-col="tipo"],
.registros-tabla.sin-nivel [data-col="nivel"] { display: none; }

/* Modo de Prueba (Prueba/Index.cshtml) — un <details> compacto por
   DISPOSITIVO (un PLC = una tabla, con su propio checkbox de "simular
   falla") en vez de la tarjeta siempre abierta de antes; con ~150 tags
   entre los 9 PLC simulados, todo abierto a la vez no entraba en pantalla.
   Mismo look de tabla que .alarm-table. */
.prueba-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface);
  overflow: hidden;
}

.prueba-group[hidden] { display: none; }

.prueba-group summary {
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.prueba-comm-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 14px 10px;
}

.prueba-comm-down {
  font-size: 12.5px;
  color: #8a5a12;
}

.prueba-group summary::-webkit-details-marker { display: none; }

.prueba-group summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--text-dim);
  transition: transform .15s;
}

.prueba-group[open] summary::before { transform: rotate(90deg); }

.prueba-group summary:hover { background: var(--accent-wash); color: var(--accent); }

.prueba-table { margin: 0; }
.prueba-table th:last-child, .prueba-table td:last-child { width: 320px; }

.prueba-tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }

.prueba-table select,
.prueba-table input[type="number"] {
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  transition: border-color .15s, background-color .15s;
}

/* Fila de presión (pozo/HPU): valor + botón "Simular variación" lado a lado. */
.prueba-value-cell { display: flex; align-items: center; gap: 8px; }
.prueba-value-cell input[type="number"] { flex: 1; min-width: 80px; }
.prueba-value-cell .btn { flex: none; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.prueba-value-cell .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Confirmación breve de que Enter aplicó el valor (ver el <script> al
   final) — mismo verde que .config-notice-ok, sin quedarse pegado. */
.prueba-table .prueba-applied {
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* Login / cambiar contraseña — sin footer (ver _AuthLayout.cshtml), una
   sola tarjeta centrada, igual paleta que el resto de la app. */
.auth-page {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 26px;
}

.config-field-error {
  color: var(--st-fault);
  font-size: 12.5px;
}

.config-notice-error:empty { display: none; }

/* Foto de perfil circular (ver _Avatar.cshtml) — misma forma para la foto
   real y para el círculo de iniciales de respaldo, así nunca se nota cuál
   de los dos es. */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

/* Círculo "sin sesión" del header (ver _SesionWidget.cshtml) — misma forma
   que .avatar, silueta genérica en vez de una foto o iniciales (no hay
   nombre de quién no inició sesión) + insignia "?" para que se note de
   un vistazo, sin tener que leer "Sin usuario" al lado. */
.avatar-anon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--accent-wash);
  color: var(--accent);
}

.avatar-anon-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--text-faint);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

/* Bloquear/Desbloquear pide sus propias credenciales inline (ver
   doc/Pendientes.md ítem 5: sin sesión, cada acción prueba quién la pide). */
.user-row-firma {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-row-firma input {
  width: 110px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12.5px;
}

.user-row:last-child { border-bottom: none; }

.user-row-info { flex: 1; min-width: 0; }

.user-row-name { font-weight: 600; }

.user-row-role {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Selector de foto de perfil (Usuarios/Crear.cshtml) — miniatura fija a la
   izquierda + panel a la derecha que alterna entre "Subir archivo" y "Tomar
   foto" (cámara en vivo). Ver el <script> al final de esa vista. */
.foto-picker {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.foto-picker-preview { flex: none; }

.foto-picker-controls {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foto-picker-tabs { display: flex; gap: 6px; }

.foto-picker-tab {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.foto-picker-tab.active {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.foto-picker-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.foto-picker-panel[hidden] { display: none; }

.foto-camara-video {
  width: 220px;
  max-width: 100%;
  border-radius: 8px;
  background: #000;
}

.foto-camara-acciones { display: flex; gap: 8px; }

.foto-picker-panel .btn, .foto-camara-acciones .btn { flex: none; padding: 8px 14px; }

/* Diálogo de login de la Sesión de Operador (ver operator-session.js) — un
   <dialog> nativo: da el backdrop y el "modal de verdad" (foco atrapado,
   Escape cierra) gratis, sin JS propio para eso. */
.op-session-dialog {
  border: none;
  border-radius: 10px;
  padding: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.op-session-dialog::backdrop {
  background: rgba(20, 26, 33, .45);
}

.op-session-dialog-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.op-session-dialog h2 {
  margin: 0 0 4px;
  font-size: 16px;
  text-align: center;
}

.op-session-dialog .config-hint {
  text-align: center;
}

.op-session-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.op-session-dialog-cancel {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 6px;
  cursor: pointer;
}

.op-session-dialog-cancel:hover {
  color: var(--text);
}

/* Diálogo "Operar" (ver Sala.cshtml/frac-stack-sala.js) — mismo look que
   .op-session-dialog, alineado a la izquierda para los dos combos. */
.operar-dialog {
  width: 320px;
  text-align: left;
}

.operar-dialog h2 { text-align: left; }
.operar-dialog .config-hint { text-align: left; }

/* Lista simple de renglones dentro de un diálogo (ver mode-denied-dialog en
   Sala.cshtml) — un ítem por línea, fondo/borde sutil. */
.dialog-item-list {
  list-style: none;
  margin: 10px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.dialog-item-list li {
  font-size: 13.5px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Página de Checklist de sistema (ver diseño "Checklist de sistema, Fase 1")
   — columnas responsive, una tarjeta por pozo + una de sistema. No hay un
   componente de grilla reusable hoy (Alarmas usa tabla, Configuración usa
   tarjetas apiladas), así que esto es chico y nuevo. */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.checklist-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.checklist-tile h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.checklist-tile-system { grid-column: 1 / -1; }

.checklist-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.checklist-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}

.checklist-icon-ok { background: var(--st-open); }
.checklist-icon-fail { background: var(--st-fault); }

/* Gris/vacío — "todavía no se corrió", no es una falla (ver _ChecklistItem.cshtml). */
.checklist-icon-pending { background: var(--st-nodata); }

.checklist-item-text {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  line-height: 1.35;
}

.checklist-item-subject { font-weight: 600; }
.checklist-item-check { color: var(--text-muted, #6b7480); }
.checklist-item-detail { color: var(--text-muted, #6b7480); font-style: italic; }

.checklist-report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checklist-report-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.checklist-report-summary { color: var(--text-muted, #6b7480); }
.checklist-badge-fail { color: var(--st-fault); font-weight: 600; }

/* --- Reportes (ver Views/Reportes/Index.cshtml) --------------------------- */
.reportes-page { max-width: 1840px; }

.reportes-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.reporte-tipo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reporte-tipo h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.reporte-tipo-icono { font-size: 18px; }
.reporte-tipo p { margin: 0; font-size: 12.5px; color: var(--text-dim); flex: 1; }
.reporte-form { display: flex; flex-direction: column; gap: 8px; }
.reporte-form .config-field { margin: 0; }
.reporte-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reporte-acciones { display: flex; gap: 8px; }
.reporte-acciones .btn { flex: 1; }
.reporte-generar { flex: none; align-self: stretch; }

.reporte-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--accent-wash);
  color: var(--accent);
  white-space: nowrap;
}
.reporte-chip-maintenance { background: #fdf3e0; color: #8a5a12; }
.reporte-chip-incident { background: #fceceb; color: #8f2a24; }
.reporte-links { white-space: nowrap; }
.reporte-links a { margin-right: 10px; color: var(--accent); }

.op-session-dialog.nota-dialog { width: 860px; text-align: left; max-height: 92vh; overflow: auto; }
.op-session-dialog.nota-dialog h2, .op-session-dialog.nota-dialog .config-hint { text-align: left; }
.nota-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.nota-ancho { grid-column: 1; }
.nota-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nota-tabla th { text-align: left; font-weight: 600; color: var(--text-dim); padding: 2px 4px; }
.nota-tabla td { padding: 2px 4px; }
.nota-tabla input, .nota-tabla select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.nota-tabla td:last-child { width: 30px; }
.nota-agregar { flex: none; align-self: flex-start; padding: 4px 10px; font-size: 12px; margin-top: 4px; }
.nota-dialog textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; resize: vertical; }

/* --- Tablet (por debajo de 1400px, el mismo umbral que MIN_INTERACTIVE_WIDTH
   en frac-stack-sala.js). Pedido del usuario (2026-10-02): en la tablet solo
   se usa la Sala (Home) y Alarmas (más pantalla completa) — el resto de los
   íconos del pie queda deshabilitado, y el botón de secuencia de cada pozo
   también (las secuencias se corren desde la PC de operación). ------------ */
@media (max-width: 1399px) {
  .app-footer-right .footer-btn:not(.footer-btn-tablet),
  .app-footer-right .footer-btn-wrap:not(:has(.footer-btn-tablet)) {
    pointer-events: none;
    opacity: .3;
  }

  .seq-menu-btn {
    pointer-events: none;
    opacity: .3;
  }

  /* Alarmas en 10 pulgadas: letra un poco más chica, sin la columna Grupo
     (la severidad ya está en el color de la fila y en su columna) y filtro
     en dos renglones si hace falta. */
  .alarmas-page { padding-left: 16px; padding-right: 16px; }
  .alarmas-compact { padding: 10px 16px 14px; }
  .alarm-table { font-size: 12.5px; }
  .alarm-table th, .alarm-table td { padding: 6px 6px; }
  .alarm-table col:nth-child(1) { width: 130px !important; }
  .alarm-table td:nth-child(1) { white-space: nowrap; }
  .alarm-table col:nth-child(2) { width: 84px !important; }
  .alarm-table col:nth-child(3), .alarm-table th:nth-child(3), .alarm-table td:nth-child(3) { display: none; }
  .alarm-table col:nth-child(4) { width: 120px !important; }
  .alarm-table col:nth-child(6) { width: 150px !important; }
  .alarm-table col:nth-child(7) { width: 96px !important; }
  .alarm-filter .config-field { min-width: 130px; }
  .alarm-filter .btn { flex: none; padding: 8px 18px; }
}