/* ---------------------------------------------------------------
   assets/css/reclamar.css

   Pantalla de "Reclama tu perfil" (page-reclamar.php) y el banner
   que sale en la ficha pública de un psicólogo sin reclamar
   (single-psicologo.php).

   Sigue la paleta del sitio: crema #FAF7F2 de fondo, tarjetas
   blancas con borde #E7DDD1, acento terracota #C15F3C.
   --------------------------------------------------------------- */

.rec-wrap { max-width: 1040px; margin: 0 auto; padding: 40px 22px 70px; }

.rec-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }

.rec-card { background: #fff; border: 1px solid #E7DDD1; border-radius: 18px; padding: 28px; }
.rec-card-solo { max-width: 560px; margin: 0 auto; text-align: center; }

.rec-h1 { font-family: "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 27px; font-weight: 800; color: #2C2A28; letter-spacing: -.4px; margin: 0; }
.rec-p { font-size: 15px; line-height: 1.6; color: #6E6862; margin: 10px 0 0; }

/* --- Tarjeta lateral con el perfil que va a reclamar --- */
/* Se enseña el perfil ANTES del formulario a propósito: el
   psicólogo tiene que ver que su ficha ya existe y ya se ve bien
   antes de que se le pida un documento. */
.rec-preview { background: #FBF3EC; border-color: #EFE0D3; }
.rec-preview-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B0876B; }
.rec-preview-nombre { font-family: "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 800; color: #2C2A28; margin-top: 8px; line-height: 1.25; }
.rec-preview-rol { font-size: 14px; color: #8A6316; margin-top: 4px; }
.rec-preview-meta { font-size: 13.5px; color: #6E6862; margin-top: 6px; }
.rec-preview .rec-link { display: inline-block; margin-top: 14px; }
.rec-preview-nota { font-size: 13px; line-height: 1.6; color: #6E6862; margin-top: 18px; padding-top: 16px; border-top: 1px solid #EFE0D3; }

/* --- Formulario --- */
.rec-form { margin-top: 22px; }
.rec-campo { margin-top: 17px; }
.rec-campo label { display: block; font-size: 13.5px; font-weight: 600; color: #2C2A28; margin-bottom: 6px; }
.rec-opt { font-weight: 400; color: #A79E95; }
.rec-campo input[type="text"],
.rec-campo input[type="email"],
.rec-campo input[type="password"],
.rec-campo textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #E2D8CC; border-radius: 10px;
  font-family: inherit; font-size: 14.5px; color: #2C2A28; background: #fff; box-sizing: border-box;
}
.rec-campo input:focus, .rec-campo textarea:focus { outline: none; border-color: #C15F3C; box-shadow: 0 0 0 3px rgba(193,95,60,.12); }
.rec-campo input[type="file"] { width: 100%; font-size: 13.5px; color: #6E6862; }
.rec-hint { display: block; font-size: 12.5px; line-height: 1.5; color: #8E857C; margin-top: 6px; }

.rec-btn { display: inline-block; padding: 12px 22px; border: 0; border-radius: 999px; background: #C15F3C; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.rec-btn:hover { background: #A94E2E; }
.rec-btn-full { width: 100%; margin-top: 24px; }
.rec-link { font-size: 13.5px; color: #C15F3C; text-decoration: underline; }
.rec-acciones { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }

.rec-aviso { margin-top: 18px; padding: 13px 16px; border-radius: 12px; background: #FBF3EC; border: 1px solid #EFE0D3; font-size: 13.5px; line-height: 1.55; color: #6E6862; }
.rec-aviso-error { background: #FBF0DC; border-color: #EBD9B4; color: #8A6420; }
.rec-legal { font-size: 12px; line-height: 1.55; color: #8E857C; text-align: center; margin: 14px 0 0; }
.rec-legal a { color: #8E857C; }

@media (max-width: 860px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-wrap { padding: 26px 16px 50px; }
  .rec-card { padding: 22px; }
  .rec-h1 { font-size: 23px; }
}

/* ---------------------------------------------------------------
   Banner en la ficha pública de un perfil sin reclamar.

   Va arriba del todo y con el acento del sitio, no discreto: es el
   único punto de entrada para el psicólogo que llega por Google en
   vez de por el correo que le mandamos.
   --------------------------------------------------------------- */
.rec-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1140px; margin: 18px auto 0; padding: 16px 20px; border-radius: 14px; background: #FBF3EC; border: 1px solid #EFE0D3; }
.rec-banner-txt { flex: 1; min-width: 240px; }
.rec-banner-t { font-family: "Schibsted Grotesk", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; color: #2C2A28; }
.rec-banner-s { font-size: 13.5px; line-height: 1.55; color: #6E6862; margin-top: 3px; }
.rec-banner .rec-btn { flex: none; padding: 10px 18px; font-size: 14px; }
@media (max-width: 600px) { .rec-banner { margin: 12px 16px 0; } .rec-banner .rec-btn { width: 100%; text-align: center; } }

/* Confirmación tras enviar el reclamo, se muestra en la ficha. */
.rec-banner-ok { background: #E9F2EC; border-color: #CFE3D6; }
.rec-banner-ok .rec-banner-t { color: #2F5D4E; }