:root{
  /* Cambia este color cuando decidas tu acento */
  --accent: #FF385C;

  --bg: #F7F7F7;
  --card: #FFFFFF;
  --text: #111827;
  --muted: #6B7280;
  --border: rgba(17,24,39,.10);

  --radius: 18px;
  --radius-sm: 14px;

  --shadow-sm: 0 6px 20px rgba(17,24,39,.06);
  --shadow-md: 0 10px 30px rgba(17,24,39,.10);

  --focus: 0 0 0 .25rem rgba(255,56,92,.18);
}

html, body { height: 100%; }
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Si ya cargas una font, puedes omitir esto */
*{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Cards “suaves” */
.card-soft{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.card-soft:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.card-soft{ transition: box-shadow .18s ease, transform .18s ease; }

/* Botones estilo moderno */
.btn-soft{
  border-radius: 14px !important;
}
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-primary{
  border-color: rgba(255,56,92,.35) !important;
  color: var(--accent) !important;
}
.btn-outline-primary:hover{
  background: rgba(255,56,92,.08) !important;
}
.btn-dark.btn-soft{
  border-radius: 14px !important;
}

/* Inputs */
.form-control, .form-select{
  border-radius: 14px !important;
  border-color: var(--border) !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(255,56,92,.35) !important;
  box-shadow: var(--focus) !important;
}

/* Textos */
.tiny{ font-size: .875rem; color: var(--muted); }

/* Badges */
.badge-soft{
  background: rgba(17,24,39,.04) !important;
}

/* Animación suave al cargar */
.mc-fade{
  animation: mcFade .25s ease both;
}
@keyframes mcFade{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* SweetAlert look */
.swal2-popup{
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
}

/* ====== Dashboard Layout (SaaS) ====== */
:root{
  --sidebar-w: 330px;
  --sidebar-bg: #FFFFFF;
  --sidebar-border: rgba(17,24,39,.10);
  --sidebar-item-hover: rgba(17,24,39,.04);
  --sidebar-item-active: rgba(255,56,92,.10);
}

.dashboard-shell{
  min-height: 100vh;
  display: flex;
}

.sidebar{
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  display: none;
}

@media (min-width: 992px){
  .sidebar{ display: flex; flex-direction: column; }
  .main{
    width: calc(100% - var(--sidebar-w));
    /*margin-left: var(--sidebar-w);*/
  }
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247,247,247,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar .container-fluid{
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(255,56,92,.06);
  border: 1px solid rgba(255,56,92,.18);
}

.brand-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,56,92,.12);
}

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none !important;
}

.sidebar-nav a:hover{
  background: var(--sidebar-item-hover);
}

.sidebar-nav a.active{
  background: var(--sidebar-item-active);
  color: var(--text);
  font-weight: 600;
}

.sidebar-footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.kpi-card .kpi-title{ color: var(--muted); font-size: .85rem; }
.kpi-card .kpi-value{ font-size: 1.4rem; font-weight: 700; }

.soft-divider{ border-top: 1px solid var(--border); }