/* =========================================================================
   SMS Masivos — Design System Tokens (Structural layer)
   -------------------------------------------------------------------------
   Define los tokens estructurales del panel: tipografía, neutrals, colores
   semánticos (estados), spacing, radius, shadows y motion. Estos valores son
   IDÉNTICOS en los 12 temas — el color de marca (primary/deep) vive en
   smsmasivos-design-tokens-color.css que cambia según [data-theme].

   Carga: SIEMPRE en view.generalassets.php, después del style-base.css.
   Fuente de verdad: contexto/DESIGN.md
   ========================================================================= */

:root {
	/* ---- Tipografía ----
	   Familias de fuentes. Outfit para títulos (h1-h4, .card-title, .modal-title).
	   Inter para body, labels, botones, inputs, tablas. JetBrains Mono para code.
	   Cargadas via Google Fonts en view.general.php. */
	--app-font-display: 'Outfit', 'Poppins', sans-serif;
	--app-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--app-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

	/* ---- Neutrals (slate) ----
	   Escala de grises del panel — fondos, bordes, texto secundario.
	   900 = más oscuro (texto principal), 100 = más claro (page bg), white = cards/inputs.
	   Tinte azulado (Tailwind slate) para armonizar con el primary blue de la guía. */
	--app-neutral-900: #0f172a;  /* texto principal oscuro, footer bg */
	--app-neutral-800: #1e293b;  /* texto body, headings sobre bg claro */
	--app-neutral-700: #334155;  /* texto secundario, subheaders */
	--app-neutral-600: #64748b;  /* placeholders, captions, .text-muted */
	--app-neutral-500: #94a3b8;  /* texto disabled */
	--app-neutral-400: #cbd5e1;  /* bordes hover, elementos inactivos */
	--app-neutral-300: #e2e8f0;  /* bordes default, dividers de tablas */
	--app-neutral-200: #f1f5f9;  /* bg alternantes, input groups */
	--app-neutral-100: #f8fafc;  /* page background */
	--app-neutral-white: #ffffff; /* cards, modales, inputs */

	/* ---- Semantic (estados, NO cambian entre temas) ----
	   Verde = success/delivered/operational. Rojo = error/failed/destructive.
	   Ámbar = warning/in-progress/degraded. Azul = info/tips/automatic.
	   Los _muted son los backgrounds tinted (10% opacity) para badges y alerts. */
	--app-success: #10b981;
	--app-success-muted: rgba(16, 185, 129, 0.10);
	--app-error: #ef4444;
	--app-error-muted: rgba(239, 68, 68, 0.10);
	--app-warning: #f59e0b;
	--app-warning-muted: rgba(245, 158, 11, 0.10);
	--app-info: #3b82f6;
	--app-info-muted: rgba(59, 130, 246, 0.10);

	/* ---- Spacing (base 4px) ----
	   Sistema de espaciado en múltiplos de 4. Usado en padding/margin/gap.
	   space-2 (8px) para tight, space-4 (16px) para card sections,
	   space-6 (24px) para card padding, space-8 (32px) para section internal. */
	--app-space-1: 4px;
	--app-space-2: 8px;
	--app-space-3: 12px;
	--app-space-4: 16px;
	--app-space-6: 24px;
	--app-space-8: 32px;
	--app-space-12: 48px;
	--app-space-16: 64px;

	/* ---- Radius ----
	   sm (4px) para inputs y small buttons. md (8px) para buttons, dropdowns,
	   badges, alerts. lg (12px) para cards, tablas, modales pequeños.
	   xl (16px) para modales grandes y dashboards. full (9999px) para
	   pills, avatares, toggles. */
	--app-radius-sm: 4px;
	--app-radius-md: 8px;
	--app-radius-lg: 12px;
	--app-radius-xl: 16px;
	--app-radius-full: 9999px;

	/* ---- Shadows ----
	   sm = sutil (toggles, cards estáticas). md = default (cards, dropdowns).
	   xl = elevación alta (modales, toasts, dropdowns abiertos).
	   hover = card hover, más difusa que xl. */
	--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--app-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
	--app-shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.10);
	--app-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

	/* ---- Motion ----
	   Curvas de easing custom (más naturales que ease/ease-in/ease-out de CSS).
	   fast (150ms) para hover/focus. base (200ms) para transformaciones de
	   botones/cards. slow (300ms) para accordion, dropdowns, theme toggle. */
	--app-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--app-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--app-transition-fast: 150ms var(--app-ease-out);
	--app-transition-base: 200ms var(--app-ease-out);
	--app-transition-slow: 300ms var(--app-ease-in-out);
}

