/* ==============================================================
   CursoGratis.info — Sistema de diseño «Subrayador»
   --------------------------------------------------------------
   Identidad: apuntes de estudiante. Lo importante va subrayado
   con marcador fosforito (gratis, precio del diploma, estado activo).
   Se carga DESPUÉS de Tailwind CDN. Componentes con prefijo .cg-
   ============================================================== */

:root {
    --cg-ink: #1E2A32;          /* texto principal, secciones oscuras */
    --cg-ink-soft: #52616B;     /* texto secundario */
    --cg-paper: #F8F7F4;        /* fondo de página */
    --cg-surface: #FFFFFF;      /* tarjetas y paneles */
    --cg-line: #E7E4DB;         /* bordes sobre papel */
    --cg-primary: #0C7C6C;      /* verde pino: acciones y enlaces */
    --cg-primary-dark: #095E52;
    --cg-primary-soft: #E3F0ED; /* fondo suave del primario */
    --cg-marcador: #FFE14D;     /* amarillo fosforito: la firma */
    --cg-marcador-dark: #F2CC0F;
    --cg-star: #D97706;         /* estrellas de rating sobre blanco */
    --cg-radius: 10px;
    --cg-radius-card: 16px;
    --cg-shadow-card: 0 14px 34px -16px rgba(30, 42, 50, .22);
}

/* ---------- Base ------------------------------------------------ */

::selection {
    background: var(--cg-marcador);
    color: var(--cg-ink);
}

/* Foco visible coherente en todo el sitio */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(12, 124, 108, .5);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Firma: marca de subrayador -------------------------- */

/* Subraya la mitad inferior del texto, como un rotulador fosforito */
.cg-mark {
    background-image: linear-gradient(to top,
        rgba(255, 225, 77, .95) 0%,
        rgba(255, 225, 77, .95) 36%,
        transparent 36%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 .12em;
}

/* Variante: highlight completo para palabras sueltas o cifras */
.cg-mark-full {
    background: var(--cg-marcador);
    color: var(--cg-ink);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: .05em .3em;
    border-radius: 4px;
}

/* Subrayado de marcador para navegación activa */
.cg-nav-active {
    background-image: linear-gradient(to top,
        var(--cg-marcador) 0%,
        var(--cg-marcador) 3px,
        transparent 3px);
    padding-bottom: 2px;
}

/* Textura «hoja de apuntes»: rayado horizontal muy sutil */
.cg-ruled {
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 27px,
        rgba(30, 42, 50, .055) 27px, rgba(30, 42, 50, .055) 28px);
}

/* Placeholder de imagen de curso: papel rayado teñido de primario */
.cg-course-thumb {
    background-color: var(--cg-primary-soft);
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 23px,
        rgba(12, 124, 108, .12) 23px, rgba(12, 124, 108, .12) 24px);
}

/* ---------- Botones --------------------------------------------- */

.cg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.75rem;               /* 44px: área táctil mínima */
    padding: 0 1.25rem;
    border-radius: var(--cg-radius);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cg-btn:active { transform: translateY(1px); }
.cg-btn:disabled { opacity: .55; cursor: not-allowed; }

.cg-btn-sm { height: 2.25rem; padding: 0 .875rem; font-size: .8125rem; }
.cg-btn-lg { height: 3.25rem; padding: 0 1.75rem; font-size: 1rem; }

/* Acción principal (empezar curso, buscar, guardar) */
.cg-btn-primary {
    background: var(--cg-primary);
    color: #fff;
}
.cg-btn-primary:hover { background: var(--cg-primary-dark); }

/* Acción de conversión: comprar diploma. Siempre marcador. */
.cg-btn-diploma {
    background: var(--cg-marcador);
    color: var(--cg-ink);
    box-shadow: 0 8px 20px -10px rgba(242, 204, 15, .8);
}
.cg-btn-diploma:hover { background: var(--cg-marcador-dark); }

