/**
 * review-invite.css — La página del enlace de valoración (/valorar/<token>/).
 *
 * Aquí no se escribe la reseña: eso lo hace HivePress en la ficha. Aquí solo se comprueba que quien
 * llega es el dueño del correo al que se envió la invitación, entrando o creando cuenta.
 *
 * Se diseña **para el móvil de alguien que acaba de escanear un QR o abrir un correo**: una sola
 * columna, campos grandes y nada que obligue a hacer zoom.
 */

/* ---------------------------------------------------------------------------
   Página pública /valorar/
   --------------------------------------------------------------------------- */

.ctop-val {
    max-width: 620px;
    margin: 0 auto;
    padding: 4px 0 32px;
}

.ctop-val__cab { text-align: center; margin-bottom: 26px; }

.ctop-val__pre {
    display: block;
    font: 700 12.5px/1 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 8px;
}

.ctop-val__titulo {
    margin: 0 0 10px;
    font: 800 clamp(22px, 5vw, 30px)/1.2 Montserrat, sans-serif;
    color: #0F172A;
}

.ctop-val__intro {
    margin: 0;
    font: 500 15px/1.6 Inter, sans-serif;
    color: #475569;
}

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

.ctop-val__campo { display: block; margin: 16px 0; }
.ctop-val__campo > span {
    display: block;
    margin-bottom: 6px;
    font: 700 14px/1.3 Inter, sans-serif;
    color: #334155;
}
.ctop-val__campo em { font-style: normal; font-weight: 500; color: #94A3B8; }

.ctop-val__campo textarea,
.ctop-val__campo input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    font: 500 15px/1.5 Inter, sans-serif;
    color: #0F172A;
    background: #fff;
}

.ctop-val__campo textarea:focus,
.ctop-val__campo input:focus {
    outline: 0;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.ctop-val__fila { display: flex; gap: 14px; }
.ctop-val__fila .ctop-val__campo { flex: 1 1 0; min-width: 0; }

.ctop-val__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
    font: 500 13.5px/1.55 Inter, sans-serif;
    color: #475569;
}
.ctop-val__consent input { margin-top: 3px; flex: 0 0 auto; }

/* El correo llega fijado. El `readonly` es cortesía visual —quien quiera lo desbloquea en dos
   clics—; lo que decide de verdad es la comprobación del servidor contra el token. */
.ctop-val__campo input[readonly] {
    background: #F1F5F9;
    color: #475569;
    cursor: not-allowed;
}

.ctop-val__fijo {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: #94A3B8;
}

.ctop-val__nota-caja {
    padding: 18px 20px;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    background: #FFFBEB;
    text-align: center;
}
.ctop-val__nota-caja p {
    margin: 0 0 12px;
    font: 500 14.5px/1.6 Inter, sans-serif;
    color: #475569;
}

