/* CSC v23 - Glassmorphism liviano
   Objetivo: mejorar profundidad visual sin fondos animados, loaders, cursor glow ni JS adicional.
   Este archivo solo aplica capa estética a tarjetas, paneles, formularios y bloques de información. */

:root {
  --csc-glass-bg: rgba(20, 21, 20, 0.64);
  --csc-glass-bg-strong: rgba(26, 28, 26, 0.76);
  --csc-glass-border: rgba(160, 255, 200, 0.18);
  --csc-glass-border-hover: rgba(31, 230, 101, 0.42);
  --csc-glass-highlight: rgba(255, 255, 255, 0.07);
  --csc-glass-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --csc-glass-shadow-hover: 0 24px 54px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(31, 230, 101, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Capa vidrio: tarjetas, paneles, formularios y bloques de contenido. */
.panel,
.card,
.control-card,
.form-panel,
.metric,
.step,
.timeline-item,
.selected-sidebar-inner,
.learning-card,
.impact-box,
.quote-card,
.table-wrap,
.selected-control,
.evidence-card,
.method-card,
.service-card,
.feature-card,
.faq-card,
.contact-card,
.audit-card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(145deg, var(--csc-glass-highlight), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, var(--csc-glass-bg-strong), var(--csc-glass-bg));
  border: 1px solid var(--csc-glass-border);
  box-shadow: var(--csc-glass-shadow);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}

/* Brillo superior discreto, sin animación continua. */
.panel::before,
.card::before,
.control-card::before,
.form-panel::before,
.metric::before,
.step::before,
.timeline-item::before,
.selected-sidebar-inner::before,
.learning-card::before,
.impact-box::before,
.quote-card::before,
.table-wrap::before,
.selected-control::before,
.evidence-card::before,
.method-card::before,
.service-card::before,
.feature-card::before,
.faq-card::before,
.contact-card::before,
.audit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 38%, rgba(31,230,101,.035));
  opacity: .72;
}

/* Hover liviano: profundidad sin cálculo 3D pesado. */
@media (hover: hover) {
  .panel:hover,
  .card:hover,
  .control-card:hover,
  .form-panel:hover,
  .metric:hover,
  .step:hover,
  .timeline-item:hover,
  .selected-sidebar-inner:hover,
  .learning-card:hover,
  .impact-box:hover,
  .quote-card:hover,
  .table-wrap:hover,
  .selected-control:hover,
  .evidence-card:hover,
  .method-card:hover,
  .service-card:hover,
  .feature-card:hover,
  .faq-card:hover,
  .contact-card:hover,
  .audit-card:hover {
    transform: translateY(-3px);
    border-color: var(--csc-glass-border-hover);
    box-shadow: var(--csc-glass-shadow-hover);
  }
}

/* Formularios con apariencia consistente y económica en rendimiento. */
.input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"] {
  background: rgba(20, 21, 20, 0.72);
  border-color: rgba(89, 255, 160, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input:hover,
select:hover,
textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover {
  border-color: rgba(31, 230, 101, 0.38);
  background: rgba(20, 21, 20, 0.86);
}

.input:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  outline: none;
  border-color: rgba(31, 230, 101, 0.78);
  box-shadow: 0 0 0 4px rgba(31, 230, 101, 0.10), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Tags y códigos con microinteracción ligera. */
.tag,
.code,
.domain,
.badge,
.pill,
.selected-counter strong {
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

@media (hover: hover) {
  .tag:hover,
  .code:hover,
  .badge:hover,
  .pill:hover {
    transform: translateY(-1px);
    border-color: rgba(31, 230, 101, 0.55);
    background: rgba(31, 230, 101, 0.13);
  }
}

/* En dispositivos de bajo soporte no forzamos blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel,
  .card,
  .control-card,
  .form-panel,
  .metric,
  .step,
  .timeline-item,
  .selected-sidebar-inner,
  .learning-card,
  .impact-box,
  .quote-card,
  .table-wrap,
  .selected-control,
  .evidence-card,
  .method-card,
  .service-card,
  .feature-card,
  .faq-card,
  .contact-card,
  .audit-card {
    background: rgba(20, 21, 20, 0.92);
  }
}

/* Accesibilidad: reduce movimiento si el usuario lo solicita. */
@media (prefers-reduced-motion: reduce) {
  .panel,
  .card,
  .control-card,
  .form-panel,
  .metric,
  .step,
  .timeline-item,
  .selected-sidebar-inner,
  .learning-card,
  .impact-box,
  .quote-card,
  .table-wrap,
  .selected-control,
  .evidence-card,
  .method-card,
  .service-card,
  .feature-card,
  .faq-card,
  .contact-card,
  .audit-card,
  .tag,
  .code,
  .badge,
  .pill {
    transition: none !important;
    transform: none !important;
  }
}