/* =========================================================
   PEC · Registro / Validación
   Paleta institucional (verde predominante)
   ========================================================= */

/* ---------- COLORES BASE ---------- */
:root{
  --verde-oscuro: #055A1C;
  --verde-medio:  #338C36;
  --verde-claro:  #76B82A;
  --amarillo-acento:  #FFC72C;
  --rosa-acento:  #E60064;
--azul-acento:  #002d72;

  --negro: #222221;
  --gris:  #706F6F;

  --blanco: #ffffff;
}

/* ---------- BASE ---------- */
html, body {
  height: 100%;
  background: linear-gradient(
    160deg,
    var(--gris) 0%,
    var(--gris) 50%,
    #1f4d2f 100%
  );
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- APP BAR ---------- */
.app-bar {
  position: fixed;
  top:0; left:0; right:0;
  height:56px;
  background: rgba(5, 90, 28, .85);
  border-bottom:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  z-index:10;
  display:flex;
  align-items:center;
}
.app-bar .brand {
  color:white;
  font-size:16px;
  font-weight:600;
  line-height:56px;
  padding-left:16px;
  letter-spacing:.3px;
}

/* ---------- SWITCHER ---------- */
.switcher { margin-left:auto; padding-right:10px; }
.switcher .btn {
  border-radius:20px;
  padding:6px 12px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}
.switcher .btn.active {
  background: var(--azul-acento);
  color: var(--blanco);
  border:none;
}

/* ---------- CONTENEDOR ---------- */
.app-container {
  min-height:100%;
  padding-top:72px;
  padding-bottom:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- CARD ---------- */
.card {
  width:100%;
  max-width:520px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  color:#fff;
  overflow:hidden;
}

.card-header {
  padding:18px 20px;
  background: linear-gradient(
    90deg,
    rgba(5,90,28,.9),
    rgba(51,140,54,.9)
  );
  border-bottom:1px solid rgba(255,255,255,.18);
}

.card-title {
  margin:0;
  font-size:18px;
  font-weight:600;
  letter-spacing:.2px;
}

.card-subtitle {
  margin:4px 0 0;
  font-size:12px;
  opacity:.9;
}

.card-body {
  padding:18px 20px 8px;
}

.card-footer {
  padding:14px 20px 18px;
  border-top:1px solid rgba(255,255,255,.12);
  background: rgba(118,184,42,.10);
}

/* ---------- SLIDER ---------- */
.slider-viewport { width:100%; overflow:hidden; }
.slider-track {
  width:200%;
  display:flex;
  transition: transform .35s ease-in-out;
  will-change: transform;
}
.pane { width:50%; padding:10px; }

/* ---------- TEXTOS ---------- */
label {
  color:#eafff0;
  font-size:20px;
}
.help-text {
  color:#d9f5df;
  font-size:20px;
  margin-top:6px;
}
.small-muted {
  font-size:12px;
  opacity:.9;
  color:#eafff0;
}

/* ---------- INPUTS ---------- */
.form-control {
  border-radius:28px;
  height:44px;
  border:1px solid rgba(255,255,255,.35);
  background: var(--blanco);
  color:grey;
  transition:all .2s ease;
}
.form-control:focus {
  border-color: var(--verde-claro);
  box-shadow:0 0 0 2px rgba(118,184,42,.35);
  background: rgba(255,255,255,.22);
  color:var(--negro);
}
::placeholder {
  color:#grey;
  opacity:.9;
}

/* ---------- INPUT GROUP ---------- */
.input-group-addon {
  border-radius:24px 0 0 24px !important;
  background: rgba(51,140,54,.75);
  border:1px solid rgba(255,255,255,.35);
  border-right:none;
  color:#fff;
}

/* ---------- BOTONES ---------- */
.btn-pill {
  border-radius:28px;
  padding:10px 18px;
  font-weight:600;
  letter-spacing:.2px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  border:none;
}

.btn-primary {
  background: linear-gradient(
    90deg,
    var(--amarillo-acento),
    var(--amarillo-acento)
  );
  color: var(--verde-oscuro);
}
.btn-primary:hover {
  background: linear-gradient(
    90deg,
    var(--verde-claro),
    #9fdc4a
  );
}

.btn-invert {
  background: rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.btn-invert:hover {
  background: var(--verde-claro);
  color: var(--verde-oscuro);
}

.btn-warning {
  border:none;
  background:#f2f2f2;
  color:var(--negro);
}

/* ---------- PREVIEW DOCUMENTOS ---------- */
.preview {
  margin-top:6px;
  border:1px dashed rgba(118,184,42,.7);
  border-radius:10px;
  padding:6px;
  text-align:center;
  background: rgba(118,184,42,.08);
}
.preview img {
  max-width:100%;
  max-height:160px;
  border-radius:8px;
}

/* ---------- LOADER ---------- */
#loadingreg,
#loadingregPadre {
  width:28px;
  display:none;
  margin-left:8px;
  vertical-align:middle;
}

/* ---------- FOOTER ---------- */
.mini-footer {
  color:#eafff0;
  font-size:12px;
  text-align:center;
  margin-top:18px;
  opacity:.9;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:480px){
  .card{ margin:0 12px; }
}

/* =========================================================
   PLACEHOLDERS EN BLANCO (todos los navegadores)
   ========================================================= */

::placeholder {
  color: var( --gris) !important;
  opacity: 0.95;
}

/* Chrome, Edge, Safari */
::-webkit-input-placeholder {
  color: var( --gris) !important;
  opacity: 0.95;
}

/* Firefox */
::-moz-placeholder {
  color: var( --gris) !important;
  opacity: 0.95;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
  color: var( --gris) !important;
  opacity: 0.95;
}

/* Edge legacy */
::-ms-input-placeholder {
  color: var( --gris) !important;
  opacity: 0.95;
}


/* ================================
   FIX: En móvil se “come” la derecha
   ================================ */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Bootstrap 3: en móviles a veces el row + container genera micro overflow */
.container, .row {
  max-width: 100%;
}

/* Ajuste suave para móviles (sin cambiar tu layout) */
@media (max-width: 480px) {
  .app-wrap { padding-left: 10px; padding-right: 10px; }
  .card { margin-left: 0; margin-right: 0; }
}

/* ================================
   FAB Repositorio (icono flotante)
   ================================ */
.pec-fab-repo{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.pec-fab-repo:hover,
.pec-fab-repo:focus{
  outline: none;
  background: rgba(255,255,255,.22);
}

.pec-fab-repo .glyphicon{
  font-size: 22px;
  line-height: 1;
}

/* ================================
   Centrar formulario (card)
   ================================ */

/* Contenedor principal */
.app-wrap {
  min-height: calc(100vh - 56px); /* resta la altura del app-bar */
  display: flex;
  align-items: center;   /* centra vertical */
  justify-content: center; /* centra horizontal */
}

/* Evita que Bootstrap empuje la card a la izquierda */
.app-wrap > .row {
  width: 100%;
  max-width: 420px; /* ancho cómodo tipo app */
  margin: 0 auto;
}

/* En móvil: que no se pegue a los bordes */
@media (max-width: 480px) {
  .app-wrap > .row {
    padding-left: 6px;
    padding-right: 6px;
  }
}


/* PWA Splash interno (dinámico) */
#pwaSplash{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #055A1C 0%, #338C36 55%, #76B82A 100%);
}
#pwaSplash .box{
  width: 92%;
  max-width: 360px;
  text-align: center;
  padding: 22px 18px;
  border-radius: 18px;
  background: rgba(34,34,33,.35); /* #222221 */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
#pwaSplash img{
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  padding: 10px;
}
#pwaSplash .txt{
  margin-top: 12px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}
