/* =====================================================================
   COMERCIO DEL SUR PACHUCA — Tema del CRM
   ---------------------------------------------------------------------
   Identidad: Pachuca es "la bella airosa" y el sur es su barrio de
   colores. La paleta viene de las casas pintadas del cerro: rosa
   mexicano, verde nopal, amarillo cempasúchil, azul talavera.
   Sobre un lienzo cal (#FBF9F6), no blanco clínico.
   Tipografía: Fraunces (display, con óptica alta) + Outfit (interfaz).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* --- Paleta ------------------------------------------------------ */
  --cal:        #FBF9F6;   /* fondo, cal de fachada */
  --cal-2:      #F3EFE9;
  --tinta:      #1B1714;   /* texto, tinta de imprenta */
  --tinta-60:   #6B615A;
  --tinta-30:   #A79C93;
  --linea:      #E5DDD2;

  --nopal:      #0F766E;   /* primario: verde nopal */
  --nopal-osc:  #0B5850;
  --nopal-luz:  #E6F4F1;

  --rosa:       #D6336C;   /* acento: rosa mexicano */
  --rosa-luz:   #FCE7EF;

  --cempa:      #F0A500;   /* amarillo cempasúchil */
  --cempa-luz:  #FEF6E0;

  --talavera:   #2563C9;   /* azul talavera */
  --talavera-luz:#E7EFFC;

  --barro:      #C2410C;   /* alertas */
  --barro-luz:  #FDEBE2;

  /* --- Tipografía -------------------------------------------------- */
  --display: 'Fraunces', ui-serif, Georgia, serif;
  --ui:      'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Sombras discretas ------------------------------------------- */
  --s1: 0 1px 2px rgba(27,23,20,.05);
  --s2: 0 2px 8px rgba(27,23,20,.06), 0 1px 2px rgba(27,23,20,.04);
  --s3: 0 8px 24px rgba(27,23,20,.08), 0 2px 6px rgba(27,23,20,.04);
  --s4: 0 16px 48px rgba(27,23,20,.12);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sidebar-w: 264px;
  --header-h:  68px;

  --t: 180ms cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   BASE
   ===================================================================== */
* { box-sizing: border-box; }

body {
  font-family: var(--ui);
  background: var(--cal);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1,h2,h3,h4,h5 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
h1 { font-size: 1.75rem; font-variation-settings: 'opsz' 40; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--nopal); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--nopal-osc); }

::selection { background: var(--cempa); color: var(--tinta); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 99px; border: 3px solid var(--cal); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-30); }

/* Foco visible siempre */
:focus-visible {
  outline: 2px solid var(--nopal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   SIDEBAR
   ===================================================================== */
.cds-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--tinta);
  color: #EDE7E0;
  display: flex; flex-direction: column;
  z-index: 1040;
  transition: transform var(--t);
}

.cds-brand {
  height: var(--header-h);
  display: flex; align-items: center; gap: .7rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cds-brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--nopal), var(--cempa));
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: .95rem;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.cds-brand-text { line-height: 1.1; min-width: 0; }
.cds-brand-text strong {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: #fff; display: block; white-space: nowrap;
}
.cds-brand-text span {
  font-size: .68rem; color: rgba(237,231,224,.5);
  letter-spacing: .08em; text-transform: uppercase;
}

.cds-nav { flex: 1; overflow-y: auto; padding: 1rem .75rem 2rem; }
.cds-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-color: var(--tinta); }

.cds-nav-label {
  font-size: .67rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(237,231,224,.35);
  padding: 1.1rem .75rem .4rem;
}
.cds-nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .75rem; margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: rgba(237,231,224,.78);
  font-size: .875rem; font-weight: 500;
  position: relative;
  transition: background var(--t), color var(--t), transform var(--t);
}
.cds-nav-item i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.cds-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.cds-nav-item.active { background: rgba(15,118,110,.22); color: #fff; }
.cds-nav-item.active::before {
  content: ''; position: absolute; left: -.75rem; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--cempa);
}
.cds-nav-item .badge {
  margin-left: auto; font-size: .68rem; font-weight: 600;
  padding: .15rem .4rem; border-radius: 5px;
}

.cds-nav-user {
  margin: 0 .75rem; padding: .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: .65rem;
}
.cds-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rosa), var(--cempa));
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 600; font-size: .8rem; color: #fff;
  object-fit: cover;
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.cds-main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin var(--t); }

