/* ==========================================================================
   Copyter Design System — hoja global (ver DESIGN.md)
   Se carga en layouts/header.blade.php DESPUÉS de app.css, así que cubre el
   panel de usuario, el admin y las pantallas de acceso. La homepage usa
   header-front y no la carga.

   - Forma y tipografía: valen en claro y en oscuro.
   - Color: solo en modo claro (body:not(.dark-theme)); el modo oscuro del
     tema ya tiene sus propias reglas.
   ========================================================================== */

:root {
	--c-primary:#0A6CFF; --c-primary-hover:#0856D1; --c-primary-active:#0646AB; --c-primary-soft:#E8F1FF;
	--c-ink:#131B2E; --c-honey:#F5A524; --c-honey-soft:#FFF1D2; --c-honey-text:#7A4B00;
	--c-bg:#FAF8F4; --c-surface:#FFFFFF; --c-subtle:#F1EEE7; --c-line:#E7E3DA; --c-line-strong:#CFC9BC;
	--c-text:#131B2E; --c-text-2:#4B5670; --c-text-3:#6B7590;
	--c-success:#14A36B; --c-success-soft:#E4F6EC; --c-success-text:#0B7A4F;
	--c-warning:#E08A00;
	--c-danger:#D93F3F; --c-danger-soft:#FDECEC; --c-danger-text:#B42E2E;
	--font-head:"Plus Jakarta Sans", system-ui, sans-serif;
	--font-body:"Inter", system-ui, sans-serif;
	--font-mono:"JetBrains Mono", ui-monospace, monospace;
	--r-sm:8px; --r-md:12px; --r-lg:16px;
	--shadow-1:0 1px 2px rgba(19,27,46,.06);
	--shadow-2:0 4px 16px rgba(19,27,46,.08);
	--shadow-3:0 12px 32px rgba(19,27,46,.14);
	--focus:0 0 0 3px rgba(10,108,255,.20);
}

