/* coe-factoring-hermes — accesos.css
 *
 * El panel de accesos del coordinador (RF1). Es la primera pantalla del
 * proyecto con una tabla y con un switch, asi que casi todo lo de aca es
 * vocabulario nuevo.
 *
 * NO se reusa `.estado-pill` para Activo/Inactivo, y no es capricho: esa clase
 * la cruza un test contra el enum de estados que emite el motor
 * (`calculo.aprobacion.Estado`), en las dos direcciones. Un selector de mas ahi
 * rompe el build. Y ademas son dos vocabularios distintos: uno dice si una
 * operacion se aprueba, este dice si una persona puede entrar.
 *
 * ===========================================================================
 * LA REGLA DE COLOR DE ESTA PANTALLA
 * ===========================================================================
 * La fila normal es CALLADA y la excepcion es la que resalta. Antes cada fila
 * activa llevaba una pildora verde "Activo" al lado de un interruptor que ya
 * estaba en verde: el mismo hecho dicho dos veces, cinco veces por pantalla,
 * de modo que lo unico que no saltaba a la vista era la fila desactivada. Ahora
 * el interruptor es el estado, el rotulo lo acompana en gris, y lo que se pinta
 * es lo que pide accion: el acceso apagado y el canal que falta.
 */

/* ============================ el item del sidebar ============================
 *
 * `aria-current` ya lo estilizaba `.sub-item` —los cotizadores— pero no
 * `.nav-link`, que son las herramientas de la lista de abajo. Sin esto, el
 * usuario que esta en Accesos no ve cual de los dos menus esta activo.
 */
.nav-link[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
}

/* ================================ la barra ================================
 *
 * Buscador elastico, tres filtros de ancho propio y el boton primario al
 * final. En una sola fila mientras entre; debajo de 980px se apila.
 */

.accesos-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.accesos-barra .action-btn { flex-shrink: 0; padding: 10px 18px; }

.buscador-acceso {
  position: relative;
  flex: 1;
  min-width: 0;
}
.buscador-acceso svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-mute);
  pointer-events: none;
}
.entrada-buscar {
  width: 100%;
  border: 1px solid var(--value-box-border);
  background: var(--card-bg);
  border-radius: var(--radio);
  padding: 9px 12px 9px 34px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text);
}
/* El buscador NO es amarillo, y es la unica entrada de texto de la app que no
 * lo es. El amarillo del cotizador significa "el servidor espera este dato";
 * esto no viaja a ninguna parte, solo esconde filas. Pintarlo igual que un
 * campo del contrato diluiria el unico vocabulario de color que tiene la app. */
.entrada-buscar::placeholder { color: var(--text-mute); }
/* Chrome dibuja su propia X de `type="search"`; se deja, hace justo lo que
 * hace falta. Lo que se quita es la lupa decorativa de Safari, que se
 * superpone con la nuestra. */
.entrada-buscar::-webkit-search-decoration { -webkit-appearance: none; }

.filtro-acceso { flex-shrink: 0; }
.filtro-acceso .dropdown-select { padding-top: 9px; padding-bottom: 9px; }

/* ================================ la tarjeta ================================ */

.tarjeta-accesos {
  background: var(--card-bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  /* Recorta las esquinas de la primera y la ultima fila sin tener que
   * redondear celdas una por una. */
  overflow: hidden;
}

.accesos-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
}

