/* ------------------------------------------------------------------ Kairon - componentes propios para no depender de Tutor/Edumall - Variables de marca (antes las inyectaba el Customizer de Edumall) - Botones de cuenta de la cabecera (Campus Virtual / Salir / etc.) - Botones de compartir de la ficha de curso ------------------------------------------------------------------ */ :root{ --kairon-primary:#039397; /* teal de marca (color principal real) */ --kairon-primary-dark:#02777a; --kairon-secondary:#ffc221; /* amarillo de marca (secundario) */ --kairon-heading:#252525; --kairon-text:#696969; --kairon-border:#ededed; } /* ===== Botones de cuenta (cabecera) — ajustados a la estética real ===== Primario: rectángulo redondeado, fondo teal MUY suave, texto teal. Ghost: solo texto gris (Salir / Iniciar sesión). */ .kairon-account{display:inline-flex;align-items:center;gap:14px} .kairon-btn{ display:inline-flex;align-items:center;justify-content:center; font-family:Gordita,system-ui,sans-serif;font-size:15px;font-weight:400; line-height:1;padding:11px 20px;border-radius:7px;text-decoration:none; border:1px solid transparent;cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap; } .kairon-btn-primary{background:#e4f3f2;color:var(--kairon-primary);border-color:#e4f3f2} .kairon-btn-primary:hover{background:#d2ecea;color:var(--kairon-primary-dark);border-color:#d2ecea} .kairon-btn-ghost{background:transparent;color:#6b7280;padding-left:6px;padding-right:6px} .kairon-btn-ghost:hover{color:var(--kairon-primary)} /* Borde del mismo color que el relleno (el botón nativo mostraba un borde gris). */ .kairon-btn-solid{background:var(--kairon-primary);color:#fff;border-color:var(--kairon-primary)} .kairon-btn-solid:hover{background:var(--kairon-primary-dark);color:#fff;border-color:var(--kairon-primary-dark)} /* ===== Botones de compartir de la ficha de curso (sin Tutor) ===== */ .tutor-social-share-wrap{display:flex;gap:10px;align-items:center} .tutor_share{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%; background:#f2f2f2;color:#555;text-decoration:none;transition:all .2s ease; } .tutor_share:hover{background:var(--kairon-primary);color:#fff} .tutor_share i{font-size:16px;line-height:1} /* ===== Menú de idiomas (desplegable de categorías con icono de 9 puntos) ===== Se aplica al widget Nav Menu de Elementor al que le pongas la clase "kairon-lang-menu" (en Avanzado -> Clases CSS). Reproduce el panel blanco redondeado con sombra, los idiomas con su flecha, y el hover teal. */ .kairon-lang-menu .sub-menu, .kairon-lang-menu ul.sub-menu{ background:#fff;border:1px solid #ededed;border-radius:10px; box-shadow:0 12px 30px rgba(3,147,151,.12);padding:8px 0;min-width:220px; } .kairon-lang-menu .sub-menu a{ display:flex;align-items:center;justify-content:space-between; padding:11px 18px;color:#5c6473;font-family:Gordita,system-ui,sans-serif; font-size:15px;font-weight:400;text-decoration:none; } .kairon-lang-menu .sub-menu a:hover{background:#e4f3f2;color:var(--kairon-primary)} /* flecha a la derecha de cada idioma (submenús) */ .kairon-lang-menu .menu-item-has-children > a:after{ content:"\f105";font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; margin-left:12px;color:#b9c0c9;font-size:13px; } /* el icono de 9 puntos como disparador (si usas la clase en el item) */ .kairon-lang-toggle > a{display:inline-flex;align-items:center;gap:0} .kairon-lang-toggle > a .menu-item-text{display:none} .kairon-lang-toggle > a:before{ content:"";width:22px;height:22px;display:inline-block; background:url(../img/kairon-dots.svg) center/contain no-repeat; } /* ===== Tarjetas de curso (Loop Grid) — remates de estética ===== */ .elementor-widget-loop-grid a{text-decoration:none} .elementor-widget-loop-grid .elementor-heading-title a{color:inherit} .kcurso-cat a{color:#039397} /* Descripcion recortada a 2 lineas */ .kcurso-exc .elementor-widget-container{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* ===== Campos de formulario (quiz "Qué curso necesitas", campus, etc.) ===== El tema padre Edumall estilaba estos campos; Hello Elementor no, y su reset.css los deja con borde gris #666. Reproducimos la estética Edumall, limitada a .form-control / #mc-form / #content-form-what para NO interferir con formularios de Elementor (.elementor-field) ni WooCommerce (.input-text). */ /* Separacion vertical entre campos (en Edumall la daba .form-group) */ #content-form-what .form-group,#mc-form .form-group{margin:0 0 25px} .form-control{ width:100%;max-width:100%;min-height:52px; padding:3px 20px;outline:none;box-shadow:none; border:1px solid #f5f5f5;border-radius:5px;background-color:#fff; color:#696969;font-size:16px;font-family:Gordita,system-ui,sans-serif; transition:all .25s cubic-bezier(.645,.045,.355,1); } .form-control:focus{border-color:var(--kairon-primary);color:var(--kairon-heading);background-color:#fff} .form-control::placeholder{color:#9aa0a6;opacity:1} /* Selects: ocultar flecha nativa y poner chevron propio a la derecha */ select.form-control{ padding-right:40px;-moz-appearance:none;-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23696969' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center right 18px;background-size:12px; } /* Enlaces dentro del formulario (política de privacidad): teal, no el rosa del reset */ #mc-form a,#content-form-what a{color:var(--kairon-primary)} #mc-form a:hover,#content-form-what a:hover{color:var(--kairon-primary-dark)} /* Botón enviar del quiz */ #btn-form-qc{ height:52px;line-height:50px;padding:0 41px; border:1px solid var(--kairon-primary);border-radius:5px; color:#fff;background-color:var(--kairon-primary); font-size:14px;font-weight:700;text-align:center;cursor:pointer; transition:all .25s ease; } #btn-form-qc:hover{background-color:var(--kairon-primary-dark);border-color:var(--kairon-primary-dark)} #btn-form-qc[disabled]{opacity:.5;cursor:not-allowed} /* Checkboxes de consentimiento personalizados (teal al marcar) */ #mc-form input[type=checkbox],#content-form-what input[type=checkbox]{ position:relative;-webkit-appearance:none;appearance:none; width:18px;height:18px;margin:0 10px 0 3px;cursor:pointer;flex:0 0 auto; background:#f8f8f8;border:1px solid #ccc;border-radius:3px;vertical-align:middle; } #mc-form input[type=checkbox]:checked,#content-form-what input[type=checkbox]:checked{ background:var(--kairon-primary);border-color:var(--kairon-primary); } #mc-form input[type=checkbox]:checked:after,#content-form-what input[type=checkbox]:checked:after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg); } /* ===== Utilidades de display (para conmutadores .d-none como en Kids) ===== Antes solo estaban en kairon-grid.css (paginas de cursos). Se suben a global para que los toggles tipo "Escoge este programa" funcionen en cualquier pagina. */ .d-none{display:none!important} .d-block{display:block!important} .d-inline-block{display:inline-block!important} .d-flex{display:flex!important} /* ===== Boton CTA de marca (sustituto de tm-button .style-flat de Edumall) ===== En el widget Boton nativo -> Avanzado -> Clases CSS: escribe "kairon-cta" para el relleno teal, o "kairon-cta kairon-cta--ghost" para la version de borde. Para los botones conmutador anade ademas el ID en Avanzado -> ID de CSS (p.ej. show-kids / show-kids-half). */ .kairon-cta .elementor-button,.kairon-cta a.elementor-button,a.kairon-cta.elementor-button{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 36px;border-radius:5px; background-color:var(--kairon-primary);border:1px solid var(--kairon-primary);color:#fff; font-family:Gordita,system-ui,sans-serif;font-size:14px;font-weight:700;line-height:1; text-decoration:none;transition:all .25s ease; } .kairon-cta .elementor-button:hover,.kairon-cta a.elementor-button:hover,a.kairon-cta.elementor-button:hover{ background-color:var(--kairon-primary-dark);border-color:var(--kairon-primary-dark);color:#fff; } .kairon-cta--ghost .elementor-button,a.kairon-cta--ghost.elementor-button{ background-color:transparent;color:var(--kairon-primary); } .kairon-cta--ghost .elementor-button:hover,a.kairon-cta--ghost.elementor-button:hover{ background-color:var(--kairon-primary);color:#fff; } /* ===== Blog / Archivo — estetica de marca (replica de Edumall) ===== Se aplica en el listado del blog, categorias, etiquetas y busqueda. Pensado para el widget "Entradas" de Elementor (.elementor-post) + los widgets de WordPress "Buscar" y "Categorias" en la barra lateral. */ /* --- Tarjeta de entrada --- */ body.blog .elementor-post, body.archive .elementor-post, body.search .elementor-post{ background:#fff;border:1px solid #ededed;border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.05);overflow:hidden; } body.blog .elementor-post__text, body.archive .elementor-post__text, body.search .elementor-post__text{padding:22px 24px 26px} body.blog .elementor-post__title a, body.archive .elementor-post__title a, body.search .elementor-post__title a{color:var(--kairon-heading);font-weight:700} body.blog .elementor-post__title a:hover, body.archive .elementor-post__title a:hover, body.search .elementor-post__title a:hover{color:var(--kairon-primary)} body.blog .elementor-post-date, body.archive .elementor-post-date, body.search .elementor-post-date{color:#9aa0a6} /* "Leer mas" como boton pill teal suave */ body.blog .elementor-post__read-more, body.archive .elementor-post__read-more, body.search .elementor-post__read-more{ display:inline-flex;align-items:center;gap:8px;margin-top:6px; background:#e4f3f2;color:var(--kairon-primary); padding:10px 20px;border-radius:7px;font-weight:600;text-decoration:none; transition:all .2s ease; } body.blog .elementor-post__read-more:hover, body.archive .elementor-post__read-more:hover, body.search .elementor-post__read-more:hover{background:var(--kairon-primary);color:#fff} /* --- Barra lateral (Buscar + Categorias) --- */ /* Encabezados de los widgets (Buscar / Categorias): con linea inferior. Cubre el widget Sidebar, los widgets de WordPress y una clase propia. */ .elementor-widget-sidebar .widget-title, .elementor-widget-wp-widget-categories .elementor-widget-container > h5, .elementor-widget-wp-widget-categories .widget-title, .elementor-widget-wp-widget-search .widget-title, .kairon-sidebar .widget-title, .kairon-sidebar .elementor-heading-title{ border-bottom:1px solid #ededed;padding-bottom:12px;margin-bottom:16px; font-weight:700;color:var(--kairon-heading); } /* Categorias: sin vinetas, recuento a la derecha, hover teal, separadores. Cubre el widget clasico (.widget_categories) y el de Elementor (.elementor-widget-wp-widget-categories). */ .widget_categories ul, .elementor-widget-wp-widget-categories ul{list-style:none;margin:0;padding:0} .widget_categories li, .elementor-widget-wp-widget-categories li{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:9px 0;border-bottom:1px solid #f1f1f1;color:#9aa0a6;list-style:none; } .widget_categories li a, .elementor-widget-wp-widget-categories li a{color:#5c6473;text-decoration:none;flex:1} .widget_categories li a:hover, .elementor-widget-wp-widget-categories li a:hover{color:var(--kairon-primary)} /* sublistas sin el flex del padre */ .widget_categories li ul, .elementor-widget-wp-widget-categories li ul{flex:0 0 100%} /* Buscador: caja gris redondeada con lupa teal */ .widget_search .wp-block-search__inside-wrapper, .widget_search form, .elementor-widget-wp-widget-search form, .kairon-sidebar .search-form{ display:flex;align-items:center;background:#f7f7f7;border:1px solid #ededed; border-radius:8px;overflow:hidden; } .widget_search input[type="search"], .widget_search .wp-block-search__input, .elementor-widget-wp-widget-search input[type="search"]{ border:0!important;background:transparent!important;flex:1;padding:12px 16px;min-height:auto!important; } .widget_search button,.widget_search .wp-block-search__button, .elementor-widget-wp-widget-search button{ background:transparent;border:0;color:var(--kairon-primary);padding:0 14px;cursor:pointer; } /* ===== Blog: widgets de sidebar que faltaban (Ultimas entradas + Tags) ===== */ /* Titulo de tarjeta en negrita, como el blog original de Edumall */ body.blog .elementor-post__title, body.archive .elementor-post__title, body.search .elementor-post__title{font-weight:700} body.blog .elementor-post__title a, body.archive .elementor-post__title a, body.search .elementor-post__title a{font-weight:700} /* Tags populares (nube de etiquetas) como pildoras */ .widget_tag_cloud .tagcloud a, .elementor-widget-wp-widget-tag_cloud .tagcloud a{ display:inline-block;margin:0 6px 8px 0;padding:6px 14px; background:#f5f5f5;border-radius:6px;color:#5c6473!important; font-size:13px!important;line-height:1.4;text-decoration:none;transition:all .2s ease; } .widget_tag_cloud .tagcloud a:hover, .elementor-widget-wp-widget-tag_cloud .tagcloud a:hover{background:var(--kairon-primary);color:#fff!important} /* Ultimas entradas (Entradas recientes de WordPress) */ .widget_recent_entries ul, .elementor-widget-wp-widget-recent-posts ul{list-style:none;margin:0;padding:0} .widget_recent_entries li, .elementor-widget-wp-widget-recent-posts li{padding:9px 0;border-bottom:1px solid #f1f1f1} .widget_recent_entries li a, .elementor-widget-wp-widget-recent-posts li a{color:#5c6473;text-decoration:none} .widget_recent_entries li a:hover, .elementor-widget-wp-widget-recent-posts li a:hover{color:var(--kairon-primary)} .widget_recent_entries .post-date{color:#9aa0a6;font-size:13px} /* ===== Entrada individual (single post) ===== */ /* Enlaces del contenido en teal de marca */ body.single-post .elementor-widget-theme-post-content a, body.single .entry-content a, body.single-post .entry-content a{color:var(--kairon-primary)} body.single-post .elementor-widget-theme-post-content a:hover, body.single .entry-content a:hover, body.single-post .entry-content a:hover{color:var(--kairon-primary-dark)} /* Metadatos (autor / fecha): gris, iconos teal, hover teal */ body.single-post .elementor-post-info__item, body.single-post .elementor-post-info__item a{color:#5c6473;text-decoration:none} body.single-post .elementor-post-info__item a:hover{color:var(--kairon-primary)} body.single-post .elementor-post-info__icon i, body.single-post .elementor-post-info__icon svg{color:var(--kairon-primary);fill:var(--kairon-primary)} /* Pildora de categoria arriba del titulo: anade la clase "kairon-cat-pill" al widget de categoria/terminos (Avanzado > Clases CSS) */ .kairon-cat-pill a, .kairon-cat-pill .elementor-post-info__terms-list-item, .kairon-cat-pill .elementor-heading-title{ display:inline-block;background:#f4f3f3;color:#6b4ea0;border-radius:6px; padding:4px 12px;font-size:12px;font-weight:600;letter-spacing:.03em; text-transform:uppercase;text-decoration:none; } /* ===== Paginas a 100vh (pie al fondo) — clase central ===== kairon-fullvh: cualquier pagina que deba ocupar toda la altura de la ventana con el pie pegado al fondo. Se asigna desde functions.php a partir de una lista editable (filtros kairon_fullvh_pages / _center_pages), asi que anadir una pagina nueva NO requiere tocar este CSS. Las paginas WooCommerce (carrito, checkout, tienda, cuenta) ya son 100vh via sus clases de body en kairon-woo.css; no necesitan esta clase. El pie se empuja al fondo con "margin-top:auto" sobre el