.cds-header {
  height: var(--header-h);
  background: rgba(251,249,246,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 1020;
}
.cds-page-title { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin: 0; }
.cds-page-sub { font-size: .78rem; color: var(--tinta-60); margin: 0; }

.cds-content { padding: 1.5rem; max-width: 1560px; }

@media (max-width: 991.98px) {
  .cds-sidebar { transform: translateX(-100%); }
  .cds-sidebar.show { transform: translateX(0); box-shadow: var(--s4); }
  .cds-main { margin-left: 0; }
  .cds-content { padding: 1rem; }
}
.cds-overlay {
  position: fixed; inset: 0; background: rgba(27,23,20,.4);
  z-index: 1039; opacity: 0; pointer-events: none; transition: opacity var(--t);
}
.cds-overlay.show { opacity: 1; pointer-events: auto; }

/* =====================================================================
   CARDS
   ===================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--s1);
  transition: box-shadow var(--t), transform var(--t);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--linea);
  padding: .9rem 1.15rem;
  display: flex; align-items: center; gap: .6rem;
  font-weight: 600;
}
.card-header h5, .card-header h6 { margin: 0; font-family: var(--display); }
.card-body { padding: 1.15rem; }

/* --- KPI --------------------------------------------------------- */
.kpi {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--r); padding: 1.1rem 1.15rem;
  position: relative; overflow: hidden; height: 100%;
  box-shadow: var(--s1);
  transition: transform var(--t), box-shadow var(--t);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--s3); }
.kpi::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kpi-color, var(--nopal));
}
.kpi-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--kpi-bg, var(--nopal-luz));
  color: var(--kpi-color, var(--nopal));
  margin-bottom: .75rem;
}
.kpi-value {
  font-family: var(--display); font-size: 1.85rem; font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-60); margin-top: .3rem;
}
.kpi-delta { font-size: .78rem; font-weight: 600; margin-top: .5rem; display: flex; align-items: center; gap: .25rem; }
.kpi-delta.up   { color: var(--nopal); }
.kpi-delta.down { color: var(--barro); }

.kpi.nopal    { --kpi-color: var(--nopal);    --kpi-bg: var(--nopal-luz); }
.kpi.rosa     { --kpi-color: var(--rosa);     --kpi-bg: var(--rosa-luz); }
.kpi.cempa    { --kpi-color: #B87800;         --kpi-bg: var(--cempa-luz); }
.kpi.talavera { --kpi-color: var(--talavera); --kpi-bg: var(--talavera-luz); }
.kpi.barro    { --kpi-color: var(--barro);    --kpi-bg: var(--barro-luz); }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
  font-family: var(--ui); font-weight: 500; font-size: .875rem;
  border-radius: var(--r-sm); padding: .5rem .95rem;
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid transparent;
  transition: all var(--t);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--nopal); border-color: var(--nopal); color: #fff;
  box-shadow: var(--s1);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--nopal-osc); border-color: var(--nopal-osc);
  color: #fff; box-shadow: var(--s2);
}
.btn-rosa { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.btn-rosa:hover { background: #B02659; border-color: #B02659; color: #fff; }

.btn-outline-secondary {
  border-color: var(--linea); color: var(--tinta-60); background: #fff;
}
.btn-outline-secondary:hover {
  background: var(--cal-2); border-color: var(--tinta-30); color: var(--tinta);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--tinta-60); }
.btn-ghost:hover { background: var(--cal-2); color: var(--tinta); }
.btn-sm { padding: .32rem .6rem; font-size: .8rem; border-radius: 6px; }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.form-label {
  font-size: .8rem; font-weight: 600; color: var(--tinta);
  margin-bottom: .35rem; letter-spacing: .01em;
}
.form-label .req { color: var(--rosa); }
.form-text { font-size: .76rem; color: var(--tinta-60); }

.form-control, .form-select {
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: .5rem .75rem; font-size: .9rem; font-family: var(--ui);
  background: #fff; color: var(--tinta);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus, .form-select:focus {
  border-color: var(--nopal);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.form-control::placeholder { color: var(--tinta-30); }
.form-control:disabled, .form-select:disabled { background: var(--cal-2); color: var(--tinta-60); }

.input-group-text {
  background: var(--cal-2); border-color: var(--linea);
  color: var(--tinta-60); font-size: .85rem;
}

.form-check-input:checked { background-color: var(--nopal); border-color: var(--nopal); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(15,118,110,.12); border-color: var(--nopal); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--rosa); }
.invalid-feedback { font-size: .76rem; color: var(--rosa); }

/* Fieldset visual */
.fieldset {
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: 1.15rem; margin-bottom: 1.15rem; background: #fff;
}
.fieldset-title {
  font-family: var(--display); font-size: .95rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
  margin: -1.9rem 0 1rem -.4rem; padding: 0 .5rem;
  background: #fff; width: fit-content;
}
.fieldset-title i { color: var(--nopal); }

/* =====================================================================
   TABLAS
   ===================================================================== */
.table {
  font-size: .875rem; margin: 0;
  --bs-table-bg: transparent;
}
.table > thead > tr > th {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-60);
  background: var(--cal-2); border-bottom: 1px solid var(--linea);
  padding: .65rem .8rem; white-space: nowrap;
}
.table > tbody > tr > td {
  padding: .7rem .8rem; vertical-align: middle;
  border-bottom: 1px solid var(--linea);
}
.table > tbody > tr { transition: background var(--t); }
.table > tbody > tr:hover { background: var(--cal); }
.table-num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--mono); font-size: .82rem; }

