/* ===== brand-sdsiq.css ===== */

/* 🎨 Tokens de marca */
:root{
  /* Paleta tomada del logo SDS IQ (rombo verde, chevrons navy/azul) */
  --brand-primary:    #1E8E3E;   /* Verde logo (wordmark IQ) */
  --brand-secondary:  #142A47;   /* Navy logo (chevron oscuro / texto SDS) */
  --brand-accent:     #2563EB;   /* Azul logo (chevron inferior) */
  --brand-bg:         #F9FAFB;   /* Fondo app */
  --brand-surface:    #FFFFFF;   /* Tarjetas, modales */
  --brand-text:       #1F2937;   /* Texto principal */
  --brand-text-muted: #6B7280;   /* Texto secundario */
  --brand-border:     #E5E7EB;   /* Bordes suaves */

  /* Degradado de marca (verde arriba → azul abajo, como las capas del logo) */
  --brand-gradient-start: #2FA24C; /* arriba */
  --brand-gradient-end:   #1D4ED8; /* abajo */

  /* Radios y sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-1: 0 4px 14px rgba(0,0,0,.08);
  --shadow-2: 0 8px 24px rgba(0,0,0,.12);

  /* Azul para botón Editar (sólido) — azul del logo */
  --btn-edit-blue: #2563EB;
}

/* ===== Tipografía base ===== */
html{ font-size:16px; }
body{
  font-family: var(--font-text, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans");
  color: var(--brand-text);
  background: var(--brand-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-headings, var(--font-text));
  color: var(--brand-text);
  letter-spacing: .2px;
}
h1{ font-weight:700 }
h2,h3{ font-weight:600 }

/* ===== Enlaces ===== */
a{ color: var(--brand-primary); }
a:hover{ color: color-mix(in srgb, var(--brand-primary) 85%, black); }

/* ===== Botones (sólidos, sin degradado) ===== */
.btn-primary{
  background: var(--btn-edit-blue);
  border-color: var(--btn-edit-blue);
  color:#fff;
  font-weight:600;
}
.btn-primary:hover,
.btn-primary:focus{
  background: color-mix(in srgb, var(--btn-edit-blue) 92%, black);
  border-color: color-mix(in srgb, var(--btn-edit-blue) 92%, black);
}

.btn-outline-primary{
  color: var(--btn-edit-blue);
  border-color: var(--btn-edit-blue);
  background: transparent;
}
.btn-outline-primary:hover{
  background: var(--btn-edit-blue);
  color:#fff;
}

/* Estados utilitarios */
.text-primary{ color: var(--btn-edit-blue) !important; }
.bg-primary{ background: var(--btn-edit-blue) !important; color:#fff !important; }
.border-left-primary{ border-left: .25rem solid var(--btn-edit-blue)!important; }

/* ===== Topbar / Navbar ===== */
.navbar, .topbar{
  background: var(--brand-surface);
  box-shadow: var(--shadow-1);
}

/* ===== Sidebar (gradiente turquesa→morado) ===== */
.sidebar{
  background: linear-gradient(180deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  color: #fff;
  border-right: none;
  box-shadow: inset -2px 0 6px rgba(0,0,0,.12);
}
.sidebar .sidebar-brand{
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 1.25rem 1rem;
  display: flex; align-items:center; justify-content:center;
}
.sidebar .sidebar-brand img{
  height: 42px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

/* Links de menú */
.sidebar .nav-item .nav-link{
  color: rgba(255,255,255,.9);
  font-weight: 500;
  border-radius: var(--radius-sm);
  margin: .25rem .5rem;
  padding: .6rem 1rem;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.sidebar .nav-item .nav-link i{
  color: rgba(255,255,255,.92);
  margin-right: .4rem;
  font-size: 1rem;
  transition: transform .12s ease, color .12s ease;
}
.sidebar .nav-item .nav-link:hover{
  background: rgba(255,255,255,.18);
  color:#fff;
}
.sidebar .nav-item .nav-link:hover i{ transform: scale(1.05); color:#fff; }
.sidebar .nav-item.active .nav-link{
  background: rgba(255,255,255,.25);
  color:#fff; font-weight:600;
}

/* Submenús colapsables */
.sidebar .collapse .collapse-inner{
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: .5rem;
}
.sidebar .collapse .collapse-inner .collapse-header{
  color: rgba(255,255,255,.8);
  font-weight:600;
}
.sidebar .collapse .collapse-inner .collapse-item{
  color: rgba(255,255,255,.9);
  border-radius: var(--radius-sm);
}
.sidebar .collapse .collapse-inner .collapse-item:hover,
.sidebar .collapse .collapse-inner .collapse-item:focus{
  color:#fff; background: rgba(255,255,255,.18);
}

/* Separadores / scrollbar */
.sidebar hr.sidebar-divider{
  border-top: 1px solid rgba(255,255,255,.25);
  margin: .75rem 1rem;
}
.sidebar::-webkit-scrollbar{ width: 6px; }
.sidebar::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.28);
  border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.4); }

/* Sidebar colapsado */
.sidebar.toggled{
  background: linear-gradient(180deg, var(--brand-gradient-start) 10%, var(--brand-gradient-end) 90%);
}

/* Botón Toggle */
#sidebarToggle{
  background: rgba(255,255,255,.15);
  border: none; border-radius: 50%;
  color:#fff;
  transition: background .2s ease;
}
#sidebarToggle:hover{ background: rgba(255,255,255,.25); }

/* ===== Cards ===== */
.card{
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  background: var(--brand-surface);
}
.card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--brand-border);
  font-weight: 600;
}

