/* ============================================================================
   Valoración online de micropigmentación.

   La carga la página /micropigmentacion y también el modal de las tres fichas, que
   se la pide él mismo: el formulario es el mismo en los dos sitios y así se viste
   una sola vez.

   Hoja aparte y no dentro de landing.css porque esa se sirve minificada —el molde
   usa landing.min.css si existe— y tocar la grande sin regenerar la pequeña no se
   vería. Si algún día se regenera, esto se puede mudar allí.

   Los materiales son los del sistema: cristal de `.dl-memb`, rótulos mono en champán
   como `.dl-dl__h`, y el filo de los campos igual que el de `.dl-form`, que es el que
   ya usaban los campos dentro del modal.
   ============================================================================ */

/* ---- El panel que envuelve el formulario en la página ----------------------- */

.dmi-panel {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 18px;
    background: var(--vidrio);
    border: 1px solid rgba(243, 244, 245, .14);
    box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo);
    backdrop-filter: var(--vidrio-velo);
}

/* Dentro del modal no hace falta panel: la caja del <dialog> ya es el panel. */
.dl-modal .dmi-panel { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }

/* ---- Entrada ---------------------------------------------------------------- */

.dmi-intro { margin: 0 0 clamp(24px, 3.4vh, 36px); color: var(--mut2); font-size: 14.5px; line-height: 1.65; }
.dmi-intro p { margin: 0 0 12px; }
.dmi-intro p:last-child { margin-bottom: 0; }

/* ---- Campos ----------------------------------------------------------------- */

/* Dos columnas donde el formulario original las pedía (Ciudad y Provincia iban con
   `col-lg-6`), que sin Bootstrap salían una debajo de otra. */
.dmi-rej { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dmi-campo--ancho { grid-column: 1 / -1; }

@media (max-width: 599px) {
    .dmi-rej { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.dmi-campo { margin: 0; display: block; }

.dmi-campo label,
.dmi-sub {
    display: block;
    margin-bottom: 7px;
    font-family: var(--f-m);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--champ);
}

.dmi-campo input,
.dmi-campo select,
.dmi-campo textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(243, 244, 245, .04);
    border: 1px solid rgba(243, 244, 245, .24);
    color: var(--w);
    font-family: var(--f-b);
    font-size: 14.5px;
    line-height: 1.4;
    transition: border-color .3s var(--e-expo);
}

.dmi-campo textarea { resize: vertical; min-height: 110px; }
.dmi-campo input::placeholder,
.dmi-campo textarea::placeholder { color: var(--t4); }
.dmi-campo input:focus,
.dmi-campo select:focus,
.dmi-campo textarea:focus { outline: none; border-color: var(--champ); }

/* El desplegable nativo pinta su lista con los colores del sistema operativo: en
   claro saldría texto blanco sobre blanco. */
.dmi-campo select option { background: #121212; color: #f3f4f5; }

.dmi-err { display: block; margin-top: 6px; color: #ff8b7a; font-size: 12px; }

/* ---- Las cuatro fotos ------------------------------------------------------- */

.dmi-fotos { margin-top: clamp(22px, 3vh, 30px); }

label.dmi-caja {
    margin-bottom: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px dashed rgba(243, 244, 245, .28);
    background: rgba(243, 244, 245, .03);
    cursor: pointer;
    transition: border-color .3s var(--e-expo), background .3s var(--e-expo);
}

.dmi-caja:hover { border-color: var(--champ); background: rgba(243, 244, 245, .05); }

/* Esta caja es un <label>, y dentro del modal la pilla `.dl-form label`, que es la
   regla que ya vestía los rótulos de ahí: mono, 10 px y MAYÚSCULAS. Las mayúsculas se
   heredan y rompen la ligadura del icono, que salía escrito «ADD_PHOTO_ALTERNATE».
   Se deshace aquí y se vuelve a poner solo donde sí la quiero, en la cuenta. */
label.dmi-caja {
    font-family: var(--f-b);
    font-size: 14.5px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--mut2);
}

/* Transparente y encima, no `display:none`: un campo escondido del todo y obligatorio
   deja al navegador sin sitio donde enseñar su aviso, y Chrome se planta diciendo que
   el control no se puede enfocar. Así sigue siendo el campo real, y recibe el foco y
   el clic. */
.dmi-caja input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dmi-caja:focus-within { border-color: var(--champ); }

/* Un «+» dibujado con dos barras dentro de un círculo: ni fuente de iconos ni SVG. */
.dmi-caja__ic {
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(216, 185, 142, .5);
}

.dmi-caja__ic::before,
.dmi-caja__ic::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--champ);
    transform: translate(-50%, -50%);
}

