/*
 * Arcelor · Control de Calidad — Inspector asistido
 * Industrial dark theme · Inter + JetBrains Mono
 */

:root {
  --bg-0: #0b0d10;
  --bg-1: #11141a;
  --bg-2: #181c24;
  --bg-3: #232936;
  --line: #2a3140;
  --line-strong: #3a4255;
  --text-0: #f3f5f9;
  --text-1: #c9cfdb;
  --text-2: #8a93a6;
  --text-3: #5b6577;
  --ok: #34c171;
  --ok-bg: rgba(52, 193, 113, 0.12);
  --ok-border: rgba(52, 193, 113, 0.35);
  --warn: #f4b740;
  --ng: #ef4f4f;
  --ng-bg: rgba(239, 79, 79, 0.12);
  --ng-border: rgba(239, 79, 79, 0.40);
  --accent: #f37021;
  --accent-soft: rgba(243, 112, 33, 0.16);
  /* Cara superior / inferior de la chapa (ver "En qué CARA hay que mirar"). */
  --cara-sup: #f0873b;
  --cara-sup-bg: rgba(240, 135, 59, 0.14);
  --cara-sup-border: rgba(240, 135, 59, 0.45);
  --cara-inf: #5aa9f0;
  --cara-inf-bg: rgba(90, 169, 240, 0.14);
  --cara-inf-border: rgba(90, 169, 240, 0.45);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  /* theme-specific tokens */
  --app-bg: radial-gradient(1200px 600px at 50% -200px, #1a1f29 0%, transparent 60%), var(--bg-0);
  --header-bg: rgba(11, 13, 16, 0.75);
  --plan-stripe: #2b323e;
  --plan-bg-top: #2f3744;
  --plan-bg-bot: #262d39;
  --plan-grid: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] {
  --bg-0: #f4f6f9;
  --bg-1: #ffffff;
  --bg-2: #eef0f5;
  --bg-3: #e2e6ef;
  --line: #d0d6e4;
  --line-strong: #b8c0d4;
  --text-0: #111318;
  --text-1: #3a4255;
  --text-2: #5b6577;
  --text-3: #8a93a6;
  --ok-bg: rgba(52, 193, 113, 0.10);
  --ok-border: rgba(52, 193, 113, 0.28);
  --ng-bg: rgba(239, 79, 79, 0.09);
  --ng-border: rgba(239, 79, 79, 0.32);
  --accent-soft: rgba(243, 112, 33, 0.12);
  --cara-sup: #c25c12;
  --cara-sup-bg: rgba(194, 92, 18, 0.10);
  --cara-sup-border: rgba(194, 92, 18, 0.35);
  --cara-inf: #1c6bb0;
  --cara-inf-bg: rgba(28, 107, 176, 0.10);
  --cara-inf-border: rgba(28, 107, 176, 0.35);
  --app-bg: radial-gradient(1200px 600px at 50% -200px, #e4e9f5 0%, transparent 60%), var(--bg-0);
  --header-bg: rgba(248, 250, 253, 0.90);
  --plan-stripe: #c8d2e4;
  --plan-bg-top: #d8e2f4;
  --plan-bg-bot: #ccd8ec;
  --plan-grid: rgba(0, 0, 30, 0.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

.app {
  display: grid;
  grid-template-rows: 56px 1fr 28px;
  height: 100vh; width: 100vw;
  background: var(--app-bg);
}

/* ── Header ── */
.header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
}
.header-left, .header-right { display: flex; align-items: center; gap: 14px; }
.header-right { justify-content: flex-end; }
.hdr-divider { width: 1px; height: 26px; background: var(--line); }
.hdr-product { display: flex; flex-direction: column; line-height: 1.15; }
.hdr-product .t1 { font-size: 13px; color: var(--text-0); font-weight: 600; letter-spacing: 0.01em; }
.hdr-product .t2 { font-size: 10.5px; color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }
.header-line {
  display: flex; gap: 22px; align-items: center;
  padding: 6px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--bg-1);
}
.hl-item { display: flex; gap: 7px; align-items: baseline; }
.hl-item .lbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.hl-item .val { font-size: 13px; color: var(--text-0); font-weight: 500; }
.hl-divider { width: 1px; height: 14px; background: var(--line); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 0 var(--ok);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 193, 113, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 193, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 193, 113, 0); }
}

/* ── Main Layout ── */
/* Listado a la IZQUIERDA y, a la derecha, el vivo o el detalle de la chapa
   (nunca los dos: al seleccionar una chapa, el detalle ocupa ese hueco). */
.main {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(560px, 2.1fr);
  gap: 14px; padding: 14px; min-height: 0;
}
.col { display: flex; flex-direction: column; min-height: 0; }