/* Botón tinta (CTAs sobre fondos claros que piden peso) */
.cg-btn-ink {
    background: var(--cg-ink);
    color: #fff;
}
.cg-btn-ink:hover { background: #10181D; }

/* Secundario / fantasma */
.cg-btn-ghost {
    background: var(--cg-surface);
    border-color: var(--cg-line);
    color: var(--cg-ink);
}
.cg-btn-ghost:hover { border-color: var(--cg-primary); color: var(--cg-primary); }

/* Fantasma sobre fondo tinta */
.cg-btn-ghost-dark {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.cg-btn-ghost-dark:hover { background: rgba(255, 255, 255, .16); }

/* ---------- Tarjetas --------------------------------------------- */

.cg-card {
    background: var(--cg-surface);
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius-card);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cg-card-hover:hover,
a.cg-card:hover, article.cg-card:hover {
    border-color: rgba(12, 124, 108, .45);
    box-shadow: var(--cg-shadow-card);
    transform: translateY(-2px);
}

/* Sección tinta (bloques oscuros de ritmo: carreras, CTA final, footer) */
.cg-ink-section {
    background: var(--cg-ink);
    color: #EDF1F3;
}
.cg-ink-section .cg-card {
    background: #26343D;
    border-color: #37464F;
}

/* ---------- Formularios ------------------------------------------ */

.cg-input {
    width: 100%;
    height: 2.875rem;
    padding: 0 1rem;
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius);
    background: var(--cg-surface);
    color: var(--cg-ink);
    font-size: .9375rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cg-input::placeholder { color: #9AA5AC; }
.cg-input:focus {
    outline: none;
    border-color: var(--cg-primary);
    box-shadow: 0 0 0 3px rgba(12, 124, 108, .18);
}
textarea.cg-input { height: auto; padding: .75rem 1rem; }

.cg-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cg-ink);
    margin-bottom: .375rem;
}

/* ---------- Chips, badges, eyebrows ------------------------------- */

.cg-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .4375rem .875rem;
    border-radius: 999px;
    border: 1px solid var(--cg-line);
    background: var(--cg-surface);
    color: var(--cg-ink-soft);
    font-size: .8125rem;
    font-weight: 500;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cg-chip:hover { border-color: var(--cg-primary); color: var(--cg-primary); }

/* La señal «gratis»: siempre marcador sobre tinta */
.cg-badge-gratis {
    display: inline-flex;
    align-items: center;
    padding: .1875rem .5rem;
    border-radius: 6px;
    background: var(--cg-marcador);
    color: var(--cg-ink);
    font-size: .6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* Badge neutro (duración, nivel, categoría sobre imagen) */
.cg-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: 6px;
    background: rgba(30, 42, 50, .78);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
}

/* Eyebrow de sección: pequeña etiqueta sobre el titular */
.cg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--cg-primary);
}
.cg-eyebrow::before {
    content: "";
    width: 1.25rem;
    height: .5rem;
    border-radius: 2px;
    background: var(--cg-marcador);
}

/* ---------- Rating ------------------------------------------------ */

.cg-stars { color: var(--cg-star); letter-spacing: .05em; }

/* ---------- Código de certificado --------------------------------- */

.cg-code {
    font-family: "Spline Sans Mono", ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: .12em;
    background: var(--cg-paper);
    border: 1px dashed var(--cg-line);
    border-radius: 8px;
    padding: .375rem .75rem;
    color: var(--cg-ink);
}

/* ---------- Tablas ------------------------------------------------ */

.cg-table { width: 100%; border-collapse: collapse; }
.cg-table th {
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cg-ink-soft);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cg-line);
}
.cg-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cg-line);
    font-size: .9375rem;
    color: var(--cg-ink);
}
.cg-table tr:last-child td { border-bottom: none; }
.cg-table-highlight { background: rgba(255, 225, 77, .18); }

/* ---------- FAQ (details/summary) ---------------------------------- */

.cg-faq {
    background: var(--cg-surface);
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius-card);
    padding: 1.25rem 1.5rem;
}
.cg-faq summary {
    font-weight: 700;
    color: var(--cg-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.cg-faq summary::-webkit-details-marker { display: none; }
.cg-faq summary::after {
    content: "+";
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--cg-primary);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.cg-faq[open] summary::after { transform: rotate(45deg); }
.cg-faq[open] { border-color: rgba(12, 124, 108, .35); }

/* ---------- Flash messages (sesión) --------------------------------- */

.flash-message {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: .75rem 0;
    font-size: .875rem;
    font-weight: 500;
}
.flash-message .container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.flash-success { background: #E5F5EC; color: #14532D; border-bottom: 1px solid #BBE5CC; }
.flash-error { background: #FDE8E8; color: #7F1D1D; border-bottom: 1px solid #F5C6C6; }
.flash-close { background: none; border: none; cursor: pointer; color: inherit; opacity: .7; }
.flash-close:hover { opacity: 1; }

/* ---------- Soporte dark-mode (clase .dark, legado) ------------------ */

.dark .cg-card { background: #18232B; border-color: #2A3641; }
.dark .cg-input { background: #18232B; border-color: #2A3641; color: #EDF1F3; }
.dark .cg-btn-ghost { background: #18232B; border-color: #2A3641; color: #EDF1F3; }
.dark .cg-faq { background: #18232B; border-color: #2A3641; }
.dark .cg-faq summary { color: #EDF1F3; }
.dark .cg-table td { color: #EDF1F3; border-color: #2A3641; }
.dark .cg-code { background: #10181D; border-color: #2A3641; color: #EDF1F3; }