/* ═══════════════════════════════════════════════════════════════════════════
   Las tablas de los maestros de limpiezas, con el aspecto del Hub

   `estilos.css` es el CSS de Cleser acotado bajo `.cleser`, y se REGENERA con
   tools/frontend/acotar-css.mjs: no se edita a mano. Esta capa va después y
   solo cambia el aspecto de las tablas de maestros, para que se parezcan a las
   de Reservas o Propietarios en vez de traer el aspecto de otra aplicación.

   Solo tocan APARIENCIA. Ni una línea del módulo portado cambia, así que las
   verificaciones contra Cleser siguen valiendo exactamente lo mismo.

   Los valores son los de styles.css, no aproximaciones: si mañana el Hub cambia
   el aspecto de sus tablas, estos cuatro bloques hay que traerlos otra vez.
   Se copian, y no se heredan, porque el CSS del Hub sobre `td` y `thead th`
   está deliberadamente neutralizado dentro de `.cleser` —alcanzaba a las tablas
   portadas y les recortaba las celdas a 220px con puntos suspensivos—.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La tabla como tarjeta ─────────────────────────────────────────────────
   El Hub envuelve sus tablas en un .tbl-wrap. Aquí el marco se pone sobre la
   propia tabla, que da el mismo resultado sin tocar el marcado. */