.panel {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.panel-title { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-1); }
.panel-title .ico { color: var(--text-3); margin-right: 8px; }
.panel-meta { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ── Camera tiles ── */
/* Las 4 cámaras en 2x2 */
.cams { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 10px; min-height: 0; }
.cam-tile {
  position: relative; background: #000;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-height: 0;
}
.cam-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-overlay {
  position: absolute; inset: 0; padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.6) 100%);
}
.cam-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cam-label { display: flex; gap: 8px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.cam-rec { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #fff; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 2px 7px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.rec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ng); animation: pulse-red 1.4s ease-out infinite; }
@keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.cam-bot { display: flex; justify-content: space-between; align-items: flex-end; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.7); letter-spacing: 0.05em; }
.cam-scan { position: absolute; inset: 0; pointer-events: none; }
.cam-scan .scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 12px var(--accent); animation: scan 2.2s linear infinite; }
@keyframes scan { 0% { top: -2%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 102%; opacity: 0; } }

/* ── Plano ── */
.plano-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-shrink: 0; }
.plano-head-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chapa-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.chapa-id { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 600; color: var(--text-0); letter-spacing: 0.01em; white-space: nowrap; }
.chapa-meta { display: flex; gap: 18px; font-size: 11px; color: var(--text-2); align-items: flex-end; }
.chapa-meta .item { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.chapa-meta .lbl { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.chapa-meta .val { font-family: 'JetBrains Mono', monospace; color: var(--text-1); font-size: 12px; }

.status-banner { display: flex; align-items: center; gap: 14px; margin: 12px 14px 0; padding: 14px 16px; border-radius: 8px; border: 1px solid; flex-shrink: 0; }
.status-banner.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.status-banner.ng { background: var(--ng-bg); border-color: var(--ng-border); color: var(--ng); }
.status-banner .icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: 18px; flex-shrink: 0; }
.status-banner .text { display: flex; flex-direction: column; gap: 1px; }
.status-banner .text .main { font-size: 17px; font-weight: 600; color: var(--text-0); letter-spacing: 0.01em; }
.status-banner .text .sub { font-size: 11.5px; color: var(--text-2); }

.plano-body { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr); gap: 14px; padding: 14px; flex: 1; min-height: 0; }
.plano-wrap { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; display: flex; align-items: stretch; justify-content: stretch; position: relative; min-height: 0; overflow: hidden; }
.chapa-plan {
  position: relative; flex: 1; width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, var(--plan-stripe) 0 1px, transparent 1px 6px), linear-gradient(180deg, var(--plan-bg-top) 0%, var(--plan-bg-bot) 100%);
  border: 1px solid var(--line-strong); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 30px rgba(0,0,0,0.25);
}
.chapa-plan .grid-h, .chapa-plan .grid-v { position: absolute; background: var(--plan-grid); }
.chapa-plan .grid-h { left: 0; right: 0; height: 1px; }
.chapa-plan .grid-v { top: 0; bottom: 0; width: 1px; }

.defect-marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #fff;
  cursor: pointer; z-index: 2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: var(--ng); box-shadow: 0 0 0 2px rgba(239,79,79,0.25), 0 0 14px rgba(239,79,79,0.6);
}
.defect-marker.falso-positivo { background: var(--text-3); box-shadow: none; opacity: 0.6; }
.defect-marker:hover, .defect-marker.active { transform: translate(-50%, -50%) scale(1.18); }
.defect-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: marker-pulse 1.8s ease-out infinite; }
@keyframes marker-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
.no-defect-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--ok); border: 2.5px solid var(--ok); padding: 6px 18px; border-radius: 4px; letter-spacing: 0.15em; opacity: 0.55; white-space: nowrap; }

/* ── Defect list ── */
.defect-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.defect-card { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.defect-card:hover, .defect-card.active { border-color: var(--line-strong); background: var(--bg-3); }
.defect-card[data-estado="falso_positivo"] { opacity: 0.55; }
.defect-thumb { width: 62px; height: 62px; border-radius: 4px; background: #000; position: relative; overflow: hidden; border: 1px solid var(--line-strong); flex-shrink: 0; }
.defect-thumb-img { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-size: cover; background-position: center; filter: contrast(1.1) saturate(0.7); }
.defect-info { min-width: 0; }
.defect-info .head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.defect-num { width: 18px; height: 18px; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; border-radius: 50%; background: var(--ng); color: #fff; }
.defect-name { font-size: 13px; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.defect-coords { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-2); }
.defect-ampliar { font-size: 14px; color: var(--text-3); padding: 0 4px; align-self: center; }
.defect-card:hover .defect-ampliar { color: var(--text-1); }

.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-3); padding: 28px; text-align: center; }
.empty-state .glyph { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ok); color: var(--ok); display: grid; place-items: center; font-size: 22px; }
.empty-state .t { font-size: 13px; color: var(--text-1); font-weight: 500; }
.empty-state .s { font-size: 11.5px; color: var(--text-3); }

