/* Interfaz Tres puertas: estructura de la opción 2, tarjetas verde suave. */
.copate-interface {
  background: #f3f5ef;
  color: #243e32;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.copate-interface > .container { max-width: 1180px; padding-inline: 28px; }
.copate-interface .text-chacra { color: #243e32; }
.copate-interface .text-muted { color: #647365 !important; }
.copate-interface h1, .copate-interface h2, .copate-interface h3 { color: #243e32; }
.copate-interface h1 { letter-spacing: -1px; }
.copate-interface > .container > header > a { font-weight: 850; letter-spacing: -1px; }
.copate-interface a { color: #236642; }
.copate-interface .btn {
  border-radius: 12px;
  padding: 11px 19px;
  font-weight: 650;
  touch-action: manipulation;
}
.copate-interface .btn-sm { padding: 8px 12px; }
.copate-interface .btn-success, .copate-interface .btn-campestre {
  --bs-btn-bg: #236642;
  --bs-btn-border-color: #236642;
  --bs-btn-hover-bg: #194d32;
  --bs-btn-hover-border-color: #194d32;
  background: #236642;
  border-color: #236642;
  color: #fff;
}
.copate-interface .btn-outline-success {
  --bs-btn-hover-color: #243e32;
  --bs-btn-hover-bg: #eef4e8;
  --bs-btn-hover-border-color: #236642;
  color: #243e32;
  background: #fff;
  border-color: #cbd4c5;
}
.copate-interface .btn-outline-success:hover { background: #eef4e8; border-color: #236642; }
.copate-interface .btn-success:hover, .copate-interface .btn-campestre:hover { background: #194d32; }
.copate-interface .btn-success:disabled {
  color: #606660;
  background: #e0e2de;
  border-color: #e0e2de;
  opacity: 1;
  cursor: not-allowed;
}
.copate-interface .btn:focus-visible, .copate-interface a:focus-visible,
.copate-interface input:focus-visible, .copate-interface select:focus-visible {
  outline: 3px solid #ac682d;
  outline-offset: 3px;
}
.copate-interface .card { border-radius: 20px; background: #fffdf8; }
.copate-interface .card.border-0 { border: 1px solid #e1e4d8 !important; }
.copate-interface .card-body { padding: 25px; }
.copate-interface .form-control, .copate-interface .form-select {
  padding: 12px;
  border: 1px solid #b9c4b4;
  border-radius: 10px;
  background-color: #fff;
}
.copate-interface .form-label { font-size: 14px; font-weight: 700; }
.copate-interface [hidden] { display: none !important; }
.portal-hero { max-width: 850px; padding: 45px 0 32px; text-align: center; margin: auto; }
.portal-hero h1 { font-size: clamp(36px, 5vw, 57px); font-weight: 750; line-height: 1.08; letter-spacing: -2px; margin: 18px 0; }
.portal-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 800; color: #667c55; }
.portal-intro { font-size: 19px; max-width: 650px; margin: auto; }
.portal-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0; }
.portal-role { display: flex; flex-direction: column; align-items: flex-start; background: #e9eddc; padding: 25px; border: 1px solid #e1e4d8; border-radius: 20px; }
.portal-role h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.portal-role p { flex: 1; margin: 12px 0; }
.portal-role .btn { margin-top: 12px; }
.portal-icon { font-size: 33px; margin-bottom: 8px; }
.portal-section { padding: 25px 0 45px; scroll-margin-top: 20px; }
.portal-location { background: #fff; border: 1px solid #d6dece; border-radius: 22px; padding: 28px; margin: 20px 0 40px; }
.portal-location h2 { font-size: 30px; font-weight: 700; }
#geo-status { min-height: 25px; color: #385d43; }
#location-modes button[aria-pressed="true"] { background: #243e32; color: #fff; border-color: #243e32; }
.copate-interface footer { border-top: 1px solid #d6dece; padding: 28px 0; }
@media (max-width: 800px) {
  .portal-roles { grid-template-columns: 1fr; }
  .portal-hero { padding-top: 20px; }
  .portal-hero h1 { letter-spacing: -1px; }
  .copate-interface > .container { padding-inline: 18px; }
}
@media (max-width: 576px) {
  .copate-interface header nav, .copate-interface header nav a,
  .copate-interface header nav form, .copate-interface header nav button { width: auto; }
  .portal-location { padding: 20px; }
}