/* ===================================================================
   Tema de marca inyectado sobre MeTube (Bootstrap 5.3 + Angular).
   Aplica el sistema de diseño: rosa #e11d48, Inter, bordes redondeados,
   tarjetas y modo claro/oscuro.
   =================================================================== */

@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/brand/InterVariable.woff2") format("woff2");
}

/* ---- Tokens mapeados a variables de Bootstrap ---- */
:root,[data-bs-theme="light"]{
  --bs-primary:#e11d48;
  --bs-primary-rgb:225,29,72;
  --bs-link-color:#e11d48; --bs-link-color-rgb:225,29,72;
  --bs-link-hover-color:#be123c; --bs-link-hover-color-rgb:190,18,60;
  --bs-body-bg:#ffffff;
  --bs-body-color:#1a1a1a;
  --bs-secondary-color:#6b6b6b;
  --bs-tertiary-bg:#fdf5f5;
  --bs-border-color:#f3d4d4;
  --bs-border-radius:12px;
  --bs-border-radius-sm:8px;
  --bs-border-radius-lg:16px;
  --alt-surface:#fdf5f5;
  --alt-elevated:#ffffff;
  --alt-accent-soft:#fde4e8;
  --alt-shadow:0 4px 16px rgba(225,29,72,.08);
}
[data-bs-theme="dark"]{
  --bs-primary:#f43f5e;
  --bs-primary-rgb:244,63,94;
  --bs-link-color:#f43f5e; --bs-link-color-rgb:244,63,94;
  --bs-link-hover-color:#fb7185; --bs-link-hover-color-rgb:251,113,133;
  --bs-body-bg:#121212;
  --bs-body-color:#f5f5f5;
  --bs-secondary-color:#a0a0a0;
  --bs-tertiary-bg:#1e1e1e;
  --bs-border-color:#2a2a2a;
  --alt-surface:#1e1e1e;
  --alt-elevated:#262626;
  --alt-accent-soft:#3a1a22;
  --alt-shadow:0 4px 16px rgba(0,0,0,.5);
}

body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bs-body-bg); color:var(--bs-body-color);
}

/* ---- Botones ---- */
.btn{border-radius:var(--bs-border-radius-sm);font-weight:600;}
.btn-primary{
  --bs-btn-bg:var(--bs-primary); --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--bs-link-hover-color); --bs-btn-hover-border-color:var(--bs-link-hover-color);
  --bs-btn-active-bg:var(--bs-link-hover-color); --bs-btn-active-border-color:var(--bs-link-hover-color);
  --bs-btn-disabled-bg:var(--bs-primary); --bs-btn-disabled-border-color:var(--bs-primary);
  --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
  color:#fff;
}
.btn-outline-primary{
  --bs-btn-color:var(--bs-primary); --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--bs-primary); --bs-btn-hover-border-color:var(--bs-primary);
  --bs-btn-active-bg:var(--bs-primary); --bs-btn-active-border-color:var(--bs-primary);
}

/* ---- Tarjetas / superficies ---- */
.card{
  background:var(--alt-surface);
  border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  box-shadow:var(--alt-shadow);
}
.card-header,.card-footer{background:transparent;border-color:var(--bs-border-color);}

/* ---- Inputs / selects ---- */
.form-control,.form-select{
  background:var(--alt-elevated); border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius-sm); color:var(--bs-body-color);
}
.form-control::placeholder{color:var(--bs-secondary-color);}
.form-control:focus,.form-select:focus{
  border-color:var(--bs-primary);
  box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.20);
}
.input-group-text{background:var(--alt-accent-soft);border-color:var(--bs-border-color);color:var(--bs-primary);}

/* ---- Navbar / header ---- */
.navbar{
  background:var(--alt-elevated)!important;
  border-bottom:1px solid var(--bs-border-color);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
}
.navbar-brand{color:var(--bs-primary)!important;font-weight:700;letter-spacing:-.01em;}

/* ---- Progreso ---- */
.progress{background:var(--alt-accent-soft);border-radius:999px;}
.progress-bar{background-color:var(--bs-primary);}

/* ---- Tablas / listas de descargas ---- */
.table{--bs-table-bg:transparent;--bs-table-color:var(--bs-body-color);--bs-table-border-color:var(--bs-border-color);}

/* ---- Acentos varios ---- */
.text-primary{color:var(--bs-primary)!important;}
.bg-primary,.badge.bg-primary{background-color:var(--bs-primary)!important;}
.border-primary{border-color:var(--bs-primary)!important;}
.spinner-border,.spinner-grow{color:var(--bs-primary);}
a{color:var(--bs-link-color);}
a:hover{color:var(--bs-link-hover-color);}
.dropdown-menu{background:var(--alt-elevated);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);box-shadow:var(--alt-shadow);}
.dropdown-item:hover,.dropdown-item:focus{background:var(--alt-accent-soft);color:var(--bs-primary);}