/* ── History ── */
.hist-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.hist-summary .cell { background: var(--bg-1); padding: 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.hist-summary .lbl { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.hist-summary .val { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 600; color: var(--text-0); line-height: 1; }
.hist-summary .val.ok { color: var(--ok); }
.hist-summary .val.ng { color: var(--ng); }
.hist-list { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
.hist-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 5px; cursor: pointer; transition: background 0.12s ease; border: 1px solid transparent; }
.hist-row:hover { background: var(--bg-2); }
.hist-row.active { background: var(--bg-2); border-color: var(--line-strong); }
.hist-row.in-progress { background: var(--accent-soft); border-color: rgba(243,112,33,0.45); border: 1px solid rgba(243,112,33,0.45); }
.hist-status-dot { width: 8px; height: 8px; border-radius: 50%; justify-self: center; }
.hist-status-dot.ok { background: var(--ok); }
.hist-status-dot.ng { background: var(--ng); }
.hist-status-dot.scanning { background: transparent; position: relative; width: 10px; height: 10px; border: 1.5px solid var(--accent); }
.scan-pulse { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--accent); animation: marker-pulse 1.4s ease-out infinite; opacity: 0.8; }
.hist-id { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.hist-time { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-0); font-weight: 500; }
.hist-fotos { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-3); margin-top: 1px; }
.hist-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; min-width: 28px; text-align: center; }
.hist-badge.ok       { background: var(--ok-bg);       color: var(--ok);     border: 1px solid var(--ok-border); }
.hist-badge.ng       { background: var(--ng-bg);       color: var(--ng);     border: 1px solid var(--ng-border); }
.hist-badge.annotated{ background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(243,112,33,0.35); }
.hist-badge.scanning { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(243,112,33,0.4); letter-spacing: 0.1em; }
.hist-status-dot.annotated { background: var(--accent); }

/* ── History tabs ── */
.hist-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.hist-tab-btn {
  flex: 1; padding: 10px 12px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .12s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.hist-tab-btn:hover { color: var(--text-1); }
.hist-tab-btn.active { color: var(--text-0); border-bottom-color: var(--accent); }
.hist-tab-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; min-width: 20px; text-align: center;
  background: var(--bg-3); color: var(--text-2);
}
.hist-tab-count.ng {
  background: var(--ng-bg); color: var(--ng); border: 1px solid var(--ng-border);
}

/* ── History filter bar ── */
.hist-filter-bar {
  display: flex; gap: 6px; padding: 7px 8px;
  flex-shrink: 0; border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.hist-filter-input {
  flex: 1; min-width: 0;
  background: var(--bg-2); color: var(--text-1);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 8px; font-size: 12px; font-family: inherit;
  transition: border-color 0.12s;
}
.hist-filter-input:focus { outline: none; border-color: var(--accent); }
.hist-filter-input.date { max-width: 128px; cursor: pointer; }
.hist-filter-input::-webkit-search-cancel-button { cursor: pointer; }
.hist-filter-clear {
  width: 26px; height: 26px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 4px; color: var(--text-3); font-size: 11px;
  transition: background 0.12s, color 0.12s;
}
.hist-filter-clear:hover { background: var(--bg-3); color: var(--text-1); }

.hist-date-sep {
  padding: 8px 10px 5px; flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.hist-date-sep + .hist-date-sep { margin-top: 2px; }

/* ── Footer ── */
.footer { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 10px; color: var(--text-3); border-top: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.footer-left, .footer-right { display: flex; gap: 14px; align-items: center; }

/* ── Modal ── */
[hidden] { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); z-index: 50; display: grid; place-items: center; padding: 40px; animation: fade-in 0.18s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(900px, 92vw); max-height: 86vh; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; animation: scale-in 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes scale-in { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-title { display: flex; align-items: center; gap: 12px; }
.modal-title h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-0); }
.modal-close { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; color: var(--text-2); transition: background 0.12s, color 0.12s; }
.modal-close:hover { background: var(--bg-3); color: var(--text-0); }
.modal-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px; background: var(--line); flex: 1; min-height: 0; }
.modal-photo { background: #000; position: relative; overflow: hidden; display: grid; place-items: center; min-height: 320px; }
.modal-photo-img { width: 100%; height: 100%; background-size: cover; background-position: center; filter: contrast(1.08); min-height: 320px; }
.modal-photo-placeholder { color: var(--text-3); font-size: 13px; text-align: center; padding: 20px; }
.modal-side { background: var(--bg-1); padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.kv-list { display: flex; flex-direction: column; gap: 12px; }
.kv { display: flex; flex-direction: column; gap: 3px; }
.kv .k { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.kv .v { font-size: 13px; color: var(--text-0); font-family: 'JetBrains Mono', monospace; }
.kv .v.big { font-size: 16px; font-weight: 600; font-family: 'Inter', sans-serif; }
.confidence-bar { height: 5px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.confidence-bar .fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ffb070); }
.btn-row { display: flex; gap: 8px; margin-top: auto; }
.btn { flex: 1; padding: 10px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background 0.12s, border-color 0.12s; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-1); }
.btn:hover { background: var(--bg-3); color: var(--text-0); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1a0a00; font-weight: 600; }
.btn.primary:hover { background: #ff8233; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Tabs ── */
.tab-bar { display: flex; gap: 1px; padding: 8px 10px 0; flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.tab-btn { padding: 6px 14px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); border: 0; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s; white-space: nowrap; }
.tab-btn:hover { color: var(--text-1); }
.tab-btn.active { color: var(--text-0); border-bottom-color: var(--accent); }
/* Aviso que sustituye a las pestañas Galería/Slideshow cuando la chapa está
   purgada por retención. Mismo alto que .tab-btn para que la barra no salte. */
.tab-purgada { padding: 6px 14px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-3); white-space: nowrap; align-self: center; }
.tab-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── Cam selector ── */
.cam-selector { display: flex; gap: 6px; padding: 8px 12px; flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.cam-btn { padding: 4px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; transition: all 0.12s; cursor: pointer; }
.cam-btn:hover { color: var(--text-0); }
.cam-btn.active { color: var(--text-0); background: var(--bg-3); border-color: var(--line-strong); }

/* ── Galería ── */
.foto-grid { flex: 1; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; align-content: start; }
.foto-thumb { position: relative; aspect-ratio: 4/3; min-height: 60px; background: #14161b; border-radius: 4px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line); transition: border-color 0.12s, transform 0.12s; }
.foto-thumb:hover { border-color: var(--accent); transform: scale(1.04); }
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-thumb.has-anotacion { border: 2px solid var(--ng); }
.foto-thumb.has-anotacion:hover { border-color: var(--ng); }
.foto-thumb-badge {
  position: absolute; top: 5px; right: 5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--ng); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  border-radius: 999px; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); pointer-events: none;
}
.foto-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); padding: 28px; text-align: center; font-size: 13px; }

