/* ==========================================================================
   SolveIT — Capa de superficie (bordes de paneles + fondo)
   Inspirado en el tratamiento "GitHub-dark" de valueaddvc.com:
   borde 1px sutil + esquinas suaves + relleno tenue + sombra difusa + glow
   del color de acento, y fondo profundo con degradados radiales.
   Recoloreado a la paleta SolveIT. Funciona en modo claro y oscuro.
   Se carga DESPUÉS de theme.min.css, por eso usa !important donde el tema
   base ya trae utilidades con !important (.border-0, .shadow-sm, .bg-*).
   ========================================================================== */

:root {
  --sit-blue: #0071C5;
  --sit-blue-rgb: 0, 113, 197;
  --sit-blue-deep: #005A9E;
  --sit-navy: #00284d;

  /* Paneles — modo claro */
  --sit-panel-bg: #ffffff;
  --sit-panel-border: rgba(var(--sit-blue-rgb), .16);
  --sit-panel-border-hover: rgba(var(--sit-blue-rgb), .38);
  --sit-panel-radius: 14px;
  --sit-panel-shadow:
    0 1px 2px rgba(16, 24, 40, .04),
    0 14px 34px -14px rgba(var(--sit-blue-rgb), .16);
  --sit-panel-shadow-hover:
    0 1px 2px rgba(16, 24, 40, .05),
    0 22px 48px -18px rgba(var(--sit-blue-rgb), .28);

  /* Callouts / bloques con acento lateral */
  --sit-callout-bg: rgba(var(--sit-blue-rgb), .06);
  --sit-callout-border: rgba(var(--sit-blue-rgb), .22);
}

[data-bs-theme="dark"] {
  /* Paneles — modo oscuro (glassmorphism sobre el fondo con glow) */
  --sit-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
  --sit-panel-border: rgba(255, 255, 255, .10);
  --sit-panel-border-hover: rgba(var(--sit-blue-rgb), .55);
  --sit-panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 24px 60px -26px rgba(0, 0, 0, .65);
  --sit-panel-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(var(--sit-blue-rgb), .30),
    0 22px 60px -20px rgba(var(--sit-blue-rgb), .38);

  --sit-callout-bg: rgba(var(--sit-blue-rgb), .12);
  --sit-callout-border: rgba(var(--sit-blue-rgb), .45);
}

/* --------------------------------------------------------------------------
   1. Fondo de página
   -------------------------------------------------------------------------- */

