/* =============================================================
 * 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, #00D700 0%, #3A89DA 100%);
  -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: 11px; 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 #E5E9F0;
}

/* 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;
}