/* ---------- Tipografía ---------- */
body, body .card, body .form-control, body .btn, body .dropdown-menu, body .modal-content,
body .table, body .nav-link, body .side-menu__item, body .side-menu__label {
	font-family:var(--font-body) !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .page-title, body .card-title, body .modal-title {
	font-family:var(--font-head) !important;
	text-transform:none !important; letter-spacing:0 !important;
}
/* Solo el título de página fija tamaño; en el resto de encabezados se
   respetan las clases de tamaño de cada pantalla (.fs-NN). */
body .page-title { font-size:32px !important; line-height:40px !important; font-weight:700 !important; }
body h1, body h2, body h3, body h4, body h5, body h6 { font-weight:600; }
body .font-weight-bold, body .font-weight-800, body .fw-bold { font-weight:700 !important; }
body .card-title { font-weight:600 !important; }

/* ---------- Forma: tarjetas, campos, botones, menús, modales ---------- */
body .card {
	border-radius:var(--r-lg) !important;
	box-shadow:var(--shadow-1) !important;
	margin-bottom:24px;
}
body .card-header { padding:16px 24px; }
body .card-body { padding:24px; }
body .card-footer { padding:16px 24px; }

body .btn {
	border-radius:var(--r-md) !important;
	text-transform:none !important; letter-spacing:0 !important;
	font-weight:600 !important; font-size:14px;
	transition:background .15s, border-color .15s, box-shadow .15s, color .15s;
}
body .btn-sm { font-size:13px; padding:6px 14px; }
body .btn-primary { min-width:100px; padding:10px 20px; white-space:nowrap; }
body .btn-sm.btn-primary, body .btn-primary.btn-sm { padding:7px 16px; }
body .btn:focus, body .btn:focus-visible { box-shadow:var(--focus) !important; outline:0; }
body .btn-link { font-weight:500 !important; }
body .btn-block { border-radius:var(--r-md) !important; }

body .form-control, body .form-select, body select.form-control {
	border-radius:var(--r-md) !important; min-height:44px; font-size:15px;
}
body textarea.form-control { min-height:96px; }
body .form-control:focus, body .form-select:focus { box-shadow:var(--focus) !important; }
body .input-group > .form-control:not(:last-child), body .input-group > .form-select:not(:last-child) {
	border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;
}
body .input-group > .btn:not(:first-child), body .input-group > .input-group-text:last-child {
	border-top-left-radius:0 !important; border-bottom-left-radius:0 !important;
}
body label, body .form-label { font-weight:500; }

body .dropdown-menu { border-radius:var(--r-md) !important; box-shadow:var(--shadow-2) !important; padding:8px; }
body .dropdown-item { border-radius:var(--r-sm); }
body .modal-content { border-radius:var(--r-lg) !important; box-shadow:var(--shadow-3) !important; border:0; }
body .modal-header { padding:20px 24px; }
body .modal-body { padding:24px; }
body .modal-footer { padding:16px 24px; }
body .alert { border-radius:var(--r-md) !important; }
body .progress { border-radius:999px; }
body .page-link { border-radius:var(--r-sm); }

/* Etiquetas: píldora, sin sombra, legible (el tema las daba a 10px blancas) */
body .badge {
	font-family:var(--font-body) !important;
	font-size:12px !important; font-weight:600 !important;
	border-radius:999px !important; padding:3px 10px !important;
	box-shadow:none !important; line-height:1.5 !important;
}

/* Cifras: en mono */
body .fs-24.font-weight-bold, body .fs-24.fw-bold, body .counter, body .stat-number {
	font-family:var(--font-mono);
}

/* Tablas */
body .table thead th {
	font-size:12px; font-weight:600; letter-spacing:.02em;
	text-transform:none; padding-top:12px; padding-bottom:12px;
}
body .table td, body .table th { vertical-align:middle; }

/* Pestañas */
body .nav-tabs .nav-link { border-radius:var(--r-sm) var(--r-sm) 0 0; font-weight:500; }

/* Píldoras de filtro (Autoridad, Estrategia, etc.) */
body .pildora { font-family:var(--font-body); font-weight:500; }

/* Contenedores de iconos del menú y listas */
body .side-menu__item { border-radius:0 var(--r-md) var(--r-md) 0; }

@media (prefers-reduced-motion: reduce) { body * { transition:none !important; animation:none !important; } }

/* ==========================================================================
   COLOR — solo modo claro
   ========================================================================== */
body:not(.dark-theme) {
	background:var(--c-bg) !important;
	color:var(--c-text) !important;
	font-family:var(--font-body) !important;
}
body:not(.dark-theme) .app-content,
body:not(.dark-theme) .side-app,
body:not(.dark-theme) .page,
body:not(.dark-theme) .page-main { background:transparent; }

/* Texto */
body:not(.dark-theme) h1, body:not(.dark-theme) h2, body:not(.dark-theme) h3,
body:not(.dark-theme) h4, body:not(.dark-theme) h5, body:not(.dark-theme) h6,
body:not(.dark-theme) .page-title, body:not(.dark-theme) .card-title { color:var(--c-ink); }
body:not(.dark-theme) .text-muted { color:var(--c-text-2) !important; }
body:not(.dark-theme) small.text-muted, body:not(.dark-theme) .fs-11.text-muted, body:not(.dark-theme) .fs-12.text-muted { color:var(--c-text-3) !important; }
body:not(.dark-theme) .text-primary { color:var(--c-primary-hover) !important; }
body:not(.dark-theme) .text-success { color:var(--c-success-text) !important; }
body:not(.dark-theme) .text-danger { color:var(--c-danger-text) !important; }
body:not(.dark-theme) .text-warning { color:var(--c-honey-text) !important; }
body:not(.dark-theme) a { color:var(--c-primary-hover); }
body:not(.dark-theme) a:hover { color:var(--c-primary-active); }

/* Cabecera y menú lateral */
body:not(.dark-theme) .app-header { background:var(--c-surface) !important; box-shadow:0 1px 0 var(--c-line) !important; }
body:not(.dark-theme) .app-sidebar { background:var(--c-surface) !important; border-right:1px solid var(--c-line); box-shadow:none !important; }
body:not(.dark-theme) .side-menu__item { color:var(--c-text-2); }
body:not(.dark-theme) .side-menu__item:hover,
body:not(.dark-theme) .side-menu__item:focus { background:var(--c-subtle); color:var(--c-ink); border-left-color:var(--c-primary); }
body:not(.dark-theme) .side-menu__item.active { background:var(--c-primary-soft); color:var(--c-primary-hover); border-left-color:var(--c-primary); font-weight:600; }
body:not(.dark-theme) .side-menu__item.active .side-menu__icon,
body:not(.dark-theme) .side-menu__item:hover .side-menu__icon { color:var(--c-primary); }
body:not(.dark-theme) .side-menu__icon { color:var(--c-text-3); }
body:not(.dark-theme) .side-menu__label { color:inherit; }
body:not(.dark-theme) .side-menu__item.active .side-menu__label { color:var(--c-primary-hover); }
body:not(.dark-theme) .slide-item { color:var(--c-text-2); }
body:not(.dark-theme) .slide-item.active, body:not(.dark-theme) .slide-item:hover { color:var(--c-primary-hover); }
body:not(.dark-theme) .side-menu__label.text-uppercase,
body:not(.dark-theme) .side-menu__heading { color:var(--c-text-3); }

/* Tarjetas */
body:not(.dark-theme) .card { background:var(--c-surface); border:1px solid var(--c-line) !important; }
body:not(.dark-theme) .card.border-primary { border-color:var(--c-primary) !important; }
body:not(.dark-theme) .card-header { background:transparent; border-bottom:1px solid var(--c-line); }
body:not(.dark-theme) .card-footer { background:transparent; border-top:1px solid var(--c-line); }
body:not(.dark-theme) .card.h-100 { transition:box-shadow .15s ease; }
body:not(.dark-theme) .card.h-100:hover { box-shadow:var(--shadow-2) !important; }

/* Botones */
body:not(.dark-theme) .btn-primary { background:var(--c-primary) !important; border-color:var(--c-primary) !important; color:#fff !important; box-shadow:none; }
body:not(.dark-theme) .btn-primary:hover { background:var(--c-primary-hover) !important; border-color:var(--c-primary-hover) !important; }
body:not(.dark-theme) .btn-primary:active { background:var(--c-primary-active) !important; border-color:var(--c-primary-active) !important; transform:translateY(1px); }
body:not(.dark-theme) .btn-outline-primary { background:transparent !important; border:1.5px solid var(--c-primary) !important; color:var(--c-primary-hover) !important; }
body:not(.dark-theme) .btn-outline-primary:hover { background:var(--c-primary-soft) !important; color:var(--c-primary-hover) !important; }
body:not(.dark-theme) .btn-secondary, body:not(.dark-theme) .btn-light, body:not(.dark-theme) .btn-outline-secondary {
	background:var(--c-surface) !important; color:var(--c-text-2) !important; border:1px solid var(--c-line-strong) !important; box-shadow:none;
}
body:not(.dark-theme) .btn-secondary:hover, body:not(.dark-theme) .btn-light:hover, body:not(.dark-theme) .btn-outline-secondary:hover { background:var(--c-subtle) !important; color:var(--c-ink) !important; }
body:not(.dark-theme) .btn-success { background:var(--c-success-text) !important; border-color:var(--c-success-text) !important; color:#fff !important; box-shadow:none; }
body:not(.dark-theme) .btn-danger { background:var(--c-danger-text) !important; border-color:var(--c-danger-text) !important; color:#fff !important; box-shadow:none; }
body:not(.dark-theme) .btn-outline-danger { background:transparent !important; border:1.5px solid #F3D6D6 !important; color:var(--c-danger-text) !important; }
body:not(.dark-theme) .btn-outline-danger:hover { background:var(--c-danger-soft) !important; }
body:not(.dark-theme) .btn-warning { background:var(--c-honey) !important; border-color:var(--c-honey) !important; color:var(--c-ink) !important; box-shadow:none; }
body:not(.dark-theme) .btn-link { color:var(--c-text-2) !important; }
body:not(.dark-theme) .btn-link:hover { color:var(--c-primary-hover) !important; }
body:not(.dark-theme) .btn:disabled, body:not(.dark-theme) .btn.disabled { opacity:.45; }

/* Campos */
body:not(.dark-theme) .form-control, body:not(.dark-theme) .form-select {
	border:1px solid var(--c-line-strong); color:var(--c-text); background-color:var(--c-surface);
}
body:not(.dark-theme) .form-control:focus, body:not(.dark-theme) .form-select:focus { border-color:var(--c-primary); }
body:not(.dark-theme) .form-control::placeholder { color:var(--c-text-3); }
body:not(.dark-theme) .form-control:disabled, body:not(.dark-theme) .form-control[readonly] { background:var(--c-subtle); }
body:not(.dark-theme) .input-group-text { background:var(--c-subtle); border-color:var(--c-line-strong); color:var(--c-text-2); }
body:not(.dark-theme) .form-check-input:checked { background-color:var(--c-primary); border-color:var(--c-primary); }
body:not(.dark-theme) .custom-control-input:checked ~ .custom-control-label::before { background-color:var(--c-primary); border-color:var(--c-primary); }

/* Avisos */
body:not(.dark-theme) .alert-warning { background:var(--c-honey-soft); color:var(--c-honey-text); border-color:#F5DFA8; }
body:not(.dark-theme) .alert-success { background:var(--c-success-soft); color:var(--c-success-text); border-color:#BFE6D1; }
body:not(.dark-theme) .alert-danger  { background:var(--c-danger-soft); color:var(--c-danger-text); border-color:#F3D6D6; }
body:not(.dark-theme) .alert-info, body:not(.dark-theme) .alert-primary { background:var(--c-primary-soft); color:var(--c-primary-hover); border-color:#C7DCFF; }

/* Etiquetas de Bootstrap/tema: fondo suave + texto oscuro */
body:not(.dark-theme) .badge.bg-primary, body:not(.dark-theme) .badge-primary, body:not(.dark-theme) .badge.bg-info, body:not(.dark-theme) .badge-info {
	background:var(--c-primary-soft) !important; color:var(--c-primary-hover) !important;
}
body:not(.dark-theme) .badge.bg-success, body:not(.dark-theme) .badge-success { background:var(--c-success-soft) !important; color:var(--c-success-text) !important; }
body:not(.dark-theme) .badge.bg-warning, body:not(.dark-theme) .badge-warning { background:var(--c-honey-soft) !important; color:var(--c-honey-text) !important; }
body:not(.dark-theme) .badge.bg-danger, body:not(.dark-theme) .badge-danger { background:var(--c-danger-soft) !important; color:var(--c-danger-text) !important; }
body:not(.dark-theme) .badge.bg-secondary, body:not(.dark-theme) .badge-secondary, body:not(.dark-theme) .badge.bg-light, body:not(.dark-theme) .badge.bg-dark {
	background:var(--c-subtle) !important; color:var(--c-text-2) !important;
}

/* Etiquetas propias de cada pantalla (etq-*) */
body:not(.dark-theme) .etq { font-family:var(--font-body); font-size:12px !important; font-weight:600 !important; }
body:not(.dark-theme) .etq-landing, body:not(.dark-theme) .etq-mejor, body:not(.dark-theme) .etq-info { background:var(--c-primary-soft) !important; color:var(--c-primary-hover) !important; }
body:not(.dark-theme) .etq-blog, body:not(.dark-theme) .etq-sindato { background:var(--c-subtle) !important; color:var(--c-text-2) !important; }
body:not(.dark-theme) .etq-rapida, body:not(.dark-theme) .etq-limpio, body:not(.dark-theme) .etq-ok { background:var(--c-success-soft) !important; color:var(--c-success-text) !important; }
body:not(.dark-theme) .etq-factible, body:not(.dark-theme) .etq-clientes { background:var(--c-honey-soft) !important; color:var(--c-honey-text) !important; }
body:not(.dark-theme) .etq-dificil, body:not(.dark-theme) .etq-alto { background:var(--c-danger-soft) !important; color:var(--c-danger-text) !important; }

/* Píldoras de filtro, barras y filas */
body:not(.dark-theme) .pildora { border:1px solid var(--c-line); color:var(--c-text-2); background:var(--c-surface); }
body:not(.dark-theme) .pildora:hover { border-color:var(--c-line-strong); color:var(--c-ink); }
body:not(.dark-theme) .pildora .n { background:var(--c-subtle); color:var(--c-text-2); }
body:not(.dark-theme) .pildora.activa { background:var(--c-primary-soft); border-color:#C7DCFF; color:var(--c-primary-hover); font-weight:600; }
body:not(.dark-theme) .pildora.activa .n { background:#fff; color:var(--c-primary-hover); }
body:not(.dark-theme) .barra-aut { background:var(--c-subtle); }
body:not(.dark-theme) .barra-aut span { background:var(--c-line-strong); }
body:not(.dark-theme) .barra-aut.destacada span { background:var(--c-primary); }
body:not(.dark-theme) .fila-op { border-top-color:var(--c-line); }
body:not(.dark-theme) .fila-op .meta { color:var(--c-text-3); }
body:not(.dark-theme) .btn-fila, body:not(.dark-theme) .card .btn-block { border-radius:var(--r-md) !important; }

/* Tablas, pestañas, paginación, progreso */
body:not(.dark-theme) .table thead th { background:var(--c-subtle); color:var(--c-text-2); border-bottom:1px solid var(--c-line); }
body:not(.dark-theme) .table td, body:not(.dark-theme) .table th { border-color:var(--c-line); }
body:not(.dark-theme) .table-hover tbody tr:hover { background:var(--c-primary-soft); }
body:not(.dark-theme) .nav-tabs { border-bottom-color:var(--c-line); }
body:not(.dark-theme) .nav-tabs .nav-link { color:var(--c-text-2); }
body:not(.dark-theme) .nav-tabs .nav-link.active { color:var(--c-primary-hover); border-bottom:2px solid var(--c-primary); background:transparent; }
body:not(.dark-theme) .page-item.active .page-link { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
body:not(.dark-theme) .page-link { color:var(--c-primary-hover); }
body:not(.dark-theme) .progress { background:var(--c-subtle); }
body:not(.dark-theme) .progress-bar { background-color:var(--c-primary); }
body:not(.dark-theme) .dropdown-menu { border:1px solid var(--c-line); background:var(--c-surface); }
body:not(.dark-theme) .dropdown-item:hover, body:not(.dark-theme) .dropdown-item:focus { background:var(--c-subtle); color:var(--c-ink); }
body:not(.dark-theme) .modal-header, body:not(.dark-theme) .modal-footer { border-color:var(--c-line); }
body:not(.dark-theme) hr { border-color:var(--c-line); }
body:not(.dark-theme) ::selection { background:var(--c-primary-soft); }

/* ---------- Pantallas de acceso (login / registro) ---------- */
body #login-background .login-bg { background:linear-gradient(230deg,#0A6CFF,#131B2E); background-size:300% 300%; }
body .login-title { font-weight:700; text-shadow:none; }
body .login-main-button { width:auto !important; min-width:50%; padding-left:32px; padding-right:32px; }
body:not(.dark-theme) .login-background { background:var(--c-surface); }
body:not(.dark-theme) #login-google, body:not(.dark-theme) #login-facebook,
body:not(.dark-theme) #login-twitter, body:not(.dark-theme) #login-linkedin { border-color:var(--c-line-strong); color:var(--c-text-2); border-radius:var(--r-md); }

/* ==========================================================================
   Accesibilidad y estados (revisión UX)
   ========================================================================== */

/* Foco siempre visible, también con teclado */
body a:focus-visible, body button:focus-visible, body input:focus-visible,
body select:focus-visible, body textarea:focus-visible, body [tabindex]:focus-visible {
	outline:3px solid rgba(10,108,255,.35); outline-offset:2px;
}

/* Deshabilitado: se nota y no engaña */
body .btn:disabled, body .btn.disabled, body [disabled] { cursor:not-allowed; }

/* Avisos (toastr) con los colores de estado */
body #toast-container > div {
	opacity:1; border-radius:var(--r-md); box-shadow:var(--shadow-3);
	font-family:var(--font-body); font-size:14px; padding:14px 16px 14px 50px;
	background-color:var(--c-ink);
}
body #toast-container > .toast-success { background-color:var(--c-success-text); }
body #toast-container > .toast-error   { background-color:var(--c-danger-text); }
body #toast-container > .toast-info    { background-color:var(--c-primary-hover); }
body #toast-container > .toast-warning { background-color:var(--c-honey-text); }

/* Panel de control: que el nombre no choque con el precio del plan */
body .custom-banner-bg .col-md-4 .text-center { margin-top:12px; }
body .custom-banner-bg h4.fs-24 { overflow-wrap:anywhere; }

/* Móvil: objetivos táctiles de 44 px */
@media (max-width:767px) {
	body .btn, body .form-control, body .form-select, body select.form-control { min-height:44px; }
	body .btn-link { min-height:44px; display:inline-flex; align-items:center; }
	body .nav-tabs .nav-link, body .dropdown-item, body .side-menu__item { min-height:44px; display:flex; align-items:center; }
	body .app-header .nav-link, body .app-header .header-icon, body .app-sidebar__toggle {
		min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
	}
	body .pildora { min-height:44px; }
	body .page-title { font-size:26px !important; line-height:34px !important; }
	body .card-body { padding:20px; }
}

/* ===== v5: revision movil/escritorio de botones y tarjetas ===== */
/* Boton "Invita y Gana": no se recorta nunca en su tarjeta */
.card-body .btn.yellow.pl-6.pr-6 { padding-left:20px !important; padding-right:20px !important; max-width:100%; white-space:nowrap; }
@media (max-width:767px) {
	/* Menos relleno anidado: tarjeta > fila > columna > tarjeta */
	body .card-body.pl-6.pr-6, body .card-body.p-6 { padding:16px !important; }
	body .row { --bs-gutter-x:16px; }
	/* Panel: banner de plan y saldo, contenido alineado a la izquierda y botones a todo el ancho */
	body .custom-banner-bg .col-md-4 { justify-content:flex-start !important; }
	body .custom-banner-bg .col-md-4 .text-center { text-align:left !important; width:100%; }
	body .custom-banner-bg .custom-pricing-plan-button,
	body .card-body .col-md-6.justify-content-end > a.btn.yellow { width:100%; justify-content:center; }
	body .card-body .col-md-6.justify-content-end { justify-content:stretch !important; margin-top:12px; }
	/* Cabeceras de tarjeta: acciones debajo del titulo, sin recortes */
	body .card-header { flex-wrap:wrap; gap:12px; }
	body .card-header .card-options { width:100%; flex-wrap:wrap; margin:0 !important; }
	body .card-header .card-options .btn { flex:1 1 auto; }
	/* Plantillas: el boton ya no se monta sobre el texto */
	body #create-ai-button { position:static !important; display:inline-flex; width:100%; justify-content:center; margin:8px 0 12px !important; }
	/* Botones de cuadricula de imagenes y pestanas con scroll horizontal, sin salirse */
	body .grid-buttons { max-width:100%; }
	body .nav-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
	body .nav-tabs .nav-link { white-space:nowrap; }
}

/* ===== v6: login movil ===== */
@media (max-width:575px){
	#login-background .login-main-button{width:100% !important;min-width:0}
	#login-background .custom-switch{margin-bottom:8px}
	#login-background .d-flex:has(.custom-switch){flex-wrap:wrap;gap:8px 12px;justify-content:space-between}
}