/**
 * RidPa — sistema de diseño compartido.
 *
 * Capa de refinamiento sobre Bootstrap 5.3.3 (no lo reemplaza): tokens de color/tipografia/
 * espaciado/elevacion + tratamiento de componentes, pensado para verse "profesional, no generico,
 * todo disponible pero sin saturar la pantalla" (progressive disclosure via <details>, texto
 * secundario silenciado, jerarquia visual clara en vez de todo al mismo nivel).
 *
 * Convive con la identidad ya existente (navy/cyan/orange + marca monoespaciada "{ RidPa }" del
 * nav/footer global inyectado en bootstrap.php) -- la profundiza en vez de reemplazarla, para que
 * las paginas que todavia no migraron a este archivo no desentonen visualmente.
 */

:root {
  /* --- Color: identidad de marca (navy/cyan/orange), un tono mas profundo que las paginas
     legacy para que la sensacion sea mas premium y menos "flat corporate azul" --- */
  --rp-navy-950: #060f1f;
  --rp-navy-900: #0a192f;
  --rp-navy-800: #112240;
  --rp-navy-700: #1b3358;

  --rp-cyan-400: #4ee4ff;
  --rp-cyan-500: #00d2ff;
  --rp-cyan-600: #00a8cf;

  --rp-orange-400: #ffb347;
  --rp-orange-500: #ff9a00;
  --rp-orange-600: #cc7a00;

  /* Neutros: escala propia, no el gris default de Bootstrap, para que las superficies claras
     (cards, formularios) tengan la misma temperatura de color que el navy de marca. */
  --rp-neutral-0: #ffffff;
  --rp-neutral-50: #f5f8fb;
  --rp-neutral-100: #eaf0f6;
  --rp-neutral-200: #d7e1ea;
  --rp-neutral-400: #93a4b8;
  --rp-neutral-600: #597086;
  --rp-neutral-800: #243447;

  --rp-success: #17b881;
  --rp-warning: #f5a524;
  --rp-danger: #f5455c;
  --rp-info: var(--rp-cyan-500);

  /* --- Tipografia --- */
  --rp-font-body: 'Poppins', system-ui, sans-serif;
  --rp-font-brand: 'Fira Code', 'SFMono-Regular', monospace;

  /* --- Espaciado: grilla de 4px, no inventar valores sueltos --- */
  --rp-space-1: 0.25rem;  /* 4px */
  --rp-space-2: 0.5rem;   /* 8px */
  --rp-space-3: 0.75rem;  /* 12px */
  --rp-space-4: 1rem;     /* 16px */
  --rp-space-6: 1.5rem;   /* 24px */
  --rp-space-8: 2rem;     /* 32px */
  --rp-space-12: 3rem;    /* 48px */
  --rp-space-16: 4rem;    /* 64px */

  /* --- Radios: escala fija en vez de valores ad-hoc (12px/18px/30px mezclados sin criterio) --- */
  --rp-radius-sm: 8px;
  --rp-radius-md: 12px;
  --rp-radius-lg: 20px;
  --rp-radius-pill: 999px;

  /* --- Elevacion: sombras suaves y difusas (no la sombra dura "AI default") --- */
  --rp-shadow-1: 0 1px 3px rgba(10, 25, 47, 0.08), 0 1px 2px rgba(10, 25, 47, 0.06);
  --rp-shadow-2: 0 6px 16px rgba(10, 25, 47, 0.10), 0 2px 6px rgba(10, 25, 47, 0.06);
  --rp-shadow-3: 0 16px 40px rgba(10, 25, 47, 0.16), 0 4px 12px rgba(10, 25, 47, 0.08);
  --rp-shadow-glow-cyan: 0 10px 24px rgba(0, 210, 255, 0.18);

  --rp-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Fondo de marca reutilizable (hero, login, portales) — reemplaza el
   gradiente lineal plano por uno con dos manchas de luz sutiles, evita el
   look "template generico" sin volverse ruidoso.
   ========================================================================== */
.rp-brand-surface {
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 210, 255, 0.16), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(255, 154, 0, 0.12), transparent 40%),
    linear-gradient(160deg, var(--rp-navy-900) 0%, var(--rp-navy-800) 55%, var(--rp-navy-950) 100%);
  color: var(--rp-neutral-0);
}

.rp-brand-mark {
  font-family: var(--rp-font-brand);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.rp-brand-mark .rp-b-l { color: var(--rp-cyan-500); }
.rp-brand-mark .rp-b-r { color: var(--rp-orange-500); }

/* ==========================================================================
   Tipografia — jerarquia clara, sin saltar niveles.
   ========================================================================== */
.rp-brand-surface,
.rp-surface {
  font-family: var(--rp-font-body);
}

.rp-eyebrow {
  font-family: var(--rp-font-brand);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rp-cyan-400);
  opacity: 0.9;
}

.rp-text-muted-soft {
  color: var(--rp-neutral-400);
}

