/* =============================================================
 * CCS UI Kit — estilos base
 * Cámara de Comercio de Santiago · v1.0.0
 *
 * Requiere:
 *   - Tailwind CSS (CDN o build) con la config en
 *     assets/js/ccs-tailwind-config.js
 *   - Fuentes Google: Work Sans + JetBrains Mono
 *
 * Se puede incluir vía:
 *   <link rel="stylesheet" href="assets/css/ccs-ui-kit.css">
 * ============================================================= */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: 'Work Sans', system-ui, sans-serif;
  color: #0B1B3D;
  background: #F6F8FC;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* CCS icon — gradient-filled solid using mask */
.ccs-icon {
  width: 1em; height: 1em; display: inline-block;
  background-image: linear-gradient(180deg, #003DA6 0%, #003DA6 50%, #00D700 100%); /* 17-sep-2026: azul->verde, mismo valor que bg-ccs-icon */
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}

/* Placeholder de imagen / foto */
.ph {
  background-color: #EEF2F8;
  background-image: repeating-linear-gradient(135deg, rgba(0,61,166,0.05) 0 8px, transparent 8px 16px);
  color: #6B7A99;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Logotipo CCS */
.ccs-mark { display: inline-flex; align-items: baseline; gap: .25rem; font-weight: 700; letter-spacing: -.01em; }
.ccs-mark .c1 { color: #003DA6; }
.ccs-mark .c2 { color: #3DAE2B; }

/* Anchor offset para nav sticky */
section[id] { scroll-margin-top: 96px; }

/* Spec / metadata mono */
.spec { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #475569; }

/* Code chip inline */
code.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: #F1F4FA;
  color: #003DA6;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #D7DDE8;
}

/* Form check / radio activos */
.form-check:checked { background-color: #003DA6; border-color: #003DA6; }

/* <details> sin marcador por defecto */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* Ocultar scrollbar en strips horizontales */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

/* ====== Animaciones de carga ====== */
@keyframes ccs-spin { to { transform: rotate(360deg); } }
.ccs-spin { animation: ccs-spin 0.9s linear infinite; }

@keyframes ccs-bounce-dot {
  0%, 80%, 100% { transform: scale(0); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}
.ccs-dot { animation: ccs-bounce-dot 1.2s ease-in-out infinite both; }

@keyframes ccs-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ccs-skeleton {
  background: linear-gradient(90deg, #EEF2F8 0%, #F6F8FC 40%, #EEF2F8 80%);
  background-size: 800px 100%;
  animation: ccs-shimmer 1.6s linear infinite;
}

@keyframes ccs-progress-indet {
  0%   { left: -40%; right: 100%; }
  60%  { left: 100%; right: -40%; }
  100% { left: 100%; right: -40%; }
}
.ccs-progress-indet {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, #003DA6, #00D700, transparent);
  animation: ccs-progress-indet 1.6s cubic-bezier(.65,.05,.36,1) infinite;
}

/* ============================================================
 * Aurora institucional (17-sep-2026) — mesh gradient con base oscura
 * (Ink, ya es un color CCS) y 4 blobs radiales sutiles en tonos azules
 * con un solo acento en verde brillante, más una capa ::before con
 * conic-gradient + blur(80px) detrás que suaviza los bordes duros.
 * Requiere position:relative en un wrapper del contenido (o cualquier
 * hijo con z-index propio) para que el texto quede sobre el ::before
 * -- un elemento posicionado con z-index:auto se pinta después que el
 * contenido normal no posicionado, así que sin eso el texto queda
 * debajo de esta capa.
 * ============================================================ */
/* ============================================================
 * Gradientes institucionales (17-sep-2026)
 * ============================================================
 * bg-ccs-banner y bg-ccs-icon YA estan definidas como utilidades
 * Tailwind via theme.extend.backgroundImage en ccs-tailwind-config.js
 * -- esa sigue siendo la fuente de verdad. Estas dos reglas de aca son
 * un RESPALDO agregado el 17-sep-2026 (fix mobile) solo para el caso en
 * que el script del CDN de Tailwind no cargue/ejecute a tiempo en el
 * celular; el <style> que genera Tailwind se inyecta despues de este
 * archivo en el <head>, asi que en el caso normal esa regla generada
 * por Tailwind gana la cascada y estas de aca quedan dormidas sin
 * hacer nada.
 *
 * EXCEPCION al principio de "CSS a mano solo para lo que Tailwind no
 * cubre" (ver docs/solar/metodologia.md): aca Tailwind SI lo cubre,
 * pero se duplica el valor a mano como red de seguridad. Por eso, si
 * alguna vez se cambia el color de Banner o Icono, hay que actualizarlo
 * en DOS lugares: el backgroundImage de ccs-tailwind-config.js (fuente
 * de verdad) y estas dos reglas de aca abajo (respaldo) -- si se
 * olvida el segundo, no se nota mientras el CDN de Tailwind cargue
 * bien, pero el respaldo queda con el color viejo.
 * ============================================================ */
.bg-ccs-banner {
  background-image: linear-gradient(90deg, #003DA6 0%, #003DA6 50%, #00D700 100%);
}
.bg-ccs-icon {
  background-image: linear-gradient(180deg, #003DA6 0%, #003DA6 50%, #00D700 100%);
}

.bg-ccs-aurora {
  position: relative;
  overflow: hidden;
  background-color: #0B1B3D;
  background-image:
    radial-gradient(40% 50% at 20% 30%, rgba(0,61,166,0.55) 0%, transparent 70%),
    radial-gradient(45% 85% at 75% 5%, rgba(0,215,0,0.60) 0%, transparent 70%),
    radial-gradient(50% 60% at 60% 75%, rgba(51,162,255,0.40) 0%, transparent 70%),
    radial-gradient(40% 50% at 30% 80%, rgba(0,86,202,0.45) 0%, transparent 70%);
}
.bg-ccs-aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 120deg at 50% 30%, #003DA6, #0056CA, #33A2FF, #00D700, #003DA6);
  filter: blur(80px) saturate(1.3);
  -webkit-filter: blur(80px) saturate(1.3);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  opacity: 0.55;
  pointer-events: none;
}

/* ====== Modo oscuro (24-sep-2026) ======
 * Mismos valores que los tokens dark-* de ccs-tailwind-config.js; ver
 * docs/solar/specs/modo-oscuro.md. */
html.dark body { color: #ECEEF4; background: #131A2A; }
html.dark .ccs-mark .c1 { color: #A9D4FF; }
html.dark .ph {
  background-color: #273045;
  background-image: repeating-linear-gradient(135deg, rgba(89,159,227,0.06) 0 8px, transparent 8px 16px);
  color: #79849A;
}
html.dark .spec { color: #CCD4E6; }
html.dark code.chip { background: #273045; color: #A9D4FF; border-color: #566075; }
html.dark .form-check:checked { background-color: #0056CA; border-color: #0056CA; }
html.dark .ccs-skeleton {
  background: linear-gradient(90deg, #273045 0%, #343D51 40%, #273045 80%);
  background-size: 800px 100%;
}

/* ====== Tooltip (29-sep-2026) ======
 * Escape cierra el tooltip: el script le pone data-cerrado al contenedor
 * [data-tooltip] y lo quita cuando el cursor o el foco salen. */
[data-tooltip][data-cerrado] > [role="tooltip"] { visibility: hidden !important; opacity: 0 !important; transition: none !important; }

/* ---------------------------------------------------------------
 * Contenido de página (1-oct-2026): `<!-- @contenido -->` en components/*.html.
 * Escala de lectura: párrafo 16 px en color de texto principal, h3 20 px,
 * tablas 15 px. Los "por qué" van en <details class="why"> (desplegables,
 * sin JavaScript; el texto queda en el HTML para IAs y buscadores).
 * Mismos valores que los tokens ccs-ink, ccs-line, ccs-bg y dark-*.
 * ------------------------------------------------------------- */
.content-body p, .content-body li { font-size: 16px; line-height: 1.625; color: #0B1B3D; }
.content-body h3 { font-size: 20px; font-weight: 600; line-height: 1.4; color: #0B1B3D; margin: 2rem 0 .5rem; }
.content-body .grid > div > h3:first-child { margin-top: 0; }
.content-body table { font-size: 14px; }
.content-body th, .content-body td { padding: .75rem 1rem; }
.content-body th { color: #0B1B3D; }
.content-body td { color: #0B1B3D; }
details.why { margin-top: .5rem; }
details.why > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 24px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: #003DA6; border-radius: 6px; }
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::before { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
details.why[open] > summary::before { transform: rotate(45deg); }
details.why > summary:hover { text-decoration: underline; }
details.why > summary:focus-visible { outline: 2px solid #003DA6; outline-offset: 2px; }
/* El cuerpo es la alerta Información · Suave (ver components/alertas.html). */
details.why > div { margin-top: .5rem; }
details.why > div p, details.why > div li { font-size: 14px; line-height: 1.7; max-width: none; }
details.why > div p + p { margin-top: .5rem; }
details.why > div ul { margin: 0; }
details.why > div ul { list-style: disc; padding-left: 1.25rem; }
html.dark .content-body p, html.dark .content-body li, html.dark .content-body h3, html.dark .content-body th, html.dark .content-body td { color: #ECEEF4; }
html.dark details.why > summary { color: #A9D4FF; }
html.dark details.why > summary:focus-visible { outline-color: #A9D4FF; }
html.dark details.why > div p, html.dark details.why > div li { color: #CCD4E6; }
.why-all { display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .875rem; font-size: 14px; font-weight: 500; border-radius: 8px; border: 1px solid #D7DDE8; background: #fff; color: #0B1B3D; }
.why-all:hover { border-color: #003DA6; color: #003DA6; }
html.dark .why-all { background: #1C2436; border-color: #566075; color: #ECEEF4; }
html.dark .why-all:hover { border-color: #A9D4FF; color: #A9D4FF; }

/* Texto largo en dos columnas (1-oct-2026): clase `cols-2` en una lista o grupo
 * de textos dentro de contenido. Una columna en móvil. */
.content-body .cols-2 { column-gap: 2.5rem; }
.content-body .cols-2 > * { break-inside: avoid; }
@media (min-width: 768px) { .content-body .cols-2 { column-count: 2; } }

/* Ritmo del texto (1-oct-2026): ver Componentes › Textos y tipografías. */
.content-body p + p { margin-top: 1rem; }
.content-body p + ul, .content-body p + ol { margin-top: .75rem; }
.content-body ul + p, .content-body ol + p { margin-top: 1rem; }
.content-body li + li { margin-top: .25rem; }