/* Optimizo · Cámaras (V02). Solo estilos propios de esta sección; los colores salen de tokens.css. */
.cm-disp button { padding: 0 9px; }
.cm-menu-mas { min-width: 250px; }
.cm-menu-mas button, .cm-chips, .cm-pie > span, .cm-directo, .cm-sw, .cm-pista { display: inline-flex; align-items: center; gap: 8px; }
.cm-menu-mas .ic { color: var(--opt-text-secondary); }

/* filtros */
.cm-filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; }
.cm-filtros .control.buscar { flex: 1 1 200px; max-width: 420px; }
.cm-filtros .seg button { min-height: 34px; padding: 0 10px; }
.cm-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--opt-radius-pill); background: var(--opt-surface-raised); color: var(--opt-text-secondary); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.seg button[aria-pressed=true] .cm-n { background: var(--opt-accent-soft); color: var(--opt-accent-text); }
.cm-zona { margin-left: auto; max-width: 220px; }
.cm-zona select { max-width: 160px; text-overflow: ellipsis; }

/* cuadrícula */
.cm-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cm-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.cm-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-grid:empty { display: none; }
/* Una por fila: el video entero cabe en la ventana (no se agranda más allá del alto disponible). */
.cm-grid[data-cols="1"] .cm-card { width: 100%; max-width: calc((100vh - 320px) * 16 / 9 + 26px); min-width: min(100%, 560px); justify-self: center; }
.cm-card { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--opt-duration-fast), box-shadow var(--opt-duration-fast); }
.cm-card:focus-visible { outline: 2px solid var(--opt-focus); outline-offset: 2px; }
.cm-card.sel { border-color: var(--opt-accent); box-shadow: inset 0 0 0 1px var(--opt-accent), var(--opt-shadow-sm); }
.cm-cab { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding-left: 4px; user-select: none; }
/* Título y estados en una línea; si no caben, los estados pasan abajo (el título no se corta por ellos). */
.cm-cab-i { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; min-height: 32px; }
.cm-tit { flex: 0 1 auto; min-width: 0; font-size: var(--opt-text-body); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-chips { gap: 6px; flex-wrap: wrap; }
.cm-card { container-type: inline-size; }
/* Tarjetas angostas: los estados siempre bajo el título, así los videos de una misma fila quedan alineados. */
@container (max-width: 519px) { .cm-chips { flex-basis: 100%; } }
.cm-pend { gap: 4px; }
.cm-pend:hover { box-shadow: inset 0 0 0 1px var(--opt-accent-border); }
.cm-menu { display: inline-flex; }
.cm-visor { border-radius: var(--opt-radius-control); cursor: zoom-in; }
.cm-card.apagada .cm-tit { color: var(--opt-text-secondary); }

/* pie del visor y detalles técnicos */
.cm-pie { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; min-height: 26px; padding: 0 4px; font-size: var(--opt-text-sm); color: var(--opt-text-secondary); }
.cm-pie > span { gap: 6px; min-width: 0; }
.cm-pie-t { color: var(--opt-text); }
.cm-pie-d { margin-left: auto; }
.cm-pie .btn.t.chico { min-height: 28px; }
.cm-av { color: var(--opt-warning); font-weight: 600; }
.cm-ok { color: var(--opt-success); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.cm-tec { border-top: 1px solid var(--opt-border); padding: 8px 4px 0; font-size: var(--opt-text-sm); }
.cm-tec summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--opt-text-secondary); font-weight: 600; border-radius: 6px; }
.cm-tec summary::-webkit-details-marker { display: none; }
.cm-tec summary:hover { color: var(--opt-heading); }
.cm-tec summary .ic { transform: rotate(-90deg); transition: transform var(--opt-duration-fast) var(--opt-ease); }
.cm-tec[open] summary .ic { transform: none; }
.cm-tec-c { display: grid; gap: 8px; margin-top: 6px; }
.cm-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.cm-dl dt { color: var(--opt-text-secondary); }
.cm-dl dd { margin: 0; color: var(--opt-heading); overflow-wrap: anywhere; }
.cm-vacio-acc { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* barra inferior: directo (neutral, no rojo), hora, superposiciones y pista */
.cm-barra { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-height: 56px; padding: 8px 18px; background: var(--opt-surface); border: 1px solid var(--opt-border); border-radius: var(--opt-radius-card); box-shadow: var(--opt-shadow-md); font-size: var(--opt-text-sm); }
.cm-directo { font-weight: 700; color: var(--opt-heading); letter-spacing: .01em; }
.cm-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--opt-heading); box-shadow: 0 0 0 3px var(--opt-surface-inset); }
.cm-sep { width: 1px; height: 24px; background: var(--opt-border-strong); }
.cm-hora { font-size: var(--opt-text-md); font-weight: 600; color: var(--opt-heading); }
.cm-grow { flex: 1; }
.cm-sw { gap: 12px; font-weight: 600; color: var(--opt-heading); cursor: pointer; }
.cm-pista { color: var(--opt-text-secondary); }