#pwaSplash .sub{
  margin-top: 6px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
#pwaSplash.hide{
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}



/* ===== Botón Instalar ===== */
#pwaInstallWrap .help-text{
  color: rgba(255,255,255,.85);
}

/* ===== Modal iOS ===== */
.ios-modal{
  position: fixed;
  inset: 0;
  z-index: 99998;
}
.ios-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.ios-modal__card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 92%;
  max-width: 420px;
  background: rgba(34,34,33,.92); /* #222221 */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  padding: 16px 14px;
  color: #fff;
}
.ios-modal__title{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.ios-modal__text{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.9);
}
.ios-share{
  display:inline-block;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(230,0,100,.25); /* #E60064 */
  border: 1px solid rgba(230,0,100,.35);
}


/* =========================
   BLOQUEO PWA INSTALL OVERLAY
   ========================= */
.pwa-lock {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.pwa-lock.is-active { display: flex; }

.pwa-lock__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}

.pwa-lock__card {
  position: relative;
  z-index: 99999;
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(34,34,33,.92); /* #222221 */
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  color: #fff;
  text-align: center;
}

.pwa-lock__title {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
  color: #76B82A; /* verde */
}

.pwa-lock__text {
  font-size: 13px;
  opacity: .95;
  line-height: 1.35;
  margin-bottom: 12px;
  color: #fff;
}

.pwa-lock__hint {
  font-size: 12px;
  opacity: .85;
  margin-top: 10px;
  color: #d9d9d9;
}

/* Difumina e inutiliza toda la página cuando está el lock */
body.is-pwa-locked > *:not(.pwa-lock):not(#pwaSplash) {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

/* (Opcional) al lock le permitimos interacción */
body.is-pwa-locked .pwa-lock,
body.is-pwa-locked .pwa-lock * {
  pointer-events: auto;
}

/* Ajuste: tu wrapper del botón normal ya no estorba si usas overlay */
#pwaInstallWrap { display:none !important; }