/* Miniatura en tabla */
.tbl-thumb {
  width: 44px; height: 44px; border-radius: 9px;
  object-fit: cover; background: var(--cal-2);
  border: 1px solid var(--linea); flex-shrink: 0;
}

/* --- DataTables --------------------------------------------------- */
.dataTables_wrapper { padding: 0; }
div.dt-buttons { gap: .35rem; display: flex; flex-wrap: wrap; }
.dt-button {
  background: #fff !important; border: 1px solid var(--linea) !important;
  border-radius: 7px !important; color: var(--tinta-60) !important;
  font-size: .8rem !important; font-weight: 500 !important;
  padding: .35rem .7rem !important; font-family: var(--ui) !important;
  transition: all var(--t) !important;
}
.dt-button:hover { background: var(--cal-2) !important; color: var(--tinta) !important; border-color: var(--tinta-30) !important; }
.dt-button.buttons-excel:hover { border-color: #1D6F42 !important; color: #1D6F42 !important; }
.dt-button.buttons-pdf:hover   { border-color: var(--barro) !important; color: var(--barro) !important; }

.dataTables_filter input {
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: .38rem .7rem .38rem 2rem; font-size: .85rem; min-width: 220px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23A79C93' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.44.44.98.98l3.221 3.22a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.083-.centre'/%3E%3C/svg%3E") no-repeat .6rem center;
}
.dataTables_filter input:focus { outline: none; border-color: var(--nopal); box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
.dataTables_length select { border: 1px solid var(--linea); border-radius: 6px; padding: .3rem 1.6rem .3rem .5rem; font-size: .85rem; }
.dataTables_info { font-size: .8rem; color: var(--tinta-60); }
.page-link { border: 1px solid var(--linea); color: var(--tinta-60); font-size: .82rem; }
.page-item.active .page-link { background: var(--nopal); border-color: var(--nopal); color: #fff; }
.page-link:hover { background: var(--cal-2); color: var(--tinta); }

/* =====================================================================
   BADGES
   ===================================================================== */
.badge {
  font-family: var(--ui); font-weight: 600; font-size: .7rem;
  letter-spacing: .03em; padding: .28em .6em; border-radius: 6px;
}
.b-activo    { background: var(--nopal-luz);    color: var(--nopal-osc); }
.b-vencido   { background: var(--barro-luz);    color: var(--barro); }
.b-archivado { background: var(--cal-2);        color: var(--tinta-60); }
.b-borrador  { background: var(--cempa-luz);    color: #8A5A00; }
.b-pausado   { background: var(--talavera-luz); color: var(--talavera); }
.b-cortesia  { background: var(--rosa-luz);     color: var(--rosa); }
.b-nuevo     { background: var(--nopal-luz);    color: var(--nopal-osc); }
.b-reactivado{ background: var(--talavera-luz); color: var(--talavera); }
.b-destacado { background: linear-gradient(135deg, var(--cempa), #E08700); color: #fff; }

/* Punto de estado */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.on  { background: var(--nopal); box-shadow: 0 0 0 3px var(--nopal-luz); }
.dot.off { background: var(--tinta-30); }
.dot.warn{ background: var(--cempa); box-shadow: 0 0 0 3px var(--cempa-luz); }

/* Cuenta regresiva de vencimiento */
.venc { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.venc.ok    { color: var(--tinta-60); }
.venc.pronto{ color: #B87800; }
.venc.hoy   { color: var(--barro); }
.venc.pasado{ color: var(--tinta-30); text-decoration: line-through; }

/* =====================================================================
   SUBIDA DE IMÁGENES
   ===================================================================== */
.dropzone {
  border: 2px dashed var(--linea); border-radius: var(--r);
  padding: 1.75rem 1rem; text-align: center;
  background: var(--cal); cursor: pointer;
  transition: all var(--t);
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--nopal); background: var(--nopal-luz);
}
.dropzone i { font-size: 1.6rem; color: var(--tinta-30); transition: color var(--t); }
.dropzone:hover i { color: var(--nopal); }

.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.img-item {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  overflow: hidden; border: 1px solid var(--linea); background: var(--cal-2);
  cursor: grab;
}
.img-item:active { cursor: grabbing; }
.img-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--t); }
.img-item:hover img { transform: scale(1.06); }
.img-item .badge-primera {
  position: absolute; top: .35rem; left: .35rem;
  background: var(--cempa); color: #fff; font-size: .62rem;
  padding: .15rem .35rem; border-radius: 4px; font-weight: 700;
}
.img-item .btn-quitar {
  position: absolute; top: .35rem; right: .35rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(27,23,20,.65); color: #fff; border: 0;
  display: grid; place-items: center; font-size: .7rem;
  opacity: 0; transition: opacity var(--t);
}
.img-item:hover .btn-quitar { opacity: 1; }
.img-item .btn-quitar:hover { background: var(--rosa); }
.img-item.sortable-ghost { opacity: .4; }

/* =====================================================================
   CHIPS / SELECTORES
   ===================================================================== */
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem; border-radius: 99px;
  border: 1px solid var(--linea); background: #fff;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: all var(--t); user-select: none;
}
.chip input { display: none; }
.chip:hover { border-color: var(--tinta-30); background: var(--cal-2); }
.chip.on { border-color: var(--nopal); background: var(--nopal-luz); color: var(--nopal-osc); font-weight: 600; }
.chip img { height: 16px; width: auto; object-fit: contain; }

/* Tarjeta de periodo (selector de duración) */
.periodo-card {
  border: 1.5px solid var(--linea); border-radius: var(--r);
  padding: .85rem; cursor: pointer; text-align: center;
  background: #fff; transition: all var(--t); height: 100%;
}
.periodo-card:hover { border-color: var(--nopal); transform: translateY(-2px); box-shadow: var(--s2); }
.periodo-card.on {
  border-color: var(--nopal); background: var(--nopal-luz);
  box-shadow: 0 0 0 3px rgba(15,118,110,.1);
}
.periodo-card input { display: none; }
.periodo-nombre { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.periodo-precio { font-size: 1.25rem; font-weight: 700; color: var(--nopal); font-variant-numeric: tabular-nums; }
.periodo-com {
  font-size: .7rem; font-weight: 600; color: var(--tinta-60);
  background: var(--cal-2); border-radius: 5px; padding: .1rem .35rem;
  display: inline-block; margin-top: .3rem;
}
.periodo-card.on .periodo-com { background: #fff; color: var(--nopal-osc); }

/* =====================================================================
   ALERTAS
   ===================================================================== */
.alert { border: 1px solid; border-radius: var(--r); font-size: .875rem; padding: .8rem 1rem; }
.alert-success { background: var(--nopal-luz); border-color: #A7DCD5; color: var(--nopal-osc); }
.alert-danger  { background: var(--barro-luz); border-color: #F5C2AC; color: var(--barro); }
.alert-warning { background: var(--cempa-luz); border-color: #F5D98A; color: #8A5A00; }
.alert-info    { background: var(--talavera-luz); border-color: #B9CFF2; color: #1B4A9C; }

/* Cinta de aviso de cortesías */
.cortesia-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem; border-radius: var(--r-sm);
  background: var(--rosa-luz); border: 1px solid #F4C2D4;
  font-size: .82rem; color: #93214B;
}
.cortesia-pips { display: flex; gap: .25rem; margin-left: auto; }
.cortesia-pip {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .6rem; font-weight: 700;
  background: #fff; border: 1.5px solid var(--rosa); color: var(--rosa);
}
.cortesia-pip.usada { background: var(--rosa); color: #fff; }
.cortesia-pip.na { border-color: var(--tinta-30); color: var(--tinta-30); background: var(--cal-2); }

/* =====================================================================
   MODALES
   ===================================================================== */
.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--s4); }
.modal-header { border-bottom: 1px solid var(--linea); padding: 1.1rem 1.35rem; }
.modal-title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--linea); padding: .9rem 1.35rem; gap: .5rem; }
.modal-backdrop.show { opacity: .45; }

/* =====================================================================
   GRÁFICAS
   ===================================================================== */
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 200px; }

/* Leyenda propia */
.chart-legend { display: flex; flex-wrap: wrap; gap: .85rem; font-size: .78rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; color: var(--tinta-60); }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; }

/* =====================================================================
   ESTADO VACÍO
   ===================================================================== */
.vacio { text-align: center; padding: 2.5rem 1rem; }
.vacio i { font-size: 2.2rem; color: var(--tinta-30); }
.vacio h5 { font-family: var(--display); margin: .75rem 0 .25rem; }
.vacio p { color: var(--tinta-60); font-size: .875rem; max-width: 340px; margin: 0 auto 1rem; }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
.login-arte {
  background: var(--tinta);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 3rem; color: #EDE7E0;
}
/* Trama de fachadas: la firma visual del login */
.login-arte::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--nopal) 0 0), linear-gradient(var(--rosa) 0 0),
    linear-gradient(var(--cempa) 0 0), linear-gradient(var(--talavera) 0 0);
  background-size: 90px 140px, 70px 190px, 110px 100px, 80px 160px;
  background-position: 8% 100%, 30% 100%, 55% 100%, 78% 100%;
  background-repeat: no-repeat;
  opacity: .18;
  filter: blur(0.5px);
}
.login-arte::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 100%, transparent 30%, var(--tinta) 78%);
}
.login-arte > * { position: relative; z-index: 1; }
.login-arte h1 {
  font-family: var(--display); font-size: 2.6rem; font-weight: 700;
  color: #fff; line-height: 1.08; letter-spacing: -.025em;
  font-variation-settings: 'opsz' 100;
  max-width: 9em;
}
.login-arte h1 em { font-style: italic; color: var(--cempa); }
.login-arte p { color: rgba(237,231,224,.6); max-width: 30ch; font-size: .95rem; }

