/* =========================================================================
   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; }

/* 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;
}

/* 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;
	}
}