/* =========================================================================
   Tipografía base
   -------------------------------------------------------------------------
   NOTA: las reglas de body / h1-h6 / .text-muted están duplicadas en
   style-base.css (que carga antes) para evitar el flash de doble pintado
   entre la capa estructural y la capa de tokens. Cualquier cambio aquí
   debe replicarse en style-base.css o el flash regresa.
   ========================================================================= */

html {
	font-feature-settings: 'liga' 1, 'calt' 1;
}

body {
	font-family: var(--app-font-body) !important;
	font-weight: 400;
	color: var(--app-neutral-800);
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
	outline: 2px solid var(--app-primary, #1aa5fc);
	outline-offset: 2px;
	border-radius: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4,
.page-titles h3,
.card-title,
.modal-title {
	font-family: var(--app-font-display) !important;
	color: var(--app-neutral-700);
	letter-spacing: -0.01em;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

h1 { font-weight: 800; line-height: 1.15; }
h2 { font-weight: 700; line-height: 1.2; }
h3 { font-weight: 600; line-height: 1.25; }
h4 { font-weight: 600; line-height: 1.3; }

/* Card titles: dimensionar según el tag, no por clase — respeta h2 usado
   como título de página dentro de .card sin romper el uso canónico en
   cards internas. */
h1.card-title { font-size: 24px !important; font-weight: 700; }
h2.card-title { font-size: 20px !important; font-weight: 700; }
h3.card-title { font-size: 18px !important; font-weight: 600; }
h4.card-title { font-size: 16px !important; font-weight: 600; }

small:not(.label), .text-muted { color: var(--app-neutral-600) !important; }

code, kbd, pre, samp, .mono {
	font-family: var(--app-font-mono) !important;
}

table, .table, .dataTables_wrapper,
.table td, .table th,
table.dataTable td, table.dataTable th {
	font-variant-numeric: tabular-nums;
}

/* Editor de SMS (envíos, inbox, lealtad, cupones) — texteditor.css trae
   font-family: arial hardcodeado en .baloon y Poppins en .apply-font. Los
   unificamos con Inter. Importante: aplicamos solo al contenedor, NO al
   descendiente universal (*), para que los <i class="fa-*"> hereden el
   font-family de FontAwesome y no se vean como "rayas". */
.texteditor_sms,
.texteditor_tags,
.texteditor_count,
.texteditor-options,
.baloon,
.classic-editor {
	font-family: var(--app-font-body) !important;
}

/* Tags del editor (#shortcode_tags_mytexteditor) y tags insertados (.tag3):
   fondo blanco, radius del sistema. Deben verse como chips sobre el fondo
   del editor, no como botones outline. */
#shortcode_tags_mytexteditor .btn.btn-texteditor-tag,
.btn.btn-texteditor-tag,
.btn-texteditor-tag {
	background-color: #ffffff !important;
	border-radius: var(--app-radius-md) !important;
}

.texteditor_sms .tag3 {
	background-color: #ffffff;
	border-radius: var(--app-radius-md);
	padding: 2px 6px;
}

/* =========================================================================
   Cards
   ========================================================================= */

.card {
	border-radius: var(--app-radius-lg) !important;
	border: 1px solid var(--app-neutral-300) !important;
	box-shadow: var(--app-shadow-md) !important;
	transition: box-shadow var(--app-transition-base);
}

.card-body { padding: var(--app-space-6); }
.card-title { margin-bottom: var(--app-space-3); }
.card-subtitle { color: var(--app-neutral-600); font-size: 13px; }

/* =========================================================================
   Buttons (estructura — color lo maneja el tema / capa de color)
   ========================================================================= */

.btn {
	border-radius: var(--app-radius-md) !important;
	font-family: var(--app-font-body);
	font-weight: 600;
	padding: 10px 20px;
	font-size: 14px;
	transition: background-color var(--app-transition-fast),
				border-color var(--app-transition-fast),
				transform var(--app-transition-fast),
				box-shadow var(--app-transition-fast);
}

.btn-sm { padding: 4px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

.btn:active { transform: scale(0.97); }

/* .btn-rounded era circular en el template heredado — el diseño ahora
   estandariza a cuadrado con esquinas redondeadas para match con el resto
   de los botones. Si aparece algo que realmente necesite ser circular
   (avatar chips), que use .btn-circle explícito. */
.btn.btn-rounded,
.btn-rounded { border-radius: var(--app-radius-md) !important; }

/* Excepciones — elementos que son avatares/chips y deben permanecer
   circulares aunque sean <button>. */
.btn.btn-myaccount,
.btn-myaccount,
.btn.btn-circle,
.btn-circle { border-radius: var(--app-radius-full) !important; }

/* Toggle del dropdown de acciones de tabla (3 puntos, fondo azul): cuadrado
   del mismo tamaño que los botones de acción de al lado. Cubre las 2 ramas de
   loadDataTableActions(): rama A (el button azul ES el toggle) y rama B (el
   button azul es el exterior .btn-primary.p-0 que envuelve el .dropdown-vertical-icon).
   Tamaño fijo (no aspect-ratio) => cuadrado garantizado en cualquier display. */
.btn-group > button.btn-primary.dropdown-vertical-icon[data-toggle="dropdown"],
.btn-group > button.btn-primary.p-0[data-toggle="dropdown"] {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

/* Rama B: el div interno hereda padding de .btn-sm; lo colapsamos para que
   ocupe el button cuadrado sin empujar el ancho. */
.btn-group > button.btn-primary.p-0[data-toggle="dropdown"] > .dropdown-vertical-icon {
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Btn-group: restaurar el comportamiento de Bootstrap 3 (que nuestro
   .btn { border-radius !important } había pisado). Botones internos se
   pegan como una sola unidad, con esquinas redondeadas solo en extremos. */
.btn-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child:not(:last-child) {
	border-top-left-radius: var(--app-radius-md) !important;
	border-bottom-left-radius: var(--app-radius-md) !important;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
	border-top-right-radius: var(--app-radius-md) !important;
	border-bottom-right-radius: var(--app-radius-md) !important;
}
.btn-group > .btn:only-child,
.btn-group > .btn:only-of-type { border-radius: var(--app-radius-md) !important; }

/* =========================================================================
   Form inputs
   ========================================================================= */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
	border-radius: var(--app-radius-md) !important;
	border: 1.5px solid var(--app-neutral-300);
	padding: 10px 14px;
	font-family: var(--app-font-body);
	font-size: 14px;
	transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.form-control::placeholder { color: var(--app-neutral-500); }

/* Input standalone con la clase utilitaria .transparent (usada en barras de
   búsqueda de DataTables) perdía el radius por tener estilos propios. */
.form-control.transparent {
	border-radius: var(--app-radius-md) !important;
}

/* Input-group (input + botón de search como unidad). En Bootstrap 3 los
   elementos internos pierden radius por diseño; nosotros lo restauramos
   solo en los extremos. Inputs y botones de addon usan --app-radius-md (8px)
   para que el grupo se vea cohesivo. */
.input-group > .form-control:first-child,
.input-group > .form-control.transparent:first-child {
	border-top-left-radius: var(--app-radius-md) !important;
	border-bottom-left-radius: var(--app-radius-md) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:last-child,
.input-group > .form-control.transparent:last-child {
	border-top-right-radius: var(--app-radius-md) !important;
	border-bottom-right-radius: var(--app-radius-md) !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.input-group-btn:first-child > .btn,
.input-group-addon:first-child {
	border-top-left-radius: var(--app-radius-md) !important;
	border-bottom-left-radius: var(--app-radius-md) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.input-group-btn:last-child > .btn,
.input-group-addon:last-child {
	border-top-right-radius: var(--app-radius-md) !important;
	border-bottom-right-radius: var(--app-radius-md) !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
/* Botón dentro de input-group (ej. botón de búsqueda solo-ícono): el .btn base no
   define min-height (a diferencia de .form-control, que tiene 38px). Sin el ícono
   —que carga con FontAwesome async— el botón colapsaba más corto que el input en el
   primer pintado. Igualamos la altura mínima del input para que no dependa del ícono. */
.input-group-btn > .btn {
	min-height: 38px;
}

/* Input solitario dentro de un input-group (ej. restapi: div.input-group
   envolvente solo con el input, sin botón ni addon). Debe ser redondeado
   en los 4 lados — si lo dejamos en :first-child o :last-child se corta
   un lado. Debe declararse DESPUÉS de first/last-child para ganar por
   orden de cascada. */
.input-group > .form-control:only-child,
.input-group > .form-control.transparent:only-child {
	border-radius: var(--app-radius-sm) !important;
}

/* =========================================================================
   Tables
   ========================================================================= */

.table thead th,
table.dataTable thead th {
	background-color: transparent !important;
	color: var(--app-neutral-700);
	font-family: var(--app-font-body);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--app-neutral-300);
}

/* DataTables agrega backgrounds propios a columnas ordenables (.sorting,
   .sorting_asc, .sorting_desc). Los neutralizamos para que todas las
   columnas se vean igual — transparente, solo borde inferior. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_disabled,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
	background-color: transparent !important;
	background-image: none !important;
}

.table td {
	padding: 12px 16px;
	border-top: 1px solid var(--app-neutral-300);
	vertical-align: middle;
}

/* =========================================================================
   Badges
   ========================================================================= */

.badge,
.label {
	font-family: var(--app-font-body);
	font-weight: 500;
	font-size: 12px;
	padding: 3px 10px;
	border-radius: var(--app-radius-full) !important;
	letter-spacing: 0.01em;
}

.badge-success, .label-success { background-color: var(--app-success-muted); color: var(--app-success); }
.badge-danger, .label-danger { background-color: var(--app-error-muted); color: var(--app-error); }
.badge-warning, .label-warning { background-color: var(--app-warning-muted); color: var(--app-warning); }
.badge-info, .label-info { background-color: var(--app-info-muted); color: var(--app-info); }

/* =========================================================================
   Alerts
   ========================================================================= */

.alert {
	border-radius: var(--app-radius-md) !important;
	padding: 14px 18px;
	border-width: 1px;
	border-style: solid;
	font-size: 14px;
	margin-top: var(--app-space-3);
}

.alert-success { background: var(--app-success-muted); border-color: rgba(16, 185, 129, 0.20); color: #065f46; }
.alert-danger { background: var(--app-error-muted); border-color: rgba(239, 68, 68, 0.20); color: #991b1b; }
.alert-warning { background: var(--app-warning-muted); border-color: rgba(245, 158, 11, 0.20); color: #92400e; }
.alert-info { background: var(--app-info-muted); border-color: rgba(59, 130, 246, 0.20); color: #1e40af; }

/* =========================================================================
   Modals
   ========================================================================= */

.modal-content {
	border-radius: var(--app-radius-xl) !important;
	border: none;
	box-shadow: var(--app-shadow-xl);
}

.modal-header { border-bottom: 1px solid var(--app-neutral-300); padding: var(--app-space-6); }
.modal-body { padding: var(--app-space-6); }
.modal-footer { border-top: 1px solid var(--app-neutral-300); padding: var(--app-space-4) var(--app-space-6); }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-backdrop.in { opacity: 0.5; }

/* CTAs pegados al borde inferior del modal (patrón .btn-rounded-one /
   .btn-rounded-two). Redondean solo la esquina inferior que matchea con
   el radius del modal-content (16px). Las esquinas superiores quedan
   rectas porque se pegan al separador del modal-body. */
.modal-content .btn.btn-rounded-one {
	border-radius: 0 !important;
	border-bottom-left-radius: var(--app-radius-xl) !important;
}
.modal-content .btn.btn-rounded-two {
	border-radius: 0 !important;
	border-bottom-right-radius: var(--app-radius-xl) !important;
}

/* =========================================================================
   Dropdowns
   ========================================================================= */

.dropdown-menu {
	border-radius: var(--app-radius-md) !important;
	border: 1px solid var(--app-neutral-300);
	box-shadow: var(--app-shadow-xl);
	padding: 4px;
}

.dropdown-menu > li > a {
	border-radius: var(--app-radius-sm);
	padding: 8px 12px;
	font-size: 14px;
	transition: background-color var(--app-transition-fast);
}

/* =========================================================================
   Tabs
   ========================================================================= */

.nav-tabs {
	border-bottom: 1px solid var(--app-neutral-300);
}

.nav-tabs > li > a {
	border: none !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	font-weight: 500;
	color: var(--app-neutral-600);
	transition: color var(--app-transition-fast), border-color var(--app-transition-fast);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	color: var(--app-neutral-800) !important;
	background: transparent !important;
}

/* =========================================================================
   Pagination
   ========================================================================= */

.pagination > li > a,
.pagination > li > span {
	width: 36px;
	height: 36px;
	line-height: 34px;
	padding: 0;
	text-align: center;
	border-radius: var(--app-radius-sm) !important;
	margin: 0 2px;
	border-color: var(--app-neutral-300);
	color: var(--app-neutral-700);
}

/* =========================================================================
   Fixes específicos de plugins/módulos afectados por la nueva tipografía
   y padding base. No son parte del design system en sí; viven aquí mientras
   migramos las vistas a componentes estandarizados en fase 2.
   ========================================================================= */

/* smart_wizard (envíos) — alinear el ícono de paso con el nuevo baseline
   de tipografía del panel. */
#wizard_content #smartwizard-container-steps .content-icon-wizard {
	padding: 8px 10px 8px 0px !important;
	display: table;
}

/* Plugins que reemplazan el <select> nativo o el <input type="file">
   con su propio markup. Mi overlay aplica radius al elemento original
   pero ese queda oculto — el visible es el wrapper del plugin. */

/* nice-select (select global del panel) */
.nice-select {
	border-radius: var(--app-radius-md) !important;
}

/* Select2 (single y multiple) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border-radius: var(--app-radius-md) !important;
	border: 1.5px solid var(--app-neutral-300) !important;
}

/* bootstrap-select (botón visible que reemplaza al select) */
.bootstrap-select > .btn,
.bootstrap-select > .dropdown-toggle {
	border-radius: var(--app-radius-md) !important;
}

/* Dropify (file input se oculta, el visible es .dropify-wrapper) */
.dropify-wrapper {
	border-radius: var(--app-radius-md) !important;
}

/* Stripe Elements (.card-stripe .field) — checkout y métodos de pago.
   El campo de Stripe trae su propio radius (20px) en checkout.css; lo
   alineamos al estándar del sistema. */
.card-stripe .field {
	border-radius: var(--app-radius-md) !important;
}

/* Accordion custom (envíos — datos adicionales, y otras vistas): el patrón
   original (general.style.css:1647-1659) asigna radius asimétrico al
   header (solo top) y al card interno (solo bottom) para que ambos se
   vean como una sola pieza. Nuestro override global de .card (radius-lg
   en las 4 esquinas) lo rompía. Lo restauramos aquí con !important. */
.accordion-custom .card-header {
	border-top-left-radius: var(--app-radius-lg) !important;
	border-top-right-radius: var(--app-radius-lg) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.accordion-custom .card-header.collapsed {
	border-radius: var(--app-radius-lg) !important;
}
.accordion-custom .accordion-collapse-custom .card {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: var(--app-radius-lg) !important;
	border-bottom-right-radius: var(--app-radius-lg) !important;
	border-top: 0 !important;
}

/* .card-group (dashboard main.php — agrupaciones horizontales de 2+
   cards). Patrón Bootstrap 4/5: las cards internas pierden radius en el
   borde donde se tocan, primera redondea solo izq, última solo der; el
   border-left de las siguientes colapsa para que se vean como un bloque
   continuo. Nuestro .card { border-radius !important } lo había roto. */
.card-group > .card { border-radius: 0 !important; }
.card-group > .card:first-child {
	border-top-left-radius: var(--app-radius-lg) !important;
	border-bottom-left-radius: var(--app-radius-lg) !important;
}
.card-group > .card:last-child {
	border-top-right-radius: var(--app-radius-lg) !important;
	border-bottom-right-radius: var(--app-radius-lg) !important;
}
.card-group > .card:only-child {
	border-radius: var(--app-radius-lg) !important;
}
.card-group > .card + .card {
	border-left: 0 !important;
}

/* =========================================================================
   Motion — accessibility gates
   ========================================================================= */

@media (hover: hover) and (pointer: fine) {
	.card.card-hover:hover {
		transform: translateY(-2px);
		box-shadow: var(--app-shadow-hover) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}