:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: white;
  --text-muted: rgba(0,0,0,.65);
}

/* -------------------------
   BODY
-------------------------- */

body{
  background: var(--bg);
  color:#111827;
  transition: background-color .2s ease, color .2s ease;
}

/* -------------------------
   HEADER
-------------------------- */

header{
  background:#ffffff;
  border-bottom:1px solid var(--border);
  transition: background-color .2s ease, color .2s ease;
}

.text-justify{
  text-align: justify;
}

/* -------------------------
   SECTIONS
-------------------------- */

.section{
  margin-bottom: 3rem;
}

.leading-relaxed{
  line-height: 1.65;
}

/* -------------------------
   AVATAR
-------------------------- */

.avatar{
  width: 74px;
  height: 74px;
  object-fit: cover;
  object-position: 75% 15%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
}

/* -------------------------
   CARDS
-------------------------- */

.card-soft{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  transition: background-color .2s ease, border-color .2s ease;
}

/* -------------------------
   CHIPS
-------------------------- */

.chip{
  display: inline-flex;
  align-items: center;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: .9rem;
  color: var(--text-muted);
}

.chip-strong{
  color: rgba(0,0,0,.78);
  font-weight: 600;
}

/* -------------------------
   LINKS
-------------------------- */

a{
  color: inherit;
}

a:hover{
  color: rgba(0,0,0,.85);
}

/* -------------------------
   DARK MODE
-------------------------- */

body.dark-mode{

  /* Bootstrap variables */

  --bs-body-bg:#0f1115;
  --bs-body-color:#ffffff;

  --bs-secondary-color:#c0c3c8;
  --bs-tertiary-color:#c0c3c8;

  --bs-border-color:#2a2d35;

  /* custom */

  --bg:#0f1115;
  --card:#1b1e24;
  --border:#2a2d35;
  --text-muted:#c0c3c8;

  background:var(--bg);
  color:#ffffff;
}

/* -------------------------
   HEADER DARK
-------------------------- */

body.dark-mode header{
  background:#15171c;
  border-bottom:1px solid var(--border);
}

body.dark-mode header *{
  color:inherit;
}

/* -------------------------
   MAIN DARK
-------------------------- */

body.dark-mode main{
  background:var(--bg);
  color:#ffffff;
}

/* -------------------------
   TEXT DARK
-------------------------- */

body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{
  color:#ffffff;
}

body.dark-mode .text-secondary,
body.dark-mode .text-body-secondary{
  color:#c0c3c8;
}

/* -------------------------
   CARDS DARK
-------------------------- */

body.dark-mode .card-soft{
  background:var(--card);
  border-color:var(--border);
}

/* -------------------------
   CHIPS DARK
-------------------------- */

body.dark-mode .chip{
  background:var(--card);
  border-color:var(--border);
  color:#ffffff;
}

body.dark-mode .chip-strong{
  color:#ffffff;
}

/* -------------------------
   BADGES DARK
-------------------------- */

body.dark-mode .badge{
  background:var(--card);
  border-color:var(--border);
  color:#ffffff;
}

/* -------------------------
   LINKS DARK
-------------------------- */

body.dark-mode a{
  color:#6ea8fe;
}

body.dark-mode a:hover{
  color:#9ec5fe;
}

/* -------------------------
   NAV LINKS DARK
-------------------------- */

body.dark-mode nav a{
  color:#9ec5fe;
}

body.dark-mode nav a:hover{
  color:#c7e1ff;
}

/* -------------------------
   BUTTONS DARK
-------------------------- */

body.dark-mode .btn-outline-secondary{
  color:#ffffff;
  border-color:var(--border);
}

body.dark-mode .btn-outline-secondary:hover{
  background:#2a2d35;
}

/* -------------------------
   FOOTER
-------------------------- */

footer{
  border-top:1px solid var(--border);
}

/* -------------------------
   PRINT
-------------------------- */

@media print{

  body{
    background:#ffffff;
    color:#000000;
  }

  header{
    background:#ffffff;
  }

}
/* móvil por defecto */
section[id]{
  scroll-margin-top: 400px;
}

/* tablets */
@media (min-width: 768px){
  section[id]{
    scroll-margin-top: 150px;
  }
}

/* desktop */
@media (min-width: 853px){
  section[id]{
    scroll-margin-top: 300px;
  }
}
/* desktop */
@media (min-width: 992px){
  section[id]{
    scroll-margin-top: 230px;
  }
}
html{
  scroll-behavior: smooth;
}

/* Badge colors */

/* Residence permit */
.bi-credit-card-2-front{
  background:#ede9fe !important;
  border-color:#c4b5fd !important;
  color:#5b21b6 !important;
}

/* Driving license */
.bi-car-front{
  background:#e0f2fe !important;
  border-color:#7dd3fc !important;
  color:#075985 !important;
}

/* Email */
.bi-envelope{
  background:#FDE7E5 !important;   /* rojo muy suave */
  border-color:#EA4335 !important; /* rojo Gmail */
  color:#B3261E !important;        /* rojo oscuro para texto */
}

/* LinkedIn */
.badge-linkedin{
  background:#e0f2fe !important;
  border-color:#38bdf8 !important;
  color:#0A66C2 !important;
}

/* Icons */
.bi-whatsapp{
  color:#25D366 !important;
}

.bi-telegram{
  color:#2AABEE !important;
}

.bi-linkedin{
  color:#0A66C2 !important;
}
.bi-telephone{
  color:#991b1b !important;
}