/* =====================================================================
   CERPLAS · tema institucional para las páginas internas
   (ficha de la actividad, verificar, mis certificados, restablecer)
   Mismo estilo que la portada: azul UNAP, oro y granate,
   EB Garamond (títulos) + Libre Franklin (texto).
   Se carga DESPUÉS de cerplas.css (y de cerplas-glass.css si existe).
   ===================================================================== */
:root {
  --az-950: #040a18; --az-900: #06112a; --az-800: #0f2a5c; --az-700: #1b3b72; --az-600: #264b8c;
  --az-500: #3560ab; --az-400: #557cc6; --az-300: #83a2dc; --az-200: #b2c7eb; --az-100: #d8e3f5; --az-50: #eef3fb;
  --or-100: #f5e9cf; --or-200: #ecd5a3; --or-300: #dfba70; --or-400: #cc9d47; --or-500: #b3812f; --or-600: #956a25;
  --rojo-600: #7d1625; --rojo-500: #9b1c2c; --rojo-400: #b8323f;
  --texto: #1d2b4a; --tenue: #4e5f80; --apagado: #7c8aa6;
  --linea: rgba(15, 42, 92, .10); --linea-2: rgba(15, 42, 92, .20);
  --f: "Libre Franklin", system-ui, sans-serif;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --cp-azul: var(--az-800); --cp-azul-oscuro: var(--az-900); --cp-ocre: var(--or-500);
  --cp-texto: var(--texto); --cp-titulo: var(--az-800); --cp-papel: #f6f7fb; --cp-borde: var(--linea-2);
  --cp-fuente: var(--f); --cp-fuente-titulo: var(--serif);
}
body { font: 400 15.5px/1.65 var(--f); color: var(--texto);
  background: radial-gradient(900px 600px at 10% -5%, rgba(178, 199, 235, .5), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(236, 213, 163, .35), transparent 60%), #f6f7fb; }
h1, h2, h3, h4, .cp-serif { font-family: var(--serif); color: var(--az-800); font-weight: 500; }
main h1 { text-transform: uppercase; letter-spacing: .05em; }
a { color: var(--az-700); }
a:hover { color: var(--rojo-500); }
.text-muted { color: var(--tenue) !important; }

/* ---------- Íconos de línea ---------- */
.ico-l { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.ico-l .ac { stroke: var(--rojo-500); }
.ico-l circle, .ico-l rect[rx] { stroke-linejoin: round; }

/* ---------- Cabecera ---------- */
.cpt-cab { position: sticky; top: 0; z-index: 1030; border-top: 3px solid var(--rojo-500); background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.cpt-cab-in { display: flex; align-items: center; gap: 1.6rem; min-height: 70px; }
.cpt-marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.cpt-marca img { width: 34px; }
.cpt-marca .escudo { width: 38px; }
.cpt-marca .logo-ap { filter: brightness(0) saturate(100%) invert(13%) sepia(62%) saturate(2600%) hue-rotate(212deg) brightness(92%) contrast(98%); }
.cpt-marca .sep { width: 1px; height: 30px; background: var(--linea-2); }
.cpt-marca b { font: 600 1.15rem var(--serif); letter-spacing: .16em; color: var(--az-800); }
.cpt-nav { display: flex; gap: 1.6rem; margin-left: auto; font-size: .9rem; }
.cpt-nav a { color: var(--tenue); text-decoration: none; white-space: nowrap; }
.cpt-nav a:hover, .cpt-nav a.on { color: var(--az-800); }
.cpt-nav a.on { font-weight: 600; box-shadow: inset 0 -2px 0 var(--rojo-400); padding-bottom: .2rem; }
.cpt-admin, .cpt-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .9rem .42rem .42rem; border-radius: 12px; font: 600 .7rem var(--f); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: .2s; }
.cpt-admin i, .cpt-btn i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.cpt-admin .ico-l, .cpt-btn .ico-l { width: 17px; height: 17px; stroke-width: 4; }
.cpt-admin { color: var(--tenue); border: 1px solid var(--linea-2); background: rgba(255, 255, 255, .6); }
.cpt-admin i { background: var(--az-50); color: var(--az-800); }
.cpt-admin:hover { color: var(--az-800); border-color: var(--az-300); }
.cpt-btn { color: var(--az-800); border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--az-300), var(--or-300), var(--rojo-400)) border-box; }
.cpt-btn i { background: linear-gradient(135deg, rgba(85, 124, 198, .18), rgba(184, 50, 63, .16)); color: var(--or-600); }
.cpt-btn:hover { color: var(--az-800); transform: translateY(-1px); box-shadow: 0 14px 28px -18px rgba(15, 42, 92, .6); }
.cpt-btn.on { background: linear-gradient(#fbf8f1, #fbf8f1) padding-box, linear-gradient(135deg, var(--az-500), var(--or-400), var(--rojo-500)) border-box; }
@media (max-width: 900px) { .cpt-nav { display: none; } .cpt-admin { margin-left: auto; } }
@media (max-width: 560px) { .cpt-admin span, .cpt-btn span { display: none; } .cpt-admin, .cpt-btn { padding: .42rem; } .cpt-cab-in { gap: .6rem; } .cpt-marca .logo-ap, .cpt-marca .sep { display: none; } }

/* ---------- Pie ---------- */
.cpt-pie { margin-top: 3rem; padding: 2.4rem 0; background: #fff; border-top: 1px solid var(--linea); color: var(--tenue); font-size: .84rem; }
.cpt-pie .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cpt-pie a { color: var(--az-700); text-decoration: none; }

/* ---------- Componentes de CERPLAS ---------- */
.cp-eyebrow { font: 600 .66rem var(--f); letter-spacing: .2em; color: var(--rojo-500); }
.cp-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--rojo-400); }
.cp-eyebrow::after { background: linear-gradient(90deg, var(--linea-2), transparent); }
.cp-panel { border-radius: 18px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 30px 60px -48px rgba(15, 42, 92, .55); }
.cp-marco::before, .cp-marco::after { border-color: var(--rojo-400); }
.cp-meta { color: var(--tenue); }
.cp-meta i { color: var(--or-500); }
.cp-card-img { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 15px), linear-gradient(135deg, var(--az-700), var(--az-500) 55%, var(--or-400)); }
.cp-badge-tipo { background: var(--az-50); color: var(--az-800); }
.cp-badge-en_curso { background: var(--or-100); color: var(--or-600); }

