/* Modernist — design-system tokens, base components and shared page chrome for the redesigned
   admin screens (design_handoff_carteleria). Scoped under .carteleria-app so these rules never
   leak onto the pages still using the old sidebar admin layout — this file is bundled globally
   by `stylesheet_link_tag :app` alongside every other stylesheet, so scoping is load-bearing,
   not decoration. Page-specific rules (e.g. the playlist editor's 3-column picker + timeline)
   live in their own stylesheet; only what's identical across screens (tokens, .btn/.input/.tag/
   .seg/.table, the top nav, the title bar, chips, alerts, flat progress bars) belongs here. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

.carteleria-app {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

/* Tabular numerals across the whole UI (transversal rule) — form controls, buttons and tables
   don't inherit font-variant-numeric from the body by default, so it's set explicitly here. */
.carteleria-app input, .carteleria-app select, .carteleria-app button,
.carteleria-app table, .carteleria-app .btn,
.carteleria-app h1, .carteleria-app h2, .carteleria-app h3,
.carteleria-app h4, .carteleria-app h5, .carteleria-app h6 {
  font-variant-numeric: tabular-nums;
}

/* Two layout variants: most screens scroll normally at the body level (min-height:100vh);
   the ones with their own internal 3-column panels (media library, playlist editor) pin to
   the viewport and scroll each panel internally instead. */
.cn-page { min-height: 100vh; display: flex; flex-direction: column; }
.cn-page-fixed, .pe-page {
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
/* Biblioteca de medios: same 3-column anatomy as the playlist editor's picker, but per the
   transversal rule the screen itself must use min-height (not height) and never clip with
   overflow:hidden, so the page can scroll if the viewport is too short — the grid below just
   gets a floor (min-height:420px) so it never collapses to 0. */
.cn-page-media { min-height: 100vh; display: flex; flex-direction: column; }

.carteleria-app *, .carteleria-app *::before, .carteleria-app *::after { box-sizing: border-box; }
.carteleria-app h1, .carteleria-app h2, .carteleria-app h3,
.carteleria-app h4, .carteleria-app h5, .carteleria-app h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0;
}
.carteleria-app h3 { font-size: 25px; }
.carteleria-app h4 { font-size: 20px; }
.carteleria-app h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.carteleria-app a { color: var(--color-accent); text-underline-offset: 3px; text-decoration: none; }
.carteleria-app a:hover { color: var(--color-accent-700); text-decoration: underline; }
.carteleria-app img { display: block; max-width: 100%; }
.carteleria-app :focus { outline: none; }
.carteleria-app :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.carteleria-app input[type=range] { accent-color: var(--color-accent); }
.carteleria-app p { margin: 0; }

.carteleria-app .hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.carteleria-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.carteleria-app .btn svg { display: block; }
.carteleria-app .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.carteleria-app .btn-primary { background: var(--color-accent); color: var(--color-bg); }
.carteleria-app .btn-primary:hover { background: var(--color-accent-600); }
.carteleria-app .btn-primary:active { background: var(--color-accent-700); }
.carteleria-app .btn-secondary { border-color: var(--color-divider); }
.carteleria-app .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.carteleria-app .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.carteleria-app .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.carteleria-app .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.carteleria-app .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.carteleria-app .btn-icon { width: 36px; height: 36px; padding: 0; }
.carteleria-app .btn-block { width: 100%; margin-top: 0; justify-content: flex-start; text-align: left; }

/* — forms — */
.carteleria-app .field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.carteleria-app .input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.carteleria-app .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.carteleria-app .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.carteleria-app .input:disabled { opacity: .55; cursor: not-allowed; }
.carteleria-app .input[readonly] { cursor: default; }

.carteleria-app .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.carteleria-app .radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.carteleria-app .radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.carteleria-app .radio:hover .dot { border-color: var(--color-accent); }
.carteleria-app .radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.carteleria-app .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — segmented filter — */
.carteleria-app .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.carteleria-app .seg-opt { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.carteleria-app .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.carteleria-app .seg-opt.active,
.carteleria-app .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.carteleria-app .seg-opt:not(.active):not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.carteleria-app .seg-opt-count { font-family: var(--font-heading); font-weight: 800; font-size: 11px; opacity: .75; }
/* radio-driven .seg-opt (e.g. media form's orientation toggle): hide the native control, the
   label's own background/text-color carries the checked state instead */
.carteleria-app .seg-opt-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.carteleria-app .seg-opt:has(.seg-opt-input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — tags / chips — */
.carteleria-app .tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.carteleria-app .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }

.carteleria-app .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 10px; flex: none; }
.carteleria-app .chip-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); box-shadow: inset 2px 0 0 var(--color-neutral-500); }
.carteleria-app .chip-text { background: var(--color-neutral-100); color: var(--color-neutral-800); box-shadow: inset 2px 0 0 var(--color-text); }
.carteleria-app .chip-accent { background: var(--color-accent-100); color: var(--color-accent-800); box-shadow: inset 2px 0 0 var(--color-accent); }