/* ── Overlay "cargando" con barra de progreso (lightbox / slideshow) ── */
.media-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,0.6); }
.media-loading[hidden] { display: none; }
.media-spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,0.18); border-top-color: var(--accent, #4da3ff); border-radius: 50%; animation: media-spin 0.8s linear infinite; }
@keyframes media-spin { to { transform: rotate(360deg); } }
.media-loading-bar { width: 60%; max-width: 300px; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; }
.media-loading-bar > div { height: 100%; width: 0%; background: var(--accent, #4da3ff); transition: width 0.12s linear; }
.media-loading-txt { color: #e5e5e5; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.3px; }

/* ── Slideshow ── */
.slideshow-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.slideshow-img-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; position: relative; }
.slideshow-expand-btn {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 5px;
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.75);
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.15);
  opacity: .7; transition: opacity .15s, background .15s;
  pointer-events: auto;
}
.slideshow-expand-btn:hover { opacity: 1; background: rgba(0,0,0,.8); }
.slideshow-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.slideshow-controls { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--bg-1); }
.slideshow-play-btn { padding: 6px 16px; background: var(--accent); color: #1a0a00; border-radius: 4px; font-size: 12px; font-weight: 600; border: 0; cursor: pointer; transition: background 0.12s; }
.slideshow-play-btn:hover { background: #ff8233; }
.slideshow-counter { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-2); flex: 1; text-align: center; }
.slideshow-speed { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.slideshow-speed select { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font-size: 11px; cursor: pointer; }

/* ── Foto lightbox ── */
.foto-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 60; display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: fade-in 0.15s ease; }
/* .foto-lightbox-img now lives inside .foto-lightbox-img-wrap — see Anotación section */
.foto-lightbox-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,0.12); color: #fff; font-size: 16px; border: 0; cursor: pointer; transition: background 0.12s; }
.foto-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.foto-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 72px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,0.10); color: #fff; font-size: 36px; font-weight: 300; border: 0; cursor: pointer; transition: background 0.12s; line-height: 1; }
.foto-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.foto-lightbox-nav.prev { left: 14px; }
.foto-lightbox-nav.next { right: 14px; }
.foto-lightbox-nav:disabled { opacity: 0.2; cursor: default; }
.foto-lightbox-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; pointer-events: none; }