/* ===== Formularios ===== */
.form-control{
  border-radius: 10px;
  border-color: var(--brand-border);
}
.form-control:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.form-control::placeholder{ color: var(--brand-text-muted); opacity:.8; }

/* Select (caret) */
select.form-control{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-text-muted) 50%),
    linear-gradient(135deg, var(--brand-text-muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 2.25rem) 0;
  background-size: 5px 5px, 5px 5px, 1px 100%;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
select.form-control:hover{
  border-color: color-mix(in srgb, var(--brand-primary) 70%, var(--brand-border));
}

/* Checkbox “custom-checkbox” tipo switch */
input.custom-checkbox{
  appearance: none;
  width: 44px; height: 24px;
  background: color-mix(in srgb, var(--brand-text-muted) 20%, #fff);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  position: relative; cursor: pointer; outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
input.custom-checkbox::after{
  content:"";
  position:absolute; top:50%; left:3px; transform: translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:left .15s ease;
}
input.custom-checkbox:checked{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
input.custom-checkbox:checked::after{ left:23px; }
input.custom-checkbox:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

/* Validación */
.form-control.is-valid,
.was-validated .form-control:valid{ border-color:#16a34a; }
.form-control.is-invalid,
.was-validated .form-control:invalid{ border-color:#dc2626; }
.invalid-feedback, .valid-feedback{
  display:block; margin-top:.35rem; font-size:.875rem;
}

/* ===== Tabs ===== */
.nav-tabs .nav-link.active{
  color: var(--btn-edit-blue);
  border-color: var(--btn-edit-blue) var(--btn-edit-blue) transparent;
}

/* ===== Tablas ===== */
.table thead th{
  border-bottom:2px solid var(--btn-edit-blue);
  font-weight:600;
}
.table-striped tbody tr:nth-of-type(odd){ background:#fafafa; }

/* ===== Modales ===== */
.modal-backdrop.show{
  background: color-mix(in srgb, var(--brand-text) 35%, transparent);
  opacity:.45;
}
.modal-content{
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow:hidden;
}
.modal-header{
  align-items:center; gap:.5rem;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.015) 100%);
  border-bottom:1px solid var(--brand-border);
  padding:1rem 1.25rem;
  color: var(--brand-text);
}
.modal-title{
  font-family: var(--font-headings, var(--font-text));
  font-weight:600; letter-spacing:.2px;
}
.modal-header .close{
  padding:.25rem .5rem; margin:-.25rem -.25rem -.25rem auto;
  border-radius: var(--radius-sm); opacity:.65;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
  outline:none;
}
.modal-header .close:hover{ opacity:1; background:rgba(0,0,0,.05); transform:scale(1.03); }
.modal-header .close:focus{
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
.modal-body{ padding:1rem 1.25rem .75rem; }
.form-group{ margin-bottom:.85rem; }
.modal-footer{
  border-top:1px solid var(--brand-border);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.015) 100%);
  padding:.9rem 1.25rem;
}
.modal-footer .btn{
  border-radius: var(--radius-sm);
  padding:.55rem 1rem;
  font-weight:600;
}

/* Paginación */
.page-item.active .page-link{
  background: var(--btn-edit-blue);
  border-color: var(--btn-edit-blue);
}

/* Alerts / Badges */
.badge-primary{ background: var(--btn-edit-blue); }
.badge-secondary{ background: var(--brand-secondary); }
.alert-primary{
  color:#0b2a4a;
  background: color-mix(in srgb, var(--brand-primary) 12%, white);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, white);
}

/* ===== Utilitarios ===== */
.rounded-brand-sm{ border-radius: var(--radius-sm); }
.rounded-brand-md{ border-radius: var(--radius-md); }
.rounded-brand-lg{ border-radius: var(--radius-lg); }
.shadow-brand-1{ box-shadow: var(--shadow-1); }
.shadow-brand-2{ box-shadow: var(--shadow-2); }

/* Fondo decorativo opcional con colores de marca (no en botones) */
.bg-brand-gradient{
  background: linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  color:#fff;
}

/* Override del tema SB-Admin-2 (#4e73df) con el degradado de marca */
.bg-gradient-primary{
  background-color: var(--brand-secondary);
  background-image: linear-gradient(180deg, var(--brand-gradient-start) 10%, var(--brand-gradient-end) 100%);
  background-size: cover;
}