/* — tables — */
.carteleria-app .table { width: 100%; border-collapse: collapse; font-size: 14px; }
.carteleria-app .table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.carteleria-app .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.carteleria-app .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — flat progress bar — */
.carteleria-app .flat-progress-track { background: var(--color-neutral-300); position: relative; }
.carteleria-app .flat-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.carteleria-app .flat-progress-fill.complete { background: var(--color-text); }
.carteleria-app .flat-progress-fill.incomplete { background: var(--color-accent); }
.carteleria-app .flat-progress-label { font-size: 11px; margin-top: 4px; color: var(--color-neutral-700); }
.carteleria-app .flat-progress-label.incomplete { color: var(--color-accent-700); }

/* — two-column edit layout: form + sidebar (Editar lista, Editar horario) — */
.carteleria-app .pe-edit-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; border-bottom: 2px solid var(--color-divider); align-items: stretch; }
.carteleria-app .pe-edit-main { padding: 24px 20px; border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 20px; max-width: 600px; }
.carteleria-app .pe-edit-side { display: flex; flex-direction: column; min-width: 0; }
.carteleria-app .pe-edit-side-header { padding: 10px 20px; border-bottom: 1px solid var(--color-divider); }
.carteleria-app .pe-edit-side-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.carteleria-app .pe-edit-side-dims { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-neutral-700); }
.carteleria-app .pe-grid-fields:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.carteleria-app .pe-field-group { display: flex; flex-direction: column; gap: 10px; }
.carteleria-app .pe-edit-bottombar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; flex-wrap: wrap;
}
.carteleria-app .pe-edit-bottombar-actions { display: flex; gap: 8px; }

/* — mapa de zonas del template ——————————————————————————————————————————————
   Lo dibujan dos paginas distintas (el formulario de la lista y el panel Propiedades del editor),
   asi que vive aca: cuando estaba duplicado en las dos hojas de pagina, el arreglo se hizo en una
   sola y el editor siguio meses dibujando el mapa viejo, con las zonas sin contorno y la capa de
   fondo tapando a las demas.

   Sin gap: los templates que llevan cabeceras o zocalos finos usan una grilla de 48 x 27, y un
   espacio por pista sumaria mas que el ancho del propio mapa. Cada celda dibuja su contorno, que
   no cuesta nada por muchas pistas que haya. */
/* Ancho explicito, no el que resulte del contenido: las celdas se contienen a si mismas (ver mas
   abajo) y desde entonces no aportan ancho intrinseco, asi que sin esto el mapa entero colapsa a
   unos pocos pixeles. El alto sale de la proporcion de la pantalla. */
.carteleria-app .pe-zone-map {
  display: grid; gap: 0; aspect-ratio: 16/9; width: 100%; max-width: 100%; margin: 0 auto;
  background: var(--color-divider); border: 1px solid var(--color-divider);
}
.carteleria-app .pe-zone-map.vertical { aspect-ratio: 9/16; max-width: 220px; }
.carteleria-app .pe-zone-map-cell {
  background: var(--color-surface); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; overflow: hidden;
  position: relative; outline: 1px solid var(--color-divider); outline-offset: -1px;
}
/* La capa de fondo va por debajo de todas las demas, asi que centrarle la etiqueta la dejaria
   enterrada bajo los frames de arriba. Se ancla a la esquina y se tiñe el relleno para que se lea
   como un telon. */
