/* =========================
   DTP THEME COLORS
   (Aplicado a ambos forms)
   ========================= */

#dtp-form,
#dtp-publication-form {

    /* Texto principal */
    --dtp-text: var(
        --e-global-color-text,
        var(--wp--preset--color--text, currentColor)
    );

    /* Color principal */
    --dtp-base: var(
        --e-global-color-primary,
        var(--wp--preset--color--base, currentColor)
    );

    /* Secundario */
    --dtp-secundario: var(
        --e-global-color-secondary,
        var(--wp--preset--color--secundario, currentColor)
    );

    /* Énfasis / contraste */
    --dtp-contrast: var(
        --e-global-color-accent,
        var(--wp--preset--color--contrast, currentColor)
    );
}

/* =========================
   DTP FORM – Base styles
   ========================= */

#dtp-form,
#dtp-publication-form {
    color: var(--dtp-text);
}

/* =========================
   BOTONES
   ========================= */

#dtp-form button,
#dtp-form input[type="submit"],
#dtp-form input[type="button"],
#dtp-publication-form button,
#dtp-publication-form input[type="submit"],
#dtp-publication-form input[type="button"] {
    background: none;
    color: var(--dtp-base);

    border: 1px solid var(--dtp-base);
    border-radius: 30px;

    padding: 0.6em 1.4em;

    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;

    cursor: pointer;

    box-shadow: 0 0 10px var(--dtp-base);

    transition:
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

#dtp-form button:hover,
#dtp-form input[type="submit"]:hover,
#dtp-publication-form button:hover,
#dtp-publication-form input[type="submit"]:hover {
    background: var(--dtp-base);
    color: var(--dtp-secundario);
    box-shadow: 0 0 14px var(--dtp-base);
}

#dtp-form button:active,
#dtp-form input[type="submit"]:active,
#dtp-publication-form button:active,
#dtp-publication-form input[type="submit"]:active {
    transform: translateY(1px);
}

/* Texto inmediatamente después de botones */
#dtp-form button + p,
#dtp-form input[type="button"] + p,
#dtp-publication-form button + p,
#dtp-publication-form input[type="button"] + p {
    margin-top: 0.3em;
}

/* =========================
   INPUTS / SELECTS / TEXTAREA
   ========================= */

#dtp-form input:not([type="checkbox"]):not([type="radio"]),
#dtp-form select,
#dtp-form textarea,
#dtp-publication-form input:not([type="checkbox"]):not([type="radio"]),
#dtp-publication-form select,
#dtp-publication-form textarea {
    width: 100%;
    box-sizing: border-box;

    /* Clave: si el theme mete background del input,
       lo forzamos a transparente y el texto al color del theme */
    background: transparent !important;
    color: var(--dtp-text) !important;

    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;

    border: 1px solid var(--dtp-base);
    border-radius: 0;

    padding: 0.4em 0.6em;

    box-shadow: none;

    margin-bottom: 0.4em;
}

/* Placeholder visible */
#dtp-form textarea::placeholder,
#dtp-form input::placeholder,
#dtp-publication-form textarea::placeholder,
#dtp-publication-form input::placeholder {
    color: var(--dtp-text);
    opacity: 0.65;
}

/* Focus limpio */
#dtp-form input:focus,
#dtp-form select:focus,
#dtp-form textarea:focus,
#dtp-publication-form input:focus,
#dtp-publication-form select:focus,
#dtp-publication-form textarea:focus {
    outline: none;
    box-shadow: 0 0 6px var(--dtp-base);
}

/* =========================
   CHECKBOXES & RADIOS
   ========================= */

#dtp-form input[type="checkbox"],
#dtp-form input[type="radio"],
#dtp-publication-form input[type="checkbox"],
#dtp-publication-form input[type="radio"] {
    accent-color: var(--dtp-base);
    width: 1em;
    height: 1em;
    cursor: pointer;
}

/* Labels */
#dtp-form label,
#dtp-publication-form label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;

    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

/* =========================
   RITMO TIPOGRÁFICO
   ========================= */

