/*
 * FieldCore | Identidad visual para el flujo de votación VOTOREMOTO
 * v1.0 | 06-11-2026
 *
 * PUNTO ÚNICO DE PERSONALIZACIÓN:
 *   1) Colores, tamaños y espaciados: variables CSS :root de abajo.
 *   2) Logo: images/fieldcore-logo.png (maestro vectorial: fieldcore-logo.svg).
 *   3) Tipografía: Montserrat local; heredada de assets/css/fonts.css.
 *
 * El alcance está aislado mediante body.fc-vote. No se modifican lógica,
 * validaciones, consultas, identificadores ni envío de sufragios.
 * Este archivo se carga AL FINAL del <head> para prevalecer sobre estilos
 * anteriores. No eliminar la clase fc-vote de las páginas personalizadas.
 */
:root {
  --fc-primary: #005e60;             /* Verde institucional del SVG proporcionado */
  --fc-primary-hover: #00494b;
  --fc-primary-soft: #edf7f5;
  --fc-heading: #163b3e;
  --fc-body: #384e55;
  --fc-muted: #62777d;
  --fc-background: #f5f8f7;
  --fc-paper: #ffffff;
  --fc-border: #dbe8e5;
  --fc-footer: #073e40;
  --fc-danger: #b63b4a;
  --fc-warning: #a55d0f;
  --fc-navigation-height: 86px;
  --fc-logo-width: 218px;
  --fc-logo-max-height: 50px;
  --fc-card-radius: 14px;
  --fc-shadow: 0 12px 36px rgba(8, 58, 60, 0.06);
}

/* Estructura general. Se limita expresamente al flujo público de votación. */
html { scroll-behavior: auto; }
body.fc-vote {
  margin: 0;
  min-height: 100vh;
  background: var(--fc-background);
  color: var(--fc-body);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.fc-vote *, .fc-vote *::before, .fc-vote *::after { box-sizing: border-box; }
.fc-vote a { color: var(--fc-primary); }
.fc-vote a:hover { color: var(--fc-primary-hover); }
.fc-vote :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--fc-primary);
  outline-offset: 3px;
}

/* Cabecera y logotipo: mismo alto, alineación y dimensiones en todas las vistas. */
.fc-vote .navbar.navbar-default {
  height: var(--fc-navigation-height) !important;
  min-height: var(--fc-navigation-height) !important;
  background: var(--fc-paper) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fc-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 16px rgba(8, 58, 60, 0.04) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.fc-vote .navbar > .container,
.fc-vote .navbar > .container-fluid { height: 100%; }
.fc-vote .navbar > .container-fluid { max-width: 1170px; margin: 0 auto; }
.fc-vote .navbar .navbar-header { height: 100%; display: flex; align-items: center; }
.fc-vote .navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  float: none;
}
.fc-vote .navbar-brand img {
  display: block;
  width: var(--fc-logo-width) !important;
  max-width: calc(100vw - 56px);
  max-height: var(--fc-logo-max-height) !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}
.fc-vote .fc-header-spacer { height: var(--fc-navigation-height); }

/* Contenido central y estados. Preserva mensajes y estructura HTML existentes. */
.fc-vote .content-wrapper {
  background: var(--fc-background) !important;
  min-height: min(57vh, 630px) !important;
  padding: 44px 20px 52px !important;
  text-align: center;
  flex-direction: column;
}
.fc-vote .content-wrapper h1,
.fc-vote .content-wrapper h2,
.fc-vote .success-box h1,
.fc-vote .error-box h1 {
  color: var(--fc-heading);
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.fc-vote .content-wrapper > h1 { font-size: clamp(29px, 3vw, 39px); margin: 0 0 14px; }
.fc-vote .content-wrapper > h2 {
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 21px);
  max-width: 710px;
  margin: 0;
  line-height: 1.5;
}
.fc-vote .success-box,
.fc-vote .error-box {
  max-width: 630px;
  width: 100%;
  margin: auto;
  padding: 40px 42px !important;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-card-radius);
  background: var(--fc-paper);
  box-shadow: var(--fc-shadow);
}
.fc-vote .success-box h1,
.fc-vote .error-box h1 { font-size: clamp(25px, 3vw, 32px); margin: 12px 0 15px; }
.fc-vote .success-box p,
.fc-vote .error-box p { color: var(--fc-body); font-size: 16px; line-height: 1.7; }
.fc-vote .success-box > .fas,
.fc-vote .error-box > .fas { font-size: 36px; color: var(--fc-primary); }
.fc-vote .error-box > .fa-exclamation-triangle { color: var(--fc-danger); }