.carteleria-app .pe-zone-map-cell.background {
  background: var(--color-neutral-200);
  align-items: flex-start; justify-content: flex-start; padding: 3px;
}
.carteleria-app .pe-zone-map-cell.background .pe-zone-map-number { font-size: 11px; }
.carteleria-app .pe-zone-map-number { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-neutral-700); }
.carteleria-app .pe-zone-map-label { font-size: 10px; color: var(--color-neutral-600); text-transform: uppercase; letter-spacing: .04em; }
/* La medida que pide la zona, dentro de la propia zona. Es el dato con el que se exporta la pieza,
   asi que tiene que estar donde se mira el layout y no solo en un tooltip. Las zonas finas no
   tienen alto para mostrarla y la recortan solas: para esas esta el encabezado del timeline. */
.carteleria-app .pe-zone-map-target { font-size: 10px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La capa de fondo es siempre la pantalla entera, asi que su medida no agrega nada, y su
   contenido va anclado a la esquina, donde lo tapan los frames de arriba: una linea mas ahi solo
   asoma por los bordes. */
.carteleria-app .pe-zone-map-cell.background .pe-zone-map-target { display: none; }
/* Una cabecera o un zocalo ocupan tres filas de veintisiete: en el mapa eso son unos pocos
   pixeles de alto, donde el numero, la etiqueta y la medida no entran y se pisan entre si y con
   los bordes. Cada celda se declara contenedor de consulta y va soltando lo de adentro segun el
   alto que le toque, de mas prescindible a menos: primero la medida (que el encabezado de la zona
   en el timeline muestra igual), despues la etiqueta y por ultimo el numero. */
.carteleria-app .pe-zone-map-cell { container-type: size; }
@container (max-height: 52px) { .carteleria-app .pe-zone-map-target { display: none; } }
/* Y tampoco entra a lo ancho en una columna angosta: partida en dos renglones se lee peor que no
   estar, y el encabezado de la zona en el timeline la muestra igual. */
@container (max-width: 100px) { .carteleria-app .pe-zone-map-target { display: none; } }
@container (max-height: 30px) { .carteleria-app .pe-zone-map-label { display: none; } }
@container (max-height: 16px) { .carteleria-app .pe-zone-map-number { display: none; } }
/* El numero manda sobre la etiqueta cuando hay poco lugar, asi que encoge antes de desaparecer. */
@container (max-height: 90px) { .carteleria-app .pe-zone-map-number { font-size: 13px; } }

/* — property rows (label / value, ruled) — */
.carteleria-app .property-rows { display: flex; flex-direction: column; }
.carteleria-app .property-row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--color-divider);
}
.carteleria-app .property-row:first-child { border-top: none; }
.carteleria-app .property-row-label { font-size: 12px; color: var(--color-neutral-700); }
.carteleria-app .property-row-value { margin-left: auto; font-size: 13px; font-weight: 600; text-align: right; }

/* — top nav (identical across every redesigned screen) — */
.cn-nav {
  display: flex; align-items: center; gap: 24px; padding: 10px 20px;
  border-bottom: 2px solid var(--color-divider); flex: none; flex-wrap: wrap;
}
.cn-nav-brand { display: flex; align-items: center; gap: 9px; margin-right: 16px; flex: none; }
/* El cuadrado de acento que hacia de marca provisoria lo reemplaza el logotipo de rlink; el
   separador lo despega del nombre del producto para que se lean como dos cosas distintas
   (la empresa y la aplicacion) y no como un solo logo compuesto. */
.cn-nav-logo-link { display: flex; align-items: center; flex: none; }
.cn-nav-logo { height: 21px; width: auto; display: block; }
.cn-nav-brand-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--color-divider); flex: none; }
.cn-nav-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.cn-nav-admin-tag {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 5px; background: var(--color-text); color: var(--color-bg); flex: none;
}
.cn-nav-links {
  display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px;
  gap: 22px; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
}
.cn-nav-links a { color: var(--color-text); opacity: .6; white-space: nowrap; }
.cn-nav-links a:hover { opacity: 1; color: var(--color-text); text-decoration: none; }
.cn-nav-links a.active { opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent); padding-bottom: 3px; }