.accesos-conteo {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.accesos-conteo b { color: var(--text); font-size: var(--fs-md); }

/* El unico elemento ambar de la pantalla, y es un boton: el canal que falta es
 * accionable —filtra la tabla a esas filas— y un aviso que no se puede tocar
 * solo informa de un problema sin acercar a la solucion. */
.aviso-sin-canal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  color: var(--aviso-text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.aviso-sin-canal svg { width: 13px; height: 13px; flex-shrink: 0; }
.aviso-sin-canal:hover { background: var(--yellow); }

/* ================================ la tabla ================================
 *
 * El scroll horizontal vive en el contenedor, no en el `<body>`: una tabla de
 * seis columnas en un telefono desborda, y una pagina que se corre entera al
 * costado deja el sidebar y la topbar fuera de lugar.
 */
.tabla-wrap {
  /* `position: relative` no es decorativo: `.visually-hidden` es
   * `position: absolute`, y sin un ancestro posicionado se ubica contra el
   * bloque contenedor inicial —o sea, ESCAPA del contenedor con overflow— y
   * se lleva el ancho de la tabla al documento. El sintoma es una pagina que
   * scrollea entera al costado, con el sidebar y la topbar corriendose. */
  position: relative;
  overflow-x: auto;
}

.tabla-accesos {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  /* Cinco columnas de datos que no se pueden partir sin quedar ilegibles: un
   * correo cortado en dos lineas deja de leerse como un correo. Debajo de
   * esto, el contenedor scrollea. */
  min-width: 860px;
}
.tabla-accesos th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mute);
  font-weight: 700;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabla-accesos td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--topbar-line);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.tabla-accesos th:first-child,
.tabla-accesos td:first-child { padding-left: 20px; }
.tabla-accesos th:last-child,
.tabla-accesos td:last-child { padding-right: 20px; }
.tabla-accesos tbody tr:last-child td { border-bottom: none; }
.tabla-accesos tbody tr:hover { background: var(--value-box); }

/* ------------------------------- la persona -------------------------------
 *
 * Nombre y correo en una sola columna. Eran dos, y separarlos obligaba a leer
 * de un lado al otro para saber de quien es cada correo; juntos, la fila tiene
 * un solo punto de entrada.
 */
.celda-persona { display: flex; align-items: center; gap: 12px; }
.persona-datos { min-width: 0; }
.persona-linea { display: flex; align-items: center; gap: 8px; }

/* La inicial, no una foto: no hay fotos en el sistema y un avatar generico
 * gris no ancla la fila en nada. */
.avatar-acceso {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green-050);
  color: var(--green);
  font-size: var(--fs-sm);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celda-nombre { font-weight: 600; }
.celda-correo { display: block; color: var(--text-mute); margin-top: 2px; }

/* Quien todavia no ingreso no tiene nombre: lo pone Google en el primer
 * acceso. Se rotula para que el hueco no se lea como un dato perdido. */
.sin-ingreso {
  color: var(--text-mute);
  font-style: italic;
  font-weight: 400;
}

/* La marca de la fila propia. Antes era el fondo verde de TODA la fila, que
 * competia con el verde del interruptor: dos verdes en la misma fila, uno
 * diciendo "activo" y el otro "usted". Ahora es una etiqueta al lado del
 * nombre, que es donde se pregunta quien es. */
.nota-usted {
  flex-shrink: 0;
  background: var(--green-050);
  color: var(--green);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ------------------------------- rol y canal ------------------------------- */

.etiqueta-acceso {
  display: inline-block;
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: var(--radio);
  padding: 3px 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}
/* El canal es dato del tarifario y va como lo dice la tabla: en mayusculas y
 * sin capitalizar, a diferencia del rol. */
.etiqueta-canal {
  text-transform: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-soft);
}

/* El canal que falta. Era una celda en cursiva gris —"sin canal"—, o sea un
 * hueco que se leia como dato ausente. Es lo contrario: a esa persona le salen
 * los dos semaforos en NO_EVALUADO hasta que alguien se lo asigne, y es
 * arreglable desde esta misma pantalla. Asi que es un boton, y abre el panel. */
.etiqueta-falta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  color: var(--aviso-text);
  border-radius: var(--radio);
  padding: 3px 9px;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.etiqueta-falta svg { width: 11px; height: 11px; flex-shrink: 0; }
.etiqueta-falta:hover { background: var(--yellow); }

/* -------------------------------- la fecha --------------------------------
 *
 * Dos lineas, dos preguntas. "Hace 2 horas" contesta si esta persona sigue
 * usando el sistema, que es a lo que se entra a esta pantalla; la fecha exacta
 * contesta cual fue el dia, que es lo que se reporta. Las dos las arma el
 * servidor: el cliente tiene prohibido calcular fechas.
 */