/* ── Anotación de imágenes ── */
.foto-lightbox-img-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(95vw - 120px);
  max-height: calc(92vh - 100px);
}
.foto-lightbox-img-wrap .foto-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block; border-radius: 4px; cursor: default;
}
.anotacion-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 4px; cursor: crosshair; z-index: 1;
}
.anotacion-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.anotacion-overlay-box {
  position: absolute;
  border: 2px solid #34c171;
  background: rgba(52,193,113,0.15);
  pointer-events: auto;
  box-sizing: border-box;
}
.anotacion-overlay-label {
  position: absolute; top: -22px; left: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: #34c171; color: #fff;
  padding: 3px 7px; border-radius: 4px 4px 4px 0;
  white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.anotacion-overlay-del {
  position: absolute; top: -22px; right: 0;
  width: 20px; height: 20px; display: grid; place-items: center;
  background: #333; border-radius: 50%;
  color: #fff; font-size: 9px; border: 0; cursor: pointer;
  pointer-events: auto; transition: background .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.anotacion-overlay-del:hover { background: var(--ng); }

/* ── Barra de anotación ── */
.foto-lightbox-counter {
  bottom: 62px !important;  /* queda por encima de la barra */
}
.anotacion-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center;
  background: #fff;
  border-top: 1px solid #e2e6ef;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
}
.anotacion-toggle-btn {
  padding: 14px 20px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: transparent; color: #555; border: 0;
  border-right: 1px solid #e2e6ef;
  transition: all .12s; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.anotacion-toggle-btn:hover { color: #111; background: #f5f6fa; }
.anotacion-toggle-btn.active {
  color: var(--accent); background: rgba(243,112,33,0.07);
  border-right-color: rgba(243,112,33,0.2);
}

.anotacion-form { display: flex; align-items: center; flex: 1; padding: 0 20px; min-width: 0; }

.anotacion-hint {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: #9399a8;
}
.anotacion-hint svg { flex-shrink: 0; stroke: #aab0bf; }

.anotacion-tipo-wrap {
  display: flex; align-items: center; gap: 16px; flex: 1;
  animation: fade-in .15s ease;
}
.anotacion-tipo-label {
  font-size: 11px; font-weight: 600; color: #666;
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; flex-shrink: 0;
}
.anotacion-tipo-sel {
  background: #fff; color: #222; border: 1.5px solid #d0d5e2;
  border-radius: 6px; padding: 8px 12px; font-size: 12.5px;
  cursor: pointer; font-family: inherit; min-width: 160px;
  transition: border-color .12s, box-shadow .12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.anotacion-tipo-sel:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(243,112,33,0.14);
}

.anotacion-action-btns { display: flex; gap: 10px; margin-left: auto; }
.anotacion-save-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 22px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  transition: background .12s, box-shadow .12s, transform .08s;
  box-shadow: 0 2px 8px rgba(243,112,33,0.35);
}
.anotacion-save-btn:hover { background: #ff8233; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(243,112,33,0.4); }
.anotacion-save-btn:active { transform: translateY(0); }
.anotacion-cancel-btn {
  padding: 9px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 500;
  background: #f3f4f8; color: #555; border: 1px solid #d5d8e8; cursor: pointer;
  transition: all .12s;
}
.anotacion-cancel-btn:hover { background: #e8eaf2; color: #222; }

/* ── Slideshow fullscreen ── */
.slideshow-fullscreen {
  display: none;
  position: fixed; inset: 0; z-index: 70;
  background: #000;
  flex-direction: column;
  align-items: center; justify-content: center;
}
.slideshow-fullscreen.open { display: flex; }
.slideshow-fs-img {
  max-width: 100%; max-height: calc(100vh - 72px);
  object-fit: contain; display: block;
  flex: 1; min-height: 0;
}
.slideshow-fs-controls {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; flex-shrink: 0;
  background: rgba(0,0,0,.75); border-top: 1px solid rgba(255,255,255,.08);
}
.slideshow-fs-close {
  position: absolute; top: 16px; right: 18px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 6px; background: rgba(255,255,255,.12);
  color: #fff; font-size: 16px; border: 0; cursor: pointer;
  transition: background 0.12s; z-index: 2;
}
.slideshow-fs-close:hover { background: rgba(255,255,255,.25); }

/* ── Footer export ── */
.footer-export-link {
  color: var(--text-3); text-decoration: none; font-size: 10px; letter-spacing: .04em;
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px;
  transition: color .12s, border-color .12s;
}
.footer-export-link:hover { color: var(--text-1); border-color: var(--line-strong); }

/* ── Theme toggle ── */
.theme-toggle {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 5px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text-2); font-size: 14px;
  transition: background 0.12s, color 0.12s;
}
.theme-toggle:hover { background: var(--bg-3); color: var(--text-0); }

/* ── Cam expand button ── */
.cam-expand-btn {
  position: absolute; bottom: 10px; right: 10px; z-index: 10;
  width: 30px; height: 30px; border-radius: 5px;
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s;
  cursor: pointer;
}
.cam-tile:hover .cam-expand-btn { opacity: 1; }
.cam-expand-btn:hover { background: rgba(0,0,0,.85); color: #fff; }

/* ── Cam lightbox ── */
.cam-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
}
.cam-lightbox[hidden] { display: none; }
.cam-lightbox-img {
  max-width: 95vw; max-height: 90vh;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
.cam-lightbox-label {
  color: rgba(255,255,255,.7); font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .08em;
}
.cam-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 18px; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cam-lightbox-close:hover { background: rgba(255,255,255,.25); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a546a; }

/* ── Flash messages ─────────────────────────────────────────────────────── */
.flash {
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  border-left: 4px solid;
  margin-bottom: 0;
  max-height: 80px;
  overflow: hidden;
}
.flash-notice {
  background: rgba(34, 197, 94, .12);
  border-color: #22c55e;
  color: #86efac;
}
.flash-alert {
  background: rgba(239, 68, 68, .12);
  border-color: #ef4444;
  color: #fca5a5;
}

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-body {
  overflow: auto;
  background: var(--bg-0);
  min-height: 100vh;
}

.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse 900px 500px at 50% -80px, rgba(243,112,33,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 80% 120%, rgba(243,112,33,0.04) 0%, transparent 60%),
    var(--bg-0);
}

.login-flash {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-left: none;
  border-bottom: 2px solid #ef4444;
  text-align: center;
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 24px 64px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.35);
}

/* Logo band — white background to keep the PNG logo legible */
.login-logo-band {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 40px;
  border-bottom: 1px solid var(--line);
}

.login-logo {
  height: 64px;
  width: auto;
  display: block;
}

/* Form area */
.login-body-inner {
  background: var(--bg-1);
  padding: 32px 36px 36px;
}

.login-heading {
  margin-bottom: 28px;
}

.login-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.login-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-0);
  letter-spacing: -0.01em;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.login-input {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-0);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.login-input::placeholder {
  color: var(--text-3);
}

.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.18);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  margin-top: -4px;
}