/* Modo claro: se mantiene limpio, apenas un tinte frío hacia el pie. */
body {
  background-color: #ffffff;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(var(--sit-blue-rgb), .05), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(var(--sit-blue-rgb), .035), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Modo oscuro: fondo profundo tipo navy SolveIT con glows azules —
   el equivalente al fondo de la referencia. */
[data-bs-theme="dark"] body {
  background-color: #081321;
  background-image:
    radial-gradient(1200px 620px at 15% -10%, rgba(var(--sit-blue-rgb), .20), transparent 60%),
    radial-gradient(1000px 520px at 105% 0%, rgba(0, 90, 158, .16), transparent 55%),
    linear-gradient(180deg, #081321 0%, #060f1a 100%);
}

/* Rejilla muy tenue sobre el fondo oscuro (se percibe, no distrae). */
[data-bs-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(1200px 800px at 50% 0%, #000 0%, transparent 80%);
}
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] footer {
  position: relative;
  z-index: 1;
}

/* Secciones "bg-secondary": pasan a ser una franja-panel delimitada. */
.bg-secondary:not(.badge):not(.btn) {
  background-color: #f4f7fb !important;
  background-image: linear-gradient(180deg, #f7f9fc, #eef2f8) !important;
  border-top: 1px solid rgba(var(--sit-blue-rgb), .08);
  border-bottom: 1px solid rgba(var(--sit-blue-rgb), .08);
}
[data-bs-theme="dark"] .bg-secondary:not(.badge):not(.btn) {
  background-color: rgba(255, 255, 255, .03) !important;
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Secciones "bg-dark" (hero, CTA, footer navy): glow azul de apoyo + hairline. */
.bg-dark:not(.badge) {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.bg-dark:not(.badge)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 300px at 20% 0%, rgba(var(--sit-blue-rgb), .28), transparent 60%),
    radial-gradient(640px 280px at 100% 100%, rgba(0, 199, 253, .12), transparent 60%);
  z-index: 0;
}
.bg-dark > .container,
.bg-dark > .position-relative { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   2. Paneles / tarjetas — el borde y relleno de la referencia
   -------------------------------------------------------------------------- */

.card {
  background: var(--sit-panel-bg) !important;
  border: 1px solid var(--sit-panel-border) !important;
  border-radius: var(--sit-panel-radius) !important;
  box-shadow: var(--sit-panel-shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
[data-bs-theme="dark"] .card {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Hover: acerca el borde al azul y enciende el glow (como los cards de la ref). */
.card.card-hover:hover,
a.card:hover,
.card:hover {
  border-color: var(--sit-panel-border-hover) !important;
  box-shadow: var(--sit-panel-shadow-hover) !important;
}
.card.card-hover:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card.card-hover:hover { transform: none; }
}

/* Tarjetas circulares (íconos "¿Por qué SolveIT?", pasos de metodología):
   no deben recibir el rectángulo — se mantienen redondas y sin glow duro. */
.card.rounded-circle,
.card.d-table {
  border-radius: 50% !important;
  box-shadow: 0 10px 26px -12px rgba(var(--sit-blue-rgb), .35) !important;
}

/* Tarjeta destacada en azul (CTA dentro de contenido): borde luminoso. */
.card.bg-primary {
  background: var(--sit-blue) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 22px 50px -20px rgba(var(--sit-blue-rgb), .60) !important;
}

/* Imágenes tratadas como panel (foto "nosotros", coberturas de blog). */
img.rounded-3,
.post-card-cover img {
  border-radius: var(--sit-panel-radius) !important;
}
img.rounded-3.shadow-sm {
  border: 1px solid var(--sit-panel-border) !important;
  box-shadow: var(--sit-panel-shadow) !important;
}

/* --------------------------------------------------------------------------
   3. Callouts con acento lateral + blockquotes + alerts
   (borde izquierdo 3px, esquinas 0 10px 10px 0 — patrón de la referencia)
   -------------------------------------------------------------------------- */

.sit-callout,
article blockquote,
.content blockquote,
.card-body blockquote,
.alert {
  background: var(--sit-callout-bg);
  border: 1px solid var(--sit-callout-border);
  border-left: 3px solid var(--sit-blue);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
article blockquote > :last-child,
.content blockquote > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Tablas de contenido — divisores sutiles dentro de un panel redondeado
   -------------------------------------------------------------------------- */

.table-panel { overflow-x: auto; }
.table-panel > table,
article table:not(.table-plain) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--sit-panel-border);
  border-radius: var(--sit-panel-radius);
  overflow: hidden;
}
article table:not(.table-plain) th,
article table:not(.table-plain) td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--sit-panel-border);
  text-align: left;
}
article table:not(.table-plain) tr:last-child td { border-bottom: 0; }
article table:not(.table-plain) thead th {
  background: rgba(var(--sit-blue-rgb), .06);
  font-weight: 600;
}
[data-bs-theme="dark"] article table:not(.table-plain) thead th {
  background: rgba(var(--sit-blue-rgb), .14);
}

/* --------------------------------------------------------------------------
   5. Detalles varios coherentes con el sistema
   -------------------------------------------------------------------------- */

/* Acordeones (FAQ de servicios) con el mismo lenguaje de panel. */
.accordion-item {
  background: var(--sit-panel-bg) !important;
  border: 1px solid var(--sit-panel-border) !important;
  border-radius: 12px !important;
  margin-bottom: .75rem;
  overflow: hidden;
}

/* Inputs coherentes con el borde de panel en foco. */
.form-control:focus,
.form-select:focus {
  border-color: var(--sit-panel-border-hover);
  box-shadow: 0 0 0 .2rem rgba(var(--sit-blue-rgb), .18);
}

/* Botón scroll-top como panel flotante. */
.btn-scroll-top {
  border: 1px solid var(--sit-panel-border);
  box-shadow: var(--sit-panel-shadow);
}