/* Portal público de Atención al Cliente — estética de la casa
   (paleta de docs/GUIA-ESTETICA.md) con chasis propio, como booking/ y c.php.
   Prefijo atcp- en todo lo del portal. */
* { box-sizing: border-box; }
body {
    margin: 0; background: #F5F6F8; color: #1C2634;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 16px; line-height: 1.5;
}
.atcp-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
/* La PORTADA va a dos columnas y algo mas ancha: con las dos tarjetas apiladas
   habia que bajar hasta el final para encontrar "ya tienes un expediente", que
   es justo lo que busca quien ya ha escrito y vuelve. Solo la portada; el
   expediente y los avisos siguen en la columna estrecha, que se lee mejor. */
.atcp-wrap-ancho { max-width: 1060px; padding-bottom: 20px; }
.atcp-portada { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.atcp-portada > * { margin-bottom: 0; }
/* La segunda tarjeta acompana al formulario si este crece. */
.atcp-portada .atcp-col-sec { position: sticky; top: 82px; }
/* Un pelin mas apretada que el resto: el objetivo es que la portada entera
   entre en pantalla sin rodar, y son 8 campos. */
.atcp-portada .atcp-card { padding: 20px; }
.atcp-portada .atcp-campo { margin-bottom: 10px; }
.atcp-portada .atcp-intro { margin-bottom: 14px; }
/* Los seis campos cortos caben en DOS filas de tres, no en tres de dos: es lo
   que mas altura ahorra sin quitar ningun campo ni apretar la letra. Por
   debajo de 1100px vuelven a dos, y por debajo de 620 a una (regla de arriba). */
/* Tres filas, cada una con el ancho que pide lo que lleva dentro:
     1) quien reclama  -> tres columnas iguales (campos cortos)
     2) que servicio   -> dos columnas
     3) que le pasa    -> el desplegable y el asunto, y el desplegable MANDA:
        su opcion mas larga es "Incidencia en un servicio" y a un tercio de
        columna se cortaba ("Incidencia en un servi..."), lo que obliga a
        abrirlo para saber que pone. Se le da 1.5fr contra 2fr del asunto. */
@media (min-width: 1100px) { .atcp-portada .atcp-3col { grid-template-columns: repeat(3, 1fr); } }
/* El desplegable MANDA en su fila: su opción más larga ("Incidencia en un
   servicio") mide 188px y con proporciones se quedaba a 2px de caber, que es
   como no caber. Con minmax, el mínimo lo fija el contenido real y quien cede
   ancho es el Asunto, que es un campo de texto libre y no se recorta. */
.atcp-portada .atcp-tipo-asunto { grid-template-columns: minmax(270px, 1.5fr) 2fr; }
@media (max-width: 620px) { .atcp-portada .atcp-tipo-asunto { grid-template-columns: 1fr; } }
/* Las etiquetas largas ocupan dos lineas y hundian su campo respecto a los de
   al lado. Alineando por ABAJO, las cajas quedan a la misma altura sea cual
   sea el alto de la etiqueta — sin recortar ningun texto. */
.atcp-portada .atcp-2col { align-items: end; }
/* El adjunto no necesita una fila entera para si solo. */
.atcp-portada input[type=file] { font-size: .86rem; }
@media (max-width: 900px) {
    .atcp-wrap-ancho { max-width: 760px; }
    .atcp-portada { grid-template-columns: 1fr; }
    .atcp-portada .atcp-col-sec { position: static; }
}

/* Barra superior: misma que booking/ (logo redondo + marca a la izquierda,
   idioma a la derecha), para que el cliente reconozca dónde está. */
.atcp-topbar { background: #fff; border-bottom: 1px solid #E8EBEE; padding: 14px 0; position: sticky; top: 0; z-index: 100; }
.atcp-topbar-in { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.atcp-logo { display: flex; align-items: center; gap: 10px; color: #1C2634; font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Marca: DIPESA en fuerte y GROUP en fino, los dos del MISMO negro. La
   diferencia la hace el peso, no el color — con GROUP en gris parecia un
   texto secundario colgando del logotipo en vez de la segunda mitad del
   nombre (y encima perdia contraste). */
.atcp-marca { font-weight: 500; color: #1C2634; }
.atcp-marca strong { font-weight: 700; color: #1C2634; }
.atcp-topbar-sec {
    margin-left: 4px; padding-left: 14px; border-left: 1px solid #E8EBEE;
    color: #4A5866; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
@media (max-width: 560px) { .atcp-topbar-sec { display: none; } .atcp-logo { font-size: 15px; } }
.atcp-lang { display: flex; gap: 2px; }
.atcp-lang a { color: #5F6E7C; text-decoration: none; font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.atcp-lang a.active, .atcp-lang a:hover { color: #1C2634; background: #F1F4F7; }
.atcp-card { background: #fff; border: 1px solid #E8EBEE; border-radius: 14px; padding: 24px; margin-bottom: 16px; box-shadow: 0 4px 18px rgba(16,30,46,0.05); }
.atcp-card h1 { font-size: 1.35rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.atcp-card h2 { font-size: 1.05rem; margin: 0 0 6px; }
.atcp-intro { color: #4A5866; font-size: 0.92rem; margin: 0 0 18px; }
.atcp-campo { margin-bottom: 14px; }
.atcp-campo label { display: block; font-size: 0.8rem; font-weight: 600; color: #4A5866; margin-bottom: 5px; }
.atcp-campo input[type=text], .atcp-campo input[type=email], .atcp-campo input[type=tel],
.atcp-campo input[type=date], .atcp-campo select, .atcp-campo textarea {
    width: 100%; border: 1px solid #E8EBEE; border-radius: 10px; padding: 11px 13px;
    font: inherit; font-size: 0.95rem; background: #FBFCFD;
}
.atcp-campo input:focus, .atcp-campo select:focus, .atcp-campo textarea:focus {
    /* El outline se quita, pero SE SUSTITUYE: un cambio de color de borde de
       1px no es un indicador de foco suficiente para quien navega con
       teclado (WCAG 2.4.7), y la guía de la casa exige que todo elemento
       accionable sea alcanzable y visible con teclado. */
    outline: none; border-color: #2E86AB; background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, 0.18);
}
.atcp-btn:focus-visible, .atcp-lang a:focus-visible, .atcp-card a:focus-visible {
    outline: 2px solid #2E86AB; outline-offset: 2px; border-radius: 6px;
}
.atcp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 620px) { .atcp-2col { grid-template-columns: 1fr; } }
/* Consentimiento: era el texto MAS pequeño de la pagina siendo el unico con
   consecuencia legal. Sube al tamaño del cuerpo y la fila ENTERA es pulsable
   (es un <label>), que multiplica el area de acierto en movil. */
.atcp-consent { font-size: 0.92rem; color: #4A5866; display: flex; gap: 10px;
    align-items: flex-start; cursor: pointer; }
.atcp-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: #2E86AB; }
.atcp-consent a { color: #2E86AB; }
.atcp-consent:hover { color: #1C2634; }

/* Encabezado de bloque. Sustituye a los "(opcional)" campo a campo: una sola
   aclaracion por grupo, y el formulario gana una espina dorsal legible. */
.atcp-grupo {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #5F6E7C; margin: 12px 0 7px;
}
.atcp-grupo:first-of-type { margin-top: 2px; }
.atcp-grupo span {
    font-weight: 500; letter-spacing: 0; text-transform: none; color: #8A97A3;
    font-size: 0.8rem; margin-left: 6px;
}

/* Zona de adjuntos. El input nativo sigue dentro (sin JS todo funciona), solo
   que tapado: lo que se ve es esta caja, con SU texto en el idioma del portal
   — el "Choose Files / No file chosen" lo pinta el navegador en su idioma. */
.atcp-drop {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: 1px dashed #CFD8DF; border-radius: 10px; padding: 11px 14px;
    background: #FBFCFD; cursor: pointer; color: #4A5866; font-size: 0.9rem;
    transition: border-color .15s ease, background .15s ease;
}
.atcp-drop:hover, .atcp-drop.dentro { border-color: #2E86AB; background: #F2F8FB; }
.atcp-drop.dentro { border-style: solid; }
.atcp-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.atcp-drop .ico { font-size: 1.1rem; opacity: .55; }
.atcp-drop .sep { color: #8A97A3; margin: 0 3px; }
.atcp-drop .lnk { color: #2E86AB; font-weight: 600; text-decoration: underline; }
.atcp-drop:focus-within { border-color: #2E86AB; box-shadow: 0 0 0 3px rgba(46,134,171,.18); }
.atcp-adj-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.atcp-adj-lista li {
    display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #1C2634;
    background: #F2F8FB; border: 1px solid #DCE9F0; border-radius: 8px; padding: 6px 10px;
}
.atcp-adj-lista .pes { color: #8A97A3; font-size: 0.8rem; margin-left: auto; }
.atcp-btn-x { border: 0; background: none; color: #8A97A3; font-size: 1.15rem; line-height: 1;
    cursor: pointer; padding: 0 2px; }
.atcp-btn-x:hover { color: #8E2C2C; }
.atcp-btn-x:focus-visible { outline: 2px solid #2E86AB; outline-offset: 2px; border-radius: 4px; }
.atcp-ayuda { font-size: 0.8rem; color: #8A97A3; margin-top: 5px; }

.atcp-pista {
    font-size: 0.82rem; color: #8A6207; background: #FFFCF5; border: 1px solid #F0E4C8;
    border-radius: 8px; padding: 7px 10px; margin-top: 6px;
}

/* Invitación a reseñar (solo tras una felicitación). Cálida pero contenida:
   es un agradecimiento, no una campaña — el cliente ya ha hecho lo que
   queríamos, esto es un extra que puede ignorar sin coste. */
.atcp-resena { text-align: center; background: #FFFCF5; border-color: #F0E4C8; }
.atcp-resena .est { color: #E8A317; font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 6px; }
.atcp-resena h2 { margin-bottom: 4px; }
.atcp-resena .atcp-intro { margin-bottom: 14px; }

/* La tarjeta secundaria es una SUPERFICIE, no un objeto: mismo peso visual
   que la principal hacia dudar un segundo sobre cual era la accion. */
.atcp-portada .atcp-col-sec { background: #FAFBFC; box-shadow: none; border-color: #E8EBEE; }
.atcp-portada .atcp-col-sec .atcp-btn-sec { border-color: transparent; background: none; padding-left: 0; }
.atcp-portada .atcp-col-sec .atcp-btn-sec:hover { text-decoration: underline; background: none; }
.atcp-btn {
    display: inline-block; background: #2E86AB; color: #fff; border: none; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 0.95rem; padding: 12px 26px; border-radius: 10px;
    text-decoration: none;
}
.atcp-btn:hover { background: #256E8D; }
.atcp-btn-sec { background: #fff; color: #2E86AB; border: 1px solid #CFE3ED; }
.atcp-btn-sec:hover { background: #F2F8FB; }
.atcp-ok { background: #EAF6F0; border: 1px solid #BFE3D0; color: #1D5F42; border-radius: 10px; padding: 12px 16px; font-size: 0.9rem; margin-bottom: 16px; }
.atcp-err { background: #F8E8E8; border: 1px solid #E8C3C3; color: #8E2C2C; border-radius: 10px; padding: 12px 16px; font-size: 0.9rem; margin-bottom: 16px; }
/* Mismo pie que el resto de NewFox (login.php). */
.atcp-pie { text-align: center; color: #5F6E7C; font-size: 0.78rem; padding-top: 14px; }
.atcp-pie strong { color: #4A5866; font-weight: 700; }
/* Honeypot: fuera de la vista, no display:none (algunos bots lo detectan). */
.atcp-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ── Vista del expediente ── */
.atcp-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; color: #2E86AB; }
.atcp-estado { display: inline-block; font-size: 0.82rem; font-weight: 600; padding: 5px 14px; border-radius: 20px; background: #EAF4F8; color: #236B8E; }
.atcp-estado.e-resuelto { background: #EAF6F0; color: #227952; }
.atcp-estado.e-cerrado { background: #F1F3F5; color: #4A5866; }
.atcp-estado.e-espera { background: #FCF3E3; color: #8A6207; }
.atcp-msg { border: 1px solid #E8EBEE; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; background: #fff; }
.atcp-msg.de-cliente { border-left: 4px solid #2E86AB; }
.atcp-msg.de-equipo { border-left: 4px solid #227952; background: #FBFDFC; }
.atcp-msg.de-sistema { border-style: dashed; color: #4A5866; font-size: 0.86rem; }
.atcp-msg-cab { font-size: 0.76rem; color: #5F6E7C; margin-bottom: 5px; }
.atcp-msg-cab b { color: #1C2634; font-size: 0.84rem; }
.atcp-msg-txt { white-space: pre-wrap; font-size: 0.94rem; }
.atcp-adj { display: inline-flex; align-items: center; gap: 6px; margin: 8px 8px 0 0; font-size: 0.8rem; padding: 5px 12px; border: 1px solid #E8EBEE; border-radius: 20px; text-decoration: none; color: #2E86AB; background: #FBFCFD; }

/* ── Encuesta de satisfacción ──
   Estrellas con radios reales (accesibles con teclado y sin JS). Van en orden
   inverso en el marcado para poder pintar "de la elegida hacia la izquierda"
   con el selector de hermanos, que solo mira hacia delante. */
.atcp-estrellas { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.atcp-estrellas input { position: absolute; opacity: 0; width: 0; height: 0; }
.atcp-estrellas label { font-size: 34px; line-height: 1; color: #DDE3E9; cursor: pointer; padding: 2px 4px; margin: 0; transition: color .12s; }
.atcp-estrellas input:checked ~ label,
.atcp-estrellas label:hover,
.atcp-estrellas label:hover ~ label { color: #E8A317; }
.atcp-estrellas input:focus-visible + label { outline: 2px solid #2E86AB; outline-offset: 2px; border-radius: 4px; }
.atcp-estrellas-pie { font-size: 0.76rem; color: #5F6E7C; margin-top: 2px; }