.login-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.login-btn {
  margin-top: 4px;
  width: 100%;
  padding: 11px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 12px rgba(243, 112, 33, 0.35);
}

.login-btn:hover {
  background: #e8621a;
  box-shadow: 0 4px 18px rgba(243, 112, 33, 0.50);
}

.login-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 6px rgba(243, 112, 33, 0.30);
}

.login-footer {
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

.login-footer a {
  color: var(--text-2);
  text-decoration: none;
}

.login-footer a:hover {
  color: var(--accent);
}

/* ── Header user / sign-out ─────────────────────────────────────────────── */
.hdr-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdr-user-email {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdr-signout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  padding: 0;
  font-family: inherit;
}

.hdr-signout-btn:hover {
  color: var(--ng);
  background: var(--ng-bg);
  border-color: var(--ng-border);
}


/* ── Galería POR CARA: las 2 cámaras en paralelo ──────────────────────────────
   Un ÚNICO contenedor con scroll que envuelve las dos columnas, para que se
   desplacen juntas: así la fila que miras en una columna es el mismo instante
   que en la otra. Ambas cámaras de una cara tienen el mismo número de frames
   (la captura es simultánea), de modo que las filas se corresponden. */
/* ── Una CARA: sus 2 cámaras en paralelo ──────────────────────────────────────
   Cada cámara es un panel propio, con su cabecera pegada encima. Antes eran dos
   rejillas separadas solo por una línea de 1 px y no se leían como dos cámaras
   distintas.

   Las cabeceras van FUERA del contenedor con scroll: cuando eran sticky dentro
   de él, las miniaturas se veían pasar por encima y por debajo al desplazar.

   OJO al tocar esto: las dos columnas tienen que medir EXACTAMENTE lo mismo. El
   separador era un border-left que solo tenía la segunda, así que su ancho útil
   era 2 px menor; con auto-fill las miniaturas salían un pelín más estrechas y,
   por la relación de aspecto, más bajas — y las filas de las dos columnas se
   iban desalineando más cuanto más bajabas. Por eso el borde lo llevan LAS DOS
   (transparente en la primera) y por eso el hueco entre paneles es `gap`, que
   no roba ancho a ninguna. */
.cara-heads { display: grid; gap: 12px; flex-shrink: 0; background: var(--bg-1);
              /* --gutter lo pone renderCara() con el ancho REAL de la barra de
                 scroll de .foto-dual: la cabecera no scrollea, así que sin esto
                 su ancho útil no coincide con el de las columnas y las líneas no
                 cuadran. */
              padding: 10px calc(12px + var(--gutter, 0px)) 0 12px; }
.cara-head { display: flex; align-items: baseline; justify-content: center; gap: 8px;
             padding: 8px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
             text-transform: uppercase; color: var(--text-1);
             background: var(--bg-3); border: 1px solid var(--line-strong);
             border-bottom: 0; border-radius: 6px 6px 0 0; }
.cara-head-n { font-weight: 500; color: var(--text-3); letter-spacing: .04em;
               text-transform: none; font-size: 10px; }

/* Un solo scroll para las 2 cámaras: la fila que miras en una columna es el
   mismo instante que en la otra. scrollbar-gutter reserva siempre el hueco de la
   barra; el resto lo iguala renderCara() midiendo el ancho real. */
.foto-dual { flex: 1; overflow-y: auto; scrollbar-gutter: stable;
             display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
             padding: 0 12px 12px; align-content: start; }
.foto-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
            gap: 6px; align-content: start; padding: 10px;
            background: var(--bg-2); border: 1px solid var(--line-strong);
            border-top: 0; border-radius: 0 0 6px 6px; }
.foto-dual .foto-empty { grid-column: 1 / -1; }

/* Panel derecho: vivo y detalle se turnan en el mismo hueco */
.panel[hidden] { display: none; }

