/*
Theme Name: CEFHUM Rediseño
Template: tutorstarter
Description: Child theme de Tutor Starter con el nuevo sistema visual de CEFHUM: paleta (azul, teal, violeta, coral, ámbar), tipografía Montserrat y componentes rediseñados (tarjetas de curso, insignia de matrícula, header, footer). No modifica el Aula Virtual / dashboard de estudiante de Tutor LMS.
Version: 1.0.0
Author: CEFHUM
Text Domain: cefhum-rediseno
*/

/* ==========================================================================
   1. FUENTES — Montserrat autoalojada (mismos pesos que ya usa el sitio,
      más 800 para titulares grandes). Rutas relativas a esta carpeta.
   ========================================================================== */

@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/montserrat-400.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/montserrat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/montserrat-600.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/montserrat-700.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/montserrat-800.woff2') format('woff2');
}


/* ==========================================================================
   2. VARIABLES DE MARCA
   Tutor LMS ya expone --tutor-color-primary (#0089bd, nuestro azul) y lo usa
   en botones, precios y elementos de progreso en TODO el plugin — cursos,
   checkout, dashboard. Lo dejamos igual a propósito: es gratis y evita que
   tengamos que pelear con cada componente de Tutor uno por uno.
   Sumamos los 4 colores de acento que Tutor no trae, para usarlos en las
   secciones propias del sitio (hero, tarjetas, insignias).
   ========================================================================== */

:root{
  /* ya existía en Tutor LMS, se deja igual */
  --tutor-color-primary: #0089bd;

  /* acentos nuevos */
  --cefhum-blue: #0089bd;
  --cefhum-blue-deep: #00658c;
  --cefhum-teal: #0fc2c0;
  --cefhum-teal-deep: #0aa6a4;
  --cefhum-violet: #7055ff;
  --cefhum-violet-deep: #5637e0;
  --cefhum-pink: #f27999;
  --cefhum-pink-deep: #d9557c;
  --cefhum-amber: #f2b705;

  --cefhum-ink: #1f2937;
  --cefhum-ink-soft: #5b6b7a;
  --cefhum-line: #e5e7eb;

  --cefhum-tint-blue: #eff6ff;
  --cefhum-tint-violet: #faf5ff;
  --cefhum-tint-pink: #fdf2f8;
  --cefhum-tint-amber: #fff8e1;
}


/* ==========================================================================
   3. TIPOGRAFÍA GLOBAL
   ========================================================================== */

body,
.tutor-wrap,
.tutor-course-name,
.woocommerce{
  font-family:'Montserrat', ui-sans-serif, system-ui, sans-serif !important;
  color:var(--cefhum-ink);
}

h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
}

/* Eyebrows / etiquetas en mayúscula (usar en Gutenberg: clase adicional "cefhum-eyebrow") */
.cefhum-eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cefhum-violet);
}


/* ==========================================================================
   4. BOTONES
   Cubre los botones de Tutor LMS, WooCommerce y los bloques nativos de
   Gutenberg, para que se vean iguales sin importar de qué plugin vengan.
   ========================================================================== */

.tutor-btn,
.woocommerce a.button,
.woocommerce button.button,
.wp-block-button__link{
  font-family:'Montserrat', sans-serif !important;
  font-weight:600 !important;
  letter-spacing:0.02em;
  border-radius:999px !important;
  text-transform:none;
}

/* Botón primario = teal (única acción principal por pantalla) */
.tutor-btn-primary,
.woocommerce a.button.alt,
.wp-block-button__link{
  background-color:var(--cefhum-teal) !important;
  border-color:var(--cefhum-teal) !important;
  color:#04302f !important;
}
.tutor-btn-primary:hover,
.woocommerce a.button.alt:hover,
.wp-block-button__link:hover{
  background-color:var(--cefhum-teal-deep) !important;
  border-color:var(--cefhum-teal-deep) !important;
}

/* Botón "Añadir al carrito" del catálogo: pasa de contorno azul a teal sólido */
.tutor-btn-outline-primary.add_to_cart_button{
  background-color:var(--cefhum-teal) !important;
  border-color:var(--cefhum-teal) !important;
  color:#04302f !important;
}
.tutor-btn-outline-primary.add_to_cart_button:hover{
  background-color:var(--cefhum-teal-deep) !important;
  border-color:var(--cefhum-teal-deep) !important;
}