.cn-nav-account { margin-left: auto; flex: none; position: relative; }
.cn-nav-account-trigger {
  display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.cn-nav-account-menu:not([hidden]) {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 180px;
  display: flex; flex-direction: column;
  background: var(--color-bg); border: 1px solid var(--color-divider);
}
.cn-nav-account-menu-item {
  display: block; padding: 10px 14px; font-size: 13px; color: var(--color-text); text-decoration: none;
  text-align: left; background: none; border: none; font: inherit; cursor: pointer; width: 100%;
}
.cn-nav-account-menu-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-accent-700); text-decoration: none; }
.cn-nav-account-menu-item + .cn-nav-account-menu-item { border-top: 1px solid var(--color-divider); }
.cn-nav-account-tenant { display: flex; flex-direction: column; gap: 2px; }
.cn-nav-account-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-neutral-600); }
.cn-nav-account-tenant-name { font-size: 11px; font-weight: 600; white-space: nowrap; }
.cn-nav-account-sep { width: 1px; align-self: stretch; background: var(--color-divider); flex: none; }
.cn-nav-account-avatar {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
}
.cn-nav-account-who { display: flex; flex-direction: column; gap: 2px; }
.cn-nav-account-name { font-size: 11px; font-weight: 600; white-space: nowrap; }
.cn-nav-account-role { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-neutral-600); }

/* — footer status bar (last child of every screen, margin-top:auto) — */
.cn-footer {
  margin-top: auto; flex: none; display: flex; align-items: center; gap: 18px;
  border-top: 2px solid var(--color-divider); background: var(--color-surface);
  padding: 7px 20px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-neutral-700); flex-wrap: wrap;
}
.cn-footer-server { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.cn-footer-server-dot { width: 7px; height: 7px; background: var(--color-text); flex: none; }

/* — title bar (h3/h4 + meta + actions; content differs per screen, chrome doesn't) — */
.cn-titlebar {
  display: flex; align-items: baseline; gap: 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--color-divider); flex: none; flex-wrap: wrap;
}
.cn-titlebar-meta { font-size: 11px; color: var(--color-neutral-700); }
.cn-titlebar-actions { margin-left: auto; display: flex; gap: 8px; }
.cn-titlebar a.cn-breadcrumb { font-size: 12px; }
.cn-titlebar .cn-breadcrumb-sep { font-size: 12px; color: var(--color-neutral-600); }

/* — alert strip — */
.cn-alert {
  display: flex; align-items: center; gap: 10px; padding: 11px 20px;
  background: var(--color-accent-100); border-bottom: 1px solid var(--color-divider);
  box-shadow: inset 3px 0 0 var(--color-accent); flex-wrap: wrap;
}
.cn-alert-dot { width: 9px; height: 9px; background: var(--color-accent); flex: none; }
.cn-alert-text { font-size: 13px; }
.cn-alert-text strong { font-family: var(--font-heading); font-weight: 800; }
.cn-alert-link { margin-left: auto; font-size: 13px; font-weight: 600; }

.cn-empty { padding: 28px 0; font-size: 13px; color: var(--color-neutral-700); }

/* — flash messages (notice/alert), styled like the alert strip but flat: neutral rail for a
   plain notice, accent rail only for something that needs attention — */
.cn-flash {
  padding: 11px 20px; font-size: 13px; border-bottom: 1px solid var(--color-divider); flex: none;
}
.cn-flash-notice { background: var(--color-neutral-100); box-shadow: inset 3px 0 0 var(--color-neutral-500); }
.cn-flash-alert { background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent); color: var(--color-accent-800); }

/* — media library: folder sidebar + card grid, shared by the playlist editor's picker and the
   Biblioteca de medios screen (identical 3-column anatomy in both, per the handoff) — */
.cn-folders { border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; min-height: 0; }
.cn-folders-search { padding: 12px; }
.cn-folders-list { padding: 0 0 12px; overflow: auto; min-height: 0; }
.cn-folder-row { display: flex; align-items: center; font-size: 13px; color: var(--color-text); }
.cn-folder-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.cn-folder-row.active, .cn-folder-row-link.active { background: var(--color-accent); color: var(--color-bg); font-weight: 600; }
.cn-folder-row-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; padding: 9px 14px; color: inherit; }
/* .cn-folder-row-link's own "color: inherit" loses to the global ".carteleria-app a" rule
   (same specificity family, but that one also matches the element type) — so on an active row
   the link text/icon stayed the base accent-red color from the global anchor rule instead of
   inheriting the row's --color-bg, making it unreadable against the accent-red background. */