/* Resumen crudo de la sesión (pestaña temporal "Luz / resumen"). Monoespaciado y
   con scroll propio: es un volcado de texto, no una vista maquetada. */
.resumen-txt { flex: 1; overflow: auto; margin: 0; padding: 12px 14px;
               font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: 11.5px; line-height: 1.55; color: var(--text-1);
               background: var(--bg-1); white-space: pre; }

/* ── Línea de tiempo ──────────────────────────────────────────────────────────
   Los 4 frames de un mismo instante, colocados EXACTAMENTE como en el mosaico
   en vivo: la cara superior arriba, la inferior abajo, y las "2" a la izquierda.
   Las miniaturas van a su tamaño natural (480 px las de abajo, 320 las de
   arriba) y NO se reescalan, así que la rejilla se ajusta a ellas y el conjunto
   puede desbordar: por eso el contenedor lleva scroll en los dos ejes. */
.tl-bar { display: flex; align-items: center; gap: 12px; flex-shrink: 0;
          padding: 10px 14px; border-bottom: 1px solid var(--line);
          background: var(--bg-1); }
.tl-btn { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--line-strong);
          background: var(--bg-3); color: var(--text-0); font-size: 12px; flex-shrink: 0; }
.tl-btn:hover { border-color: var(--accent); color: var(--accent); }
.tl-range { flex: 1; min-width: 120px; accent-color: var(--accent); cursor: pointer; }
.tl-pos { font-size: 11px; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
.tl-speed { font-size: 11px; padding: 4px 6px; border-radius: 4px; flex-shrink: 0;
            color: var(--text-1); background: var(--bg-2); border: 1px solid var(--line); }

.tl-grid { flex: 1; overflow: auto; padding: 14px;
           display: grid; grid-template-columns: repeat(2, max-content);
           gap: 14px; align-content: start; justify-content: center; }
.tl-tile { display: flex; flex-direction: column; gap: 6px; }
.tl-tile-lbl { display: flex; justify-content: space-between; gap: 10px;
               font-size: 10px; font-weight: 600; letter-spacing: .09em;
               text-transform: uppercase; color: var(--text-2); }
/* Las 4 casillas MIDEN LO MISMO, aunque las cámaras no den la misma resolución
   (1920x1080 abajo, 640x400 arriba): el hueco es fijo y la imagen se ajusta
   dentro con object-fit: contain, que no recorta ni deforma. Antes iban a tamaño
   natural y las de abajo salían mucho mayores que las de arriba. */
.tl-tile-img { width: var(--tl-ancho, 420px); aspect-ratio: 16 / 10;
               display: flex; align-items: center; justify-content: center;
               background: #000; border: 1px solid var(--line-strong);
               border-radius: 6px; overflow: hidden; }
.tl-tile-img img { width: 100%; height: 100%; object-fit: contain;
                   display: block; cursor: zoom-in; }
.tl-tile-img img:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-tile.sin-foto .tl-tile-img { border-style: dashed; }
.tl-tile.sin-foto .tl-tile-img img { cursor: default; }
@media (max-width: 1500px) { .tl-grid { --tl-ancho: 340px; } }
@media (max-width: 1200px) { .tl-grid { --tl-ancho: 280px; } }
.tl-desfase { display: flex; align-items: center; gap: 6px; flex-shrink: 0;
              font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
              color: var(--text-3); white-space: nowrap; }
.tl-desfase input { width: 52px; padding: 4px 6px; border-radius: 4px; font-size: 11px;
                    color: var(--text-0); background: var(--bg-2); border: 1px solid var(--line);
                    font-family: 'JetBrains Mono', monospace; }
.tl-tile-lbl { display: flex; justify-content: space-between; gap: 10px; }
.tl-tile-n { font-weight: 500; color: var(--text-3); letter-spacing: 0; text-transform: none; }

/* Mensajes del listado: "Buscando…", "Sin chapas para ese filtro", aviso de
   resultados truncados. La busqueda va al servidor (todo el historico), asi que
   hay estados que antes no existian cuando solo se filtraban las filas visibles. */
.hist-vacio { padding: 18px 16px; font-size: 11.5px; line-height: 1.5;
              color: var(--text-3); text-align: center; }

/* Acceso al cartel de defectos de la planta (la referencia de codigos). Se abre
   en otra pestana: es una imagen densa y conviene poder ampliarla y guardarla. */
.hdr-cartel { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
              padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
              background: var(--bg-1); color: var(--text-2); text-decoration: none;
              font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; }
.hdr-cartel:hover { color: var(--text-0); border-color: var(--line-strong); }
.hdr-cartel .ico { color: var(--text-3); font-size: 12px; }
.cartel-link { margin-left: 8px; font-size: 10px; font-weight: 500; letter-spacing: .04em;
               text-transform: none; color: var(--accent); text-decoration: none;
               border-bottom: 1px dotted currentColor; }
.cartel-link:hover { color: var(--text-0); }

/* ── Pila de inspección ──────────────────────────────────────────────────────
   Chapas señaladas por la Excel de daños de la planta: hay que mirarlas a mano y
   sus fotos están exentas de la purga por retención. Se distinguen con el color
   de advertencia (--warn), no con el de defecto (--ng): no es que tengan un
   defecto confirmado, es que HAY QUE MIRARLAS. */
.hist-tab-count.pila {
  background: rgba(244, 183, 64, 0.14); color: var(--warn);
  border: 1px solid rgba(244, 183, 64, 0.38);
}
.hist-pila { color: var(--warn); margin-right: 4px; font-size: 11px; }
/* El dia de la chapa dentro de la fila, solo en la pila: esa lista abarca
   semanas y la cabecera del dia se pierde al hacer scroll. */
.hist-dia { color: var(--text-2); font-size: 11px; margin-right: 6px; }

.pila-btn {
  align-self: flex-start; margin-top: 2px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-3); font-size: 13px; line-height: 1;
  padding: 3px 7px; transition: color .12s, border-color .12s, background .12s;
}
.pila-btn:hover { color: var(--warn); border-color: rgba(244, 183, 64, 0.5); }
.pila-btn.on {
  color: var(--warn); border-color: rgba(244, 183, 64, 0.45);
  background: rgba(244, 183, 64, 0.12);
}

