/*
 * FieldCore | Identidad visual para el flujo de votación VOTOREMOTO
 * v1.1 | 09-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:has(body.fc-vote) { 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%; }
}

/* ===============================================================
 * Incremental 2026-11-09: acceso administrador + Registro Civil
 * Secciones aisladas; los estilos del flujo público no se tocan.
 * Para actualizar la identidad visual, editar las variables :root.
 * =============================================================== */

/* Inicio de sesión del backend (index.tpl). */
body.fc-vote.fc-login { background: var(--fc-background) !important; color: var(--fc-body); }
body.fc-vote.fc-login .navbar.navbar-default {
  height: var(--fc-navigation-height) !important;
  min-height: var(--fc-navigation-height) !important;
  display: block !important;
}
body.fc-vote.fc-login .banner {
  background: var(--fc-footer) !important;
  padding: 29px 18px !important;
  border: 0;
}
body.fc-vote.fc-login .banner h1 { margin: 0 0 8px; font-size: clamp(23px, 2.8vw, 31px); font-weight: 700; }
body.fc-vote.fc-login .banner p { margin: 0; opacity: .9; letter-spacing: .035em; }
body.fc-vote.fc-login .content-wrapper {
  min-height: 380px !important;
  height: auto !important;
  padding: 38px 18px 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.fc-vote.fc-login .login-card {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  padding: clamp(24px, 4vw, 38px) !important;
  border: 1px solid var(--fc-border) !important;
  border-radius: var(--fc-card-radius) !important;
  background: var(--fc-paper) !important;
  box-shadow: var(--fc-shadow) !important;
  text-align: left;
}
body.fc-vote.fc-login .login-card .form-group { margin-bottom: 19px; }
body.fc-vote.fc-login .login-card label { display: inline-block; font-size: 14px; color: var(--fc-heading); font-weight: 700; margin-bottom: 9px; }
body.fc-vote.fc-login .login-card .form-control {
  width: 100%; height: 46px !important; background: #fff !important;
  border: 1px solid var(--fc-border) !important; border-radius: 8px !important;
  box-shadow: none !important; color: var(--fc-body) !important;
}
body.fc-vote.fc-login .login-card .form-control:focus {
  border-color: var(--fc-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,94,96,.12) !important;
}
body.fc-vote.fc-login .login-card .btn-custom {
  width: 100%; margin-top: 5px; min-height: 48px !important;
  background: var(--fc-primary) !important; border: 1px solid var(--fc-primary) !important;
  color: #fff !important; border-radius: 8px !important;
  box-shadow: none !important; font-weight: 700 !important;
}
body.fc-vote.fc-login .login-card .btn-custom:hover { background: var(--fc-primary-hover) !important; }

/* Nueva pantalla Registro Civil. Solo en backend autorizado. */
body.fc-admin-rc-body { margin: 0; background: var(--fc-background); color: var(--fc-body); font-family: Montserrat, Arial, sans-serif; }
body.fc-admin-rc-body .navbar.navbar-default {
  background: var(--fc-paper); border: 0; border-bottom: 1px solid var(--fc-border);
  box-shadow: 0 2px 15px rgba(8,58,60,.035); margin-bottom: 0;
}
body.fc-admin-rc-body .navbar-brand img { max-width: 200px; width: auto; object-fit: contain; }
body.fc-admin-rc-body .navbar-nav > li > a { color: var(--fc-heading) !important; font-weight: 600; }
body.fc-admin-rc-body .navbar-nav > li > a:hover,
body.fc-admin-rc-body .navbar-nav > li.open > a { color: var(--fc-primary) !important; background: var(--fc-primary-soft) !important; }
.fc-admin-rc, .fc-admin-rc * { box-sizing: border-box; }
.fc-admin-rc {
  max-width: 1170px; margin: 0 auto; padding: 33px 20px 56px;
  font-family: Montserrat, Arial, sans-serif; font-size: 14px; line-height: 1.55;
}
.fc-admin-rc__heading { margin: 0 0 25px; }
.fc-admin-rc__eyebrow { color: var(--fc-primary); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.fc-admin-rc h1 { font-size: clamp(23px, 3vw, 30px); line-height: 1.25; color: var(--fc-heading); margin: 0 0 10px; font-weight: 700; }
.fc-admin-rc__subtitle { max-width: 810px; margin: 0; color: var(--fc-muted); }
.fc-admin-rc__card {
  margin: 0 0 22px; padding: 24px;
  background: #fff; border: 1px solid var(--fc-border);
  border-radius: var(--fc-card-radius); box-shadow: var(--fc-shadow);
}
.fc-admin-rc__card-heading { margin-bottom: 20px; }
.fc-admin-rc__card-heading--between { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.fc-admin-rc h2 { font-size: 19px; color: var(--fc-heading); font-weight: 700; margin: 0 0 5px; }
.fc-admin-rc__card-heading p { color: var(--fc-muted); margin: 0; font-size: 13px; }
.fc-admin-rc__search { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.fc-admin-rc__search-field { flex: 1 1 260px; max-width: 400px; }
.fc-admin-rc__search-field label { display: block; font-weight: 700; color: var(--fc-heading); margin: 0 0 7px; }
.fc-admin-rc__search-field input {
  display: block; width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid #bfcfcb; border-radius: 8px; background: #fff;
  color: var(--fc-heading); font-size: 15px;
}
.fc-admin-rc__search-field input:focus { border-color: var(--fc-primary); outline: 3px solid rgba(0,94,96,.12); }
.fc-admin-rc__button {
  min-height: 42px; display: inline-flex; justify-content: center; align-items: center;
  padding: 10px 15px; border-radius: 8px; font-size: 12px; font-weight: 700;
  line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .13s ease;
  border: 1px solid transparent;
}
.fc-admin-rc__button:disabled { opacity: .65; cursor: wait; }
.fc-admin-rc__button:focus-visible { outline: 3px solid var(--fc-primary); outline-offset: 3px; }
.fc-admin-rc__button--primary { background: var(--fc-primary); color: #fff; min-width: 145px; min-height: 44px; }
.fc-admin-rc__button--primary:hover { background: var(--fc-primary-hover); color: #fff; }
.fc-admin-rc__button--outline { background: #fff; border-color: #b9cfca; color: var(--fc-heading); }
.fc-admin-rc__button--outline:hover { background: #f4f8f7; }
.fc-admin-rc__button--success { background: var(--fc-primary); color: #fff; }
.fc-admin-rc__button--success:hover { background: var(--fc-primary-hover); }
.fc-admin-rc__button--warning { background: #fff7e9; border-color: #e9d3a8; color: #754c1b; }
.fc-admin-rc__button--warning:hover { background: #fceaca; }
.fc-admin-rc__totals { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-admin-rc__count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.fc-admin-rc__count--black { color: #973f43; background: #fff0f0; border: 1px solid #f4d1d3; }
.fc-admin-rc__count--white { color: #185b51; background: #ecf8f2; border: 1px solid #c6e7db; }
.fc-admin-rc__table-scroller { max-width: 100%; overflow-x: auto; }
.fc-admin-rc__table { border-collapse: collapse; width: 100%; min-width: 790px; }
.fc-admin-rc__table th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--fc-muted);
  padding: 12px; background: #f7faf9; border-bottom: 1px solid var(--fc-border);
}
.fc-admin-rc__table td { padding: 13px 12px; border-bottom: 1px solid var(--fc-border); vertical-align: middle; }
.fc-admin-rc__table tr:last-child td { border-bottom: none; }
.fc-admin-rc__table tbody tr:hover td { background: #fbfdfc; }
.fc-admin-rc__mono { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.fc-admin-rc__tag { font-size: 11px; white-space: nowrap; font-weight: 700; display: inline-block; padding: 5px 11px; border-radius: 999px; }
.fc-admin-rc__tag--black { background: #fff0f0; color: #a33e45; }
.fc-admin-rc__tag--white { background: #e9f8f1; color: #1a6555; }
.fc-admin-rc__actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.fc-admin-rc__action-form { margin: 0; }
.fc-admin-rc__footnote { margin: 13px 0 0; color: var(--fc-muted); font-size: 12px; }
.fc-admin-rc__empty { padding: 16px; background: #f7faf9; border-radius: 9px; }
.fc-admin-rc__empty p { color: var(--fc-muted); margin: 5px 0 0; }
.fc-admin-rc__notice { margin: 0 0 16px; padding: 14px 18px; border-radius: 8px; font-weight: 600; }
.fc-admin-rc__notice--error { color: #882f35; background: #fff1f1; border: 1px solid #eac9cc; }
.fc-admin-rc__notice--success { color: #155e51; background: #ecf8f4; border: 1px solid #bddfd4; }
.fc-admin-rc__help { color: var(--fc-muted); background: #edf4f2; border-radius: 10px; padding: 17px 20px; }
.fc-admin-rc__help strong { display: block; color: var(--fc-heading); font-size: 13px; margin-bottom: 5px; }
.fc-admin-rc__help p { font-size: 12px; margin: 0; line-height: 1.7; }
@media (max-width: 700px) {
  .fc-admin-rc { padding: 22px 13px 40px; }
  .fc-admin-rc__card { padding: 17px 15px; }
  .fc-admin-rc__search-field { max-width: none; flex-basis: 100%; }
  .fc-admin-rc__search > .fc-admin-rc__button { width: 100%; }
  .fc-admin-rc__totals { margin-top: 5px; }
  body.fc-admin-rc-body .navbar-brand img { max-width: 170px; }
  body.fc-vote.fc-login .content-wrapper { padding-top: 26px !important; }
}

/* ===============================================================
 * FieldCore | Pie de pagina al borde inferior (09-11-2026)
 *
 * Uso: agregar la clase fc-sticky-footer al <body class="fc-vote">.
 * Unica finalidad: repartir el alto visible entre cabecera, contenido
 * y contacto. Si el contenido crece, el pie baja de forma natural.
 * No usa posicionamiento fixed/absolute ni afecta eventos de voto.
 * =============================================================== */
body.fc-vote.fc-sticky-footer {
  display: flex;
  flex-direction: column;
  height: auto !important; /* Anula height: 100% de los estilos antiguos. */
  min-height: 100vh;       /* Respaldo para navegadores anteriores. */
  min-height: 100dvh;      /* Alto util real en navegadores modernos. */
}

body.fc-vote.fc-sticky-footer .content-wrapper {
  flex: 1 0 auto; /* Ocupa el espacio sobrante sin comprimir contenido. */
}

body.fc-vote.fc-sticky-footer #contact {
  flex: 0 0 auto;
  margin-top: auto; /* Si el contenido es corto, pega el pie al fondo. */
}