/* ===== MAXSEGURO - Estilos personalizados (minimalista) ===== */

/* 1. Colores de marca y logo: se cambian solo aquí */
:root {
  --ms-orange: #d84c0e;
  --ms-orange-rgb: 216, 76, 14;
  --ms-blue: #012a6c;
  --ms-blue-rgb: 1, 42, 108;
  --ms-white: #ffffff;      /* fondo de toda la página */

  /* LOGO */
  --ms-logo: url("https://assets.cdn.filesafe.space/9GPaWwX6n6WG2ScgwnBi/media/6ae222799c1511d5b929f3ea.png");

  /* Variables comunes que algunos temas usan */
  --primary: #d84c0e !important;
  --bs-primary: #d84c0e !important;
  --brand-color: #d84c0e !important;
}

/* 2. Fondo general y texto */
html,
body {
  background-color: var(--ms-white) !important;
  color: var(--ms-blue) !important;
}

/* 2.1 Logo arriba de la página (grande) */
body::before {
  content: "";
  display: block;
  width: 100%;
  height: 220px;              /* alto del logo: súbelo o bájalo a tu gusto */
  margin: 20px auto 10px;
  background-image: var(--ms-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 600px) {
  body::before {
    height: 160px;
  }
}

/* 3. QUITAR TODOS LOS CUADROS: nada tiene fondo, borde ni sombra por defecto */
body * {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ms-blue) !important;
}

/* El logo del punto 2.1 conserva su imagen */
body::before {
  background-image: var(--ms-logo) !important;
}

/* Iconos e imágenes: sin cuadro y sin cambios al pasar el mouse */
img,
svg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 4. Encabezado y barras: azul con texto blanco */
header,
.navbar,
.header,
.page-header {
  background-color: var(--ms-blue) !important;
}

header *,
.navbar *,
.header *,
.page-header * {
  color: var(--ms-white) !important;
}

/* 5. Tarjetas: fondo blanco, esquinas redondeadas y sombra casi invisible */
.card,
.panel,
[class*="card"],
[class*="panel"] {
  background-color: var(--ms-white) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 8px rgba(var(--ms-blue-rgb), 0.1) !important;
}

[class*="card"]:hover,
[class*="panel"]:hover {
  box-shadow: 0 2px 12px rgba(var(--ms-blue-rgb), 0.16) !important;
}

/* 6. Botones (estado normal): sin fondo ni borde, solo línea azul abajo */
button,
.btn,
.btn-primary,
.btn-info,
.bg-primary,
[class*="btn"],
[class*="button"],
input[type="submit"],
input[type="button"] {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 0 var(--ms-blue) !important;
  color: var(--ms-blue) !important;
}

/* 7. Botones (hover, foco y clic): texto y línea en naranja, sin recuadro */
button:hover,
button:focus,
button:active,
.btn:hover,
.btn:focus,
.btn:active,
.btn-primary:hover,
.btn-info:hover,
[class*="btn"]:hover,
[class*="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover {
  background-color: transparent !important;
  border: none !important;
  box-shadow: 0 2px 0 var(--ms-orange) !important;
  color: var(--ms-orange) !important;
}

/* 8. Links: azul, naranja al pasar el mouse */
a,
.text-primary {
  color: var(--ms-blue) !important;
}

a:hover {
  color: var(--ms-orange) !important;
}

/* 9. Campos de formulario: sin fondo, solo línea azul abajo */
input,
select,
textarea {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--ms-blue) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ms-blue) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(var(--ms-blue-rgb), 0.45) !important;
}

input:hover,
select:hover,
textarea:hover,
input:focus,
select:focus,
textarea:focus {
  border-bottom-color: var(--ms-orange) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 10. Pasos, pestañas y elementos activos */
.active,
.selected,
.step.active,
.nav-link.active {
  color: var(--ms-orange) !important;
}