.celda-fecha .fecha-relativa { display: block; font-size: var(--fs-md); }
.celda-fecha .fecha-exacta {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.celda-fecha .sin-ingreso { font-size: var(--fs-md); }

/* -------------------------------- acciones -------------------------------- */

/* Dos acciones por fila: `gap` para que no se toquen, y `wrap` para que en la
 * tabla angosta bajen en vez de desbordar la celda. */
.celda-acciones {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* No es `.action-btn`: ese es el boton de una decision —cotizar, guardar— y
 * hay uno por fila. Repetir el verde seis veces convierte el color primario en
 * fondo de pantalla, y la accion que de verdad importa (NUEVO ACCESO) deja de
 * distinguirse. */
.btn-fila {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--value-box-border);
  background: var(--value-box);
  color: var(--text-soft);
  border-radius: var(--radio);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-fila svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-fila:hover { background: #E9EBF4; color: var(--text); }
.btn-fila:disabled { opacity: .35; cursor: not-allowed; }
.btn-fila[aria-busy="true"] { opacity: .5; cursor: progress; }

/* La variante destructiva, con los mismos tres tokens de error que usa el
 * resto de la app. Mismo peso visual que `.etiqueta-falta`: dentro de una
 * tabla, un boton rojo relleno compite con los datos y convierte cada fila en
 * una alarma. El color dice "cuidado", no "mirame". */
.btn-fila.peligro {
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error-text);
}
.btn-fila.peligro:hover { background: #F9D9D8; color: var(--error-text); }
.btn-fila.peligro:disabled { opacity: .35; }

/* ------------------------------ la fila apagada ------------------------------
 *
 * Toda la fila se atenua. Es la unica que tiene que saltar en una lista donde
 * lo normal es tener acceso.
 */
.tabla-accesos tr.acceso-apagado { background: var(--paper); }
.tabla-accesos tr.acceso-apagado:hover { background: var(--value-box); }
.tabla-accesos tr.acceso-apagado .celda-nombre,
.tabla-accesos tr.acceso-apagado .etiqueta-acceso,
.tabla-accesos tr.acceso-apagado .fecha-relativa { color: var(--text-mute); }
.tabla-accesos tr.acceso-apagado .avatar-acceso {
  background: var(--pendiente-bg);
  color: var(--text-mute);
}

/* =============================== los vacios ===============================
 *
 * Dos, y distintos: "no hay nadie" se arregla dando de alta, "no coincide
 * nadie" se arregla limpiando el filtro.
 */
.accesos-vacio {
  margin: 0;
  padding: 34px 24px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.7;
}

.enlace-boton {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
}

/* ================================ el estado ================================
 *
 * El rotulo del interruptor, no una pildora. Dejo de tener fondo verde cuando
 * dejo de ser una segunda afirmacion de lo que el interruptor ya dice. Se
 * queda en el DOM —y con `data-acceso`— porque es lo que lee un lector de
 * pantalla al lado del control, y porque "Inactivo" si necesita peso.
 */
.celda-estado { display: flex; align-items: center; gap: 9px; }

.acceso-estado {
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.acceso-estado[data-acceso="inactivo"] {
  color: var(--pendiente-text);
  font-weight: 700;
}

/* ================================ el switch ================================
 *
 * `<button role="switch">` y no `<input type="checkbox">`: el checkbox
 * necesitaria un `<label for>` con id generado por fila y su estilizado
 * depende del truco `:checked + span`. El boton lleva su nombre accesible en
 * `aria-label`, su estado en `aria-checked` —que es lo que el CSS ataca—, y
 * Space y Enter funcionan solos.
 */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}
.switch-pista {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--pendiente-border);
  transition: background .15s ease;
}
.switch-perilla {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.35);
  transition: transform .15s ease;
}
.switch[aria-checked="true"] .switch-pista { background: var(--green); }
.switch[aria-checked="true"] .switch-perilla { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* En vuelo. El switch NO se mueve hasta que el servidor responde: mostrar
 * "Inactivo" mientras el servidor sigue diciendo activo seria una mentira
 * sobre un estado de seguridad. Lo unico que cambia es que deja de aceptar
 * clics y se atenua. */
.switch[aria-busy="true"] { opacity: .5; cursor: progress; }
.switch:disabled { opacity: .35; cursor: not-allowed; }

/* =============================== el panel ================================
 *
 * Panel lateral sobre un telon, no un bloque en el flujo. El formulario se
 * abria empujando la tabla hacia abajo, asi que al editar una fila se perdia
 * de vista justamente la fila que se estaba editando.
 *
 * El markup sigue estatico en el documento —los campos construidos por JS
 * quedan fuera del test que exige `<label for>`—; lo que cambia es donde se
 * pinta. El foco, Escape y el cierre por telon los maneja `accesos.js`.
 */
.panel-telon {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(12, 20, 16, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
}

.panel-acceso {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 170;
  width: 440px;
  max-width: 100vw;
  background: var(--card-bg);
  box-shadow: var(--sombra-alta);
  display: flex;
  flex-direction: column;
  /* El panel es mas alto que la ventana en pantallas bajas: scrollea el panel,
   * no la pagina de atras. */
  overflow-y: auto;
}

/* La confirmacion de eliminar reusa el panel entero —posicion, telon, sombra,
 * foco atrapado— y solo cambia el alto.
 *
 * Va DESPUES de `.panel-acceso` a proposito: las dos son selectores de una
 * clase, asi que entre ellas decide el orden del archivo. Puesta antes, el
 * `bottom: 0` del panel ganaba y la confirmacion ocupaba la pantalla entera
 * para dos lineas de texto.
 */
.panel-confirmar {
  height: auto;
  bottom: auto;
  padding-bottom: 4px;
}
.panel-confirmar .nota-eliminar {
  margin: 0;
  padding: 18px 28px 0 28px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.5;
}
/* Sin `margin-top: auto`: en un panel de alto automatico empujaria los botones
 * contra el borde inferior de un contenedor que ya mide lo que mide. */
.panel-confirmar .acciones-acceso { margin-top: 0; }

/* El boton que dispara la accion destructiva. Relleno, a diferencia del de la
 * fila: aca ya no compite con ningun dato — es el gatillo de un dialogo que se
 * abrio para esto. */
.action-btn.peligro {
  background: var(--error-text);
  border-color: var(--error-text);
  color: #FFF;
}
.action-btn.peligro:hover:not(:disabled) { background: #8C1C19; border-color: #8C1C19; }

.panel-acceso-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px 28px;
  border-bottom: 1px solid var(--topbar-line);
}
.panel-acceso h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
}
.panel-acceso-nota {
  margin: 6px 0 0 0;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.6;
}

.cerrar-panel {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--value-box-border);
  background: var(--value-box);
  border-radius: var(--radio);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cerrar-panel svg { width: 14px; height: 14px; }
.cerrar-panel:hover { background: #E9EBF4; color: var(--text); }

.campo-acceso { padding: 0 28px; margin-top: 20px; }
.campo-acceso label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

.pista-campo {
  margin: 6px 0 0 0;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  line-height: 1.5;
}
/* La consecuencia de dejar el canal mal puesto no es un error de validacion:
 * es una pantalla que no explica nada seis semanas despues. Se dice antes. */
.pista-aviso {
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  color: var(--aviso-text);
  border-radius: var(--radio);
  padding: 10px 12px;
  line-height: 1.6;
}

/* Amarillo porque el vocabulario de color del cotizador ya dice que amarillo
 * es "lo completa usted". Un campo nuevo con otro color inventaria un
 * significado que la pantalla de al lado contradice. */
.entrada-acceso {
  width: 100%;
  border: 1px solid var(--yellow-border);
  background: var(--yellow);
  border-radius: var(--radio);
  padding: 9px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text);
}
.entrada-acceso:disabled {
  background: var(--value-box);
  border-color: var(--value-box-border);
  color: var(--text-mute);
}
/* El `field` del envelope del servidor es el nombre del input, asi que marcar
 * el campo en rojo es una busqueda directa. Misma mecanica que el cotizador. */
.con-error .entrada-acceso {
  border-color: var(--error-text);
  box-shadow: 0 0 0 1px var(--error-text);
}

/* Al pie y separado por una linea: el panel scrollea, y los dos botones tienen
 * que seguir siendo el final del formulario y no un bloque perdido a la mitad.
 *
 * Clase propia y no `.actions-row`: esa es la barra del cotizador, que es
 * `position: sticky` contra el pie de la ventana y ademas es justo lo que
 * `html2canvas` renderiza mal. */
.acciones-acceso {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 18px 28px 24px 28px;
  border-top: 1px solid var(--topbar-line);
}
.acciones-acceso .action-btn { flex: 1; padding: 12px 22px; }

/* ============================== responsive ============================== */

@media screen and (max-width: 980px) {
  .accesos-barra { flex-wrap: wrap; }
  .buscador-acceso { flex-basis: 100%; }
  .filtro-acceso { flex: 1; min-width: 0; }
  .accesos-barra .action-btn { flex-basis: 100%; }
}

/* ---------------------------- la tabla en tarjetas ----------------------------
 *
 * Debajo de 720px la tabla deja de ser una tabla y cada fila pasa a ser una
 * tarjeta. No es cosmetica: con seis columnas y `min-width: 860px`, en un
 * telefono habia que arrastrar la tabla de costado para llegar al interruptor
 * y a "Editar" — que son las dos unicas cosas que se vienen a hacer a esta
 * pantalla. El dato quedaba visible y la accion no.
 *
 * Los `role` del markup no son decorativos: cambiar el `display` de un `<tr>`
 * o un `<td>` le quita al elemento su rol implicito de tabla, y un lector de
 * pantalla pasa a anunciar un monton de texto suelto. Declarados a mano, el
 * rol sobrevive al cambio de layout.
 */
@media screen and (max-width: 720px) {
  .tabla-wrap { overflow-x: visible; }
  .tabla-accesos { min-width: 0; }
  .tabla-accesos thead { display: none; }

  .tabla-accesos tbody { display: block; }
  .tabla-accesos tbody tr {
    display: grid;
    grid-template-columns: max-content max-content 1fr auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--topbar-line);
  }
  .tabla-accesos tbody tr:last-child { border-bottom: none; }

  .tabla-accesos td {
    display: block;
    padding: 0;
    border: none;
    white-space: normal;
  }
  .tabla-accesos td:first-child,
  .tabla-accesos td:last-child { padding: 0; }

  /* Va calificado con `.tabla-accesos td` a proposito: la regla de arriba pone
   * `display: block` en todo `td` y le gana por especificidad a un
   * `.celda-persona` suelto, dejando el avatar apilado sobre el nombre. */
  .tabla-accesos td.celda-persona { display: flex; grid-column: 1 / -1; }
  /* El correo largo parte antes que desbordar la tarjeta. */
  .celda-correo { word-break: break-all; }

  .tabla-accesos td:nth-child(2) { grid-column: 1; }
  .tabla-accesos td:nth-child(3) { grid-column: 2; }

  /* La fecha en su propia linea y no al lado de las etiquetas: el rotulo de
   * zona la hace larga —"14 set 2026, 15:52 (hora de Lima)"— y apretada en un
   * tercio del ancho parte por la mitad de "(hora de Lima)". */
  .celda-fecha { grid-column: 1 / -1; }

  /* El interruptor y "Editar" al pie de la tarjeta, separados por una linea:
   * son las acciones, y van donde el pulgar las espera. */
  .celda-estado,
  .celda-acciones {
    padding-top: 10px;
    border-top: 1px solid var(--topbar-line);
  }
  .celda-estado { grid-column: 1 / 3; }
  .celda-acciones { grid-column: 3 / -1; }

  /* 44px de area tactil, que es el minimo para un control que se toca con el
   * dedo. El interruptor sigue midiendo 40x22 en pantalla; lo que crece es lo
   * que acepta el toque. */
  .celda-estado .switch { height: 44px; }
  .celda-estado .switch-pista { top: 11px; bottom: 11px; }
  .celda-estado .switch-perilla { top: 14px; }
  .btn-fila { min-height: 44px; padding: 6px 14px; }
}

@media screen and (max-width: 560px) {
  .accesos-resumen { flex-direction: column; align-items: flex-start; }
  /* A ancho de telefono el panel es la pantalla. Dejarlo en 440px con el telon
   * asomando 20px al costado se lee como un panel roto, no como capas. */
  .panel-acceso { width: 100%; }
}