/* ADN SkyTel — estilos del shell. Los tokens vienen del design system
   (_ds/industry-.../styles.css); acá sólo va lo que el shell agrega. */

:root {
  --color-bar-green: #7ec794;
  --color-bar-yellow: #f2cb6c;
  --color-bar-red: #ea8685;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight, 600);
  letter-spacing: -0.005em;
}

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }

button { font-family: var(--font-body); }

/* Scrollbars discretas, consistentes con el tablero existente. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-text) 22%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-text) 32%, transparent); background-clip: content-box; }

/* Animaciones de overlays y de entrada. */
@keyframes adnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes adnPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes adnUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes adnSpin { to { transform: rotate(360deg); } }
.adn-spin { animation: adnSpin .8s linear infinite; }

main > * { animation: adnPop .3s cubic-bezier(.2, .9, .3, 1) both; }
main > *:nth-child(2) { animation-delay: .03s; }
main > *:nth-child(3) { animation-delay: .06s; }
main > *:nth-child(4) { animation-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Responsive: el shell colapsa a una columna en pantallas chicas. */
@media (max-width: 900px) {
  .app-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .app-grid > aside {
    position: static !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  }
  .app-grid > main { padding: 20px 16px 48px !important; }
  .login-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .login-grid > div { min-height: auto !important; }
}

/* Inputs de fecha: el ícono nativo se integra al color del sistema. */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Corchete de intervalo de confianza sobre una barra (barra() con opts.ci en
   ui.js) — portado tal cual del tablero ADN viejo (ADN Skytel.dc.html). */
.ci-bracket {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-left: 1.5px solid color-mix(in srgb, var(--color-text) 55%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--color-text) 55%, transparent);
  opacity: 0.75;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity .15s ease, border-color .15s ease;
  outline: none;
  z-index: 2;
  pointer-events: auto;
}
.ci-bracket::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0; height: 1px;
  background: color-mix(in srgb, var(--color-text) 45%, transparent);
  transform: translateY(-50%);
  transition: background .15s ease, opacity .15s ease;
}
.ci-bracket:hover, .ci-bracket:focus {
  opacity: 1 !important;
  border-left-color: var(--color-accent-900, #14212d);
  border-right-color: var(--color-accent-900, #14212d);
}
.ci-bracket:hover::before, .ci-bracket:focus::before {
  background: var(--color-accent-900, #14212d);
  opacity: .9;
}

/* Popover de "Acciones de desarrollo" (admin-resultados-adn.js) — portado
   del tablero ADN viejo: entra con una animación corta y tiene una
   flechita apuntando al botón que lo abrió, como un globo de diálogo. */
@keyframes accionesPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.acciones-popover {
  animation: accionesPopIn .18s cubic-bezier(.16, 1, .3, 1);
}
.acciones-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 10px;
  height: 10px;
  background: var(--color-neutral-100, #ffffff);
  border-left: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  transform: rotate(45deg);
}

/* Placeholders de carga (skeleton(), ui.js) — reemplazan el "Cargando…" de
   texto plano por bloques con la forma real de lo que va a aparecer. */
@keyframes adnShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.adn-skeleton {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--color-text) 8%, transparent) 25%,
    color-mix(in srgb, var(--color-text) 15%, transparent) 37%,
    color-mix(in srgb, var(--color-text) 8%, transparent) 63%);
  background-size: 400% 100%;
  animation: adnShimmer 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .adn-skeleton { animation: none; background-image: none; background-color: color-mix(in srgb, var(--color-text) 10%, transparent); }
}