/* Botones del flujo y controles, sin cambiar atributos de comportamiento. */
.fc-vote .btn-custom,
.fc-vote .btn-vote,
.fc-vote .btn-submit {
  background: var(--fc-primary) !important;
  border: 1px solid var(--fc-primary) !important;
  color: #fff !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em;
  padding: 12px 25px !important;
  min-height: 46px;
  box-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.fc-vote .btn-custom:hover,
.fc-vote .btn-vote:hover,
.fc-vote .btn-submit:hover,
.fc-vote .btn-custom:focus,
.fc-vote .btn-vote:focus,
.fc-vote .btn-submit:focus {
  background: var(--fc-primary-hover) !important;
  border-color: var(--fc-primary-hover) !important;
  color: #fff !important;
}
.fc-vote :is(button, input[type="submit"]):disabled { opacity: 0.63; cursor: not-allowed; }
.fc-vote .form-control {
  min-height: 43px;
  height: auto;
  border: 1px solid #c6d9d5;
  border-radius: 6px;
  box-shadow: none;
  background: #fff;
  color: var(--fc-heading);
  font-size: 15px;
}
.fc-vote .form-control:focus {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(0, 94, 96, 0.13);
}

/* Papeleta: cards suaves, diferenciación visual de selección y foco accesible. */
.fc-vote .voting-section {
  margin-top: 0 !important;
  padding: 46px 16px 52px !important;
  background: var(--fc-background) !important;
  min-height: 48vh;
}
.fc-vote .section-title { margin-bottom: 28px !important; color: var(--fc-heading); }
.fc-vote .section-title h3 {
  color: var(--fc-heading);
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.fc-vote .section-title .text-danger { color: var(--fc-danger); font-size: 14px; }
.fc-vote .instructions {
  background: var(--fc-primary-soft);
  border-left: 3px solid var(--fc-primary);
  border-radius: 0 7px 7px 0;
  padding: 16px 20px;
  color: var(--fc-body);
  font-size: 14px;
}
.fc-vote .instructions p:last-child { margin-bottom: 0; }
.fc-vote .candidate-item {
  border: 1px solid var(--fc-border);
  border-radius: 9px;
  background: var(--fc-paper);
  box-shadow: 0 2px 12px rgba(8, 58, 60, 0.035);
  padding: 17px 20px;
  margin-bottom: 13px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fc-vote .candidate-item:focus-within {
  border-color: var(--fc-primary);
  box-shadow: 0 0 0 3px rgba(0, 94, 96, 0.10);
}
.fc-vote .candidate-item .checkbox { margin: 2px 0 12px; }
.fc-vote .candidate-item .checkbox label { display: flex; align-items: center; gap: 10px; color: var(--fc-heading); padding-left: 0; }
.fc-vote .candidate-item input[type="checkbox"] { position: static !important; margin: 0 !important; width: 17px; height: 17px; accent-color: var(--fc-primary); flex-shrink: 0; }
.fc-vote .other-candidate-select { width: 100%; margin-top: 8px; }
.fc-vote .voting-section .form-group .btn-vote { margin-top: 16px; }
.fc-vote .overlay-message {
  background: var(--fc-footer);
  border-radius: 9px;
  font-size: 18px;
  width: min(90vw, 390px);
  padding: 22px 26px;
}

/* Verificación del votante: el modal se carga dinámicamente desde frm_modal.php.
   Reglas de mayor especificidad que su CSS inyectado, sin tocar dicho PHP. */
.fc-vote #bootstrap-modal .modal-dialog { max-width: 510px; margin: 9vh auto 24px; }
.fc-vote #bootstrap-modal .modal-content {
  max-width: 510px;
  margin: 0 auto;
  padding: 0;
  background: var(--fc-paper);
  color: var(--fc-body);
  border: 1px solid var(--fc-border);
  border-radius: 12px;
  box-shadow: 0 20px 58px rgba(4, 44, 45, 0.18);
  overflow: hidden;
}
.fc-vote #bootstrap-modal .modal-header {
  background: var(--fc-footer);
  color: #fff;
  padding: 21px 26px 19px;
  border: none;
}
.fc-vote #bootstrap-modal .modal-header h3 { font-size: 19px; font-weight: 700; margin: 0; color: #fff; }
.fc-vote #bootstrap-modal .modal-header .close { color: #fff !important; text-shadow: none; opacity: 0.9 !important; }
.fc-vote #bootstrap-modal .modal-body { padding: 23px 27px 10px; }
.fc-vote #bootstrap-modal .modal-body label { color: var(--fc-heading) !important; font-size: 13px !important; margin: 0 0 7px; }
.fc-vote #bootstrap-modal .modal-body .form-control { margin-bottom: 15px; }
.fc-vote #bootstrap-modal .modal-footer { padding: 10px 27px 27px; border: none; }
.fc-vote #bootstrap-modal .btn-submit { width: 100%; }

/* Contacto: institucional, compacto y de bajo protagonismo visual. */
.fc-vote #contact {
  background: var(--fc-footer) !important;
  color: #f5fcfa;
  padding: 30px 0 34px !important;
}
.fc-vote #contact h4 {
  display: inline-block;
  border: none !important;
  margin: 0 0 5px;
  padding: 0 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.fc-vote #contact h4 + h4 { display: block; font-size: 12px; font-weight: 400; opacity: 0.78; margin-bottom: 15px; }