.cn-folder-row.active .cn-folder-row-link { color: var(--color-bg); }
.cn-folder-row svg, .cn-folder-row-link svg { flex: none; width: 14px; height: 14px; }
.cn-folder-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-folder-row-count { margin-left: auto; font-size: 11px; opacity: .55; }
.cn-folder-row-delete {
  background: none; border: none; padding: 4px; margin-right: 8px;
  color: var(--color-neutral-600); cursor: pointer; opacity: 0; flex: none; transition: opacity .1s;
}
.cn-folder-row:hover .cn-folder-row-delete { opacity: 1; }
.cn-folder-row-delete:hover { color: var(--color-accent-700); }
.cn-folder-row-delete svg { width: 13px; height: 13px; display: block; }
.cn-folder-row.active .cn-folder-row-delete { color: var(--color-bg); }
.cn-new-folder { display: flex; gap: 6px; padding: 12px; }
.cn-new-folder .input { min-height: 32px; font-size: 13px; }

.cn-library { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-divider); }
.cn-library-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--color-divider); flex: none; flex-wrap: wrap; }
.cn-library-count { font-size: 11px; color: var(--color-neutral-700); }
.cn-library-hint { margin-left: auto; font-size: 11px; color: var(--color-accent-700); }
.cn-library-grid { flex: 1; overflow: auto; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 16px; align-content: start; }
.cn-library-empty { color: var(--color-neutral-700); font-size: 13px; padding: 16px; }
.cn-library-dropzone { margin-top: 16px; padding: 22px 20px; border: 2px dashed var(--color-divider); font-size: 13px; color: var(--color-neutral-700); }

.cn-media-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-divider); cursor: pointer; user-select: none; }
.cn-media-card.selected { border: 2px solid var(--color-accent); }

.cn-media-card-select { position: absolute; top: 6px; left: 6px; z-index: 2; opacity: 0; transition: opacity .1s; }
.cn-media-card:hover .cn-media-card-select,
.cn-media-card-select:has(input:checked) { opacity: 1; }
.cn-media-card-select input { width: 16px; height: 16px; margin: 0; }

.cn-bulk-bar, .cn-clipboard-bar {
  align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid var(--color-divider); background: var(--color-accent-100);
}
.cn-bulk-bar:not([hidden]), .cn-clipboard-bar:not([hidden]) { display: flex; }
.cn-clipboard-bar { background: var(--color-neutral-100); }
.cn-bulk-bar button:disabled, .cn-clipboard-bar button:disabled { opacity: .5; cursor: default; }
.cn-media-card-thumb { aspect-ratio: 16/10; background: var(--color-neutral-300); display: grid; place-items: center; position: relative; overflow: hidden; }
.cn-media-card-thumb img, .cn-media-card-thumb video { width: 100%; height: 100%; object-fit: cover; }
.cn-media-card-thumb svg { width: 26px; height: 26px; flex: none; }
.cn-media-card-badge { position: absolute; left: 0; bottom: 0; background: var(--color-text); color: var(--color-bg); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; }
.cn-media-card-badge.unused { background: var(--color-accent); }
.cn-media-card-foot { padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; }
/* min-width: 0 — sin esto los puntos suspensivos no aparecen nunca dentro de una fila flex: un
   elemento flex no baja de su contenido salvo que se lo permitan, asi que el nombre largo estiraba
   la tarjeta y se metia encima de la de al lado en vez de cortarse. El nombre completo queda en el
   title, que el navegador muestra al pasar por encima. */
.cn-media-card-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cn-media-card-meta { font-size: 11px; color: var(--color-neutral-700); }

/* draggable variant used only by the playlist editor's picker */
.cn-media-card[draggable="true"] { cursor: grab; }
/* El pie de la tarjeta apila nombre y duracion, y este modificador solo manda la duracion al
   margen derecho. align-items: stretch es lo que hace que el nombre ocupe el ancho de la tarjeta:
   con baseline —que es lo que estaba— cada hijo se medía por su contenido, asi que un nombre largo
   no se cortaba nunca, se salia de la tarjeta y se leia encima de la de al lado. */
.cn-media-card .cn-media-card-foot-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.cn-media-card .cn-media-card-foot-row .cn-media-card-meta { margin-left: auto; flex: none; }

