/* ===============================================
   SHARED.CSS - Estilos compartidos para todas las páginas
   IDC Montebello - Sistema de Componentes
   =============================================== */

/* ================= VARIABLES GLOBALES ================= */
:root{
  --bgTop:#ffffff;
  --bgBottom:#e5e7eb;
  --accent:#4b5563;
  --accentLight:rgba(156,163,175,.18);
  --accentBorder:rgba(156,163,175,.35);

  --ink:#111;
  --muted:#666;
  --paper:#fff;
  --soft:#f3f4f6;
  --line:rgba(17,17,17,.12);

  --shadow: 0 10px 22px rgba(0,0,0,.10);
  --radius: 18px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --contentMax: 780px;
  --pad: 12px;
  --overlap: 22px;

  --footerTop: #f5f5f5;
  --footerBottom: #e8e8e8;
}

/* ================= RESET Y BASE ================= */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  background: linear-gradient(to bottom, var(--bgTop) 0%, var(--bgBottom) 90%);
  color:var(--ink);
  min-height:100vh;
  padding-bottom: 86px; /* espacio para barra inferior */
}

/* ================= BOTTOM NAV (FOOTER) ================= */
.bottomNav{
  position: fixed;
  bottom:0;
  left:0;
  right:0;
  height: 70px;
  background: linear-gradient(to bottom, var(--footerTop), var(--footerBottom));
  border-top: 1px solid var(--line);
  display:flex;
  justify-content: space-evenly;
  align-items: center;
  z-index:1500;
  padding:0 6px;
}

.bottomNav a, .bottomNav button{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 4px;
  text-decoration:none;
  color:var(--muted);
  border:1px solid rgba(17,17,17,.15);
  background:rgba(255,255,255,.6);
  cursor:pointer;
  border-radius:12px;
  transition: all 0.15s ease;
  font-family:var(--font);
  min-width:0;
}

.bottomNav a:hover, .bottomNav button:hover{
  background: rgba(255,255,255,.9);
  color:var(--accent);
  border-color: rgba(17,17,17,.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.bottomNav a:active, .bottomNav button:active{
  transform: scale(.96);
  background: rgba(156,163,175,.18);
}

.bottomNav .icon{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  flex-shrink:0;
}

.bottomNav span{
  font-size:10px;
  line-height:1.2;
  font-weight:400;
  text-align:center;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

/* ================= MODALES ================= */
.modalBack{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:2000;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter: blur(4px);
}
.modalBack.show{
  display:flex;
}

.modalCard{
  background:#fff;
  border-radius: 18px;
  width:100%;
  max-width:420px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  position:relative;
  animation: modalPop 0.25s ease;
}

@keyframes modalPop{
  0%{
    opacity:0;
    transform: scale(0.92) translateY(16px);
  }
  100%{
    opacity:1;
    transform: scale(1) translateY(0);
  }
}

.modalTop{
  padding:18px 20px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.modalTitle{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
}

.closeBtn{
  width:32px;
  height:32px;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
  flex-shrink:0;
}
.closeBtn:hover{
  background:var(--soft);
}
.closeBtn svg{
  width:20px;
  height:20px;
  stroke:var(--ink);
  stroke-width:2;
  fill:none;
}

.modalBody{
  padding:20px;
  max-height:60vh;
  overflow-y:auto;
}

.modalActions{
  padding:12px 20px 18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  border-top:1px solid var(--line);
}

.btn{
  padding:10px 18px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:.15s ease;
  font-family:var(--font);
}
.btn:hover{
  background:var(--soft);
}
.btn:active{
  transform:scale(.96);
}

.btnPrimary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btnPrimary:hover{
  background:#374151;
}

/* ================= MODAL: SOCIAL CARDS ================= */
.socialCards{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sCard{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  transition:.15s ease;
}
.sCard:hover{
  background:var(--soft);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.sCard:active{
  transform:translateY(0) scale(.98);
}

.sIcon{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sIcon svg{
  width:24px;
  height:24px;
  stroke:var(--accent);
  fill:none;
  stroke-width:2;
}

.sText{
  flex:1;
}
.sTitle{
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}
.sSub{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

/* ================= MODAL: FORMULARIO ================= */
.field{
  margin-bottom:16px;
}
.field:last-child{
  margin-bottom:0;
}

.field label{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:6px;
}

.field input,
.field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:15px;
  font-family:var(--font);
  background:#fff;
  color:var(--ink);
  transition:.15s ease;
}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accentLight);
}

.field textarea{
  min-height:100px;
  resize:vertical;
}

.status{
  padding:12px 20px;
  text-align:center;
  font-size:14px;
  font-weight:500;
  color:var(--accent);
}

/* ================= MODAL: ORACIÓN ================= */
.prayerContent{
  text-align:center;
}

.prayerContent h3{
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 12px;
}

.prayerContent p{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

/* ================= NAVEGACIÓN (HAMBURGUESA) ================= */
.hm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.hm-overlay.show { opacity: 1; pointer-events: auto; }

.hm-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: white;
  z-index: 1999;
  transform: translateX(100%);
  transition: transform .3s;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}
.hm-panel.show { transform: translateX(0); }

.hm-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  background: var(--accent);
  color:white;
  position: sticky;
  top:0;
  z-index:10;
}
.hm-head-title { font-weight:700; font-size:13px; letter-spacing:1px; }
.hm-close{
  background:none;
  border:none;
  color:white;
  font-size:24px;
  cursor:pointer;
  width:28px;height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .2s;
}
.hm-close:hover{ transform: rotate(90deg); }

.hm-nav{ padding: 8px 0; }
.hm-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  transition: background .15s;
  text-decoration:none;
  color:inherit;
}
.hm-item:hover{ background: var(--soft); }
.hm-left{
  display:flex;
  gap:10px;
  align-items:center;
  flex:1;
}
.hm-badge{
  font-size:9px;
  color: var(--accent);
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.5px;
}
.hm-label{
  font-size:12px;
  font-weight:500;
  color: var(--ink);
}
.hm-arrow{
  font-size:18px;
  color: var(--muted);
  transition: transform .3s;
}
.hm-arrow.rotate{ transform: rotate(90deg); }
.hm-submenu{
  background: var(--soft);
  max-height:0;
  overflow:hidden;
  transition: max-height .3s;
}
.hm-submenu.show{ max-height:500px; }
.hm-subitem{
  display:block;
  padding:10px 14px 10px 46px;
  text-decoration:none;
  color: var(--muted);
  font-size:11px;
  border-bottom:1px solid rgba(0,0,0,.05);
  transition: all .15s;
}
.hm-subitem:hover{
  background:white;
  color: var(--accent);
  padding-left: 50px;
}

/* Tamaño consistente para iconos del menú hamburguesa */
.icon{
  width:20px;
  height:20px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  flex: 0 0 auto;
  opacity: .95;
}

@media (max-width:480px){
  .hm-panel{ width:100%; max-width:100%; }
}