/* Botón secundario (outline) */
.tutor-btn-outline-primary:not(.add_to_cart_button){
  background:transparent !important;
  border:2px solid var(--cefhum-blue) !important;
  color:var(--cefhum-blue-deep) !important;
}


/* ==========================================================================
   5. TARJETAS DE CURSO
   ========================================================================== */

.tutor-course-card{
  border-radius:14px !important;
  border:1px solid var(--cefhum-line) !important;
  box-shadow:0 1px 2px rgba(31,41,55,0.06), 0 8px 20px rgba(31,41,55,0.05) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tutor-course-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(31,41,55,0.08), 0 14px 28px rgba(31,41,55,0.09) !important;
}
.tutor-course-name{
  font-weight:600 !important;
  color:var(--cefhum-ink) !important;
}
.list-item-price .price{
  color:var(--cefhum-blue-deep) !important;
  font-weight:700 !important;
}

/* ---- Insignia "Enrollment is now paused" -------------------------------
   Hoy se ve como una alerta de error (ícono de advertencia + texto en
   inglés). La convertimos en una etiqueta neutra tipo "programa a medida",
   coherente con el resto del catálogo. El texto en inglés lo genera Tutor
   LMS del lado del servidor — para cambiarlo hay que traducirlo desde
   Ajustes > Tutor LMS > Idioma, o con un plugin de traducción de strings
   (Loco Translate). Aquí solo se resuelve el estilo visual.
   -------------------------------------------------------------------- */
.tutor-enrollment-status-wrapper.tutor-enrollment-status-paused{
  background:var(--cefhum-tint-violet) !important;
  color:var(--cefhum-violet-deep) !important;
  border:none !important;
  border-radius:999px;
  padding:6px 14px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
}
/* el ícono de advertencia es una fuente de íconos: cambiamos su color,
   no su forma — sigue siendo un ícono plano de un solo color */
.tutor-enrollment-status-wrapper.tutor-enrollment-status-paused .tutor-icon-warning{
  color:var(--cefhum-violet);
}


/* ==========================================================================
   6. HEADER / NAVEGACIÓN
   El header ya usa el azul de marca — solo se afina tipografía y el estado
   hover de los links.
   ========================================================================== */

.header-default{
  background-color:var(--cefhum-blue);
}
.navbar a{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  letter-spacing:0.01em;
}
.navbar a:hover{
  color:var(--cefhum-teal) !important;
}


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer{
  background-color:var(--cefhum-blue);
  color:#fff;
}
.site-footer a{
  color:#eaf6fb;
}
.site-footer a:hover{
  color:var(--cefhum-teal);
}


/* ==========================================================================
   8. UTILIDADES PARA EL EDITOR DE BLOQUES (Gutenberg)
   Para usar sin escribir código: seleccionas un bloque → panel derecho →
   "Clases CSS adicionales" → escribes el nombre de la clase.
   ========================================================================== */

.cefhum-badge{
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:999px;
  color:#fff;
}
.cefhum-badge.pink{ background:var(--cefhum-pink); }
.cefhum-badge.violet{ background:var(--cefhum-violet); }
.cefhum-badge.blue{ background:var(--cefhum-blue); }
.cefhum-badge.amber{ background:var(--cefhum-amber); color:#3d2e00; }

/* Cita / dato destacado — imita wp-block-quote con acento azul */
.wp-block-quote,
.cefhum-callout{
  background:var(--cefhum-tint-blue);
  border-left:4px solid var(--cefhum-blue);
  border-radius:0 10px 10px 0;
  padding:16px 20px;
  font-style:italic;
  color:var(--cefhum-ink);
}

/* Íconos: si Gutenberg inserta un ícono SVG dentro de un bloque con clase
   cefhum-badge, hereda el color del texto automáticamente (currentColor) —
   así se mantiene plano y de un solo color, sin íconos multicolor. */
.cefhum-badge svg,
.cefhum-badge i{
  color:currentColor;
  fill:currentColor;
}