/**
 * LOZANO DESIGN SYSTEM -- Componentes base
 * ------------------------------------------------------------------------
 * Todo valor visual sale de los tokens (variables --ln-*, ver tokens.css).
 * Prefijo de clases: ln-ui- (mismo que ya usa el resto del plugin).
 * Cero CSS especifico por bloque de contenido -- todo hereda de aca.
 */

/* ============================= BOTON ============================= */
.ln-ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ln-space-2);
    font-family: var(--ln-font); font-size: var(--ln-text-button); font-weight: var(--ln-weight-bold);
    height: var(--ln-button-height); padding: 0 var(--ln-space-6); border-radius: var(--ln-radius-button);
    border: 1px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap;
    transition: background-color var(--ln-transition-base), color var(--ln-transition-base), border-color var(--ln-transition-base), transform var(--ln-transition-fast), box-shadow var(--ln-transition-base);
    -webkit-tap-highlight-color: transparent;
}
.ln-ui-btn:disabled, .ln-ui-btn[aria-disabled="true"] { opacity: var(--ln-opacity-disabled); cursor: not-allowed; pointer-events: none; }
.ln-ui-btn:active { transform: scale(0.98); }
.ln-ui-btn-sm { height: 36px; padding: 0 var(--ln-space-4); font-size: var(--ln-text-caption); }
.ln-ui-btn-lg { height: 52px; padding: 0 var(--ln-space-8); font-size: 1.05rem; }
.ln-ui-btn-block { width: 100%; }