.btn { border-radius: 10px; font: 600 .82rem var(--f); letter-spacing: .04em; }
.btn-cp, .btn-cp-ocre { border: 0; color: #fff; }
.btn-cp { background: linear-gradient(135deg, var(--az-500) 0%, var(--az-700) 55%, var(--az-800) 100%); box-shadow: 0 14px 28px -16px rgba(15, 42, 92, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-cp:hover, .btn-cp:focus { color: #fff; background: linear-gradient(135deg, var(--az-400) 0%, var(--az-600) 55%, var(--az-800) 100%); }
.btn-cp-ocre { background: linear-gradient(135deg, var(--or-300), var(--or-500) 60%, var(--or-600)); }
.btn-cp-ocre:hover { color: #fff; filter: brightness(1.06); }
.btn-outline-cp { color: var(--az-800); border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--az-300), var(--or-300), var(--rojo-400)) border-box; }
.btn-outline-cp:hover { color: var(--az-800); background: linear-gradient(#fbf8f1, #fbf8f1) padding-box, linear-gradient(135deg, var(--az-500), var(--or-400), var(--rojo-500)) border-box; }
.form-control, .form-select { border-radius: 10px; border-color: var(--linea-2); color: var(--texto); }
.form-control:focus, .form-select:focus { border-color: var(--or-400); box-shadow: 0 0 0 3px rgba(223, 186, 112, .25); }
.form-label { font: 600 .68rem var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.form-check-input:checked { background-color: var(--az-700); border-color: var(--az-700); }

/* Resultado de verificación */
.cp-verificado { border-radius: 18px; }
.cp-verificado h2 { font-family: var(--serif); text-transform: uppercase; letter-spacing: .04em; }
.cp-datos dt { font: 600 .64rem var(--f); letter-spacing: .14em; color: var(--tenue); }
.cp-datos dd { color: var(--az-800); }
.cp-datos code { color: var(--rojo-500); background: var(--az-50); border-color: var(--linea-2); }

/* ---------- Consulta por DNI (zona clara) ---------- */
.cp-glass-zona { --g-ocre: var(--or-400); --g-ocre-glow: rgba(204, 157, 71, .35); --g-ok: #1f7a4d; --g-ok-glow: rgba(31, 122, 77, .3); --g-error: #b3261e; --g-texto: var(--az-800); --g-suave: var(--tenue);
  background: radial-gradient(800px 420px at 20% 0%, rgba(178, 199, 235, .55), transparent 65%), linear-gradient(180deg, #eaf0fa, #f6f7fb); border-bottom: 1px solid var(--linea); color: var(--texto); }
.cp-glass-fondo { opacity: .08; }
.cp-glass-zona::after { display: none; }
.cp-glass-tarjeta { background: #fff; border: 1px solid var(--linea); backdrop-filter: none; box-shadow: 0 40px 80px -50px rgba(15, 42, 92, .6); }
.cp-glass-tarjeta::before, .cp-glass-tarjeta::after { display: none; }
.cp-glass-tirador { background: var(--linea-2); }
.cp-glass-tarjeta .cp-eyebrow { color: var(--rojo-500); }
.cp-glass-tarjeta h1 { color: var(--az-800); text-transform: uppercase; letter-spacing: .05em; }
.cp-dni-celda, .cp-glass-ce input { background: var(--az-50); border-color: var(--linea-2); color: var(--az-800); box-shadow: inset 0 1px 3px rgba(15, 42, 92, .12); }
.cp-dni-celda:focus { background: #fff; box-shadow: 0 0 0 1px var(--g-ocre), 0 0 18px -4px var(--g-ocre-glow); }
.cp-glass-ce input::placeholder { color: var(--apagado); }
.cp-glass-btn { border: 0; background: linear-gradient(135deg, var(--az-500), var(--az-800)); }
.cp-glass-alt button { color: var(--az-700); }
.btn { white-space: nowrap; }
#formVerificar .btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }

/* ---------- Zona de consulta más clara y con más contraste ---------- */
.cp-glass-zona { background: radial-gradient(900px 420px at 50% -10%, rgba(216, 227, 245, .9), transparent 70%), linear-gradient(180deg, #f3f6fc, #fbfcfe); }
.cp-glass-fondo { opacity: .035; }
.cp-glass-tarjeta { border: 1px solid rgba(15, 42, 92, .14); box-shadow: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px -32px rgba(15, 42, 92, .45), 0 0 0 6px rgba(216, 227, 245, .45); }
.cp-glass-tarjeta::before { display: block; content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--az-500), var(--or-400), var(--rojo-500)); border-radius: 26px 26px 0 0; inset: 0 0 auto 0; }
.cp-dni-celda, .cp-glass-ce input { background: #fff; border: 1.5px solid var(--az-200); color: var(--az-800); font-weight: 700; box-shadow: 0 2px 6px -3px rgba(15, 42, 92, .25); }
.cp-dni-celda:hover { border-color: var(--az-400); }
.cp-dni-celda.llena { border-color: var(--az-500); background: var(--az-50); }
.cp-glass-sub { color: var(--tenue); }