/*
Theme Name: Astra Child UTS
Theme URI: https://www.uts.edu.co/
Author: DTI UTS
Author URI: https://www.uts.edu.co/
Description: Child theme de Astra para el Sistema Visual de Programas Académicos UTS (CPT uts_programa). No modifica el tema padre.
Version: 1.0.0
Requires at least: 5.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-uts
Template: astra
*/

/* Tokens del sistema de programas: alias de la paleta Astra (DESIGN.md §2-§5). */
.uts-programas {
  --uts-surface: var(--ast-global-color-4);
  --uts-surface-muted: var(--ast-global-color-5);
  --uts-primary: var(--ast-global-color-0);
  --uts-primary-hover: var(--ast-global-color-1);
  --uts-heading: var(--ast-global-color-2);
  --uts-text: var(--ast-global-color-3);
  --uts-border: var(--ast-global-color-7);
  --uts-ink: var(--ast-global-color-6);
  --uts-on-primary: #FFFFFF;
  --uts-link: var(--uts-primary-hover);
  --uts-focus: #1D4ED8;
  --uts-badge-tech-bg: #EFF6FF;
  --uts-badge-tech-fg: #1E40AF;
  --uts-badge-uni-bg: #ECFDF5;
  --uts-badge-uni-fg: #065F46;
  --uts-space-1: 4px;
  --uts-space-2: 8px;
  --uts-space-3: 12px;
  --uts-space-4: 16px;
  --uts-space-5: 24px;
  --uts-space-6: 32px;
  --uts-radius-sm: 6px;
  --uts-radius-md: 8px;
  --uts-radius-lg: 12px;
  --uts-shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --uts-shadow-2: 0 4px 12px rgba(16,24,40,.10);
  --uts-dur-fast: 120ms;
  --uts-dur-base: 180ms;
  --uts-dur-slow: 240ms;
  --uts-easing: cubic-bezier(0.2, 0, 0, 1);
  --uts-fs-xs: 13px;
  --uts-fs-base: 16px;
  --uts-fs-lg: 20px;
  --uts-fs-xxl: clamp(1.75rem, 4vw, 2.625rem);
}

/* Enlace del sistema (SPEC E-16 §C): fallback verde hover; con color-mix deriva a verde-tinta (8.33:1). */
@supports (color: color-mix(in srgb, var(--uts-primary-hover) 55%, var(--uts-ink))) {
  .uts-programas { --uts-link: color-mix(in srgb, var(--uts-primary-hover) 55%, var(--uts-ink)); }
}

/* Banda del modelo académico 6+4 (SCREEN-01): desktop horizontal, vertical <768. */
.uts-programas .uts-model { background: var(--uts-surface-muted); border: 1px solid var(--uts-border); border-radius: var(--uts-radius-md); padding: var(--uts-space-5); margin-block: var(--uts-space-5); }
.uts-programas .uts-model-lede { font-size: var(--uts-fs-base); font-weight: 600; color: var(--uts-heading); margin: 0 0 var(--uts-space-4); }
.uts-programas .uts-model-fases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--uts-space-5); }
.uts-programas .uts-model-fase { display: flex; align-items: center; gap: var(--uts-space-2); }
.uts-programas .uts-model-fase--tech { color: var(--uts-primary); }
.uts-programas .uts-model-fase--transicion { color: var(--uts-text); }
.uts-programas .uts-model-fase--uni { color: var(--uts-badge-uni-fg); }
.uts-programas .uts-model-fase-texto { font-weight: 600; color: var(--uts-ink); }
@media (max-width: 767px) { .uts-programas .uts-model-fases { flex-direction: column; align-items: flex-start; } }

/* Grid archive 3/2/1. */
.uts-programas .uts-grid { display: grid; gap: var(--uts-space-5); grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1199px) { .uts-programas .uts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .uts-programas .uts-grid { grid-template-columns: 1fr; } }

/* Chips de filtros. */
.uts-programas .uts-filters { display: flex; flex-wrap: wrap; gap: var(--uts-space-4); }
@media (max-width: 767px) { .uts-programas .uts-filters { flex-wrap: nowrap; overflow-x: auto; } }
.uts-programas .uts-chip { display: inline-block; min-height: 40px; min-width: 48px; padding: 8px 14px; border-radius: var(--uts-radius-sm); background: var(--uts-surface-muted); color: var(--uts-text); text-decoration: none; transition: background var(--uts-dur-fast) var(--uts-easing); }
.uts-programas .uts-chip[aria-pressed="true"] { background: var(--uts-primary); color: var(--uts-on-primary); }
.uts-programas .uts-chip:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }

/* Card = único enlace. */
.uts-programas a.uts-card { display: block; background: var(--uts-surface); border: 1px solid var(--uts-border); border-left: 3px solid var(--uts-primary); border-radius: var(--uts-radius-md); box-shadow: var(--uts-shadow-1); padding: var(--uts-space-5); text-decoration: none; color: inherit; transition: box-shadow var(--uts-dur-base) var(--uts-easing), transform var(--uts-dur-base) var(--uts-easing); }
.uts-programas a.uts-card:hover { box-shadow: var(--uts-shadow-2); transform: translateY(-1px); }
.uts-programas a.uts-card:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }
.uts-programas .uts-card h3 { font-size: var(--uts-fs-lg); font-weight: 600; margin: 8px 0; overflow-wrap: break-word; }
.uts-programas .uts-badge { display: inline-block; font-size: var(--uts-fs-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--uts-radius-sm); }
.uts-programas .uts-badge-tech { background: var(--uts-badge-tech-bg); color: var(--uts-badge-tech-fg); }
.uts-programas .uts-badge-uni { background: var(--uts-badge-uni-bg); color: var(--uts-badge-uni-fg); }
.uts-programas .uts-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uts-space-3); }
.uts-programas .uts-duracion { font-size: var(--uts-fs-xs); color: var(--uts-text); }
.uts-programas .program-card--uni > a.uts-card { border-left-color: var(--uts-badge-uni-fg); }
.uts-programas .uts-meta { font-size: var(--uts-fs-xs); color: var(--uts-text); }
.uts-programas .uts-snies { font-size: var(--uts-fs-xs); color: var(--uts-text); }