.login-form {
  display: grid; place-items: center; align-content: center;
  padding: 2rem; background: var(--cal); position: relative;
}
.login-card { width: 100%; max-width: 370px; }

.login-body { margin: 0; background: var(--cal); }
.login-arte-inner { display: flex; flex-direction: column; gap: 1.25rem; margin: auto 0; }

.login-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.login-logo-mark {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--nopal); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.login-logo strong {
  display: block; color: #fff; font-family: var(--display);
  font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
}
.login-logo span {
  display: block; color: var(--cempa); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .16em;
}

.login-arte-pie { display: flex; gap: 2rem; }
.login-arte-pie div { color: rgba(237,231,224,.55); font-size: .8rem; }
.login-arte-pie strong {
  display: block; color: #fff; font-family: var(--mono);
  font-size: 1.5rem; font-weight: 600; line-height: 1.2;
}

.login-card-head { margin-bottom: 1.5rem; }
.login-card-head h2 {
  font-family: var(--display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .25rem;
}
.login-card-head p { color: var(--tinta-60); font-size: .9rem; margin: 0; }

/* Campo con icono a la izquierda y ojo a la derecha */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon > i {
  position: absolute; left: .85rem; color: var(--tinta-30);
  font-size: 1rem; pointer-events: none; z-index: 2;
}
.input-icon .form-control { padding-left: 2.5rem; }
.input-icon:focus-within > i { color: var(--nopal); }
.input-eye {
  position: absolute; right: .35rem; z-index: 2;
  background: none; border: 0; color: var(--tinta-30);
  padding: .4rem .5rem; border-radius: 8px; cursor: pointer;
  transition: color var(--t), background var(--t);
}
.input-eye:hover { color: var(--tinta); background: var(--cal-2); }

.login-pie {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea);
  color: var(--tinta-30); font-size: .78rem; line-height: 1.5;
}
.login-pie i { color: var(--nopal); }
.login-foot {
  position: absolute; bottom: 1.5rem;
  color: var(--tinta-30); font-size: .75rem;
}

@media (max-width: 991.98px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-arte { display: none; }
  .login-foot { position: static; margin-top: 2rem; }
}

/* =====================================================================
   COMPONENTES DE FORMULARIO
   ===================================================================== */
/* Tarjeta que pide atención (el bloque de cobro) */
.card-destaca {
  border-color: var(--nopal);
  box-shadow: 0 0 0 3px rgba(15,118,110,.07), var(--s2);
}

/* Aviso en línea */
.aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .7rem .85rem; border-radius: var(--r-sm);
  background: var(--talavera-luz); color: #1B4A9C;
  font-size: .82rem; line-height: 1.45;
}
.aviso i { margin-top: .1rem; }
.aviso-cempa { background: var(--cempa-luz); color: #8A5A00; }
.aviso-barro { background: var(--barro-luz); color: var(--barro); }

/* Caja de cortesías */
.cortesia-caja {
  padding: .85rem; border-radius: var(--r);
  background: var(--cal); border: 1px dashed var(--linea);
}

/* Rejilla de periodos: 2x2 en el panel lateral */
.periodo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.periodo-pct {
  display: block; font-size: .68rem; color: var(--tinta-30);
  margin-top: .15rem;
}
.periodo-card.on .periodo-pct { color: var(--nopal-osc); }

/* Cálculo en vivo de la comisión */
.calculo {
  background: var(--nopal-luz); border-radius: var(--r-sm);
  padding: .7rem .85rem;
}
.calculo-fila {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .84rem; color: var(--nopal-osc);
}
.calculo-fila strong { font-family: var(--mono); font-size: 1.05rem; }
.calculo-fila.sutil {
  color: var(--tinta-60); font-size: .76rem;
  margin-top: .3rem; padding-top: .3rem;
  border-top: 1px solid rgba(15,118,110,.15);
}
.calculo-fila.sutil span:last-child { font-family: var(--mono); }

/* Bloque desactivado (cuando es cortesía no se cobra) */
.apagado { opacity: .4; pointer-events: none; filter: saturate(.3); transition: opacity var(--t); }

/* Interruptor */
.switch { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.switch input { display: none; }
.switch-track {
  width: 40px; height: 23px; flex: none; border-radius: 99px;
  background: var(--linea); position: relative; transition: background var(--t);
}
.switch-dot {
  position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: var(--s1);
  transition: transform var(--t);
}
.switch input:checked + .switch-track { background: var(--nopal); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(15,118,110,.2); }

/* Logo dentro de un chip de envío */
.chip-logo { height: 16px; width: auto; object-fit: contain; }

/* Imagen que se está arrastrando */
.img-item.arrastrando { opacity: .35; }
/* Solo la primera lleva el listón de portada */
.img-item .badge-primera { display: none; }
.img-item.es-portada .badge-primera { display: block; }

/* Previsualización de archivos por subir */
.img-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.img-preview img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--linea);
}

/* =====================================================================
   LISTADOS: filtros, miniaturas y acciones
   ===================================================================== */
/* Pestañas de filtro */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 99px;
  border: 1px solid var(--linea); background: #fff;
  color: var(--tinta-60); font-size: .84rem; font-weight: 500;
  text-decoration: none; transition: all var(--t);
}
.filtro-tab:hover { border-color: var(--tinta-30); color: var(--tinta); }
.filtro-tab.on {
  background: var(--tinta); border-color: var(--tinta); color: #fff;
}
.filtro-n {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  background: var(--cal-2); color: var(--tinta-60);
  padding: .05rem .35rem; border-radius: 5px; min-width: 1.4em; text-align: center;
}
.filtro-tab.on .filtro-n { background: rgba(255,255,255,.18); color: #fff; }
/* Si hay cosas por vencer, que se note */
.filtro-tab.urge:not(.on) { border-color: var(--cempa); color: #B87800; }
.filtro-tab.urge:not(.on) .filtro-n { background: var(--cempa-luz); color: #B87800; }

/* Miniatura cuadrada en tablas: recorta con cover pero el thumb ya viene cuadrado */
.mini-img {
  width: 40px; height: 40px; flex: none; border-radius: 9px;
  object-fit: cover; background: var(--cal-2);
  border: 1px solid var(--linea);
}
.mini-img.vacia {
  display: grid; place-items: center;
  color: var(--tinta-30); font-size: .95rem;
}

/* Botonera de fila */
.acciones { display: inline-flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.acciones form { margin: 0; }
.btn-icono {
  width: 30px; height: 30px; padding: 0; border: 0;
  display: inline-grid; place-items: center;
  border-radius: 7px; background: transparent;
  color: var(--tinta-60); font-size: .9rem; cursor: pointer;
  text-decoration: none; transition: all var(--t);
}
.btn-icono:hover { background: var(--cal-2); color: var(--tinta); }
.btn-icono.on { color: var(--cempa); }
.btn-icono.peligro:hover { background: var(--barro-luz); color: var(--barro); }

/* =====================================================================
   COMPONENTES DEL PANEL
   ===================================================================== */
/* Rejilla de KPIs: se acomoda sola sin media queries */
.kpi-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Subtítulo dentro del encabezado de una tarjeta */
.card-sub {
  display: block; color: var(--tinta-60);
  font-size: .78rem; margin-top: .15rem;
}

/* Leyenda manual de las gráficas */
.leyenda { display: flex; gap: 1rem; font-size: .78rem; color: var(--tinta-60); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Tabla sin bordes exteriores, para meterla dentro de una card */
.tabla-limpia { font-size: .875rem; }
.tabla-limpia > thead > tr > th {
  background: var(--cal); border-bottom: 1px solid var(--linea);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-60); font-weight: 600; padding: .6rem 1.15rem;
}
.tabla-limpia > tbody > tr > td {
  padding: .7rem 1.15rem; vertical-align: middle;
  border-bottom: 1px solid var(--linea);
}
.tabla-limpia > tbody > tr:last-child > td { border-bottom: 0; }

/* Renglón secundario dentro de una celda */
.td-sub { font-size: .72rem; color: var(--tinta-30); margin-top: .1rem; }

/* Medallas del ranking */
.rank {
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  background: var(--cal-2); color: var(--tinta-60);
}
.rank-1 { background: var(--cempa); color: #4A3200; }
.rank-2 { background: #DFD8CE; color: #4A4239; }
.rank-3 { background: var(--barro-luz); color: var(--barro); }

/* Cifra protagonista de una tarjeta */
.monto-grande {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--tinta); line-height: 1.1;
}

/* Etiqueta de solo lectura (en tablas), no confundir con .chip de formulario */
.chip-tipo {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  color: var(--c, var(--nopal));
  background: color-mix(in srgb, var(--c, var(--nopal)) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--nopal)) 22%, transparent);
}
.chip-anuncio   { --c: var(--nopal); }
.chip-comercio  { --c: var(--talavera); }
.chip-promocion { --c: var(--rosa); }

.text-sm { font-size: .82rem; }
.fw-600  { font-weight: 600; }

/* =====================================================================
   UTILIDADES
   ===================================================================== */
.text-muted  { color: var(--tinta-60) !important; }
.text-nopal  { color: var(--nopal) !important; }
.text-rosa   { color: var(--rosa) !important; }
.text-cempa  { color: #B87800 !important; }
.text-barro  { color: var(--barro) !important; }
.bg-cal      { background: var(--cal) !important; }
.mono        { font-family: var(--mono); font-size: .85em; }
.num         { font-variant-numeric: tabular-nums; }
.display-face{ font-family: var(--display); }
.hr-suave    { border-color: var(--linea); opacity: 1; }

.folio {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--tinta-60); background: var(--cal-2);
  padding: .12rem .4rem; border-radius: 5px;
}

/* Tooltip */
.tooltip-inner { background: var(--tinta); font-size: .78rem; border-radius: 6px; padding: .35rem .6rem; }
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--tinta); }

/* Toast */
.toast {
  border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--s3); font-size: .875rem;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Impresión */
@media print {
  .cds-sidebar, .cds-header, .btn, .dt-buttons { display: none !important; }
  .cds-main { margin: 0; }
  .card { border: 1px solid #ddd; box-shadow: none; }
}

/* Guía de pasos (anuncio nuevo) */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.pasos li {
  counter-increment: paso; position: relative;
  padding: 0 0 .9rem 2rem; font-size: .84rem;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cal-2); color: var(--tinta-30);
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
}
.pasos li:not(:last-child)::after {
  content: ''; position: absolute; left: 10.5px; top: 24px; bottom: 4px;
  width: 1px; background: var(--linea);
}
.pasos li.on::before { background: var(--nopal); color: #fff; }
.pasos strong { display: block; color: var(--tinta); font-weight: 600; }
.pasos span { color: var(--tinta-60); font-size: .78rem; }

/* Contador de caracteres */
.contador-chars {
  font-family: var(--mono); font-size: .68rem; color: var(--tinta-30);
  text-align: right; margin-top: .2rem;
}

/* Renglón de totales al pie de una tabla */
.fila-total td {
  background: var(--cal); border-top: 2px solid var(--linea) !important;
  padding-top: .7rem; padding-bottom: .7rem;
}

/* =====================================================================
   CARTAS QR (comercios)
   ===================================================================== */
/* Elegir si la carta es la misma diario o cambia por día */
.modo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.modo-card {
  border: 1.5px solid var(--linea); border-radius: var(--r);
  padding: 1rem; cursor: pointer; background: #fff;
  transition: all var(--t); text-align: left;
}
.modo-card:hover { border-color: var(--nopal); box-shadow: var(--s2); }
.modo-card input { display: none; }
.modo-card i { font-size: 1.4rem; color: var(--tinta-30); display: block; margin-bottom: .4rem; }
.modo-card strong { display: block; font-size: .88rem; margin-bottom: .15rem; }
.modo-card span { font-size: .74rem; color: var(--tinta-60); line-height: 1.35; display: block; }
.modo-card.on {
  border-color: var(--nopal); background: var(--nopal-luz);
  box-shadow: 0 0 0 3px rgba(15,118,110,.1);
}
.modo-card.on i { color: var(--nopal); }

/* Cartas cargadas, agrupadas por día */
.cartas-lista { display: flex; flex-direction: column; gap: .85rem; }
.carta-dia-tit {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-60); font-weight: 600; margin-bottom: .35rem;
}
.carta-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border: 1px solid var(--linea);
  border-radius: var(--r-sm); background: #fff; margin-bottom: .35rem;
}
.carta-ico {
  width: 32px; height: 32px; flex: none; border-radius: 7px;
  display: grid; place-items: center; font-size: .9rem;
}
.carta-ico.tipo-pdf    { background: var(--barro-luz); color: var(--barro); }
.carta-ico.tipo-imagen { background: var(--talavera-luz); color: var(--talavera); }
.carta-ico.tipo-texto  { background: var(--nopal-luz); color: var(--nopal); }

.agregar-carta {
  padding: 1rem; border-radius: var(--r);
  background: var(--cal); border: 1px dashed var(--linea);
}
.agregar-carta h6 { font-family: var(--display); font-size: .9rem; }

/* Color + hex sincronizados */
.color-campo { display: flex; gap: .4rem; }
.color-campo .form-control-color { width: 44px; flex: none; padding: .2rem; }

/* Vista previa de la hoja QR */
.previa-carta {
  border: 2px solid var(--nopal); border-radius: var(--r);
  padding: 1.4rem; text-align: center; max-width: 260px;
  transition: all var(--t);
}
.previa-logo { height: 34px; margin-bottom: .5rem; }
.previa-logo img { height: 100%; width: auto; object-fit: contain; }
.previa-logo i { font-size: 1.6rem; opacity: .35; }
.previa-nombre {
  font-size: 1.25rem; font-weight: 700; line-height: 1.15;
  margin-bottom: .75rem; word-break: break-word;
}
.previa-qr i { font-size: 4.5rem; line-height: 1; }
.previa-url { font-family: var(--mono); font-size: .62rem; opacity: .65; margin-top: .5rem; }

.liga-slug {
  font-family: var(--mono); font-size: .78rem;
  color: var(--nopal); text-decoration: none;
}
.liga-slug:hover { text-decoration: underline; }
.liga-slug i { font-size: .65rem; opacity: .6; }

