/*
 * Override de identidad visual — Tierra Fértil (Fase 1: Frontend).
 *
 * Se carga después de style.css / custom_style.css / new_responsive.css a
 * propósito, para ganar la cascada por orden de carga sin depender de
 * !important salvo donde el CSS base ya usaba !important sobre el mismo
 * selector (se iguala ahí únicamente para poder ganarle a esa regla).
 *
 * Este archivo reemplaza el override anterior ("Líderes de Éxito", morado)
 * por la paleta de Tierra Fértil. No se toca style.css / custom_style.css
 * ni ningún markup Blade.
 *
 * Fuera de alcance en esta fase (se trabajan en fases posteriores):
 * auth/login, auth/register, quiz/*, certificate/*, course_player/*,
 * home_permanent_templates/*, home_made_by_builder/*, home_made_by_developer/*.
 * Como esas vistas comparten clases globales (.eBtn.gradient, .badge, etc.),
 * SÍ heredarán parte de este cambio de color aunque su capa de detalle no
 * se haya revisado todavía — es esperado y deseable (identidad consistente).
 */

:root {
    /* Paleta Tierra Fértil */
    --tf-primary: #20B77A;
    --tf-primary-dark: #159463;
    --tf-primary-soft: #EAF8F2;

    --tf-dark: #222222;
    --tf-text: #555555;
    --tf-muted: #7A7A7A;

    --tf-background: #F5F6F5;
    --tf-surface: #FFFFFF;
    --tf-border: #E5E7E5;

    --tf-danger: #DC3545;
    --tf-warning: #F4A62A;
    --tf-success: #20B77A;

    /* Remapeo de las variables de marca que ya usa style.css/custom_style.css.
       El 99% de los estados activos/hover/focus del frontend leen de estas
       variables, así que este bloque por sí solo cubre la mayoría de la UI. */
    --color-1: var(--tf-primary);
    --color-2: var(--tf-dark);

    /* --primary-color no estaba definida en ningún lado (bug preexistente
       en .Userprofile .dropdown-item.active); la definimos aquí para que
       ese estado deje de heredar un valor inválido. */
    --primary-color: var(--tf-primary);
}

/* ------------------------------------------------------------------ */
/* Gradiente de marca: agrupa TODOS los selectores que en style.css     */
/* pintan a mano el degradado morado/azul original (no pasan por la     */
/* variable --color-1). Botones .eBtn.gradient, paginación, modal       */
/* header, carrusel, cards de curso, etc.                               */
/* ------------------------------------------------------------------ */
.gradient,
.gSearch-show button,
.pr-wrap,
.user-slider .owl-nav .owl-prev,
.user-slider .owl-nav .owl-next,
.page-link:hover,
.page-item.active .page-link,
.entry-pagination .pagination li.active a,
.single-motion:hover,
.gradient-border,
.gradient-border2,
.gradient-border-btn:hover,
.c-card:hover .eBtn,
.mybtn-play:hover,
.entry-player .g-title,
.ps-sidebar .learn-btn:hover,
.ps-sidebar .f-socials li a:hover,
.modal-header {
    background-image: linear-gradient(
        to right,
        var(--tf-primary) 0%,
        var(--tf-primary-dark) 51%,
        var(--tf-primary-dark) 100%
    ) !important;
}

/* Colores sólidos puntuales que acompañaban el degradado anterior */
.sub-header-left ul li a:hover,
.Userprofile .dropmenu-end a:hover,
.Userprofile .dropmenu-end a:hover svg path,
.category.active a {
    color: var(--tf-primary) !important;
}
.Userprofile .dropmenu-end a.bootcamp-menu-icon:hover svg path {
    stroke: var(--tf-primary) !important;
    fill: none !important;
}
.gSearch-show {
    border-color: var(--tf-primary);
}
.b-card .card-head span {
    background-color: var(--tf-primary);
}
.btn-wrap .learn-btn,
.c-card .eBtn {
    border-color: rgba(32, 183, 122, 0.22) !important;
}
.dt_group a {
    background: rgba(32, 183, 122, 0.2);
}

