/* Página de soporte: sin reglas genéricas que alteren carrito, menú o checkout. */
body.pagina-reporte { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#f6f7f9; }
.pagina-reporte .content-body-full { flex:1; }
.pagina-reporte .reporte-contenedor { max-width:1180px; width:100%; margin:0 auto; padding:32px 24px 48px; }
.reporte-cliente { color:#343b43; font-family:'Roboto',Arial,sans-serif; font-size:14px; line-height:1.6; }
.reporte-cliente *, .reporte-cliente *::before, .reporte-cliente *::after { box-sizing:border-box; }
.reporte-cliente h1, .reporte-cliente h2, .reporte-cliente h3 { font-family:inherit; text-transform:none; text-align:left; letter-spacing:normal; color:#343b43; }
.reporte-cliente h1 { font-size:28px; font-weight:400; line-height:1.35; margin:10px 0; }
.reporte-cliente h2 { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:500; line-height:1.4; margin:0 0 18px; }
.reporte-cliente h3 { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:500; line-height:1.4; margin:0 0 14px; }
.reporte-cliente p { margin:0; font-size:14px; line-height:1.65; font-weight:400; color:#626e7a; }
.reporte-cliente .reporte-cabecera { margin:0 0 28px; }
.reporte-cliente .reporte-cabecera > p { max-width:760px; font-size:15px; }
.reporte-antetitulo { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:#526475; }
.reporte-antetitulo i { color:var(--color-principal,#0099ff); }
.reporte-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start; gap:24px; }
.reporte-principal, .reporte-lateral { min-width:0; }
.reporte-tarjeta { padding:28px; background:#fff; border:1px solid #dce3ea; border-radius:12px; box-shadow:0 3px 12px #21354704; }
.reporte-lateral { display:grid; gap:20px; }
.reporte-lateral .reporte-tarjeta { padding:24px; }
.reporte-icono, .reporte-paso { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--color-principal-alfa10,#e5f5ff); color:#465363; }
.reporte-icono { width:42px; height:42px; font-size:20px; border-radius:10px; margin-bottom:16px; }
.reporte-paso { width:28px; height:28px; font-size:13px; border-radius:50%; }
.reporte-bloque { margin:0; }
.reporte-cliente .reporte-formulario label { display:block; margin:0 0 8px; font-size:13px; font-weight:500; line-height:1.5; color:#465363; }
.reporte-cliente .reporte-opcional { margin-left:5px; font-size:11px; font-weight:400; color:#697785; }
.reporte-cliente .reporte-formulario textarea,
.reporte-cliente .reporte-formulario input[type=email],
.reporte-cliente .reporte-formulario input[type=tel] { display:block; width:100%; border:1px solid #ccd5df; border-radius:8px; padding:12px 14px; margin:0; background:#fff; color:#343b43; font-family:inherit; font-size:14px; font-weight:400; line-height:1.5; box-shadow:none; }
.reporte-cliente .reporte-formulario textarea { min-height:104px; height:auto; resize:vertical; }
.reporte-cliente #reporte-mensaje { min-height:120px; }
.reporte-cliente .reporte-formulario input[type=email], .reporte-cliente .reporte-formulario input[type=tel] { min-height:46px; height:auto; }
.reporte-cliente .reporte-formulario textarea::placeholder,
.reporte-cliente .reporte-formulario input::placeholder { color:#7a8591; font-size:13px; font-style:normal; }
.reporte-cliente :is(a,button,summary,input,textarea):focus-visible { outline:3px solid var(--color-principal,#0099ff); outline-offset:3px; }
.reporte-cliente .reporte-formulario :is(input,textarea):focus { border-color:var(--color-principal,#0099ff); }
.reporte-cliente .reporte-detalles { margin:16px 0 0; border:1px solid #e0e6ec; border-radius:8px; background:#fbfcfd; }
.reporte-detalles summary { min-height:46px; display:flex; align-items:center; gap:10px; justify-content:space-between; padding:12px 14px; font-size:13px; font-weight:500; list-style:none; cursor:pointer; }
.reporte-detalles summary::-webkit-details-marker { display:none; }
.reporte-detalles summary i { transition:transform .15s ease; }
.reporte-detalles[open] summary i { transform:rotate(180deg); }
.reporte-detalles-campos { display:grid; gap:16px; padding:0 14px 16px; }
.reporte-adjunto, .reporte-bloque-contacto { padding-top:24px; margin-top:24px; border-top:1px solid #e6ebef; }
.reporte-cliente .reporte-adjunto > p { font-size:12px; }
.reporte-cliente .reporte-captura-zona { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px; margin-top:12px; border:1px dashed #ccd5df; border-radius:8px; background:#fbfcfd; }
.reporte-cliente .reporte-captura-zona input[type=file] { max-width:100%; width:100%; min-height:44px; padding:0; font-family:inherit; font-size:12px; color:#626e7a; }
.reporte-captura-zona input[type=file]::file-selector-button { min-height:44px; border:1px solid #ccd5df; border-radius:7px; padding:8px 12px; margin-right:12px; background:#fff; color:#465363; font-family:inherit; font-size:13px; cursor:pointer; }
.reporte-cliente .reporte-captura-zona .reporte-boton { font-size:12px; min-height:44px; padding:8px 12px; }
.reporte-captura-preview { width:100%; margin:0; }
.reporte-captura-preview img { display:block; width:auto; max-width:100%; max-height:180px; border-radius:6px; object-fit:contain; }
.reporte-contacto-campos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.reporte-cliente .reporte-ayuda-campo { font-size:12px; margin-top:10px; }
.reporte-cliente .reporte-captura-error { color:#a33333; font-size:12px; margin-top:10px; }
.reporte-envio { margin-top:24px; }
.reporte-cliente .reporte-boton { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; max-width:100%; border:1px solid #ccd5df; border-radius:8px; padding:11px 16px; background:#fff; color:#465363; font-family:inherit; font-size:14px; font-weight:500; line-height:1.5; text-align:center; text-decoration:none; cursor:pointer; white-space:normal; }
.reporte-cliente .reporte-boton > span, .reporte-cliente .reporte-boton > i { color:inherit; font-size:inherit; }
.reporte-cliente .reporte-boton:hover { background:#f6f8fa; color:#343b43; border-color:var(--color-principal,#0099ff); }
.reporte-cliente .reporte-boton-principal { background:var(--color-principal,#0099ff); border-color:var(--color-principal,#0099ff); color:#fff; }
.reporte-cliente .reporte-boton-principal:hover { background:var(--color-principal-oscuro,#0085df); border-color:var(--color-principal-oscuro,#0085df); color:#fff; }
.reporte-cliente .reporte-boton:disabled { opacity:.75; cursor:wait; }
.reporte-cliente .reporte-privacidad { margin-top:14px; font-size:11px; line-height:1.6; }
.reporte-privacidad > i { margin-right:6px; }
.reporte-cliente .reporte-privacidad a { color:#465363; text-decoration:underline; text-underline-offset:3px; }
.reporte-cliente .reporte-enviando { margin-top:12px; font-size:13px; }
.reporte-contactos { display:grid; gap:14px; margin-top:20px; }
.reporte-cliente .reporte-contacto-enlace { display:flex; align-items:center; gap:10px; min-height:24px; color:#465363; font-size:13px; text-decoration:none; overflow-wrap:anywhere; }
.reporte-contacto-enlace i { flex-shrink:0; color:#626e7a; }
.reporte-cliente .reporte-contacto-enlace:hover { text-decoration:underline; text-underline-offset:3px; }
.reporte-consejos ul { display:grid; gap:16px; padding:0; margin:0; list-style:none; }
.reporte-consejos li { display:flex; align-items:baseline; gap:10px; font-size:13px; color:#626e7a; line-height:1.6; }
.reporte-consejos li i { flex-shrink:0; color:#526475; font-size:11px; }
.reporte-seguridad { display:flex; align-items:flex-start; gap:12px; padding:0 4px; }
.reporte-seguridad > i { margin-top:3px; color:#697785; }
.reporte-seguridad strong { display:block; font-size:12px; font-weight:500; color:#526475; }
.reporte-cliente .reporte-seguridad p { margin-top:6px; font-size:12px; }
.reporte-error { padding:20px; margin-bottom:20px; background:#fff7f5; border:1px solid #e8c9c4; border-radius:12px; }
.reporte-cliente .reporte-error h2 { color:#8b3333; font-size:17px; margin-bottom:10px; }
.reporte-cliente .reporte-error p + p { margin-top:8px; }
.reporte-confirmacion { text-align:left; padding:32px; }
.reporte-confirmacion-cabecera { display:flex; align-items:flex-start; gap:16px; }
.reporte-cliente .reporte-confirmacion h2 { display:block; text-align:left; font-size:20px; margin:0 0 8px; }
.reporte-exito-icono { display:inline-flex; justify-content:center; align-items:center; flex-shrink:0; width:48px; height:48px; border-radius:50%; background:#e9f7ee; color:#267342; font-size:20px; }
.reporte-confirmacion-referencia { margin-top:24px; padding:20px; background:#f6f8fa; border:1px solid #e0e6ec; border-radius:10px; }
.reporte-cliente .reporte-referencia-etiqueta { font-size:12px; font-weight:500; color:#526475; }
.reporte-cliente .reporte-referencia { font-size:28px; line-height:1.3; font-weight:500; color:#343b43; margin:6px 0 8px; overflow-wrap:anywhere; }
.reporte-cliente .reporte-confirmacion-referencia > p:last-child { font-size:12px; }
.reporte-confirmacion-pasos { margin-top:28px; }
.reporte-confirmacion-pasos ol { display:grid; gap:18px; list-style:none; margin:0; padding:0; }
.reporte-confirmacion-pasos li { display:flex; align-items:flex-start; gap:12px; }
.reporte-confirmacion-icono { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border-radius:8px; background:var(--color-principal-alfa10,#e5f5ff); color:#526475; font-size:13px; }
.reporte-confirmacion-pasos strong { display:block; margin-bottom:4px; font-size:14px; font-weight:500; color:#465363; }
.reporte-cliente .reporte-confirmacion-pasos p { font-size:13px; }
.reporte-confirmacion-acciones { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; padding-top:24px; border-top:1px solid #e6ebef; }
.reporte-cliente [hidden] { display:none !important; }
/* Las marcas Eco de fondo claro necesitan texto oscuro sobre acentos luminosos. */
.pagina-reporte-eco .reporte-boton-principal, .pagina-reporte-eco .reporte-boton-principal:hover { color:#15251d; }
@media(max-width:991px) {
 .reporte-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
 .reporte-lateral { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .reporte-seguridad { grid-column:1 / -1; }
}
@media(max-width:575px) {
 .pagina-reporte .reporte-contenedor { padding:24px 16px 32px; }
 .reporte-cliente h1 { font-size:25px; }
 .reporte-cliente .reporte-cabecera > p { font-size:14px; }
 .reporte-tarjeta, .reporte-lateral .reporte-tarjeta { padding:20px; }
 .reporte-cliente h2 { font-size:17px; }
 .reporte-lateral, .reporte-contacto-campos { grid-template-columns:minmax(0,1fr); }
 .reporte-cliente .reporte-envio > .reporte-boton { width:100%; }
 .reporte-seguridad { grid-column:auto; }
 .reporte-cliente .reporte-confirmacion h2 { font-size:18px; }
 .reporte-confirmacion-cabecera { gap:12px; }
 .reporte-confirmacion-acciones .reporte-boton { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .reporte-detalles summary i { transition:none; } }