.dmi-caja__ic::before { width: 11px; height: 1px; }
.dmi-caja__ic::after { width: 1px; height: 11px; }
.dmi-caja__t { font-size: 14.5px; color: var(--w); }
.dmi-caja__n { margin-left: auto; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.dmi-caja__n--ok { color: var(--champ); }
.dmi-caja__n--mal { color: #ff8b7a; }

@media (max-width: 479px) {
    .dmi-caja { flex-wrap: wrap; }
    .dmi-caja__n { margin-left: 0; flex-basis: 100%; }
}

.dmi-ej__t { margin: 16px 0 10px; color: var(--mut); font-size: 12.5px; line-height: 1.5; }

/* Cuatro miniaturas en fila. Con las clases de Bootstrap muertas salían a tamaño
   completo, una debajo de otra: 2.000 px de ejemplos dentro del formulario. */
.dmi-ej {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dmi-ej img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(243, 244, 245, .12);
}

/* Los campos no traen margen de arriba —los separa la rejilla—, así que «Comentarios
   adicionales», que va suelto detrás del bloque de fotos, se quedaba pegado a las
   miniaturas. */
.dmi-fotos + .dmi-campo { margin-top: clamp(22px, 3vh, 30px); }

/* ---- Protección de datos y envío -------------------------------------------- */

.dmi-datos { margin-top: clamp(22px, 3vh, 30px); color: var(--mut); font-size: 13px; line-height: 1.6; }
.dmi-datos p { margin: 0 0 14px; }
.dmi-datos b { color: var(--mut2); font-weight: 600; }
.dmi-datos a { color: var(--champ); }

/* Lo mismo: el consentimiento es un <label> y el texto salía en mayúsculas de mono. */
label.dmi-check {
    display: flex;
    margin-bottom: 0;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: var(--f-b);
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--mut2);
}
.dmi-check input { flex: 0 0 auto; width: auto; margin-top: .2em; accent-color: var(--champ); }

.dmi-fin { margin-top: clamp(24px, 3.4vh, 34px); }

/* ---- Errores y acuse -------------------------------------------------------- */

.dmi-mal {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 139, 122, .4);
    background: rgba(255, 139, 122, .07);
    color: #ffb3a7;
    font-size: 13.5px;
}

.dmi-mal__t { margin: 0 0 8px; font-weight: 600; }
.dmi-mal ul { margin: 0; padding-left: 18px; }
.dmi-mal li { margin-top: 4px; }

.dmi-ok { text-align: center; padding: clamp(8px, 2vh, 20px) 0; }

.dmi-ok__marca {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 1px solid var(--champ);
    position: relative;
}

/* El palote del visto, dibujado con dos lados de una caja girada. */
.dmi-ok__marca::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 16px;
    width: 10px;
    height: 17px;
    border: solid var(--champ);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.dmi-ok__t { margin: 0 0 12px; font-family: var(--f-d); font-size: clamp(22px, 2.4vw, 28px); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; color: var(--w); }
.dmi-ok__d { max-width: 54ch; margin: 0 auto 24px; color: var(--mut2); font-size: 14.5px; line-height: 1.65; }