.fc-vote #contact .row { display: flex; flex-wrap: wrap; justify-content: center; }
.fc-vote #contact .media { padding: 9px 8px; margin: 0 auto; }
.fc-vote #contact .media i { color: #bfdfda; font-size: 19px; margin-bottom: 5px; }
.fc-vote #contact h5 { font-size: 12px; line-height: 1.45; margin: 4px 0; color: #f5fcfa; }
.fc-vote #contact a { color: #f0fcfa !important; display: inline-block; font-size: 12px; text-underline-offset: 3px; font-weight: 700; margin-top: 0; }
.fc-vote #contact a:hover { text-decoration: underline; }
.fc-vote #contact .mb30 { margin-bottom: 8px; }

@media (max-width: 767px) {
  :root {
    --fc-navigation-height: 72px;
    --fc-logo-width: 176px;
    --fc-logo-max-height: 41px;
  }
  .fc-vote .navbar .navbar-brand { padding-left: 4px !important; }
  .fc-vote .content-wrapper { min-height: 49vh !important; padding: 30px 16px 38px !important; }
  .fc-vote .success-box,
  .fc-vote .error-box { padding: 30px 22px !important; border-radius: 11px; }
  .fc-vote .success-box p, .fc-vote .error-box p { font-size: 15px; }
  .fc-vote .voting-section { padding: 31px 16px 36px !important; }
  .fc-vote .candidate-item { padding: 16px; }
  .fc-vote .voting-section .form-group .text-right { text-align: center; }
  .fc-vote .btn-vote { width: 100%; }
  .fc-vote #bootstrap-modal .modal-dialog { width: calc(100% - 28px); margin: 7vh auto 18px; }
  .fc-vote #contact { padding: 27px 0 26px !important; }
  .fc-vote #contact .media { padding: 8px 3px; }
  .fc-vote #contact .row > [class*="col-"] { flex: 0 0 50%; width: 50%; padding: 0 7px; }
  .fc-vote #contact a { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-vote :is(.btn-custom, .btn-vote, .btn-submit, .candidate-item) { transition: none; }
}

@media (max-width: 350px) {
  .fc-vote #contact .row > [class*="col-"] { flex-basis: 100%; width: 100%; }
}