.cleser .cfg-table {
  width: 100%;
  border-collapse: separate;      /* `collapse` se come el redondeo del borde */
  border-spacing: 0;
  font-size: 12.5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* ── Cabecera ──────────────────────────────────────────────────────────────
   Las tablas portadas no tienen <thead>: la fila de títulos son `th` sueltos.
   Por eso se estiliza `th` directamente y no `thead th`, que no alcanzaría. */
.cleser .cfg-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Filas ─────────────────────────────────────────────────────────────────
   Sin `cursor: pointer`: en el Hub la fila entera se pulsa para abrir el
   detalle, y aquí no. Insinuar que se puede pulsar algo que no responde es
   peor que no insinuar nada. */
.cleser .cfg-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text);
}
.cleser .cfg-table tr:hover td { background: #f8fafc; }
.cleser .cfg-table tr:last-child td { border-bottom: none; }

/* La fila ámbar de las fichas incompletas se conserva: es información, no
   decoración. Gana al hover, que si no la haría desaparecer al pasar por encima. */
.cleser .cfg-table tr.fila-incompleta td,
.cleser .cfg-table tr.fila-incompleta:hover td { background: #fef3c7; }

/* ── Barra sobre la tabla ──────────────────────────────────────────────────
   Hace de .tbl-hdr del Hub: el rótulo a la izquierda y las acciones a la
   derecha, pegada a la tabla. */
.cleser .cfg-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
}
.cleser .cfg-toolbar .sub-label {
  font-size: 12px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .5px; margin: 0;
}

/* ── Botones ───────────────────────────────────────────────────────────────
   Los de la aplicación, no los de Cleser. Mismas medidas que .btn del Hub. */
.cleser .cfg-toolbar .btn-green,
.cleser .cfg-toolbar .btn-blue,
.cleser .cfg-table .btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 8px; font-weight: 600; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; border: none; cursor: pointer;
  transition: all .15s;
}
.cleser .cfg-toolbar .btn-green,
.cleser .cfg-toolbar .btn-blue { padding: 7px 14px; font-size: 12.5px; }
.cleser .cfg-toolbar .btn-green { background: var(--accent); color: #fff; }
.cleser .cfg-toolbar .btn-green:hover { background: #1d4ed8; }
.cleser .cfg-toolbar .btn-blue { background: #fff; color: var(--text); border: 1px solid var(--border); }
.cleser .cfg-toolbar .btn-blue:hover { background: var(--bg); }

.cleser .cfg-table .btn-ghost {
  padding: 5px 10px; font-size: 11.5px;
  background: #fff; color: var(--text); border: 1px solid var(--border);
}
.cleser .cfg-table .btn-ghost:hover { background: #f0f2f7; }
.cleser .cfg-table .acts { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Distintivos ───────────────────────────────────────────────────────────
   Los mismos verdes y grises que usa el Hub para conciliado / cancelada. */
.cleser .cfg-table .badge,
.cleser .cfg-table .mini-chips .badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.cleser .cfg-table .badge.ok { background: #dcfce7; color: #166534; }
.cleser .cfg-table .badge.no { background: #f3f4f6; color: #6b7280; }
.cleser .cfg-table .mini-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cleser .cfg-table .mini-chips .badge { background: #dbeafe; color: #1e40af; }

/* ── Buscador ──────────────────────────────────────────────────────────────
   En el Hub el filtro vive dentro de una tarjeta blanca (.toolbar) y no suelto
   sobre el fondo. Se reproduce sobre el propio campo, que da el mismo efecto
   sin añadir marcado. */
.cleser .cfg-buscador {
  display: block; width: 100%; margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: var(--text); outline: none;
  transition: border .15s;
}
.cleser .cfg-buscador:focus { border-color: var(--accent); }
.cleser .cfg-buscador::placeholder { color: var(--text2); }

/* ── Formularios dentro de los maestros ────────────────────────────────────
   Los campos de alta y edición comparten el aspecto de los del Hub: mismo
   borde, mismo radio, mismo azul al enfocar. Si no, editar una ficha parecía
   salirse de la aplicación. */
.cleser #cfg-panel .field input[type="text"],
.cleser #cfg-panel .field input[type="number"],
.cleser #cfg-panel .field input[type="date"],
.cleser #cfg-panel .field input[type="email"],
.cleser #cfg-panel .field select,
.cleser #cfg-panel .ac-input {
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none;
  color: var(--text); background: #fff; transition: border .15s;
}
.cleser #cfg-panel .field input:focus,
.cleser #cfg-panel .field select:focus,
.cleser #cfg-panel .ac-input:focus { border-color: var(--accent); }

/* El rótulo y su recuento, como el .tbl-hdr del Hub. */
.cleser .cfg-toolbar .cfg-rotulo { display: flex; align-items: baseline; gap: 10px; }
.cleser .cfg-toolbar .cfg-count { font-size: 12px; color: var(--text2); font-weight: 500; }
.cleser .cfg-buscador:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.08); }

/* Rojo del Hub para lo que exige actuar: una ficha incompleta impide validar
   las limpiezas de ese alojamiento. En gris se leía como un estado más. */
.cleser .cfg-table .badge.alerta { background: #fee2e2; color: #991b1b; }

/* ── La primera columna ────────────────────────────────────────────────────
   styles.css reserva la primera columna de TODA tabla para la casilla de
   selección: `td:first-child { text-align:center; width:36px; max-width:36px }`.
   Estas tablas no tienen casilla —su primera columna es el nombre—, así que esa
   regla se la estrangulaba a 36px y se la centraba. Se devuelve a su sitio.

   Va aquí y no en styles.css: las tablas del Hub sí tienen esa casilla y la
   regla es correcta para ellas. */
.cleser .cfg-table td:first-child,
.cleser .cfg-table th:first-child {
  width: auto; max-width: none;
  text-align: left; cursor: auto;
}

/* Anchos mínimos por pestaña. Un nombre no debe partirse en dos líneas ni
   empujar al resto de columnas contra el borde. */
.cleser #cfg-panel[data-tab="empresas"]    .cfg-table td:first-child,
.cleser #cfg-panel[data-tab="empresas"]    .cfg-table th:first-child,
.cleser #cfg-panel[data-tab="tarifas"]     .cfg-table td:first-child,
.cleser #cfg-panel[data-tab="tarifas"]     .cfg-table th:first-child { min-width: 200px; }

.cleser #cfg-panel[data-tab="tipos"]       .cfg-table td:first-child,
.cleser #cfg-panel[data-tab="tipos"]       .cfg-table th:first-child { min-width: 150px; }

.cleser #cfg-panel[data-tab="poblaciones"] .cfg-table td:first-child,
.cleser #cfg-panel[data-tab="poblaciones"] .cfg-table th:first-child { min-width: 250px; }