.ln-ui-btn-primary { background: var(--ln-accent); color: #171717; }
.ln-ui-btn-primary:hover, .ln-ui-btn-primary:focus-visible { background: #171717; color: var(--ln-accent); border-color: var(--ln-accent); box-shadow: var(--ln-glow-accent); }
.ln-ui-btn-primary:active { background: #171717; color: var(--ln-accent); border-color: var(--ln-accent); }
.ln-ui-btn-secondary { background: var(--ln-glow-secondary); color: #fff; }
.ln-ui-btn-secondary:hover { filter: brightness(1.15); box-shadow: var(--ln-glow-secondary-shadow); }
.ln-ui-btn-outline { background: transparent; border-color: var(--ln-accent); color: var(--ln-accent); }
.ln-ui-btn-outline:hover { background: rgba(255, 145, 0, var(--ln-opacity-hover-overlay)); }
.ln-ui-btn-ghost { background: transparent; color: var(--ln-text); }
.ln-ui-btn-ghost:hover { background: rgba(255, 255, 255, var(--ln-opacity-hover-overlay)); }
.ln-ui-btn-success { background: var(--ln-success); color: #fff; }
.ln-ui-btn-success:hover { filter: brightness(1.1); }
.ln-ui-btn-danger { background: var(--ln-danger); color: #fff; }
.ln-ui-btn-danger:hover { filter: brightness(1.1); }
.ln-ui-btn-warning { background: var(--ln-warning); color: #171717; }
.ln-ui-btn-warning:hover { filter: brightness(1.1); }
.ln-ui-btn-dark { background: #0d0d0d; color: #fff; border-color: var(--ln-border); }
.ln-ui-btn-dark:hover { background: #000; }
.ln-ui-btn-light { background: #fff; color: #171717; }
.ln-ui-btn-light:hover { background: #e5e5e5; }

.ln-ui-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ln-button-height); height: var(--ln-button-height); border-radius: var(--ln-radius-button); background: transparent; border: 1px solid var(--ln-border); color: var(--ln-text-muted); cursor: pointer; transition: color var(--ln-transition-fast), border-color var(--ln-transition-fast), background var(--ln-transition-fast); }
.ln-ui-icon-btn:hover { color: var(--ln-accent); border-color: var(--ln-accent); background: rgba(255, 145, 0, var(--ln-opacity-hover-overlay)); }

/* ============================= CARD ============================= */
.ln-ui-card { background: var(--ln-bg-card); border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); padding: var(--ln-space-6); transition: transform var(--ln-transition-base), box-shadow var(--ln-transition-base), border-color var(--ln-transition-base); }
.ln-ui-card-horizontal { display: flex; gap: var(--ln-space-4); align-items: center; }
.ln-ui-card-compacta { padding: var(--ln-space-4); border-radius: var(--ln-radius-input); }
.ln-ui-card-destacada { border-color: var(--ln-accent); box-shadow: var(--ln-glow-accent); }
.ln-ui-card-hover:hover, a.ln-ui-card-clickable:hover, .ln-ui-card-clickable:hover { transform: translateY(-3px); box-shadow: var(--ln-shadow-md); border-color: var(--ln-border); background: var(--ln-bg-card-hover); }
.ln-ui-card-glow { position: relative; }
.ln-ui-card-glow:hover { box-shadow: var(--ln-glow-accent); border-color: var(--ln-accent); }
a.ln-ui-card-clickable, .ln-ui-card-clickable { display: block; text-decoration: none !important; color: inherit; cursor: pointer; }

/* ============================= TIPOGRAFIA ============================= */
.ln-ui-h1, .ln-ui-h2, .ln-ui-h3, .ln-ui-h4, .ln-ui-subtitle, .ln-ui-paragraph, .ln-ui-caption {
    font-family: var(--ln-font); color: var(--ln-text); margin: 0 0 var(--ln-space-3) 0; font-weight: var(--ln-weight-bold);
}
.ln-ui-h1 { font-size: var(--ln-text-h1); line-height: 1.15; }
.ln-ui-h2 { font-size: var(--ln-text-h2); line-height: 1.2; }
.ln-ui-h3 { font-size: var(--ln-text-h3); line-height: 1.25; }
.ln-ui-h4 { font-size: var(--ln-text-h4); line-height: 1.3; }
.ln-ui-subtitle { font-size: var(--ln-text-body-lg); font-weight: var(--ln-weight-medium); color: var(--ln-text-muted); }
.ln-ui-paragraph { font-size: var(--ln-text-body); font-weight: var(--ln-weight-regular); color: var(--ln-text-muted); line-height: 1.6; }
.ln-ui-caption { font-size: var(--ln-text-caption); font-weight: var(--ln-weight-regular); color: var(--ln-text-faint); margin-bottom: 0; }
.ln-ui-form-label { display: block; margin-bottom: 7px; color: #f4f4f4; font-size: 0.85rem; font-weight: 700; font-family: var(--ln-font); }
.ln-ui-text-center { text-align: center; }

/* ============================= BADGE / CHIP / TAG / PILL ============================= */
.ln-ui-badge, .ln-ui-chip, .ln-ui-tag, .ln-ui-pill {
    display: inline-flex; align-items: center; gap: var(--ln-space-1); font-family: var(--ln-font);
    font-size: var(--ln-text-badge); font-weight: var(--ln-weight-bold); text-transform: uppercase; letter-spacing: 0.4px;
    padding: 4px var(--ln-space-3); border-radius: var(--ln-radius-pill); background: rgba(255, 145, 0, 0.12); color: var(--ln-accent); border: 1px solid rgba(255, 145, 0, 0.25);
}
.ln-ui-badge-success { background: rgba(16, 185, 129, 0.12); color: var(--ln-success); border-color: rgba(16, 185, 129, 0.25); }
.ln-ui-badge-danger { background: rgba(239, 68, 68, 0.12); color: var(--ln-danger); border-color: rgba(239, 68, 68, 0.25); }
.ln-ui-badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--ln-warning); border-color: rgba(245, 158, 11, 0.25); }
.ln-ui-badge-neutral { background: rgba(255, 255, 255, 0.08); color: var(--ln-text-muted); border-color: var(--ln-border); }
.ln-ui-chip { text-transform: none; letter-spacing: normal; border-radius: var(--ln-radius-input); cursor: pointer; }
.ln-ui-chip[aria-pressed="true"] { background: var(--ln-accent); color: #171717; }

/* ============================= GRID / CONTAINER / SECTION ============================= */
.ln-ui-container { max-width: var(--ln-container-width); margin: 0 auto; padding: 0 var(--ln-space-4); box-sizing: border-box; }
.ln-ui-container-wide { max-width: var(--ln-container-width-wide); }
.ln-ui-section { padding: var(--ln-space-16) 0; }
.ln-ui-grid { display: grid; gap: var(--ln-space-6); grid-template-columns: repeat(var(--ln-grid-cols, 3), 1fr); }
@media (max-width: 768px) { .ln-ui-grid { grid-template-columns: repeat(var(--ln-grid-cols-mobile, 1), 1fr); } .ln-ui-section { padding: var(--ln-space-10) 0; } }

/* ============================= INPUT / TEXTAREA / SEARCH ============================= */
.ln-ui-input, .ln-ui-textarea, .ln-ui-search input {
    font-family: var(--ln-font); font-size: var(--ln-text-body); color: var(--ln-text); background: #272727;
    border: 1px solid #3a3a3a; border-radius: var(--ln-radius-input); padding: 0 var(--ln-space-4); width: 100%; box-sizing: border-box;
    transition: border-color var(--ln-transition-fast), background var(--ln-transition-fast), box-shadow var(--ln-transition-fast);
}
.ln-ui-input, .ln-ui-search input { height: var(--ln-input-height); }
.ln-ui-textarea { padding: var(--ln-space-3) var(--ln-space-4); min-height: 120px; resize: vertical; }
.ln-ui-input::placeholder, .ln-ui-textarea::placeholder { color: #888888; }
.ln-ui-input:focus, .ln-ui-textarea:focus, .ln-ui-search input:focus { outline: none; background: #303030; border-color: var(--ln-accent); box-shadow: 0 0 0 3px rgba(255, 145, 0, 0.15); }
.ln-ui-search { position: relative; }
.ln-ui-search input { padding-left: 42px; }
.ln-ui-search-icon { position: absolute; left: var(--ln-space-3); top: 50%; transform: translateY(-50%); color: var(--ln-text-faint); pointer-events: none; }

/* ============================= DIVIDER ============================= */
.ln-ui-divider { border: none; border-top: 1px solid var(--ln-border); margin: var(--ln-space-6) 0; }

/* ============================= CTA ============================= */
.ln-ui-cta { background: linear-gradient(135deg, var(--ln-bg-card), var(--ln-bg)); border: 1px solid var(--ln-border); border-radius: var(--ln-radius-card); padding: var(--ln-space-8); text-align: center; }
.ln-ui-cta-titulo { margin-bottom: var(--ln-space-2); }
.ln-ui-cta-texto { margin-bottom: var(--ln-space-6); }

/* ============================= DROPDOWN ============================= */
.ln-ui-dropdown { position: relative; display: inline-block; }
.ln-ui-dropdown-menu { position: absolute; top: calc(100% + var(--ln-space-2)); left: 0; min-width: 200px; background: var(--ln-bg-card); border: 1px solid var(--ln-border); border-radius: var(--ln-radius-input); box-shadow: var(--ln-shadow-md); padding: var(--ln-space-2); z-index: var(--ln-z-dropdown); }
.ln-ui-dropdown-menu[hidden] { display: none; }
.ln-ui-dropdown-menu a, .ln-ui-dropdown-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ln-text); padding: var(--ln-space-2) var(--ln-space-3); border-radius: 6px; cursor: pointer; text-decoration: none; font-family: var(--ln-font); font-size: var(--ln-text-body); }
.ln-ui-dropdown-menu a:hover, .ln-ui-dropdown-menu button:hover { background: rgba(255, 145, 0, var(--ln-opacity-hover-overlay)); color: var(--ln-accent); }

/* ============================= MODAL ============================= */
.ln-ui-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(7px); z-index: var(--ln-z-modal); display: none; align-items: center; justify-content: center; padding: var(--ln-space-5); overflow-y: auto; }
.ln-ui-modal-overlay.ln-ui-abierto { display: flex; }
.ln-ui-modal {
    background:
        radial-gradient(circle at top right, rgba(108, 6, 235, 0.2), transparent 40%),
        linear-gradient(145deg, #222222 0%, #171717 100%);
    border: 1px solid rgba(255, 145, 0, 0.7);
    border-radius: var(--ln-radius-modal);
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.55), 0 0 35px rgba(108, 6, 235, 0.16);
    max-width: 490px;
    width: 100%;
    max-height: 90vh;
    margin: auto;
    overflow-y: auto;
    padding: 38px 28px 30px;
    position: relative;
    animation: ln-ui-modal-entrada 0.28s ease-out forwards;
}
@keyframes ln-ui-modal-entrada { from { opacity: 0; transform: translateY(15px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ln-ui-modal { animation: none; } }
.ln-ui-modal-cerrar { position: absolute; top: 10px; right: 14px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: #929292; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background var(--ln-transition-fast), color var(--ln-transition-fast); }
.ln-ui-modal-cerrar:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* ============================= ACCORDION ============================= */
.ln-ui-accordion-item { border: 1px solid var(--ln-border); border-radius: var(--ln-radius-input); margin-bottom: var(--ln-space-2); overflow: hidden; }
.ln-ui-accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--ln-space-3); background: var(--ln-bg-card); border: none; color: var(--ln-text); font-family: var(--ln-font); font-size: var(--ln-text-body); font-weight: var(--ln-weight-medium); padding: var(--ln-space-4); cursor: pointer; text-align: left; }
.ln-ui-accordion-icono { transition: transform var(--ln-transition-base); flex-shrink: 0; }
.ln-ui-accordion-trigger[aria-expanded="true"] .ln-ui-accordion-icono { transform: rotate(45deg); }
.ln-ui-accordion-panel { padding: 0 var(--ln-space-4); max-height: 0; overflow: hidden; transition: max-height var(--ln-transition-base), padding var(--ln-transition-base); }
.ln-ui-accordion-panel.ln-ui-abierto { padding: 0 var(--ln-space-4) var(--ln-space-4); max-height: 800px; }
.ln-ui-accordion-panel p { color: var(--ln-text-muted); margin: 0; line-height: 1.6; }

/* ============================= TABS ============================= */
.ln-ui-tabs-lista { display: flex; gap: var(--ln-space-2); border-bottom: 1px solid var(--ln-border); margin-bottom: var(--ln-space-6); overflow-x: auto; }
.ln-ui-tab-trigger { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ln-text-muted); font-family: var(--ln-font); font-size: var(--ln-text-body); font-weight: var(--ln-weight-medium); padding: var(--ln-space-3) var(--ln-space-4); cursor: pointer; white-space: nowrap; transition: color var(--ln-transition-fast), border-color var(--ln-transition-fast); }
.ln-ui-tab-trigger:hover { color: var(--ln-text); }
.ln-ui-tab-trigger[aria-selected="true"] { color: var(--ln-accent); border-bottom-color: var(--ln-accent); }
.ln-ui-tab-panel[hidden] { display: none; }

/* ============================= PAGINATION ============================= */
.ln-ui-pagination { display: flex; gap: var(--ln-space-2); align-items: center; justify-content: center; }
.ln-ui-pagination button { min-width: 36px; height: 36px; border-radius: var(--ln-radius-input); background: transparent; border: 1px solid var(--ln-border); color: var(--ln-text-muted); cursor: pointer; font-family: var(--ln-font); }
.ln-ui-pagination button[aria-current="true"] { background: var(--ln-accent); color: #171717; border-color: var(--ln-accent); font-weight: var(--ln-weight-bold); }
.ln-ui-pagination button:hover:not([aria-current="true"]) { border-color: var(--ln-accent); color: var(--ln-accent); }

/* ============================= TOOLTIP ============================= */
.ln-ui-tooltip { position: relative; display: inline-block; }
.ln-ui-tooltip-bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: #0d0d0d; color: #fff; font-size: var(--ln-text-caption); padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--ln-transition-fast), transform var(--ln-transition-fast); z-index: var(--ln-z-dropdown); }
.ln-ui-tooltip:hover .ln-ui-tooltip-bubble, .ln-ui-tooltip:focus-within .ln-ui-tooltip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================= TOAST ============================= */
.ln-ui-toast-contenedor { position: fixed; bottom: var(--ln-space-6); right: var(--ln-space-6); z-index: var(--ln-z-toast); display: flex; flex-direction: column; gap: var(--ln-space-2); }
.ln-ui-toast { background: var(--ln-bg-card); border: 1px solid var(--ln-border); border-left: 3px solid var(--ln-accent); border-radius: var(--ln-radius-input); padding: var(--ln-space-3) var(--ln-space-4); color: var(--ln-text); font-family: var(--ln-font); font-size: var(--ln-text-caption); box-shadow: var(--ln-shadow-md); opacity: 0; transform: translateY(8px); transition: opacity var(--ln-transition-base), transform var(--ln-transition-base); max-width: 320px; }
.ln-ui-toast.ln-ui-visible { opacity: 1; transform: translateY(0); }
.ln-ui-toast-success { border-left-color: var(--ln-success); }
.ln-ui-toast-danger { border-left-color: var(--ln-danger); }

/* ============================= SKELETON / LOADER ============================= */
@keyframes ln-ui-skeleton-pulso { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.ln-ui-skeleton { background: var(--ln-bg-card); border-radius: var(--ln-radius-input); animation: ln-ui-skeleton-pulso 1.4s ease-in-out infinite; }
.ln-ui-skeleton-texto { height: 14px; margin-bottom: var(--ln-space-2); width: 100%; }
.ln-ui-skeleton-titulo { height: 24px; width: 60%; margin-bottom: var(--ln-space-3); }
@keyframes ln-ui-loader-girar { to { transform: rotate(360deg); } }
.ln-ui-loader { width: 24px; height: 24px; border: 3px solid var(--ln-border); border-top-color: var(--ln-accent); border-radius: 50%; animation: ln-ui-loader-girar 700ms linear infinite; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .ln-ui-card, .ln-ui-btn, .ln-ui-accordion-panel, .ln-ui-tooltip-bubble, .ln-ui-toast, .ln-ui-skeleton, .ln-ui-loader { transition: none !important; animation: none !important; }
}

/* Boton de envio dentro de un formulario en modal (Newsletter, Curso
   Gratis, Auditoria, Guia Inversor): mayusculas + resplandor propio,
   tal como el diseño de referencia -- no aplica a botones fuera de un
   modal, para no cambiar el resto de los botones de la plataforma. */
.ln-ui-modal form button[type="submit"].ln-ui-btn-primary { text-transform: uppercase; box-shadow: 0 8px 24px rgba(255, 145, 0, 0.24); }
.ln-ui-modal form button[type="submit"].ln-ui-btn-primary:hover { box-shadow: none; }

/* Desactiva el resaltado tactil por defecto del navegador (suele verse
   como un flash violeta/celeste en Android/Chrome) en cualquier
   elemento interactivo del sistema, no solo en los botones. */
.ln-ui-card-clickable, .ln-ui-chip, .ln-ui-icon-btn, .ln-ui-tab-trigger,
.ln-ui-accordion-trigger, .ln-ui-pagination button, .ln-ui-nav-link,
.ln-ui-nav-toggle, .ln-ui-modal-cerrar, .ln-ui-red-social, .ln-ui-logo-item,
.ln-ui-video-lazy, .ln-ui-faq-pregunta {
    -webkit-tap-highlight-color: transparent;
}