.cn-storage-block { border-top: 1px solid var(--color-divider); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.cn-storage-big { font-family: var(--font-heading); font-weight: 800; font-size: 19px; }

/* — dark preview monitor placeholder, shared by the playlist editor, Biblioteca de medios'
   detail column and Detalle de medio's file preview — */
.cn-preview-monitor { aspect-ratio: 16/9; background: var(--color-neutral-900); display: grid; place-items: center; position: relative; overflow: hidden; }
.cn-preview-monitor img, .cn-preview-monitor video { width: 100%; height: 100%; object-fit: contain; }
.cn-preview-kind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.cn-preview-name { position: absolute; left: 8px; top: 8px; font-size: 10px; color: var(--color-neutral-400); }

.cn-library-grid.dropzone-active { outline: 2px dashed var(--color-accent); outline-offset: -8px; background: var(--color-accent-100); }
.cn-loading-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
}
.cn-loading-overlay:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.cn-spinner {
  width: 32px; height: 32px; border: 3px solid var(--color-divider);
  border-top-color: var(--color-accent); border-radius: 50%;
  animation: cn-spin .7s linear infinite;
}
@keyframes cn-spin { to { transform: rotate(360deg); } }

/* — fact cells (label + big value + sub, e.g. Detalle de pantalla's top grid) — */
.cn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); border-bottom: 2px solid var(--color-divider); }
.cn-fact-cell { padding: 22px 20px; border-right: 1px solid var(--color-divider); }
.cn-fact-value { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.15; }
.cn-fact-sub { font-size: 11px; color: var(--color-neutral-700); margin-top: 4px; }

/* — stat block (big % / label + progress, e.g. download status) — */
.cn-stat-block { padding: 22px 20px; border-bottom: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.cn-stat-big { font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 1; }

/* — section header / filter bar (used above tables across several screens) — */
.cn-section-header {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--color-divider); flex-wrap: wrap;
}
.cn-filter-bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  border-bottom: 2px solid var(--color-divider); flex-wrap: wrap;
}
.cn-table-wrap { overflow-x: auto; padding: 0 20px 40px; }

/* — pantalla de acceso (devise) —————————————————————————————————————————
   Tarjeta centrada con la marca rlink arriba y el nombre del producto debajo, separados por una
   regla: rlink es quien hace el sistema, Cartelería es el sistema. Comparte .field/.input/.btn
   con el resto del admin, asi que aca solo vive el armado de la pagina. */
.carteleria-app.cn-auth-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 24px;
}
.cn-auth-card {
  width: 100%; max-width: 380px; background: var(--color-bg);
  border: 2px solid var(--color-divider); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.cn-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cn-auth-logo { height: 42px; width: auto; }
.cn-auth-product {
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--color-divider); width: 100%; justify-content: center;
}
.cn-auth-product-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; letter-spacing: -0.01em;
}
.cn-auth-title { font-size: 20px; text-align: center; }
.cn-auth-lede { font-size: 13px; color: var(--color-neutral-700); text-align: center; }
.cn-auth-hint { margin-top: 6px; font-size: 11px; color: var(--color-neutral-700); }
.cn-auth-form { display: flex; flex-direction: column; gap: 14px; }
.cn-auth-submit { width: 100%; margin-top: 4px; }
.cn-auth-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.cn-auth-check input { accent-color: var(--color-accent); }
.cn-auth-links {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; padding-top: 4px;
}
.cn-auth-links:empty { display: none; }
.cn-auth-note {
  padding: 10px 12px; font-size: 13px;
  background: var(--color-neutral-100); box-shadow: inset 3px 0 0 var(--color-neutral-500);
}
.cn-auth-note-alert {
  background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent);
  color: var(--color-accent-800);
}
/* Devise arma los errores con un #error_explanation fijo: se le da el mismo tratamiento que a
   una alerta en vez de dejarlo con los estilos por defecto del navegador. */
.cn-auth-card #error_explanation {
  padding: 10px 12px; font-size: 13px;
  background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent);
  color: var(--color-accent-800);
}
.cn-auth-card #error_explanation h2 { font-size: 13px; margin-bottom: 4px; }
.cn-auth-card #error_explanation ul { margin: 0; padding-left: 18px; }
.cn-auth-foot { font-size: 11px; color: var(--color-neutral-600); letter-spacing: .04em; }

/* Miniatura de un zocalo en las grillas del admin: muestra su texto recortado, porque entre dos
   zocalos lo que los distingue es que dicen, no que ambos sean de tipo texto. */
.cn-thumb-ticker {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; padding: 8px; text-align: center;
  font-size: 11px; line-height: 1.3; font-weight: 600;
  color: var(--color-neutral-800);
}

/* — revision de formato al subir (media-encoder) ————————————————————————————————————————
   El dialogo nativo ya trae el fondo modal y el foco atrapado; aca se le da la caja y el listado,
   que se arma en el navegador con lo que el operador suelte. */