/* ==========================================================================
   Botones — pill consistente, un solo estado "primario" con glow sutil
   (no gradientes multicolor por todos lados).
   ========================================================================== */
.btn-rp-primary {
  background: var(--rp-cyan-500);
  color: var(--rp-navy-900);
  border: none;
  border-radius: var(--rp-radius-pill);
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  box-shadow: var(--rp-shadow-glow-cyan);
  transition: transform var(--rp-transition), box-shadow var(--rp-transition), background var(--rp-transition);
}

.btn-rp-primary:hover,
.btn-rp-primary:focus-visible {
  background: var(--rp-cyan-400);
  color: var(--rp-navy-900);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 210, 255, 0.24);
}

/* Respeta el tamaño compacto de Bootstrap cuando .btn-rp-primary se combina con .btn-sm (ej.
   botones "Nuevo X" en toolbars, paginacion) -- sin esto, el padding mas grande de .btn-rp-primary
   gana por orden de cascada y el boton queda visualmente mas grande que sus vecinos btn-sm. */
.btn-rp-primary.btn-sm {
  padding: 0.25rem 0.85rem;
}

.btn-rp-outline {
  background: transparent;
  color: var(--rp-cyan-400);
  border: 1px solid rgba(0, 210, 255, 0.5);
  border-radius: var(--rp-radius-pill);
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  transition: background var(--rp-transition), color var(--rp-transition), border-color var(--rp-transition);
}

.btn-rp-outline:hover,
.btn-rp-outline:focus-visible {
  background: rgba(0, 210, 255, 0.1);
  color: var(--rp-cyan-400);
  border-color: var(--rp-cyan-400);
}

/* ==========================================================================
   Cards — una sola receta de elevacion/radio, reusable en login/portal/landing.
   ========================================================================== */
.rp-card {
  background: var(--rp-neutral-0);
  color: var(--rp-neutral-800);
  border: none;
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-3);
}

/* Bootstrap resuelve el padding de .card-body via las variables --bs-card-spacer-y/x, pero
   esas variables solo se setean dentro de la regla .card propia de Bootstrap. .rp-card nunca
   lleva la clase .card, asi que quedan sin definir. El var() invalido no hace que el navegador
   "salte" a esta regla como fallback -- Bootstrap sigue ganando el cascade con su propio valor
   invalido (que resuelve a 0), asi que hace falta !important para que esta si se aplique
   (confirmado empiricamente: sin !important el padding queda en 0px incluso con esta regla
   presente y de mayor especificidad). */
.rp-card > .card-body {
  padding: 1.25rem !important;
}

.rp-card .form-control,
.rp-card .form-select {
  border-radius: var(--rp-radius-sm);
  border-color: var(--rp-neutral-200);
  padding: 0.7rem 0.9rem;
}

.rp-card .form-control:focus,
.rp-card .form-select:focus {
  border-color: var(--rp-cyan-500);
  box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.18);
}

.rp-card .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rp-neutral-800);
}

/* ==========================================================================
   Progressive disclosure — "todo disponible pero no molestando": informacion
   secundaria queda colapsada por default en vez de siempre visible.
   ========================================================================== */
.rp-details {
  border: 1px solid var(--rp-neutral-200);
  border-radius: var(--rp-radius-md);
  padding: var(--rp-space-3) var(--rp-space-4);
  background: var(--rp-neutral-50);
}

.rp-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rp-neutral-800);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
}

.rp-details > summary::-webkit-details-marker { display: none; }

.rp-details > summary::before {
  content: '\25B8';
  color: var(--rp-cyan-600);
  transition: transform var(--rp-transition);
  font-size: 0.75rem;
}

.rp-details[open] > summary::before {
  transform: rotate(90deg);
}

.rp-details > summary:focus-visible {
  outline: 2px solid var(--rp-cyan-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.rp-details-body {
  margin-top: var(--rp-space-3);
  padding-top: var(--rp-space-3);
  border-top: 1px solid var(--rp-neutral-200);
}

/* ==========================================================================
   Badges silenciados — para estados secundarios que no deben competir
   visualmente con las acciones primarias de la pantalla.
   ========================================================================== */
.rp-badge-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-neutral-100);
  color: var(--rp-neutral-600);
}

/* ==========================================================================
   Responsive — ajustes finos por breakpoint (Bootstrap resuelve el grid,
   esto afina tipografia/espaciado en los extremos: mobile chico y desktop
   grande). Probado en 320 / 768 / 1024 / 1440.
   ========================================================================== */
.rp-hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  line-height: 1.1;
}

.rp-hero-lead {
  font-size: clamp(1rem, 1vw + 0.85rem, 1.25rem);
}

@media (max-width: 575.98px) {
  .rp-card .card-body {
    padding: var(--rp-space-6) var(--rp-space-4) !important;
  }

  .rp-brand-surface {
    padding-top: var(--rp-space-8);
    padding-bottom: var(--rp-space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-rp-primary,
  .btn-rp-outline,
  .rp-details > summary::before {
    transition: none;
  }
}