/* cámara ampliada */
.cm-amp-cab { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cm-amp-tit { flex: 1 1 200px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-amp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 16px; }
.cm-amp-video { padding: 12px 12px 10px; display: grid; gap: 10px; }
.cm-amp-visor { width: min(100%, calc((100vh - 330px) * 16 / 9)); justify-self: center; border-radius: var(--opt-radius-control); }
.cm-amp-visor:fullscreen { width: 100%; display: grid; place-items: center; background: var(--opt-video); }
.cm-amp-visor:fullscreen canvas { width: min(100vw, calc(100vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
.cm-salir-fs { display: none !important; }
.cm-amp-visor:fullscreen .cm-salir-fs { display: grid !important; top: 16px; right: 16px; bottom: auto; }
/* El panel lateral mide lo mismo que el video y se desplaza por dentro: la barra inferior no tapa los pendientes. */
.cm-amp-video { align-self: start; }
.cm-amp-lado-c { position: relative; min-height: 320px; }
.cm-amp-lado { position: absolute; inset: 0; overflow-y: auto; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; }
.cm-amp-lado .card { padding: 16px; }
.cm-amp-lado .card-head { margin-bottom: 10px; }
.cm-amp-lado h3 { flex: 1; font-size: var(--opt-text-body); }
.cm-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cm-zona-i, .cm-ev { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--opt-border); border-radius: var(--opt-radius-control); background: var(--opt-surface-raised); color: inherit; }
.cm-ev { padding: 6px 10px 6px 6px; transition: border-color var(--opt-duration-fast); }
.cm-ev:hover { border-color: var(--opt-border-strong); }
.cm-ev .mini-ev { width: 60px; }
.cm-ev .mini-ev small { display: none; } /* a este tamaño basta el icono (el title dice «sin imagen») */
.cm-li-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cm-li-t b { color: var(--opt-heading); font-weight: 600; font-size: var(--opt-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-li-t b.cm-2l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.cm-li-t small { color: var(--opt-text-secondary); font-size: var(--opt-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-nada { color: var(--opt-text-secondary); font-size: var(--opt-text-sm); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.cm-amp-lado .vacio { padding: 16px 8px; }

@media (max-width: 1199px) {
  .cm-amp-cuerpo { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1099px) {
  .cm-grid[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-amp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cm-amp-lado-c { min-height: 0; }
  .cm-amp-lado { position: static; overflow: visible; }
  .cm-zona { margin-left: 0; }
}

/* formularios compartidos de cámara (camaras-comun.js: Cámaras, asistente y Dispositivos) */
.cm-sub-modal { margin: 0; }
.cm-form-modal, .cm-form-del { margin-top: 16px; max-width: none; }
.cm-rtsp { display: grid; gap: 12px; }
.cm-paso { display: inline-flex; align-items: center; gap: 6px; }
/* «Probar conexión» o «Buscar» con el lugar desde donde se hace: la Pi o este equipo (CONTRATO.md §4) */
.cm-probar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }