/* ==========================================================================
   Capa propia sobre Metronic — solo lo que el bundle no cubre.
   ========================================================================== */

/* ==========================================================================
   Variables de layout que el bundle deja sin definir
   ========================================================================== */

:root{
  --bs-app-sidebar-width: 265px;
  --bs-app-sidebar-base-bg-color: #080a11;      /* barra lateral oscura */
  --sidebar-borde: rgba(255,255,255,.07);
  --bs-app-header-base-bg-color: var(--bs-body-bg);
  --bs-app-header-base-border-bottom: 1px solid var(--bs-gray-200);
  --bs-app-footer-base-bg-color: var(--bs-body-bg);
  --bs-app-footer-base-border-top: 1px solid var(--bs-gray-200);
}
[data-bs-theme=dark]{
  --bs-app-sidebar-base-bg-color: #05070c;
  --bs-app-header-base-bg-color: var(--bs-body-bg);
  --bs-app-header-base-border-bottom: 1px solid var(--bs-gray-200);
}

.app-sidebar{width:var(--bs-app-sidebar-width);background-color:var(--bs-app-sidebar-base-bg-color)}
.app-header{background-color:var(--bs-app-header-base-bg-color);
  border-bottom:var(--bs-app-header-base-border-bottom)}
.app-footer{background-color:var(--bs-app-footer-base-bg-color);
  border-top:var(--bs-app-footer-base-border-top)}

/* Menú lateral */
.app-sidebar .menu .menu-item .menu-link{color:#8f95a6;border-radius:.65rem}
.app-sidebar .menu .menu-item .menu-link .menu-title{color:#8f95a6}
.app-sidebar .menu .menu-item .menu-link:hover{background:rgba(255,255,255,.06)}
.app-sidebar .menu .menu-item .menu-link:hover,
.app-sidebar .menu .menu-item .menu-link:hover .menu-title{color:#fff}
.app-sidebar .menu .menu-item .menu-link.active{background:var(--bs-primary)}
.app-sidebar .menu .menu-item .menu-link.active,
.app-sidebar .menu .menu-item .menu-link.active .menu-title{color:#fff;font-weight:600}

/* --------------------------------------------------------------- marca  */

.marca-sigla{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 9px;border-radius:9px;
  background:var(--bs-primary);color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;
}
.app-sidebar-logo{height:70px;border-bottom:1px solid rgba(255,255,255,.06)}
.app-sidebar-footer{border-top:1px solid rgba(255,255,255,.06);padding-top:14px}
.bloque-usuario{min-width:0}

/* Iconos SVG dentro del menú lateral */
.menu-icon svg{width:20px;height:20px}
.app-sidebar .menu-link .menu-icon{color:#8a8f9c}
.app-sidebar .menu-link.active .menu-icon,
.app-sidebar .menu-link:hover .menu-icon{color:var(--bs-primary)}

/* --------------------------------------------------------------- tablas */

/* La cabecera se queda fija dentro del contenedor con scroll, no de la página. */
.tabla-scroll{overflow-x:auto;overflow-y:visible}
.table thead th{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--bs-gray-600);font-weight:700;white-space:nowrap;vertical-align:middle;
}
.table td{vertical-align:middle}
.table .col-chk{width:42px}
.table .col-acc{width:100px;text-align:end}
.table .num{text-align:end;font-variant-numeric:tabular-nums}
.celda-cedula{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.8rem;white-space:nowrap}
.celda-tel{white-space:nowrap;font-variant-numeric:tabular-nums}
.celda-dir{max-width:260px}
tr.marcada{background:var(--bs-primary-light)!important}
.tabla-cruda td{font-size:.78rem;white-space:nowrap}
.tabla-cruda .fila-cabecera td{background:var(--bs-gray-100);font-weight:700}

/* ---------------------------------------------------------------- KPIs  */

.kpi{border:1px solid var(--bs-gray-200);border-radius:.75rem;background:var(--bs-body-bg);
  padding:1rem 1.15rem;position:relative;overflow:hidden;height:100%}
.kpi::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--bs-primary)}
.kpi .kpi-valor{display:block;font-size:1.6rem;font-weight:700;line-height:1.2;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--bs-gray-900)}
.kpi .kpi-etq{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--bs-gray-600)}
.kpi-primary::before{background:var(--bs-primary)}
.kpi-danger::before{background:var(--bs-danger)}
.kpi-success::before{background:var(--bs-success)}
.kpi-warning::before{background:var(--bs-warning)}
.kpi-info::before{background:var(--bs-info)}
.kpi-secondary::before{background:var(--bs-gray-400)}

/* ------------------------------------------------------------- campañas */

.burbuja{background:var(--bs-primary-light);border:1px solid var(--bs-gray-200);
  border-radius:1rem 1rem 1rem .25rem;padding:.85rem 1.1rem;white-space:pre-wrap;
  line-height:1.6;color:var(--bs-gray-800)}
.burbuja.real{background:var(--bs-success-light);border-color:var(--bs-success-active)}
.variables{display:flex;gap:.4rem;flex-wrap:wrap}
.variables .btn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem}
.alcance{text-align:center;padding:1.1rem;background:var(--bs-gray-100);border-radius:.75rem}
.alcance b{display:block;font-size:2.1rem;line-height:1.1;color:var(--bs-primary);
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- canal de envío */

.canal-opcion{display:flex;align-items:flex-start;gap:.25rem;cursor:pointer;height:100%;
  border:1px solid var(--bs-gray-300);border-radius:.75rem;padding:.9rem 1rem;
  transition:border-color .12s,background .12s}
.canal-opcion:hover{border-color:var(--bs-primary);background:var(--bs-primary-light)}
.canal-opcion:has(input:checked){border-color:var(--bs-primary);background:var(--bs-primary-light)}
.canal-opcion.bloqueado{opacity:.5;cursor:not-allowed}
.canal-opcion b{display:block;font-size:.95rem;color:var(--bs-gray-900)}
.canal-opcion small{font-size:.75rem;line-height:1.4}

.border-dashed{border-style:dashed!important}

/* ------------------------------------------------------------ importar  */

.zona-archivo{position:relative;border:2px dashed var(--bs-gray-300);border-radius:.9rem;
  padding:2.4rem 1.2rem;text-align:center;background:var(--bs-gray-100);
  transition:border-color .15s,background .15s}
.zona-archivo:hover,.zona-archivo.encima{border-color:var(--bs-primary);
  background:var(--bs-primary-light)}
.zona-archivo input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}

/* ------------------------------------------------------- marca / logos  */

.vista-logo{border:1px solid var(--bs-gray-200);border-radius:.65rem;background:var(--bs-gray-100);
  padding:.75rem;display:flex;align-items:center;justify-content:center;min-height:80px}
.vista-logo img{max-height:56px;max-width:100%}
.vista-favicon img{width:32px;height:32px;object-fit:contain}

/* -------------------------------------------------------- formularios   */

/* Los formularios de alta/edición van centrados y con ancho cómodo. */
.form-centrado{max-width:900px;margin-inline:auto}
.form-centrado.estrecho{max-width:680px}
.seccion-form{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--bs-gray-600);margin:1.75rem 0 1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--bs-gray-200)}
.seccion-form:first-child{margin-top:0}

/* ---------------------------------------------------- páginas públicas */

.pagina-publica{background:var(--bs-gray-100);min-height:100vh;display:flex;flex-direction:column}
.publico-ancho{width:min(880px,94vw);margin-inline:auto}
.publico-cabecera{background:var(--bs-body-bg);border-bottom:1px solid var(--bs-gray-200);
  padding:1rem 0}
.pagina-publica main{flex:1 0 auto}
.publico-caja{background:var(--bs-body-bg);border:1px solid var(--bs-gray-200);
  border-radius:1rem;padding:2.5rem;box-shadow:0 4px 24px rgba(16,30,60,.05)}
.publico-pie{border-top:1px solid var(--bs-gray-200);padding:1.5rem 0 2.5rem;margin-top:2rem}

.consentimiento{background:var(--bs-gray-100);border:1px solid var(--bs-gray-300);
  border-radius:.65rem;padding:1rem}
.consentimiento.mal{border-color:var(--bs-danger);background:var(--bs-danger-light)}

/* textos legales */
.legal h1{font-size:1.6rem;font-weight:700;color:var(--bs-gray-900);margin:0 0 .5rem}
.legal h2{font-size:1.05rem;font-weight:700;color:var(--bs-gray-900);margin:2rem 0 .6rem}
.legal p,.legal li{color:var(--bs-gray-700);line-height:1.75}
.legal ul{padding-left:1.25rem}
.legal .destacado-caja{background:var(--bs-primary-light);border-left:4px solid var(--bs-primary);
  border-radius:.5rem;padding:1rem 1.25rem}
.legal mark{background:#fff3cd;color:#7a5c00;padding:0 .25rem;border-radius:.2rem}

/* ------------------------------------------------------- proveedores    */

details.proveedor{border:1px solid var(--bs-gray-200);border-radius:.65rem;
  padding:.75rem 1rem;margin-bottom:.75rem;background:var(--bs-body-bg)}
details.proveedor[open]{border-color:var(--bs-gray-300);box-shadow:0 2px 10px rgba(16,30,60,.05)}
details.proveedor>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  flex-wrap:wrap;gap:.25rem}
details.proveedor>summary::-webkit-details-marker{display:none}
details.proveedor>summary::before{content:'▸';margin-right:.5rem;color:var(--bs-gray-500);
  transition:transform .15s ease;display:inline-block}
