/* ============================================================================
   pages/raiz/contacto.css
   ----------------------------------------------------------------------------
   Firma visual: form sobre fondo blanco + sidebar con canales directos +
   bloque de mapa placeholder.
   ============================================================================ */

/* Form */
.cec-contact-form {}

.cec-contact-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-primary);
  margin-bottom: 0.35rem;
}

.cec-contact-input {
  border: 1.5px solid rgba(var(--bs-primary-rgb), 0.18);
  border-radius: var(--cec-radius);
  padding: 0.65rem 0.85rem;
  background: #fff;
  color: var(--bs-primary);
  font-size: 0.95rem;
  transition: var(--cec-transition);
}
.cec-contact-input::placeholder { color: rgba(var(--bs-secondary-rgb), 0.55); }
.cec-contact-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
  color: var(--bs-primary);
  outline: 0;
}
.cec-contact-input.is-invalid {
  border-color: #d33;
  box-shadow: 0 0 0 0.2rem rgba(220, 50, 50, 0.18);
}

.cec-contact-error {
  display: none;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #c00;
  font-weight: 500;
}
.cec-contact-form .is-invalid ~ .cec-contact-error,
.cec-contact-form input.is-invalid ~ .cec-contact-error,
.cec-contact-form select.is-invalid ~ .cec-contact-error,
.cec-contact-form textarea.is-invalid ~ .cec-contact-error,
.cec-contact-form .form-check-input.is-invalid ~ .cec-contact-error {
  display: block;
}

.cec-contact-consent {
  font-size: 0.9rem;
  color: var(--bs-secondary);
  margin-left: 0.5rem;
}

.cec-contact-status > div {
  display: none;
  padding: 0.85rem 1rem;
  border-radius: var(--cec-radius);
}
.cec-contact-form[data-state="success"] .cec-contact-status-success {
  display: block;
  background: rgba(45, 138, 78, 0.10);
  color: #2d8a4e;
  border: 1px solid rgba(45, 138, 78, 0.30);
}
.cec-contact-form[data-state="error"] .cec-contact-status-error {
  display: block;
  background: rgba(190, 45, 45, 0.08);
  color: #a32020;
  border: 1px solid rgba(190, 45, 45, 0.30);
}
.cec-contact-form[data-state="success"] .row,
.cec-contact-form[data-state="success"] .d-flex { display: none !important; }

/* Estado de carga del submit (mismo patrón que el formulario de admisión) */
.cec-contact-submit-loading { display: none; }
.cec-contact-form[data-state="submitting"] .cec-contact-submit-idle { display: none; }
.cec-contact-form[data-state="submitting"] .cec-contact-submit-loading { display: inline-flex; align-items: center; }
.cec-contact-form[data-state="submitting"] .cec-contact-submit { pointer-events: none; opacity: 0.85; }

/* Sidebar canales */
.cec-contact-info {
  background: linear-gradient(160deg, rgba(var(--bs-primary-rgb), 0.05) 0%, rgba(var(--bs-light-rgb), 0.40) 100%);
  border: var(--cec-border);
  border-radius: var(--cec-radius-lg);
  padding: 1.75rem;
  height: 100%;
}

.cec-contact-channels {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cec-contact-channels li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.12);
}
.cec-contact-channels li:last-child { border-bottom: 0; }

.cec-contact-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.cec-contact-channel-title {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 0.2rem;
}
.cec-contact-channel-text {
  color: var(--bs-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.cec-contact-channel-text a {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 500;
}
.cec-contact-channel-text a:hover { text-decoration: underline; }

/* Mapa placeholder */
.cec-map-placeholder {
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.06), rgba(var(--bs-light-rgb), 0.50));
  border: 2px dashed rgba(var(--bs-primary-rgb), 0.18);
  border-radius: var(--cec-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
.cec-map-pin {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.30);
}
.cec-map-text {
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
}
.cec-map-subtle {
  color: var(--bs-secondary);
  font-size: 0.82rem;
  margin: 0;
}