/* ============================================================
   SQLearning · Expediente final (caso-cerrado.html)
   Composición de ficha policial neón: ficha con silueta y regla de alturas,
   tres paneles de prueba (el dinero, el terminal, las noches) y los datos.
   ============================================================ */
body { min-height: 100vh; }

.cc-cabecera {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 20px;
  background: var(--superficie);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 55%, var(--borde));
}
.cc-volver { color: var(--texto-suave); text-decoration: none; white-space: nowrap; margin-right: auto; }
.cc-volver:hover { color: var(--cian); }

.cc, .cc-clasificado { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; }
.cc-clasificado:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18vh; text-align: center; }

.cc-titulo { margin: 0 0 18px; font: 900 clamp(18px, 2.4vw, 26px)/1.2 var(--fuente-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto); }
.cc-titulo span { color: var(--acento); text-shadow: var(--texto-neon-magenta); }

.cc-rejilla {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "ficha ficha dinero" "ficha ficha terminal" "noches noches datos";
}
.cc-ficha { grid-area: ficha; } .cc-dinero { grid-area: dinero; } .cc-terminal { grid-area: terminal; }
.cc-noches { grid-area: noches; } .cc-datos { grid-area: datos; }

/* Paneles con esquinas de neón, como los recuadros de la ficha */
.cc-panel {
  position: relative;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.cc-panel::before, .cc-panel::after {
  content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--acento); pointer-events: none;
}
.cc-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.cc-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-color: var(--cian); }
.cc-panel h2 { margin: 0 0 10px; font: 700 14px var(--fuente-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cian); }
.cc-panel p { margin: 6px 0; line-height: 1.5; }
.cc-num { color: var(--acento); margin-right: 6px; }
.cc-suave { color: var(--texto-suave); font-size: 14px; }
.cc-panel code { font-family: var(--fuente-codigo); color: var(--oro); }
.cc-cuenta code { font-size: clamp(13px, 1.4vw, 17px); letter-spacing: 0.04em; white-space: nowrap; }   /* los 4 dígitos son la prueba: que no se queden solos */
.cc-igual { color: var(--acento); }

/* Ficha: retrato en pixel art (herramientas/generar-hector.mjs) + datos */
.cc-ficha { display: grid; grid-template-columns: minmax(220px, 1.1fr) 1fr; gap: 18px; align-items: center; overflow: hidden; }
.cc-retrato { width: 100%; height: auto; display: block; border-radius: 2px; image-rendering: pixelated; }
.cc-ficha-datos h2 { font-size: clamp(18px, 2.2vw, 24px); color: var(--texto); letter-spacing: 0.08em; }
.cc-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.cc-panel dt { color: var(--texto-suave); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 2px; }
.cc-panel dd { margin: 0; }

/* Sello, como el del prólogo */
.cc-sello {
  display: flex; flex-direction: column; align-items: center;
  margin: 0; padding: 8px 22px;
  border: 2px solid var(--acento); border-radius: 4px;
  font: 900 clamp(18px, 2.4vw, 28px)/1.1 var(--fuente-titulo); letter-spacing: 0.14em;
  color: var(--acento); text-shadow: var(--texto-neon-magenta); box-shadow: var(--neon-magenta);
  transform: rotate(-6deg); white-space: nowrap;
  animation: cc-sellar 0.6s 0.3s cubic-bezier(.2, 1.6, .4, 1) both;
}
.cc-sello small { font: 600 11px var(--fuente-titulo); letter-spacing: 0.3em; text-transform: uppercase; color: var(--texto); margin-top: 6px; }
.cc-ficha .cc-sello { display: inline-flex; margin-top: 22px; }
.cc-sello--gris { border-color: var(--texto-suave); color: var(--texto-suave); text-shadow: none; box-shadow: none; }
@keyframes cc-sellar { from { opacity: 0; transform: rotate(-6deg) scale(1.7); } }

/* Calendario de las noches */
.cc-calendario { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 10px; }
.cc-mes { margin: 0; }
.cc-mes figcaption { font: 700 12px var(--fuente-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }
.cc-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cc-dias i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--borde) 70%, transparent); }
.cc-dias i.cc-fuera { background: transparent; }
.cc-dias i.cc-noche { background: var(--acento); box-shadow: 0 0 6px color-mix(in srgb, var(--acento) 70%, transparent); }

.cc-desenlace, .cc-epilogo { margin-top: 14px; }
.cc-consejo { border-left: 2px solid var(--cian); padding-left: 12px; color: var(--texto); font-style: italic; }
.cc-tu { color: var(--texto-suave); font-family: var(--fuente-codigo); font-size: 13px; }
.cc-tu a { color: var(--cian); }
.cc-boton {
  display: inline-flex; align-items: center; margin-top: 10px; padding: 8px 16px;
  border-radius: var(--radio); background: var(--primario); color: var(--primario-texto); font-weight: 700; text-decoration: none;
}
.cc-boton:hover { background: var(--primario-hover); }

@media (max-width: 900px) {
  .cc-rejilla { grid-template-columns: 1fr; grid-template-areas: "ficha" "dinero" "terminal" "noches" "datos"; }
}
@media (max-width: 560px) {
  .cc-ficha { grid-template-columns: 1fr; }
  .cc-cabecera { gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
}