/* Auditavisión · Costo Ambiental › El reloj y el año (aplicación 1,
   16-10-2026). La página la escribe herramientas/am_reloj.py; la
   interacción, assets/auditor/js/am-reloj.js. Prefijo de clases e ids: ar-.
   Los colores de las barras siguen al concepto, como en el motor:
   c1 deuda, c2 gasto público, c3 ambiente y huachicol, c4 Poderes. */
.ar { padding-top: 26px; --ar: #1b7f4c; --ar-osc: #0f3d27; --ar-claro: #e7f6ee; --ar-tinta: #1c2a44; --ar-gris: #5a6782; --ar-borde: #d5e5dc; --ar-fondo: #ffffff; --ar-suave: #f5faf7; --ar-riel: #edf1f5;
  --ar-c1: #c0392b; --ar-c2: #0e8f86; --ar-c3: #b07d12; --ar-c4: #6a4fc8; --ar-liga: #1a56b8; }
[data-theme="dark"] .ar { --ar: #5fd49a; --ar-osc: #c9f2dc; --ar-claro: #17302a; --ar-tinta: #f0ede6; --ar-gris: #b9b4ab; --ar-borde: #2f4a3e; --ar-fondo: #16161d; --ar-suave: #1c2224; --ar-riel: #262a33;
  --ar-c1: #e5534b; --ar-c2: #23a197; --ar-c3: #d4a43a; --ar-c4: #8f7ee6; --ar-liga: #8fb8ff; }
.ar-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ar-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: 22px; line-height: 1.25; color: var(--ar-osc); }
.ar-txt { margin: 0 0 14px; max-width: 820px; font-size: 17px; line-height: 1.6; color: var(--ar-tinta); }
.ar-nota { margin: 12px 0 0; max-width: 860px; font-size: 16px; line-height: 1.55; color: var(--ar-gris); }
.ar a { color: var(--ar-liga); }
.ar-fuente { overflow-wrap: anywhere; }

/* Arranque */
.ar-arranque { margin: 0 0 26px; padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #0f3d27, #1b7f4c); color: #ffffff; }
.ar-kicker { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c9f2dc; }
.ar-grande { margin: 0 0 12px; font-family: 'Playfair Display', Georgia, serif; font-size: 32px; line-height: 1.15; color: #ffffff; }
.ar-arranque .ar-txt { color: #e6f6ed; }
.ar-arranque .ar-txt b { color: #ffffff; }
.ar-indice { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ar-indice a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; }
.ar-indice a:hover, .ar-indice a:focus-visible { background: rgba(255, 255, 255, .26); }
.ar-n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #ffffff; color: #0f3d27; font: 800 17px/1 Inter, system-ui, sans-serif; }

/* Paneles */
.ar-panel { margin: 0 0 24px; padding: 20px; background: var(--ar-fondo); border: 1px solid var(--ar-borde); border-top: 5px solid var(--ar); border-radius: 14px; scroll-margin-top: 80px; }

/* El reloj */
.ar-pantalla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 12px; padding: 14px; border-radius: 14px; background: linear-gradient(160deg, #0f3d27, #0a1a24); }
.ar-cont { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid rgba(95, 212, 154, .35); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.ar-cont::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, transparent, #5fd49a, transparent); animation: ar-barrido 2.4s linear infinite; }
.ar-pausada .ar-cont::after { animation-play-state: paused; opacity: .3; }
@keyframes ar-barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ar-cont-t { font-size: 15px; line-height: 1.35; color: #b9ecd0; }
.ar-cont strong { font-size: 28px; font-weight: 800; line-height: 1.15; color: #eafff3; }
.ar-lleva { grid-column: 1 / -1; margin: 0; font-size: 16px; color: #b9ecd0; }
.ar-lleva b { color: #ffffff; }

.ar-mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.ar-boton { min-height: 48px; padding: 10px 18px; border: 2px solid var(--ar); border-radius: 999px; background: var(--ar); color: #ffffff; cursor: pointer; font: 700 16px/1.2 Inter, system-ui, sans-serif; }
[data-theme="dark"] .ar-boton { color: #0b1a12; }
.ar-boton-2 { background: transparent; color: var(--ar-osc); }
[data-theme="dark"] .ar-boton-2 { color: var(--ar-osc); }
.ar-boton:hover, .ar-boton:focus-visible { filter: brightness(1.08); outline: 3px solid color-mix(in srgb, var(--ar) 35%, transparent); outline-offset: 2px; }
.ar-play { min-width: 200px; }

/* Tablas plegables */
.ar-tabla-d { margin: 14px 0 0; border: 1px solid var(--ar-borde); border-radius: 12px; background: var(--ar-suave); }
.ar-tabla-d > summary { display: flex; align-items: center; min-height: 48px; padding: 6px 14px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ar-osc); }
.ar-tabla-d > .ar-nota { margin: 0; padding: 0 14px 12px; }
.ar-tabla-w { overflow-x: auto; padding: 0 10px 10px; }
.ar-tabla { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; color: var(--ar-tinta); }
.ar-tabla th, .ar-tabla td { padding: 8px 8px; border-bottom: 1px solid var(--ar-borde); text-align: left; vertical-align: top; }
.ar-tabla thead th { font-size: 15px; color: var(--ar-gris); }
.ar-tabla td.ar-num { white-space: nowrap; }

/* La simulación */
.ar-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ar-tab { min-height: 44px; padding: 8px 14px; border: 1px solid var(--ar-borde); border-radius: 999px; background: var(--ar-suave); color: var(--ar-tinta); cursor: pointer; font: 600 16px/1.2 Inter, system-ui, sans-serif; }
.ar-tab[aria-selected="true"] { background: var(--ar); border-color: var(--ar); color: #ffffff; }
[data-theme="dark"] .ar-tab[aria-selected="true"] { color: #0b1a12; }
.ar-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--ar) 45%, transparent); outline-offset: 2px; }
.ar-sim { padding: 14px; border-radius: 12px; background: var(--ar-suave); border: 1px solid var(--ar-borde); }
.ar-fecha { margin: 6px 0 4px; font-size: 20px; font-weight: 800; color: var(--ar-osc); }
.ar-dia { display: grid; gap: 4px; margin: 0 0 14px; }
.ar-dia-t { font-size: 15px; font-weight: 600; color: var(--ar-gris); }
.ar-dia input { --ar-avance: 0%; width: 100%; min-height: 44px; margin: 0; accent-color: var(--ar); background: transparent; cursor: pointer; }
.ar-vista[hidden] { display: none; }
.ar-vista-tit { margin: 0 0 10px; font-size: 18px; color: var(--ar-osc); }
.ar-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ar-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.2fr); grid-template-areas: "nom riel val" "que que que"; align-items: center; column-gap: 12px; row-gap: 2px; }
.ar-nom { grid-area: nom; display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.35; color: var(--ar-tinta); }
.ar-nom small { font-size: 14px; color: var(--ar-gris); }
.ar-sw { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; }
.ar-riel { grid-area: riel; position: relative; height: 26px; border-radius: 6px; background: var(--ar-riel); overflow: hidden; }
.ar-barra { position: absolute; left: 0; top: 2px; bottom: 2px; width: 0; border-radius: 0 5px 5px 0; }
.ar-val { grid-area: val; font-size: 16px; font-weight: 700; text-align: right; color: var(--ar-osc); }
.ar-que { grid-area: que; }
.ar-que > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ar-liga); }
.ar-que p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: var(--ar-tinta); }
.ar-que .ar-que-f { color: var(--ar-gris); }
.ar-c1 { background: var(--ar-c1); } .ar-c2 { background: var(--ar-c2); }
.ar-c3 { background: var(--ar-c3); } .ar-c4 { background: var(--ar-c4); }
.ar-pend { background: repeating-linear-gradient(135deg, var(--ar-gris) 0 5px, transparent 5px 9px); outline: 1px dashed var(--ar-gris); outline-offset: -1px; }
.ar-remate { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; border-left: 5px solid var(--ar); background: var(--ar-claro); }
.ar-remate p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ar-tinta); }
.ar-remate .ar-op { margin-top: 8px; font-size: 16px; color: var(--ar-gris); }
.ar-remate b { color: var(--ar-osc); }

/* Documentos */
.ar-docs { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.55; color: var(--ar-tinta); }
.ar-hermanas { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--ar-tinta); }
.ar-hermanas a { display: inline-block; min-height: 44px; line-height: 44px; }

@media (max-width: 720px) {
  .ar-arranque { padding: 18px 16px; }
  .ar-grande { font-size: 26px; }
  .ar-panel { padding: 16px 14px; }
  .ar-pantalla { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .ar-cont strong { font-size: 24px; }
  .ar-mandos .ar-boton { flex: 1 1 140px; }
  .ar-play { min-width: 0; }
  .ar-sim { padding: 10px; }
  .ar-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom nom" "riel val" "que que"; row-gap: 4px; }
  .ar-riel { height: 22px; }
  .ar-tabla { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-cont::after { animation: none; }
}
.ar-quieta .ar-cont::after { animation: none; }