/* =====================================================================
   TARIFAS Y EMBAJADORAS
   ===================================================================== */
.tarifa-card { border-top: 3px solid var(--nopal); }
.tarifa-card:nth-child(1) { border-top-color: var(--nopal); }

/* Una embajadora dada de baja se ve apagada, pero legible */
.card-inactiva { opacity: .62; background: var(--cal); }
.card-inactiva:hover { opacity: 1; }

/* Avatar */
.avatar-lg {
  width: 48px; height: 48px; flex: none; border-radius: 13px;
  object-fit: cover; background: var(--cal-2); border: 1px solid var(--linea);
}
.avatar-letra {
  display: grid; place-items: center;
  background: var(--nopal); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  border: 0;
}

/* Tres cifras rápidas dentro de una tarjeta */
.mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  padding: .7rem; border-radius: var(--r-sm); background: var(--cal);
}
.mini-stats > div { text-align: center; min-width: 0; }
.mini-stat-n {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: .92rem; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-stat-t {
  display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-30); margin-top: .1rem;
}

/* Clasificaciones */
.clas-card { transition: box-shadow var(--t); }
.clas-card.arrastrando { opacity: .4; }
.clas-mover {
  color: var(--tinta-30); cursor: grab; font-size: 1rem;
  padding: .2rem; margin-left: -.3rem;
}
.clas-mover:active { cursor: grabbing; }
.clas-ico {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.15rem;
  color: var(--c, var(--nopal));
  background: color-mix(in srgb, var(--c, var(--nopal)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--nopal)) 22%, transparent);
}

/* Envíos */
.envio-lista { display: flex; flex-direction: column; gap: .5rem; }
.envio-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .7rem; border: 1px solid var(--linea);
  border-radius: var(--r-sm); background: #fff;
}
.envio-item.apagada { opacity: .5; }
.envio-logo {
  width: 40px; height: 40px; flex: none; border-radius: 9px;
  object-fit: contain; background: var(--cal-2); padding: .3rem;
  border: 1px solid var(--linea);
}
.envio-logo.sin-logo {
  display: grid; place-items: center; padding: 0;
  color: var(--c, var(--tinta-30)); font-size: 1.05rem;
}

/* Contratos */
.fila-cancelada { opacity: .5; }
.fila-cancelada td { text-decoration: line-through; text-decoration-color: var(--tinta-30); }
.liga-limpia { color: var(--tinta); text-decoration: none; font-weight: 600; }
.liga-limpia:hover { color: var(--nopal); text-decoration: underline; }

/* Promociones */
.promo-card { overflow: hidden; }
.promo-img { position: relative; aspect-ratio: 1/1; background: var(--cal-2); }
.promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.promo-card:hover .promo-img img { transform: scale(1.06); }
.promo-sin-img { display: grid; place-items: center; height: 100%; color: var(--tinta-30); font-size: 2rem; }
.promo-estado { position: absolute; top: .5rem; right: .5rem; }