/* Lo que la planta dice que tiene la chapa. Va arriba de la pestaña Defectos,
   antes del banner de nuestras detecciones, porque es lo que se va a buscar. */
.reportes-planta {
  /* Vive entre la cabecera de la chapa y la barra de pestañas, asi que se ve en
     todas ellas. Con muchos reportes no puede comerse la galeria: se limita el
     alto y la lista hace scroll. */
  margin: 12px 14px 0; flex-shrink: 0;
  max-height: 34vh; overflow-y: auto;
  border: 1px solid rgba(244, 183, 64, 0.38); border-radius: 8px;
  background: rgba(244, 183, 64, 0.07);
}
.reportes-planta .rep-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid rgba(244, 183, 64, 0.25);
}
.reportes-planta .rep-head .ico {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--warn); color: var(--warn);
  font-size: 15px; font-weight: 700;
}
.reportes-planta .rep-head .main {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--warn); text-transform: uppercase;
}
.reportes-planta .rep-head .sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.rep-list { display: flex; flex-direction: column; }
.rep-card {
  display: flex; gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--line);
  /* Barra lateral con la cara: arriba naranja, abajo azul, el mismo par de
     colores que los chips. Con varios reportes se ve de un golpe cuáles son de
     una cara y cuáles de la otra sin leer cada tarjeta. */
  border-left: 3px solid transparent;
}
.rep-card.sup { border-left-color: var(--cara-sup); }
.rep-card.inf { border-left-color: var(--cara-inf); }
.rep-card:first-child { border-top: 0; }
.rep-datos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rep-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rep-tipo { font-size: 13px; font-weight: 600; color: var(--text-0); }
.rep-meta { font-size: 11px; color: var(--text-2); }
.rep-zonas { font-size: 11.5px; color: var(--text-1); margin-top: 2px; }
.rep-pies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.rep-pies > span {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text-3);
}
.rep-aviso {
  color: var(--warn) !important; border-color: rgba(244, 183, 64, 0.4) !important;
  background: rgba(244, 183, 64, 0.10);
}
.rep-unica { color: var(--ok) !important; border-color: var(--ok-border) !important; }

/* Las 9 zonas de la chapa, dibujadas como la chapa: filas = cabeza / centro /
   cola (sentido de avance), columnas = izda / centro / dcha. */
.rep-grid {
  flex-shrink: 0; align-self: flex-start;
  display: grid; grid-template-columns: repeat(3, 13px); grid-auto-rows: 13px; gap: 2px;
  padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.rep-grid span { background: var(--bg-3); border-radius: 1px; }
.rep-grid span.on { background: var(--warn); }

/* ── En qué CARA hay que mirar ────────────────────────────────────────────────
   Es lo primero que se pregunta quien inspecciona (¿las cámaras de arriba o las
   de abajo?), así que la cara se marca en los tres sitios: la fila del
   histórico, el resumen del aviso y cada reporte. Dos colores propios —no los
   de OK/NG, que significan otra cosa— y la flecha ▲/▼ como en el mosaico, donde
   la cara superior va arriba. Cuando hay reportes en las dos caras salen los
   dos distintivos: eso ES "en ambas". */
.hist-caras { margin-left: 6px; white-space: nowrap; }
.cara-chip {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 5px; margin-left: 4px; border-radius: 999px;
}
.cara-chip.sup, .rep-cara.sup {
  color: var(--cara-sup); border: 1px solid var(--cara-sup-border);
  background: var(--cara-sup-bg);
}
.cara-chip.inf, .rep-cara.inf {
  color: var(--cara-inf); border: 1px solid var(--cara-inf-border);
  background: var(--cara-inf-bg);
}
.rep-head-caras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.rep-cara {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}