/* ============================================================
   base.css — CHROME / CONTENIDO base de la página
   ------------------------------------------------------------
   Fondo del body, contenedor principal, títulos, enlaces,
   y los elementos transversales: cajas de resultado, texto de
   estado (rojo/verde), reglas <hr>, alertas (#errors), footer,
   banners de ambiente y enlaces de paginación.
   Todo gateado bajo html.theme-cg => clásico intacto.
   ============================================================ */
html.theme-cg body { background: var(--bg); color: var(--text); }
html.theme-cg #inner_content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow);
}
html.theme-cg #inner_padding h1 { color: var(--text); border-color: var(--border); }
html.theme-cg #inner_content a { color: var(--accent-2); }
html.theme-cg #inner_content a:hover { color: var(--text); }

/* Caja de resultado / info */
html.theme-cg .result { background: var(--surface-2); border-left: 3px solid var(--accent); color: var(--text); border-radius: 6px; }

/* Texto de estado / celdas */
html.theme-cg span.red { color: #f87171; }
html.theme-cg span.green { color: #4ade80; }
html.theme-cg .redCell { background-color: rgba(239, 68, 68, .14) !important; }
html.theme-cg .error { background-color: rgba(239, 68, 68, .16); }
html.theme-cg hr { background: var(--border); border-color: var(--border); color: var(--border); }

/* Alertas #errors (notice/warning/error) -> barras tematizadas */
html.theme-cg #errors div { border-radius: 8px; color: var(--text); }
html.theme-cg #errors div.notice  { background: rgba(34, 197, 94, .15);  border: 1px solid rgba(34, 197, 94, .4);  color: #4ade80; }
html.theme-cg #errors div.warning { background: rgba(245, 158, 11, .15); border: 1px solid rgba(245, 158, 11, .4); color: #fbbf24; }
html.theme-cg #errors div.error   { background: rgba(239, 68, 68, .15);  border: 1px solid rgba(239, 68, 68, .4);  color: #f87171; }

/* Footer */
html.theme-cg #footer { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
html.theme-cg #footer a { color: var(--accent-2); }

/* Banners de ambiente / conexión */
html.theme-cg #developmentEnvironment,
html.theme-cg #connectionDown { background-color: rgba(245, 158, 11, .2); color: var(--text); border: 1px solid rgba(245, 158, 11, .4); }

/* Paginación */
html.theme-cg .pagination-link { color: var(--accent-2); }
html.theme-cg .pagination-link:hover { color: var(--text); }

/* Breadcrumbs automáticos (los inserta menu.js arriba del contenido) */
html.theme-cg .crr-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
html.theme-cg .crr-breadcrumb a { color: var(--muted); text-decoration: none; }
html.theme-cg .crr-breadcrumb a:hover { color: var(--accent-2); }
html.theme-cg .crr-bc-sep { color: var(--muted); opacity: .6; }
html.theme-cg .crr-bc-cur { color: var(--text); font-weight: 500; }

/* ============================================================
   ACCESIBILIDAD — prefers-reduced-motion
   ------------------------------------------------------------
   Si el SO/navegador pide menos movimiento, anulamos transiciones,
   animaciones y scroll suave del tema nuevo (drawer, tooltips,
   command palette, hover...). No es cosmético: el movimiento puede
   disparar trastornos vestibulares, migraña o epilepsia, y ayuda en
   equipos lentos / batería baja. Gateado en .theme-cg => clásico
   intacto. Se conserva la visibilidad final (sin estado animado a
   medias) gracias a la duración mínima en lugar de quitar la regla.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html.theme-cg *,
    html.theme-cg *::before,
    html.theme-cg *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}