/* Stats. */
.uts-programas dl.uts-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--uts-space-4); margin: 0; }
@media (max-width: 1199px) { .uts-programas dl.uts-stats { grid-template-columns: 1fr 1fr; } }
.uts-programas dl.uts-stats dt { font-size: var(--uts-fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.uts-programas dl.uts-stats dd { font-size: var(--uts-fs-base); font-weight: 600; margin: 0; }

/* Pathway. */
.uts-programas ol.uts-pathway { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--uts-space-5); }
@media (max-width: 767px) { .uts-programas ol.uts-pathway { flex-direction: column; border-left: 2px solid var(--uts-border); padding-left: var(--uts-space-4); } }
.uts-programas ol.uts-pathway li { font-size: var(--uts-fs-base); }
.uts-programas .uts-pathway-node { font-size: var(--uts-fs-base); color: var(--uts-text); }
.uts-programas .uts-pathway-node--tech { color: var(--uts-primary); }
.uts-programas .uts-pathway-node--uni { color: var(--uts-badge-uni-fg); }
.uts-programas .uts-pathway-node .uts-pathway-fase { font-weight: 600; color: var(--uts-text); }
.uts-programas .uts-pathway-node .uts-pathway-detalle { color: var(--uts-text); }
.uts-programas ol.uts-pathway .uts-pathway-node--uni a { color: inherit; text-decoration: underline; }
.uts-programas ol.uts-pathway .uts-pathway-node--uni a:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }

/* Plan: wrapper con scroll-x. */
.uts-programas .uts-plan-wrap { overflow-x: auto; }
.uts-programas table.uts-plan { border-collapse: collapse; width: 100%; font-size: var(--uts-fs-base); }
.uts-programas table.uts-plan th, .uts-programas table.uts-plan td { border: 1px solid var(--uts-border); padding: 8px 12px; text-align: left; }

/* Contacto. */
.uts-programas dl.uts-contact { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--uts-space-4); margin: 0; }
@media (max-width: 767px) { .uts-programas dl.uts-contact { grid-template-columns: 1fr; } }

/* CTA. */
.uts-programas .uts-cta { display: inline-block; background: var(--uts-primary); color: var(--uts-on-primary); font-weight: 600; padding: var(--uts-space-4) var(--uts-space-6); border-radius: var(--uts-radius-sm); text-decoration: none; min-height: 48px; transition: background var(--uts-dur-fast) var(--uts-easing); }
.uts-programas .uts-cta:hover { background: var(--uts-primary-hover); }
.uts-programas .uts-cta:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }
.uts-programas a.uts-cta-outline { background: transparent; border: 1px solid var(--uts-primary-hover); color: var(--uts-link); }
.uts-programas a.uts-cta-outline:hover { background: var(--uts-surface-muted); }
.uts-programas a.uts-cta-outline:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }
.uts-programas .uts-btn-outline { display: inline-block; border: 1px solid var(--uts-primary-hover); color: var(--uts-link); padding: 12px 24px; border-radius: var(--uts-radius-sm); text-decoration: none; }
.uts-programas .uts-btn-outline:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }

/* Banner de requisito previo (single universitario, SCREEN-02). */
.uts-programas .uts-prereq-banner { display: flex; gap: var(--uts-space-2); margin-top: var(--uts-space-5); background: var(--uts-surface); border: 1px solid var(--uts-border); border-left: 3px solid var(--uts-primary); border-radius: var(--uts-radius-md); box-shadow: var(--uts-shadow-1); padding: var(--uts-space-4); }
.uts-programas .uts-prereq-banner > svg { flex: none; color: var(--uts-primary); }
.uts-programas .uts-prereq-banner p { margin: 0; font-weight: 600; color: var(--uts-text); }
.uts-programas .uts-prereq-banner a { color: var(--uts-link); text-decoration: underline; }
.uts-programas .uts-prereq-banner a:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }
@media (max-width: 767px) { .uts-programas .uts-cta-sticky { position: sticky; bottom: 0; z-index: 10; display: block; text-align: center; } }

/* Sticky nav single. */
.uts-programas nav.uts-anchors { position: sticky; top: 0; z-index: 10; background: var(--uts-surface); box-shadow: var(--uts-shadow-2); display: flex; gap: var(--uts-space-4); padding: 12px 0; overflow-x: auto; }
.uts-programas nav.uts-anchors a { white-space: nowrap; min-height: 36px; display: inline-block; padding: 8px 14px; background: var(--uts-surface-muted); border-radius: var(--uts-radius-sm); color: var(--uts-link); text-decoration: none; }
.uts-programas nav.uts-anchors a:focus-visible { outline: 2px solid var(--uts-focus); outline-offset: 2px; }
.uts-programas section[id] { scroll-margin-top: 6rem; }

/* Empty state. */
.uts-programas .uts-empty { background: var(--uts-surface-muted); border-radius: var(--uts-radius-md); padding: var(--uts-space-6); }

/* Títulos hero. */
.uts-programas .uts-hero h1 { font-size: var(--uts-fs-xxl); line-height: 1.2; overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .uts-programas * { transition-duration: 1ms !important; animation: none !important; }
  .uts-programas { scroll-behavior: auto; }
}