/* Identidad CCA: negro, plata y ámbar tomado de Alex. Capa visual reversible. */
:root { --cca-ink:#090b0d; --cca-graphite:#15191d; --cca-silver:#c7cbd0; --cca-amber:#f5ad3d; --cca-cream:#fff7eb; }
html, body { background:var(--cca-ink) !important; color:var(--cca-cream); }
body { background-image:radial-gradient(circle at 87% 0%, rgba(245,173,61,.09), transparent 34%),radial-gradient(circle at 5% 42%,rgba(199,203,208,.045),transparent 32%) !important; }
main[id^="view-"] .bg-slate-950, main[id^="view-"] .bg-slate-900, main[id^="view-"] .bg-slate-800,
[role="dialog"] .bg-slate-950, [role="dialog"] .bg-slate-900, [role="dialog"] .bg-slate-800 { background-color:#15191d !important; }
main[id^="view-"] .border-slate-800, [role="dialog"] .border-slate-800 { border-color:rgba(199,203,208,.2) !important; }
main[id^="view-"] .text-slate-400, [role="dialog"] .text-slate-400 { color:#afb3b5 !important; }
main[id^="view-"] input, main[id^="view-"] textarea, main[id^="view-"] select { accent-color:var(--cca-amber); }
header.sticky { background:rgba(9,11,13,.94) !important; border-color:rgba(199,203,208,.18) !important; box-shadow:0 10px 35px rgba(0,0,0,.25); }
.cca-official-logo { display:block; width:220px; height:65px; object-fit:contain; object-position:left center; border-radius:4px; }
.cca-brand-welcome { min-height:410px; position:relative; isolation:isolate; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; overflow:hidden; border:1px solid rgba(199,203,208,.22); border-radius:28px; background:linear-gradient(110deg,#111517 0%,#0b0d0f 57%,#252119 100%); box-shadow:0 30px 80px rgba(0,0,0,.32); }
.cca-brand-welcome:before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 75% 50%,rgba(245,173,61,.17),transparent 37%),linear-gradient(145deg,transparent 55%,rgba(255,255,255,.03) 55.2%,transparent 55.5%); }
.cca-welcome-copy { position:relative; z-index:2; padding:clamp(28px,5vw,70px); max-width:700px; }
.cca-welcome-eyebrow { color:var(--cca-amber); font-size:.73rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.cca-welcome-copy h1 { margin:18px 0; color:#fff; font-size:clamp(2.2rem,4.8vw,4.5rem); line-height:1.04; font-weight:850; letter-spacing:-.055em; }
.cca-welcome-copy h1 em { font-style:normal; color:var(--cca-amber); }
.cca-welcome-copy p { max-width:530px; color:#c9c9c8; font-size:clamp(.95rem,1.35vw,1.12rem); line-height:1.65; }
.cca-welcome-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.cca-welcome-actions button { border-radius:12px; padding:13px 19px; font-weight:800; font-size:.9rem; transition:transform .2s,background .2s; }
.cca-welcome-actions button:hover { transform:translateY(-2px); }
.cca-welcome-primary { background:var(--cca-amber); color:#17120c; }
.cca-welcome-secondary { background:rgba(255,255,255,.07); color:white; border:1px solid rgba(255,255,255,.2); }
.cca-welcome-alex { width:min(100%,440px); justify-self:center; align-self:end; max-height:405px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 16px 35px rgba(0,0,0,.42)); }
.cca-alex-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:155px; padding:12px 28px; overflow:hidden; border:1px solid rgba(199,203,208,.2); border-radius:22px; background:linear-gradient(105deg,#14181b,#242018); }
.cca-alex-strip strong { display:block; color:#fff; font-size:clamp(1.15rem,2.5vw,1.7rem); line-height:1.2; }
.cca-alex-strip p { margin-top:7px; color:#c8c8c7; font-size:.9rem; }
.cca-alex-strip img { width:150px; height:150px; object-fit:contain; object-position:bottom; align-self:end; flex:none; }
#view-catalog > section:not(.cca-brand-welcome) { scroll-margin-top:100px; }
#hero-featured-container > div, #courses-grid-container > div.group, #view-catalog section.rounded-3xl { border-color:rgba(199,203,208,.2) !important; background-color:#121619 !important; }
#courses-grid-container > div.group { box-shadow:0 12px 30px rgba(0,0,0,.22) !important; }
#courses-grid-container > div.group:hover { border-color:var(--cca-amber) !important; box-shadow:0 18px 45px rgba(245,173,61,.13) !important; }
#courses-grid-container img { object-position:center; }
#hero-featured-container img { opacity:.55 !important; filter:none !important; }
#hero-featured-container h1 { letter-spacing:-.035em; }
#view-catalog input:focus, #view-catalog button:focus-visible, header button:focus-visible { outline:2px solid var(--cca-amber); outline-offset:2px; }
.cca-mobile-bottom-nav { background:rgba(9,11,13,.96) !important; border-top-color:rgba(199,203,208,.18) !important; }
footer { background:#0d1012 !important; border-color:rgba(199,203,208,.16) !important; }
footer:before { content:"CCA  •  Aprender para crear algo mejor"; display:block; margin-bottom:15px; color:var(--cca-silver); font-weight:700; letter-spacing:.05em; }

/* =====================================================================
   ESTILOS DE DESAFÍOS Y EVALUACIONES CCA (OBSIDIAN, SILVER & AMBER)
   ===================================================================== */
.cca-challenge { display: flex; flex-direction: column; gap: 14px; }
.cca-challenge-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cca-amber); }
.cca-challenge-title { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.45; }
.cca-challenge-notice { font-size: 0.8rem; color: #9da3af; background: rgba(255,255,255,0.04); border-left: 3px solid var(--cca-amber); padding: 8px 12px; border-radius: 6px; }
.cca-challenge-error { font-size: 0.82rem; color: #f87171; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); padding: 10px 14px; border-radius: 8px; }
.cca-challenge-options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cca-challenge-image { max-height: 280px; width: 100%; object-fit: cover; border-radius: 14px; border: 1px solid rgba(199,203,208,0.2); margin-bottom: 6px; }

/* Opciones de selección */
.cca-choice { width: 100%; text-align: left; padding: 12px 16px; border-radius: 12px; background: #13171b; border: 1.5px solid rgba(199,203,208,0.18); color: #dbe0e6; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: space-between; }
.cca-choice:hover { border-color: rgba(245,173,61,0.5); background: #1a2026; color: #fff; transform: translateX(2px); }
.cca-choice.selected { background: rgba(245,173,61,0.12); border-color: var(--cca-amber); color: #fff; font-weight: 700; box-shadow: 0 0 16px rgba(245,173,61,0.15); }
.cca-choice.selected:after { content: "✓"; color: var(--cca-amber); font-weight: 900; margin-left: 8px; }

/* Respuestas de texto y selects */
.cca-answer { width: 100%; padding: 10px 14px; border-radius: 10px; background: #0c0f12; border: 1.5px solid rgba(199,203,208,0.22); color: #fff; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.cca-answer:focus { border-color: var(--cca-amber); box-shadow: 0 0 0 3px rgba(245,173,61,0.2); }

/* Crucigrama */
.cca-cross-grid { display: grid; gap: 5px; justify-content: center; padding: 16px; background: #0c0f12; border: 1px solid rgba(199,203,208,0.18); border-radius: 16px; overflow-x: auto; overflow-y: auto; max-height: 280px; -webkit-overflow-scrolling: touch; margin: 8px 0 16px; }
.cca-cross-cell { width: 32px; height: 32px; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; background: #181d22; border: 1.5px solid rgba(199,203,208,0.28); border-radius: 6px; font-weight: 800; font-size: 15px; color: var(--cca-amber); text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); }
.cca-cross-clue { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: #c9cbd0; font-weight: 600; margin-bottom: 8px; }

/* Ordenamiento */
.cca-order-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: #13171b; border: 1px solid rgba(199,203,208,0.18); border-radius: 12px; font-size: 0.88rem; color: #e2e8f0; }
.cca-order-row > span { flex: 1; }
.cca-order-control { padding: 6px 12px; border-radius: 8px; background: #1f262d; border: 1px solid rgba(199,203,208,0.22); color: #fff; font-weight: bold; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.cca-order-control:hover:not(:disabled) { background: var(--cca-amber); color: #0c0f12; border-color: var(--cca-amber); }
.cca-order-control:disabled { opacity: 0.25; cursor: not-allowed; }

/* Panel de Resultados */
.cca-challenge-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 20px; border-radius: 24px; background: linear-gradient(135deg, #13171c 0%, #1c2229 100%); border: 1px solid rgba(199,203,208,0.22); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.cca-challenge-result h2 { font-size: 2.5rem; font-weight: 900; color: #fff; margin: 6px 0; letter-spacing: -0.02em; }
.cca-challenge-result h2.passed { color: #34d399 !important; text-shadow: 0 0 25px rgba(52,211,153,0.3); }
.cca-challenge-result h2.failed { color: #fbbf24 !important; text-shadow: 0 0 25px rgba(251,191,36,0.2); }
.cca-challenge-result p { font-size: 0.92rem; color: #c9cbd0; line-height: 1.5; max-width: 500px; }
.cca-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; width: 100%; }
.cca-result-btn { padding: 12px 24px; border-radius: 12px; font-weight: 800; font-size: 0.88rem; cursor: pointer; transition: all 0.2s; border: none; }
.cca-result-btn:first-child { background: var(--cca-amber); color: #0f1317; box-shadow: 0 8px 20px rgba(245,173,61,0.25); }
.cca-result-btn:first-child:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(245,173,61,0.35); }
.cca-result-btn:not(:first-child) { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.cca-result-btn:not(:first-child):hover { background: rgba(255,255,255,0.14); }

/* Ranking oficial */
.cca-challenge-ranking { margin-top: 18px; padding: 16px; border-radius: 16px; background: #0c0f12; border: 1px solid rgba(199,203,208,0.18); font-size: 0.85rem; color: #afb3b5; }
.cca-challenge-ranking p { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.cca-challenge-ranking p:last-child { border-bottom: none; }

@media (max-width:720px) {
  .cca-official-logo { width:145px; height:53px; object-fit:contain; object-position:left center; }
  .cca-brand-welcome { grid-template-columns:1fr; min-height:0; }
  .cca-welcome-copy { padding:30px 26px 0; }
  .cca-welcome-copy h1 { font-size:clamp(2.15rem,9vw,3.3rem); }
  .cca-welcome-alex { width:min(75%,290px); max-height:265px; justify-self:end; margin-right:4%; margin-top:-8px; }
  .cca-welcome-actions { margin-top:19px; }
  .cca-alex-strip { padding:12px 15px; }
  .cca-alex-strip img { width:105px; height:120px; }
  .cca-cross-grid { padding: 10px; gap: 4px; max-height: 220px; }
  .cca-cross-cell { width:26px; height:26px; min-width:26px; min-height:26px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .cca-welcome-actions button, #courses-grid-container > div.group { transition:none !important; } }