#dtp-form p,
#dtp-form ul,
#dtp-form li,
#dtp-publication-form p,
#dtp-publication-form ul,
#dtp-publication-form li {
    margin: 0;
    padding: 0;
}

#dtp-form p,
#dtp-form fieldset,
#dtp-publication-form p,
#dtp-publication-form fieldset {
    margin-bottom: 0.9em;
}

#dtp-form h3,
#dtp-publication-form h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 1.6em 0 0.6em 0;
}

#dtp-form h3:first-of-type,
#dtp-publication-form h3:first-of-type {
    margin-top: 0;
}

#dtp-form small,
#dtp-publication-form small {
    font-size: 14px;
    line-height: 1.5;
    display: block;
    margin-top: 0.4em;
}

/* =========================
   SEPARADORES
   ========================= */

#dtp-form hr,
#dtp-publication-form hr {
    border: none;
    border-top: 1px solid var(--dtp-contrast);
    margin: 2em 0;
}

/* Separador entre modelos y extras (láminas) */
#dtp-add-model {
    margin-bottom: 0.8em;
}

/* Separador visual antes de Extras */
#dtp-form .dtp-extras,
#dtp-publication-form .dtp-extras {
    margin-top: 1.4em;
    padding-top: 1.2em;
    border-top: 1px solid var(--dtp-text);
}

/* =========================
   BLOQUES DE OPCIONES
   ========================= */

/* Caras (radios) → 1 columna (solo láminas) */
#dtp-form .dtp-model p:has(input[type="radio"]) {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

/* =========================
   TINTAS (2 COLUMNAS) — ambos forms
   (usamos .dtp-inks en vez de :has, más robusto)
   ========================= */

#dtp-form .dtp-inks,
#dtp-publication-form .dtp-inks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.2em;
    row-gap: 0.25em;
}

/* Móvil */
@media (max-width: 600px) {
    #dtp-form .dtp-inks,
    #dtp-publication-form .dtp-inks {
        grid-template-columns: 1fr;
    }
}

/* Nota de asterisco */
#dtp-form .dtp-inks-note,
#dtp-publication-form .dtp-inks-note {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.85;
    margin-top: -0.4em;
}

/* Nota de modelos (debajo del botón) */
#dtp-form .dtp-models-note,
#dtp-publication-form .dtp-models-note {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.85;
    margin-top: -0.3em;
    margin-bottom: 1.2em;
}

/* Intro */
#dtp-form .dtp-form-intro,
#dtp-publication-form .dtp-form-intro {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.95;
    margin-bottom: 1.2em;
}

/* =========================
   EXTRAS (1 COLUMNA)
   ========================= */

#dtp-form .dtp-extras p,
#dtp-publication-form .dtp-extras p {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

/* =========================
   MENSAJES (ÉXITO / ERROR)
   (sin “caja con contorno”)
   ========================= */

#dtp-message .dtp-success,
#dtp-message .dtp-error,
#dtp-publication-message .dtp-success,
#dtp-publication-message .dtp-error {
    margin-top: 1em;
    padding: 10px 12px;
    color: var(--dtp-text);
    background: none;
    border: none;
    box-shadow: none;
}


#dtp-form[data-dtp-submitted="1"] button,
#dtp-publication-form[data-dtp-submitted="1"] button,
#dtp-form[data-dtp-submitted="1"] input[type="submit"],
#dtp-publication-form[data-dtp-submitted="1"] input[type="submit"] {
    opacity: 0.65;
    cursor: not-allowed;
}

#dtp-message .dtp-success-prominent,
#dtp-publication-message .dtp-success-prominent {
    margin-top: 1em;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    border: 2px solid var(--dtp-base);
    box-shadow: 0 0 16px var(--dtp-base);
    background: rgba(255,255,255,0.06);
}

#dtp-message .dtp-success-prominent strong,
#dtp-publication-message .dtp-success-prominent strong {
    font-size: 18px;
    line-height: 1.25;
}

#dtp-message .dtp-success-prominent span,
#dtp-publication-message .dtp-success-prominent span {
    font-size: 14px;
    line-height: 1.5;
}