/* ------------------------------------------------------------------ */
/* Badges — mismo patrón de "pill" translúcido ya usado por el tema     */
/* ------------------------------------------------------------------ */
.badge.bg-primary,
.badge.bg-success {
    background-color: rgba(32, 183, 122, 0.18) !important;
    color: var(--tf-primary) !important;
    border: 1px solid rgba(32, 183, 122, 0.18) !important;
}
.badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.16) !important;
    color: var(--tf-danger) !important;
    border: 1px solid rgba(220, 53, 69, 0.16) !important;
}
.badge.bg-warning {
    background-color: rgba(244, 166, 42, 0.18) !important;
    color: var(--tf-warning) !important;
    border: 1px solid rgba(244, 166, 42, 0.18) !important;
}

/* ------------------------------------------------------------------ */
/* Indicadores de progreso                                             */
/* ------------------------------------------------------------------ */
.progress-bar {
    background-color: var(--tf-primary);
}
.lms-progress .progress-bar {
    background: var(--tf-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Formularios — halo de foco en verde (aditivo, no quita el reset      */
/* "box-shadow:none" existente, lo sustituye por un halo suave)         */
/* ------------------------------------------------------------------ */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    box-shadow: 0 0 0 3px var(--tf-primary-soft) !important;
}
.form-check-input:checked {
    background-color: var(--tf-primary) !important;
    border-color: var(--tf-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Fase 4D — Foco visible para el widget "nice-select" (jquery.nice-    */
/* select.min.js). Reemplaza el <select> nativo por un <div            */
/* tabindex="0"> sin ningún estilo de :focus propio — un usuario de     */
/* teclado no recibía ninguna indicación visual de foco. Afecta a       */
/* todos los .nice-control del sitio (selector de idioma incluido), no  */
/* solo al de idioma; es una mejora aditiva pura (no cambia            */
/* comportamiento del plugin).                                         */
/* ------------------------------------------------------------------ */
.nice-select:focus,
.nice-select:focus-visible {
    box-shadow: 0 0 0 3px var(--tf-primary-soft);
    outline: 2px solid var(--tf-primary);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------ */
/* Fase 4E — Imagen "Conoce Tierra Fértil" (about_us.blade.php).        */
/* La nueva foto oficial (conocenos.png) es cuadrada (1254x1254); el    */
/* contenedor .skill-image img usa object-fit:cover con alto fijo y     */
/* ancho variable, por lo que recorta el sobrante. El recorte por       */
/* defecto es centrado, lo que podría cortar el rostro de la persona    */
/* principal (ubicado en el tercio superior de la foto). Se ancla el    */
/* recorte arriba para conservar el rostro visible en cualquier         */
/* proporción de contenedor. Único uso activo de esta clase (confirmado */
/* — home_made_by_developer/about_us.blade.php es código muerto).       */
/* ------------------------------------------------------------------ */
.skill-image img {
    object-position: top center;
}

/* Nota: cards de curso (.g-card, .c-card, .b-card, etc.) no se tocan en
   esta fase salvo los acentos de color ya cubiertos arriba — el frontend
   no tiene un componente "card" único, son ~15 variantes con su propio
   diseño; unificar fondo/borde/sombra requiere revisión visual caso por
   caso (fase posterior) para no romper layouts existentes. */

/* ------------------------------------------------------------------ */
/* Fase 2A — Banda interna (breadcrumb) y banner de perfil.             */
/* Reemplaza el degradado azul->morado definido en custom_style.css     */
/* (.breadcum-area, .profile-banner-area) por un fondo institucional    */
/* claro: verde extremadamente suave que se aclara hacia blanco, sin    */
/* saturación. Mismas dimensiones/estructura, solo color.               */
/* Selectores compartidos por: course/index, blog/index, blog/details,  */
/* instructor/index, instructor/details, contact_us/index,              */
/* team_training/index+details, bootcamp/index+details,                 */
/* knowledge_base_topics/index, student/cart/index (.breadcum-area) y   */
/* my_courses, my_bootcamps, my_team_packages, wishlist,                */
/* purchase_history, my_profile, message, my_bookings,                  */
/* become_instructor (.profile-banner-area).                            */
/* ------------------------------------------------------------------ */
.breadcum-area,
.profile-banner-area {
    background: linear-gradient(180deg, var(--tf-primary-soft) 0%, var(--tf-surface) 100%);
}
.breadcum-area:after,
.profile-banner-area:after {
    /* El :after original solo aclaraba el degradado con un velo blanco;
       con la base ya clara, se deja un velo blanco simple para mantener
       el mismo mecanismo sin reintroducir color. */
    background: var(--tf-surface);
}

/* ------------------------------------------------------------------ */
/* Fase 2A — Footer: de azul marino a gris carbón institucional         */
/* (reutiliza --tf-dark, ya en la paleta, sin agregar colores nuevos).  */
/* El texto/iconos del footer ya están en blanco/gris claro pensados    */
/* para fondo oscuro, así que el contraste actual se conserva igual.    */
/* Los acentos verdes (hover de links, íconos sociales, borde del       */
/* newsletter, botón "Enviar") ya provienen de --color-1 y no requieren */
/* cambios adicionales aquí.                                            */
/* ------------------------------------------------------------------ */
.footer-area {
    background: var(--tf-dark);
}
.gradient-border-btn {
    /* Relleno interno del botón "Contáctanos": mismo truco de borde con
       gradiente (.gradient-border2, ya verde) + relleno sólido. Se iguala
       al nuevo fondo del footer para conservar el mismo efecto visual. */
    background: var(--tf-dark);
}

/* ------------------------------------------------------------------ */
/* Fase 3C-2 — Logo del footer (light_logo). El CSS base fuerza una     */
/* caja fija de 161x46px con object-fit:cover, pensada para el logo     */
/* horizontal anterior (~3.5:1). El nuevo logo de Tierra Fértil es      */
/* vertical (isotipo arriba, texto abajo, ~1.5:1) — con "cover" se      */
/* recortaría. Se cambia a "contain" + alto automático para mostrarlo   */
/* completo, sin deformarlo ni recortarlo, conservando el alto original */
/* como referencia de tamaño máximo. */
/* ------------------------------------------------------------------ */
.footer-content img {
    object-fit: contain;
    height: auto;
    max-height: 46px;
    width: auto;
    max-width: 161px;
}

/* ------------------------------------------------------------------ */
/* Fase 4B-3B — Alerta de cupón aplicado (student/cart/index).          */
/* .alert-purple (custom_style.css) es morado heredado (#b94aff), usado */
/* únicamente para el mensaje de éxito "Cupón aplicado (%)!" al aplicar */
/* un cupón de descuento en el carrito. Es una confirmación positiva,   */
/* no una advertencia ni un error, así que se trata como éxito/marca    */
/* Tierra Fértil (mismo patrón que .badge.bg-success arriba), no como   */
/* azul/ámbar/rojo semántico.                                           */
/* ------------------------------------------------------------------ */
.alert-purple {
    color: var(--tf-primary-dark);
    background-color: var(--tf-primary-soft);
    border-color: rgba(32, 183, 122, 0.3);
}
.alert-purple a {
    color: var(--tf-primary-dark);
}

/* ------------------------------------------------------------------ */
/* Fase 4C — Badge de cantidad (carrito y wishlist en el header).       */
/* .cart-top-number (custom_style.css) es magenta heredado (#d336e7),   */
/* usado tanto para el contador del carrito como el de la wishlist en   */
/* home_made_by_builder/header.blade.php. Es solo un indicador de       */
/* cantidad, no un estado semántico (no es error/warning), así que se   */
/* adapta a la marca Tierra Fértil. Texto blanco ya tenía buen          */
/* contraste y se conserva.                                             */
/* ------------------------------------------------------------------ */
.cart-top-number {
    background-color: var(--tf-primary);
    color: #fff;
}