/* Formulario de contacto de Panadero, v2.6: tres pasos (motivo, detalles, sus datos).
   Todo va prefijado con .panre- para no chocar con el tema ni con Elementor.

   El aspecto NO es propio: sale del kit de Elementor de cada web (negro, gris, el naranja
   de acento y la fuente global, Futura en panadero.fr) por sus variables, con un repuesto
   por si no existen. Esquinas rectas, sin sombras, sin mayusculas espaciadas: lo mismo que
   el resto de la web. Los selectores llevan «div.panre» delante para ganarle a los estilos
   globales de botones y campos del tema. */
div.panre{
    --panre-ink:var(--e-global-color-primary,#000);
    --panre-texto:var(--e-global-color-text,#3B3B3B);
    --panre-acento:var(--e-global-color-accent,#F26522);
    --panre-gris:#767676; --panre-linea:#CFCFCF; --panre-suave:#E7E7E7; --panre-fondo:#F8F8F8;
    --panre-mal:#B3261E;
    max-width:46rem;margin:0 auto;color:var(--panre-texto);text-align:left;
    font-family:var(--e-global-typography-text-font-family,inherit);font-size:17px;line-height:1.5}
div.panre *,div.panre *::before,div.panre *::after{box-sizing:border-box}
div.panre [hidden]{display:none!important}
div.panre select,div.panre input,div.panre textarea,div.panre button{font-family:inherit}

/* --- la cabecera de pasos: hace de pestanas ------------------------------------------- */
div.panre .panre-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;list-style:none;
    margin:0 0 2.2rem;padding:0;counter-reset:none}
div.panre .panre-pasos li{display:flex;align-items:baseline;gap:.5rem;margin:0;padding:.7rem 0 0;
    border-top:2px solid var(--panre-suave);color:var(--panre-gris);font-size:15px;line-height:1.3}
div.panre .panre-pasos li::before,div.panre .panre-pasos li::marker{content:none}
div.panre .panre-n{font-variant-numeric:tabular-nums;font-size:13px}
div.panre .panre-pasos li.es-actual,div.panre .panre-pasos li.es-hecho{border-top-color:var(--panre-ink);color:var(--panre-ink)}
div.panre .panre-pasos li.es-actual .panre-pt{font-weight:500}
div.panre .panre-pasos li.es-hecho,div.panre .panre-pasos li.es-visitado{cursor:pointer}
div.panre .panre-pasos li.es-hecho:hover .panre-pt,div.panre .panre-pasos li.es-visitado:hover .panre-pt{text-decoration:underline;text-underline-offset:3px}

/* --- paso 1: el motivo, en filas para pulsar ------------------------------------------ */
div.panre .panre-titulo{font-size:1.55rem;font-weight:400;line-height:1.25;color:var(--panre-ink);margin:0 0 1.4rem}
div.panre .panre-opciones{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
div.panre .panre-opcion{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
    min-height:4rem;margin:0;padding:.9rem 1.1rem;text-align:left;font-size:17px;font-weight:400;line-height:1.3;
    letter-spacing:0;text-transform:none;color:var(--panre-ink);background:#fff;border:1px solid var(--panre-linea);
    border-radius:0;box-shadow:none;cursor:pointer;transition:border-color .15s,background-color .15s}
div.panre .panre-opcion::after{content:"";flex:none;width:.5rem;height:.5rem;border-right:1.5px solid currentColor;
    border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.45;transition:opacity .15s,transform .15s}
div.panre .panre-opcion:hover,div.panre .panre-opcion:focus-visible{border-color:var(--panre-ink);background:var(--panre-fondo);color:var(--panre-ink)}
div.panre .panre-opcion:hover::after{opacity:1;transform:translateX(3px) rotate(45deg)}
div.panre .panre-opcion.es-elegida{border-color:var(--panre-ink);box-shadow:inset 0 0 0 1px var(--panre-ink)}
div.panre .panre-opcion.es-elegida::after{opacity:1;color:var(--panre-acento)}

/* --- paso 2 y 3: los campos ----------------------------------------------------------- */
div.panre .panre-elegido{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;margin:0 0 1.8rem;
    padding:0 0 1.1rem;border-bottom:1px solid var(--panre-suave);font-size:1.3rem;line-height:1.3;color:var(--panre-ink)}
div.panre .panre-lab{display:block;margin:0 0 .4rem;padding:0;font-size:15px;font-weight:500;line-height:1.35;
    letter-spacing:0;text-transform:none;color:var(--panre-ink)}
div.panre .panre-ayuda{margin:-.75rem 0 1.25rem;font-size:14px;line-height:1.45;color:var(--panre-gris)}
div.panre select,div.panre input[type=text],div.panre input[type=email],div.panre input[type=tel],
div.panre input[type=number],div.panre textarea{
    display:block;width:100%;min-height:3.1rem;margin:0 0 1.25rem;padding:.75rem .85rem;font-size:17px;line-height:1.4;
    color:var(--panre-ink);background:#fff;border:1px solid var(--panre-linea);border-radius:0;box-shadow:none;
    outline:0;-webkit-appearance:none;appearance:none;transition:border-color .15s}
div.panre textarea{resize:vertical;min-height:6.5rem}
div.panre select{padding-right:2.4rem;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 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .9rem center;cursor:pointer}
div.panre ::placeholder{color:#9A9A9A;opacity:1}
div.panre select:hover,div.panre input:hover,div.panre textarea:hover{border-color:#8C8C8C}
div.panre select:focus,div.panre input[type=text]:focus,div.panre input[type=email]:focus,div.panre input[type=tel]:focus,
div.panre input[type=number]:focus,div.panre textarea:focus{border-color:var(--panre-ink);box-shadow:inset 0 0 0 1px var(--panre-ink)}
/* !important a proposito: la regla del campo (div.panre input[type=text]) pesa mas que una
   clase suelta, y sin esto el campo que falta NO salia en rojo (visto el 21/09/2026) */
div.panre input.panre-mal,div.panre select.panre-mal,div.panre textarea.panre-mal,
div.panre input.panre-mal:hover,div.panre select.panre-mal:hover,div.panre textarea.panre-mal:hover,
div.panre input.panre-mal:focus,div.panre select.panre-mal:focus,div.panre textarea.panre-mal:focus{
    border-color:var(--panre-mal)!important;box-shadow:inset 0 0 0 1px var(--panre-mal)!important}

div.panre .panre-fila{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
/* si el primero de la fila esta escondido (el ano, en averia), el otro ocupa todo el ancho */
div.panre .panre-fila > [hidden] + div{grid-column:1 / -1}

div.panre .panre-radios{min-width:0;margin:0 0 1.25rem;padding:0;border:0}
div.panre .panre-radios legend{float:none;width:auto;padding:0}
div.panre .panre-radios label{display:inline-flex;align-items:center;gap:.55rem;margin:.15rem 1.8rem .35rem 0;
    font-size:17px;font-weight:400;color:var(--panre-texto);cursor:pointer}
div.panre .panre-radios-col label{display:flex;margin-right:0}
div.panre .panre-radios.panre-mal{box-shadow:none}
div.panre .panre-radios.panre-mal legend{color:var(--panre-mal)}
div.panre input[type=radio],div.panre input[type=checkbox]{flex:none;width:1.15rem;height:1.15rem;margin:0;
    accent-color:var(--panre-ink);cursor:pointer}

div.panre .panre-pro{margin:0 0 .4rem;padding:1.3rem 1.2rem .1rem;background:var(--panre-fondo)}
div.panre .panre-pro input{background:#fff}

div.panre .panre-priv{display:flex;align-items:flex-start;gap:.65rem;margin:.6rem 0 0;font-size:15px;font-weight:400;
    line-height:1.45;color:var(--panre-texto);cursor:pointer}
div.panre .panre-priv input{margin-top:.15rem}
div.panre .panre-priv a{color:var(--panre-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
div.panre .panre-priv a:hover{color:var(--panre-acento)}
div.panre .panre-priv.panre-mal{color:var(--panre-mal);box-shadow:none}

/* --- los adjuntos ---------------------------------------------------------------------- */
/* el input nativo se esconde (sigue accesible con teclado) y manda el boton propio */
div.panre input[type=file].panre-oculto{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;
    overflow:hidden;clip:rect(0 0 0 0)}
div.panre .panre-elegir{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.25rem;padding:.6rem 1rem;
    font-size:15px;font-weight:400;line-height:1.3;color:var(--panre-ink);background:#fff;border:1px solid var(--panre-ink);
    cursor:pointer;transition:background-color .15s,color .15s}
div.panre .panre-elegir::before{content:"+";font-size:1.15em;line-height:1}
div.panre .panre-elegir:hover{color:#fff;background:var(--panre-ink)}
div.panre input[type=file].panre-oculto:focus-visible + .panre-elegir{outline:2px solid var(--panre-ink);outline-offset:2px}
div.panre .panre-lista{list-style:none;margin:-.6rem 0 1.25rem;padding:0;font-size:15px;color:var(--panre-texto)}
div.panre .panre-lista:empty{display:none}
div.panre .panre-lista li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;padding:.5rem 0;
    border-bottom:1px solid var(--panre-suave)}
div.panre .panre-lista li::before{content:none}
div.panre .panre-lista span{min-width:0;overflow-wrap:anywhere}
div.panre .panre-quitar,div.panre .panre-enlace{margin:0;padding:0;font-size:15px;font-weight:400;line-height:1.3;
    letter-spacing:0;text-transform:none;color:var(--panre-gris);background:none;border:0;border-radius:0;box-shadow:none;
    text-decoration:underline;text-underline-offset:3px;cursor:pointer}
div.panre .panre-quitar{flex:none;font-size:14px}
div.panre .panre-quitar:hover,div.panre .panre-enlace:hover{color:var(--panre-ink);background:none}
div.panre .panre-adjuntos{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;margin:.6rem 0 0;padding:1.5rem 0 0;
    border-top:1px solid var(--panre-suave)}
div.panre .panre-adjuntos .panre-ancho{grid-column:1 / -1}
div.panre .panre-adjuntos .panre-ayuda,div.panre .panre-elegir + .panre-lista + .panre-ayuda{margin-top:-.75rem}

/* --- el pie de cada paso ---------------------------------------------------------------- */
div.panre .panre-pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.8rem 0 0;
    padding:1.3rem 0 0;border-top:1px solid var(--panre-suave)}
div.panre .panre-pie .panre-enlace{text-decoration:none;color:var(--panre-texto)}
div.panre .panre-pie .panre-enlace::before{content:"\2190\00a0\00a0"}
div.panre .panre-pie .panre-enlace:hover{text-decoration:underline}
div.panre .panre-boton{min-width:11rem;margin:0;padding:.95rem 2rem;font-size:16px;font-weight:500;line-height:1.2;
    letter-spacing:.02em;text-transform:none;color:#fff;background:var(--panre-ink);border:1px solid var(--panre-ink);
    border-radius:0;box-shadow:none;cursor:pointer;transition:background-color .15s,border-color .15s}
div.panre .panre-boton:hover,div.panre .panre-boton:focus-visible{color:#fff;background:var(--panre-acento);border-color:var(--panre-acento)}
div.panre .panre-boton[disabled]{opacity:.5;cursor:default;background:var(--panre-ink);border-color:var(--panre-ink)}
div.panre button:focus-visible,div.panre .panre-pasos li:focus-visible{outline:2px solid var(--panre-ink);outline-offset:2px}

div.panre .panre-estado{min-height:1.4rem;margin:.9rem 0 0;font-size:15px;text-align:right;color:var(--panre-gris)}
div.panre .panre-estado.mal{color:var(--panre-mal)}

/* --- la confirmacion ---------------------------------------------------------------------- */
div.panre .panre-hecho{display:flex;align-items:flex-start;gap:1.1rem;padding:2rem 0;border-top:2px solid var(--panre-ink);outline:0}
div.panre .panre-visto{flex:none;position:relative;width:2.4rem;height:2.4rem;border:1.5px solid var(--panre-ink);border-radius:50%}
div.panre .panre-visto::after{content:"";position:absolute;left:.86rem;top:.5rem;width:.55rem;height:1rem;
    border-right:1.5px solid var(--panre-ink);border-bottom:1.5px solid var(--panre-ink);transform:rotate(45deg)}
div.panre .panre-hecho-txt{margin:.2rem 0 0;font-size:1.2rem;line-height:1.5;color:var(--panre-ink)}
div.panre .panre-hecho-txt strong{font-weight:500;white-space:nowrap;border-bottom:2px solid var(--panre-acento)}

/* la trampa para robots: invisible y fuera del recorrido del teclado */
div.panre .panre-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:40rem){
    div.panre{font-size:16px}
    div.panre .panre-opciones,div.panre .panre-fila,div.panre .panre-adjuntos{grid-template-columns:1fr}
    div.panre .panre-titulo{font-size:1.35rem}
    div.panre .panre-pasos{margin-bottom:1.6rem}
    div.panre .panre-pasos li{font-size:14px}
    div.panre .panre-pie{flex-direction:column-reverse;align-items:stretch;gap:1.1rem}
    div.panre .panre-pie .panre-enlace{align-self:flex-start}
    div.panre .panre-boton{width:100%}
    div.panre .panre-estado{text-align:left}
}
@media (prefers-reduced-motion:reduce){div.panre *{transition:none!important}}