details.proveedor[open]>summary::before{transform:rotate(90deg)}

/* --------------------------------------- selector múltiple con búsqueda */

.multi{position:relative}
.multi-campo{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-height:calc(1.5em + 1.55rem + 2px);
  padding:.5rem .75rem;border-radius:.475rem;background:var(--bs-gray-100);
  border:1px solid transparent;cursor:text;transition:color .2s ease,background-color .2s ease}
.multi-campo:hover{background:var(--bs-gray-200)}
.multi.abierto .multi-campo{background:var(--bs-gray-200);border-color:var(--bs-gray-300)}
.multi-vacio{color:var(--bs-gray-500);font-size:.925rem}
.multi-etq{display:inline-flex;align-items:center;gap:.35rem;background:var(--bs-primary);
  color:#fff;border-radius:.35rem;padding:.15rem .3rem .15rem .5rem;font-size:.8rem;
  font-weight:600;line-height:1.5;max-width:100%}
.multi-etq span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi-quitar{border:0;background:rgba(255,255,255,.25);color:#fff;border-radius:.25rem;
  width:16px;height:16px;line-height:1;font-size:.85rem;padding:0;cursor:pointer;flex:0 0 auto}
.multi-quitar:hover{background:rgba(0,0,0,.35)}
.multi-buscar{flex:1 1 90px;min-width:90px;border:0;background:transparent;outline:0;
  padding:.1rem 0;font-size:.925rem;color:var(--bs-gray-800)}
.multi-lista{display:none;position:absolute;z-index:130;left:0;right:0;top:calc(100% + 4px);
  max-height:260px;overflow:auto;background:var(--bs-body-bg);border:1px solid var(--bs-gray-200);
  border-radius:.475rem;box-shadow:0 12px 32px rgba(16,30,60,.14);padding:.35rem}
.multi.abierto .multi-lista{display:block}
.multi-opcion{padding:.45rem .65rem;border-radius:.35rem;font-size:.9rem;cursor:pointer;
  color:var(--bs-gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.multi-opcion:hover,.multi-opcion.activa{background:var(--bs-gray-100)}
.multi-opcion.puesta{color:var(--bs-primary);font-weight:600}
.multi-opcion.puesta::after{content:'✓';float:right;margin-left:.5rem}
.multi-nada{padding:.6rem .65rem;font-size:.85rem;color:var(--bs-gray-500)}

/* -------------------------------------------------------- selección     */

.barra-seleccion{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;
  background:var(--bs-gray-900);color:#fff;border-radius:.85rem;padding:.7rem 1rem;
  display:flex;align-items:center;gap:.75rem;box-shadow:0 12px 40px rgba(16,30,60,.28);
  animation:subir .18s ease-out}
@keyframes subir{from{opacity:0;transform:translate(-50%,14px)}
                 to{opacity:1;transform:translate(-50%,0)}}
.barra-seleccion .cuenta{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- login    */

.pagina-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:linear-gradient(140deg,#0b1b33,#14315c 55%,#1b84ff)}
.caja-login{width:min(400px,94vw)}

/* ----------------------------------------------------------- SweetAlert */

.swal2-popup.swal-app{border-radius:1rem;font-family:inherit}
.swal-ficha{background:var(--bs-gray-100);border:1px solid var(--bs-gray-200);
  border-radius:.65rem;padding:.8rem;text-align:start}
.swal-ficha b{display:block;font-size:1rem;color:var(--bs-gray-900)}
.swal-ficha span{display:block;font-size:.82rem;color:var(--bs-gray-600);margin-top:.15rem;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.swal-lista{text-align:start;margin:.5rem 0 0;padding:.75rem .75rem .75rem 1.8rem;
  max-height:210px;overflow:auto;background:var(--bs-gray-100);
  border:1px solid var(--bs-gray-200);border-radius:.65rem;font-size:.85rem}
.swal-lista li.mas{list-style:none;margin-left:-1rem;color:var(--bs-gray-600);font-style:italic}
.swal-nota{font-size:.82rem;color:var(--bs-danger);margin:.75rem 0 0}

/* ------------------------------------------------------------ impresión */

@media print{
  .app-sidebar,.app-header,.app-footer,.no-imprimir,
  .col-chk,.col-acc{display:none!important}
  .app-wrapper,.app-main{margin:0!important;padding:0!important}
  .card{border:0!important;box-shadow:none!important}
  body{background:#fff}
}
