/* foro.css - Estilos para peticiones.html
   Ajustado para trabajar con Bootstrap navbar/footer e imágenes en /img/ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#807efd;
  --panel:#ffffff;
  --muted:#969eae;
  --primary:#817ffe;
  --primary-dark:#6d6bf8;
  --card-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* =========================================================
   RESET BÁSICO
   (OJO: sin tocar la fuente global para no dañar el header)
   ========================================================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* Fondo general de la página de peticiones/testimonios */
html, body{
  height:100%;
  overflow-x:hidden !important;   /* evita margen lateral */
  margin:0 !important;
  padding:0 !important;
  background-color: var(--bg);
  background: url('Login/images/font.jpg') no-repeat center center fixed;  /* fondo correcto */
  background-size: cover;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* Tipografía SOLO dentro del contenido de peticiones/testimonios */
.page-content,
.page-content *{
  font-family:'Poppins',sans-serif;
}

/* Ajuste para el "shell" centrado */
.page-content{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 40px 20px;
  min-height: calc(100vh - 150px); /* espacio para navbar + footer */
}

/* Panel principal que contiene el formulario y la info */
.petition-panel{
  width:100%;
  max-width: 1000px;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  display:flex;
  overflow:hidden;
}

/* Panel izquierdo = formulario */
.panel-left{
  width:50%;
  padding: 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Panel derecho = imagen + contactos */
.panel-right{
  width:50%;
  padding: 42px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Tipografías y textos */
.panel-left h2{
  font-size: 40px;
  color: #4844A9;
  margin-bottom: 12px;
  font-weight:600;
}

.lead-text{
  color: var(--muted);
  margin-bottom: 20px;
  line-height:1.6;
  font-size: 15px;
}

/* Inputs */
.input-box{
  background: #f4f4fd;
  border: none;
  padding: 12px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  font-size: 15px;
  width:100%;
}

.textarea{
  min-height:120px;
  resize:vertical;
  padding-top:12px;
}

.select-box{
  width: 220px;
  padding: 8px 12px;
  border-radius: 18px;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 12px;
}

/* Acciones */
.actions{
  margin-top:10px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.btn-submit{
  background: var(--primary);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(129,127,254,0.25);
  transition: all .18s ease;
}

.btn-submit:hover{
  transform: translateY(-2px);
  background: var(--primary-dark);
}

/* Respuesta */
.respuesta{ margin-top:12px; }
.alert{ padding:10px 12px; border-radius:12px; }
.alert.ok{ background:#e6f8ed; color:#0f7a3a; }
.alert.error{ background:#fdecea; color:#8a1f1f; }
.alert.warning{ background:#fff7e6; color:#7a5a00; }

/* Imagen principal y contactos */
.main-image{
  width: 360px;
  max-width:100%;
  border-radius: 14px;
  object-fit:cover;
  margin-bottom:28px;
}

/* Contact rows */
.contacts{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-left:24px;
}

.contact-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.contact-row img{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:6px;
}

.contact-row p{
  color:var(--muted);
  font-size:17px;
  margin:0;
}

/* Footer/Icons */
footer{
  margin-top:34px;
  border-top: none !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 980px){
  .petition-panel{ flex-direction:column; height:auto; }
  .panel-left, .panel-right{ width:100%; padding:28px; }
  .main-image{ margin-bottom:20px; }
  .contacts{ padding-left:0; align-items:center; }
  .contact-row{ justify-content:center; }
  .panel-left h2{ font-size:30px; text-align:center; }
  .lead-text{ text-align:center; }
  .actions{ justify-content:center; }
}

@media (max-width: 600px){
  .page-content{ padding:20px 12px; }
  .panel-left{ padding:18px; }
  .panel-right{ padding:18px; }
  .input-box{ font-size:14px; }
  .contact-row p{ font-size:15px; }
}

/* Evita líneas blancas entre contenido y footer */
footer, .footer, .site-footer {
  border-top: none !important;
  outline: none !important;
  box-shadow: none !important;
}