/*
 * Patrón «listado» de Zuricar (alternativa A: tabla con barra de filtros). Se carga en todas las páginas (php/plantillas/header.html.php).
 * Piezas que comparten todos los listados; el comportamiento está en js/scripts/listado.js.
 *
 *  1. Selección de filas: columna de casillas (.zl-col-sel) y fila marcada (.zl-marcada).
 *  2. Barra de acciones sobre la selección (.zl-masiva): «n seleccionados» + acciones, aparece al marcar filas.
 *  3. Acciones de fila (.zl-ops): botones redondos que aparecen al pasar por la fila (siempre visibles en táctil y móvil).
 *  4. Móvil: las columnas marcadas con .zl-oc-m se ocultan por debajo de 768 px y la tabla deja de forzar ancho mínimo.
 *
 * Marcado de ejemplo: clientes/index.php. Solo variables --z-* de css/zuricar-tokens.css (tema claro y oscuro).
 * Carpeta: css/ · Fichero: zuricar-listado.css · Permisos: 644
 */

/* ===== 1. Selección ===== */
body.smart-style-2 .zl-col-sel { width: 40px; padding-right: 0 !important; }
body.smart-style-2 .zl-col-sel input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--z-marca); cursor: pointer; vertical-align: middle; }
body.smart-style-2 table.zl-tabla tbody tr.zl-marcada,
body.smart-style-2 table.zl-tabla tbody tr.zl-marcada:hover { background: var(--z-marca-suave); }

/* ===== 2. Barra de acciones sobre la selección (dentro de .zl-tabla-ancho, antes de la tabla) ===== */
body.smart-style-2 .zl-tabla-caja-rel, body.smart-style-2 .zl-tabla-ancho { position: relative; }
/* Se superpone a la cabecera de la tabla (dejando libre la casilla de «marcar todas») para que la tabla no se desplace al marcar filas */
body.smart-style-2 .zl-masiva { position: absolute; z-index: 3; top: 0; left: 44px; right: 0; height: 42px; display: flex; align-items: center; gap: var(--z-space-3); margin: 0; padding: 0 12px; background: var(--z-texto); color: var(--z-superficie); border-radius: 0 var(--z-radius-lg) 0 0; }
body.smart-style-2 .zl-masiva[hidden] { display: none; }
body.smart-style-2 .zl-masiva b { font-weight: var(--z-weight-semibold); }
body.smart-style-2 .zl-masiva .zl-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--z-radius-pill); background: transparent; color: inherit; font-size: var(--z-text-sm); font-weight: var(--z-weight-semibold); cursor: pointer; }
body.smart-style-2 .zl-masiva .zl-btn:hover { background: rgba(255, 255, 255, .14); }
body.smart-style-2 .zl-masiva .zl-cerrar { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
body.smart-style-2 .zl-masiva .zl-cerrar:hover { background: rgba(255, 255, 255, .14); }

/* ===== 3. Acciones de fila ===== */
body.smart-style-2 td.zl-col-ops { width: 1%; white-space: nowrap; text-align: right; }
/* La acción principal (.zl-fija, abrir la ficha) se ve siempre; las demás aparecen al pasar por la fila */
body.smart-style-2 .zl-ops { display: inline-flex; gap: 6px; }
body.smart-style-2 .zl-ops a:not(.zl-fija) { opacity: 0; transition: opacity var(--z-duration-fast); }
body.smart-style-2 table.zl-tabla tbody tr:hover .zl-ops a,
body.smart-style-2 table.zl-tabla tbody tr.zl-marcada .zl-ops a,
body.smart-style-2 table.zl-tabla tbody tr:focus-within .zl-ops a { opacity: 1; }
body.smart-style-2 .zl-ops a { box-sizing: border-box; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--z-borde-fuerte); border-radius: 50%; background: var(--z-superficie); color: var(--z-texto-suave); text-decoration: none; }
/* hueco para mantener alineadas las columnas de botones cuando una fila no tiene una acción */
body.smart-style-2 .zl-ops .zl-hueco { display: inline-block; width: 30px; height: 30px; }
body.smart-style-2 .zl-ops a.peligro, body.smart-style-2 .zl-ops button.peligro { color: var(--z-error); }
body.smart-style-2 .zl-ops a:hover, body.smart-style-2 .zl-ops a:focus { background: var(--z-superficie-alta); color: var(--z-texto); }
@media (hover: none) { body.smart-style-2 .zl-ops a { opacity: 1; } }

/* ===== 4. Móvil ===== */
@media (max-width: 767px) {
  body.smart-style-2 .zl-oc-m { display: none; }
  body.smart-style-2 .zl-ops a { opacity: 1; }
  body.smart-style-2 table.zl-tabla { min-width: 0 !important; }
  body.smart-style-2 .zl-tabla-ancho { overflow-x: hidden; }
}

/* ===== Botón de impresora de las filas (html_boton_imprimir): mismo círculo, tamaño y borde que los de .zl-ops (abrir ficha), siempre visible ===== */
body.smart-style-2 .z-imprimir {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--z-borde-fuerte);
  border-radius: 50%;
  background: var(--z-superficie);
  color: var(--z-texto-suave);
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
/* el de impresora en forma de enlace (hoja de devolución) no se atenúa como los demás enlaces de .zl-ops */
body.smart-style-2 .zl-ops a.z-imprimir { opacity: 1; }
body.smart-style-2 .z-imprimir:hover { background: var(--z-superficie-alta); color: var(--z-texto); }
body.smart-style-2 .z-imprimir:focus-visible { box-shadow: var(--z-shadow-foco); outline: 0; }