/* =============================================================
   poc-index.css — estilos propios de POC/index.html
   Vivían inline en el <head> (hasta 2026-10-09, revisión holística de
   bandejas, fase "un solo sistema de estilos"). Mismo orden en cascada:
   el <link> va donde estaba el <style>.
   ============================================================= */
/* Page-local — kit primitives handle the rest */

/* Sticky action toolbar that pins under the topbar */
.poc-sticky-controls {
  position: sticky;
  top: 61px;
  z-index: 50;
  background: var(--surface-page);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
}
.poc-toolbar { margin: 0; }

/* Always-visible summary strip under the toolbar buttons. Mirrors the
   footer count so it's readable without scrolling a long list, and adds
   a live "seleccionados" tally (see PocList.actualizarSeleccion). */
.poc-toolbar-resumen {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-left: var(--sp-1);
}

/* Row "being edited" highlight (set by JS during bulk edit) */
tr.row-editing { background: #e0f2fe !important; box-shadow: inset 3px 0 0 var(--accent); }

/* Zebra stripe + readability bump — mirrors ordenes/index. The kit
   default (13px on a 1-row band) felt tight here; bumping td font to
   15px and using a slightly darker tint (#f1f5f9 vs #f8fafc) gives
   the same "agrupado" feel as ordenes. */
table.app-table tbody td { font-size: 15px; }
table.app-table tbody tr:nth-child(even) { background: #f1f5f9; }
table.app-table tbody tr:nth-child(even):hover { background: var(--brand-soft); }

/* Status dot used in the Activo column — plain colored circle, no pill */
.poc-estado-cell  { text-align: center; }
.status-dot       { display:inline-block; width:12px; height:12px; border-radius:50%; }
.status-activo    { background:#22c55e; }
.status-inactivo  { background:#ef4444; }
.poc-estado-cell  { white-space: nowrap; }
.poc-estado-txt   { font-size: 12px; color: var(--fg-3); vertical-align: 1px; }
/* Segmento Todos/Activos/Inactivos */
.poc-seg { display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-sunken); }
.poc-seg label { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; font-size:12px; font-weight:500; color:var(--fg-2); cursor:pointer; white-space:nowrap; }
.poc-seg label + label { border-left:1px solid var(--border-default); }
.poc-seg input { position:absolute; opacity:0; pointer-events:none; }
.poc-seg label:has(input:checked) { background:var(--accent-soft, rgba(0,180,216,0.10)); color:var(--accent); }
.poc-seg label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px; }
.poc-seg .status-dot { width:8px; height:8px; }

/* Resumen badge (count of devices) */
.resumen-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color: var(--fg-3);
}
.resumen-badge strong { font-size:18px; color: var(--accent); font-weight:700; }

/* Toggle pill — kit doesn't have a true "pill checkbox" component yet */
.toggle-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 11px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}
.toggle-pill:hover { border-color: var(--accent); color: var(--accent); }
.toggle-pill input[type="checkbox"] { cursor:pointer; margin:0; }

/* Dropdown caret — rotates when the menu is open (signals "opens a menu") */
.menu-caret { width:14px; height:14px; transition: transform var(--dur-fast) var(--ease-out); }
[aria-expanded="true"] > .menu-caret { transform: rotate(180deg); }

/* Secondary domain suffix shown under the IP host */
.ip-domain { display:block; font-size:10px; color:var(--fg-3); opacity:.85; letter-spacing:.2px; line-height:1.1; }

/* Devices table row action cell — keep the action buttons on one line */
#devicesTable td:last-child { white-space: nowrap; }
#devicesTable td:last-child .btn { margin-left: var(--sp-1); }

/* SIM en la fila (P5): la celda SIM / Teléfono se edita en sitio. */
#devicesTable td.sim-cell-editable .sim-txt { user-select: text; }
#devicesTable td.sim-cell-editable .sim-editar { opacity: 0; vertical-align: middle; }
#devicesTable tr:hover td.sim-cell-editable .sim-editar,
#devicesTable td.sim-cell-editable .sim-editar:focus-visible { opacity: 1; }
@media (hover: none) { #devicesTable td.sim-cell-editable .sim-editar { opacity: 1; } }
.sim-inline { display: flex; align-items: center; gap: 4px; min-width: 420px; }
.sim-inline .table-input { font-size: 12px; padding: 3px 6px; }
.sim-inline-iccid { width: 180px; font-family: var(--font-mono, monospace); }
.sim-inline-tel { width: 92px; }
.sim-inline-op { width: 118px; }
.sim-inline-btns { display: inline-flex; gap: 2px; }

/* Duplicados por serial: cabecera de cada grupo (serial · custodia del
   pool · cerrar sobrantes). Auditoría de módulos 2026-10-01, R3/P6. */
#devicesTable tr.poc-dup-head > td {
  background: var(--gray-50, #f8fafc);
  border-top: 2px solid var(--line);
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: normal;
}
#devicesTable tr.poc-dup-head > td .btn { margin-left: 8px; }

/* ── Edit Drawer — slide-in panel from the right ──────────── */
/* Uses the kit's "sheet" intent but with a fixed 500px width and
   a sticky branded header/footer. Kept page-local because no other
   page in the project uses this exact pattern yet. */
/* El fondo y la geometría del cajón son del kit
   (.modal-backdrop.is-drawer en ceco-ui.css, 2026-09-10). Aquí solo
   quedan los estilos de CONTENIDO del panel. */

.drawer-header {
  background: var(--brand);
  color: #fff;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
}
.drawer-header h3 {
  margin: 0; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2);
}
.drawer-close {
  background: transparent; border: none; color: #fff;
  font-size: 24px; cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}
.drawer-close:hover { background: rgba(255,255,255,0.15); }

.drawer-body { padding: var(--sp-5); flex: 1; }
.drawer-actions {
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: var(--sp-2);
  position: sticky; bottom: 0;
}
.drawer-actions .btn { flex: 1; }

/* Grupos del catálogo en el drawer — chips toggle (añadir/quitar) */
.drawer-grupos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.drawer-grupos-empty { font-size: 12px; color: var(--fg-3); }
.grupo-chip {
  font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-sunken);
  color: var(--fg-2); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.grupo-chip:hover { border-color: var(--accent); color: var(--accent); }
.grupo-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.grupo-chip.is-extra { border-style: dashed; }