.ctop-val__enviar {
    display: block;
    width: 100%;
    padding: 15px 24px;
    border: 0;
    border-radius: 999px;
    background: #2563EB;
    color: #fff;
    font: 800 16px Montserrat, sans-serif;
    cursor: pointer;
    transition: background .2s;
}
.ctop-val__enviar:hover:not(:disabled) { background: #1E3A8A; }
.ctop-val__enviar:disabled { background: #94A3B8; cursor: default; }

.ctop-val__nota {
    margin: 10px 0 0;
    text-align: center;
    font: 500 12.5px/1.5 Inter, sans-serif;
    color: #94A3B8;
}

.ctop-val__msg { margin: 0 0 12px; font: 600 14px/1.5 Inter, sans-serif; }
.ctop-val__msg.is-error {
    padding: 11px 14px;
    border-radius: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

/* ---------- Estados sin formulario ---------- */

.ctop-val--aviso { text-align: center; padding: 40px 20px; }
.ctop-val--aviso > i { font-size: 44px; color: #94A3B8; margin-bottom: 16px; display: block; }
.ctop-val--aviso h2 { margin: 0 0 10px; font: 800 22px/1.3 Montserrat, sans-serif; color: #0F172A; }
.ctop-val--aviso p  { margin: 0 auto 20px; max-width: 46ch; font: 500 15px/1.6 Inter, sans-serif; color: #475569; }
.ctop-val--ok > i   { color: #16A34A; }

.ctop-val__link {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    background: #2563EB;
    color: #fff !important;
    font: 800 14px Montserrat, sans-serif;
    text-decoration: none;
}
.ctop-val__link:hover { background: #1E3A8A; }

@media (max-width: 560px) {
    .ctop-val__fila { flex-direction: column; gap: 0; }
}

/* ---------------------------------------------------------------------------
   Avisos del CRM
   ---------------------------------------------------------------------------
   Marcar un contacto como «Ganado» le pide la valoración al cliente. Es una acción con efecto fuera
   de la pantalla, así que el resultado se dice pegado a la fila, no en un alert.
   --------------------------------------------------------------------------- */

.ctop-lead-aviso {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font: 600 12px/1.45 Inter, sans-serif;
    transition: opacity .5s;
}
.ctop-lead-aviso.is-out { opacity: 0; }

/* Se envió de verdad. */
.ctop-lead-aviso--ok {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #15803D;
}

/* No se pudo enviar (sin correo, ya pedida, fallo del envío). En verde parecía un éxito y decía
   justo lo contrario: el color tiene que contar lo mismo que el texto. */
.ctop-lead-aviso--aviso {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
}

/* El desplegable de estado se quedaba en «Nue…»: la columna se encoge al ancho del contenido más
   corto y «Contactado» no cabía. */
.ctop-lead-status { min-width: 11em; }

/* Vía por la que llegó el contacto. */
.uv-lead-tipo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 700 11.5px Inter, sans-serif;
    white-space: nowrap;
}
.uv-lead-tipo--call { background: #EFF6FF; color: #1D4ED8; }
.uv-lead-tipo--wa   { background: #DCFCE7; color: #15803D; }
.uv-lead-tipo--form { background: #FEF3C7; color: #B45309; }

.uv-lead-anon { color: #94A3B8; font-style: italic; }


/* ---------------------------------------------------------------------------
   Denunciar una valoración
   ---------------------------------------------------------------------------
   Solo lo ve el dueño del anuncio, junto al enlace de «Responder». Discreto a propósito: es una
   herramienta de última instancia, no una llamada a la acción — responder en público casi siempre
   sienta mejor que denunciar.
   --------------------------------------------------------------------------- */

.ctop-rrep__abrir {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ctop-rrep__hecho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 12.5px Inter, sans-serif;
    color: #B45309;
}

.ctop-rrep[hidden] { display: none; }

.ctop-rrep {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .6);
}

.ctop-rrep__caja {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    border-radius: 18px;
    background: #fff;
}

.ctop-rrep__caja h3 { margin: 0 0 8px; font: 800 20px/1.3 Montserrat, sans-serif; color: #0F172A; }
.ctop-rrep__caja > p { margin: 0 0 18px; font: 500 13.5px/1.6 Inter, sans-serif; color: #64748B; }

.ctop-rrep__campo { display: block; margin-bottom: 16px; }
.ctop-rrep__campo > span {
    display: block;
    margin-bottom: 6px;
    font: 700 14px Inter, sans-serif;
    color: #334155;
}

.ctop-rrep__campo select,
.ctop-rrep__campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    font: 500 14.5px/1.5 Inter, sans-serif;
    color: #0F172A;
    background: #fff;
}

.ctop-rrep__campo select:focus,
.ctop-rrep__campo textarea:focus {
    outline: 0;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.ctop-rrep__msg { margin: 0 0 12px; font: 600 13.5px/1.5 Inter, sans-serif; }
.ctop-rrep__msg.is-error {
    padding: 10px 13px;
    border-radius: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.ctop-rrep__botones { display: flex; gap: 10px; align-items: center; }

.ctop-rrep__enviar {
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font: 800 14px Montserrat, sans-serif;
    cursor: pointer;
}
.ctop-rrep__enviar:hover:not(:disabled) { background: #991B1B; }
.ctop-rrep__enviar:disabled { background: #94A3B8; cursor: default; }

.ctop-rrep__cerrar {
    padding: 12px 18px;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    background: #fff;
    font: 700 14px Inter, sans-serif;
    color: #334155;
    cursor: pointer;
}
.ctop-rrep__cerrar:hover { background: #F1F5F9; }