:root{
  --gris:#58595b; --dorado:#bf9000; --bordo:#9c0e39;
  --tinta:#1b1b1d; --suave:#6b6b70;
  --fondo:#f4f4f2; --panel:#fff; --borde:#e0e0dc;
  --alerta:#fff4d6; --alerta-borde:#e0a800;
  --radio:12px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,"Segoe UI",Roboto,"Lato",sans-serif;
  background:var(--fondo); color:var(--tinta);
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select{font:inherit;}

.barra{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px calc(14px);
  padding-top:calc(14px + env(safe-area-inset-top));
  background:var(--bordo); color:#fff;
}
.barra h1{margin:0; font-size:17px; letter-spacing:.3px; font-weight:700;}
.icono{
  background:transparent; border:0; color:inherit;
  font-size:22px; line-height:1; padding:4px 8px; cursor:pointer; border-radius:8px;
}
.icono:active{background:rgba(255,255,255,.18);}

.tabs{
  position:sticky; top:52px; z-index:19;
  display:flex; background:var(--panel); border-bottom:1px solid var(--borde);
}
.tabs button{
  flex:1; padding:13px 8px; background:none; border:0; cursor:pointer;
  color:var(--suave); font-weight:600; font-size:14px;
  border-bottom:3px solid transparent;
}
.tabs button.activo{color:var(--bordo); border-bottom-color:var(--bordo);}

main{padding:14px 14px 90px; max-width:820px; margin:0 auto;}
.cargando{color:var(--suave); text-align:center; padding:30px 0;}

.tarjeta{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:14px; margin-bottom:10px;
}
.tarjeta.link{cursor:pointer;}
.tarjeta.link:active{background:#fafaf8;}
.tarjeta h3{margin:0 0 3px; font-size:16px;}
.meta{color:var(--suave); font-size:13px;}

.progreso{height:5px; background:#eee; border-radius:3px; overflow:hidden; margin-top:9px;}
.progreso i{display:block; height:100%; background:var(--dorado);}
.progreso.full i{background:#2e7d32;}

.franja{
  color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.5px;
  padding:5px 11px; border-radius:6px; margin:20px 0 9px; display:inline-block;
}
.f-gris{background:var(--gris);} .f-dorado{background:var(--dorado);} .f-bordo{background:var(--bordo);}

.parte{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:12px 13px; margin-bottom:8px;
}
.parte-cab{display:flex; gap:10px; align-items:baseline;}
.parte-hora{font-size:12px; font-weight:700; color:var(--suave); min-width:42px;}
.parte-tit{flex:1; font-size:15px; font-weight:600; line-height:1.3;}
.parte-dur{font-size:12px; color:var(--suave); white-space:nowrap;}

.slot{
  display:flex; align-items:center; gap:8px; width:100%;
  margin-top:8px; padding:9px 11px; cursor:pointer; text-align:left;
  background:#fbfbf9; border:1px dashed var(--borde); border-radius:9px;
  color:var(--suave); font-size:14px;
}
.slot.lleno{background:#fff; border-style:solid; color:var(--tinta); font-weight:600;}
.slot .rol{font-size:11px; font-weight:700; color:var(--suave); text-transform:uppercase; letter-spacing:.4px;}
.slot.conflicto{background:var(--alerta); border-color:var(--alerta-borde);}
.slot .quitar{margin-left:auto; color:var(--suave); font-size:18px; padding:0 4px;}

.chip{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 7px;
  border-radius:20px; background:#eceae4; color:var(--suave); margin-left:6px;
}
.chip.anciano{background:#e6eef7; color:#1c4e80;}
.chip.ministerial{background:#eaf3ea; color:#2e6b34;}
.chip.no_bautizado{background:#f7ecec; color:#8a4040;}

.acciones{display:flex; gap:9px; flex-wrap:wrap; margin:6px 0 16px;}
.btn{
  flex:1; min-width:130px; padding:12px; border-radius:10px; cursor:pointer;
  border:1px solid var(--borde); background:var(--panel); font-weight:600; font-size:14px;
}
.btn.primario{background:var(--bordo); border-color:var(--bordo); color:#fff;}
.btn.fantasma{background:transparent;}
.btn:active{opacity:.75;}

/* Hoja inferior */
.hoja{position:fixed; inset:0; z-index:40;}
.hoja.oculto{display:none;}
.hoja-fondo{position:absolute; inset:0; background:rgba(0,0,0,.4);}
.hoja-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:82vh;
  display:flex; flex-direction:column;
  background:var(--panel); border-radius:18px 18px 0 0; padding:14px 14px 20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  animation:subir .18s ease-out;
}
@keyframes subir{from{transform:translateY(100%);}to{transform:translateY(0);}}
.hoja-cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.hoja-cab .icono{color:var(--suave);}
#hoja-buscar{
  width:100%; padding:11px 13px; border:1px solid var(--borde);
  border-radius:10px; margin-bottom:10px; background:#fbfbf9;
}
.hoja-lista{overflow-y:auto; -webkit-overflow-scrolling:touch;}
.opcion{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:11px 12px; margin-bottom:6px; cursor:pointer; text-align:left;
  background:#fbfbf9; border:1px solid var(--borde); border-radius:10px; font-size:15px;
}
.opcion .desde{margin-left:auto; font-size:12px; color:var(--suave); white-space:nowrap;}
.opcion.sugerida{border-color:var(--dorado); background:#fffdf4;}
.opcion.ocupada{background:var(--alerta); border-color:var(--alerta-borde);}
.opcion.nueva{border-style:dashed; color:var(--bordo); font-weight:600;}

.aviso{
  position:fixed; left:14px; right:14px; bottom:20px; z-index:60;
  background:var(--tinta); color:#fff; padding:13px 15px;
  border-radius:11px; font-size:14px; box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.aviso.alerta{background:var(--alerta); color:#5c4400; border:1px solid var(--alerta-borde);}
.aviso.oculto{display:none;}

.forma{display:grid; gap:9px; margin-top:10px;}
.forma label{font-size:12px; font-weight:700; color:var(--suave);}
.forma input, .forma select{
  width:100%; padding:11px; border:1px solid var(--borde); border-radius:9px; background:#fbfbf9;
}
.vacio{text-align:center; color:var(--suave); padding:34px 14px; line-height:1.6;}