.carteleria-app .me-dialog {
  width: min(720px, calc(100vw - 32px)); padding: 20px;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text);
}
.carteleria-app .me-dialog::backdrop { background: color-mix(in srgb, var(--color-text) 45%, transparent); }
.carteleria-app .me-title { margin: 0 0 6px; }
.carteleria-app .me-intro { margin: 0 0 14px; font-size: 12px; color: var(--color-neutral-700); }
.carteleria-app .me-warning { margin-bottom: 14px; background: var(--color-accent-100); }

.carteleria-app .me-apply-all {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); font-size: 12px;
}
.carteleria-app .me-summary { margin: 12px 0 8px; font-size: 12px; color: var(--color-neutral-700); }

/* Tope de alto: soltar veinte archivos no puede empujar los botones fuera de la pantalla. */
.carteleria-app .me-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.carteleria-app .me-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--color-divider);
}
.carteleria-app .me-row-file { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.carteleria-app .me-row-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carteleria-app .me-row-detail { font-size: 11px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }

.carteleria-app .me-choices { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.carteleria-app .me-choices label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.carteleria-app .me-choices label[hidden] { display: none; }

.carteleria-app .me-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Ficha del dispositivo: métricas de dex-reporte (admin/devices/show) ──
   Una serie por gráfico, línea de 2px en el azul de la paleta de datos (validado contra
   --color-bg). El texto nunca usa el color de la serie; el umbral y los reinicios van en tinta
   neutra. Ver metric_chart_controller.js. */
.carteleria-app .dm-section { padding: 22px 20px; border-bottom: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: 16px; }
.carteleria-app .dm-section .cn-section-header { padding: 0; }

.carteleria-app .dm-criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.carteleria-app .dm-criterion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--color-neutral-100); border-left: 3px solid var(--color-neutral-500); }
.carteleria-app .dm-criterion.dm-bad { border-left-color: var(--color-accent); background: var(--color-accent-100); }
.carteleria-app .dm-criterion-mark { font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--color-text); }
.carteleria-app .dm-criterion-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-neutral-700); }
.carteleria-app .dm-criterion-value { font-size: 14px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.carteleria-app .dm-summary-line { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

.carteleria-app .dm-chart { --dm-series: #2a78d6; margin: 0; position: relative; }
.carteleria-app .dm-chart-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.carteleria-app .dm-chart-plot { width: 100%; height: 180px; }
.carteleria-app .dm-svg { display: block; overflow: visible; font-family: var(--font-body); }
.carteleria-app .dm-grid { stroke: var(--color-neutral-300); stroke-width: 1; }
.carteleria-app .dm-axis { font-size: 11px; fill: var(--color-neutral-700); }
.carteleria-app .dm-line { fill: none; stroke: var(--dm-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.carteleria-app .dm-threshold { stroke: var(--color-neutral-800); stroke-width: 1; }
.carteleria-app .dm-threshold-label { font-size: 11px; fill: var(--color-neutral-800); }
.carteleria-app .dm-event { stroke: var(--color-neutral-500); stroke-width: 1; }
.carteleria-app .dm-crosshair { stroke: var(--color-neutral-600); stroke-width: 1; }
.carteleria-app .dm-dot { fill: var(--dm-series); stroke: var(--color-bg); stroke-width: 2; }
.carteleria-app .dm-hit { fill: transparent; cursor: crosshair; }

.carteleria-app .dm-chart-tooltip { position: absolute; pointer-events: none; z-index: 2; padding: 6px 10px; background: var(--color-text); color: var(--color-bg); font-size: 12px; white-space: nowrap; }
.carteleria-app .dm-chart-tooltip[hidden] { display: none; }
.carteleria-app .dm-tooltip-value { font-weight: 800; font-size: 14px; }
.carteleria-app .dm-tooltip-time { opacity: .8; }
.carteleria-app .dm-tooltip-event { margin-top: 2px; }

.carteleria-app .dm-legend { margin: 0; font-size: 12px; color: var(--color-neutral-700); display: flex; align-items: center; gap: 6px; }
.carteleria-app .dm-legend-event { display: inline-block; width: 1px; height: 14px; background: var(--color-neutral-500); }
.carteleria-app .dm-table summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.carteleria-app .dm-table .cn-table-wrap { margin-top: 10px; }