/* ---------------------------------------------------------------------
   App del cuidador (cuidadores.grupooipsa.com.ar) — mobile first.
   Marca OIPSA: teal #0d9488 / #0f766e. Pensada para usarse con una mano,
   con botones grandes (se usa en la calle, con guantes y apuro).
--------------------------------------------------------------------- */
:root{
  --oipsa:#0d9488; --oipsa-dark:#0f766e; --oipsa-soft:#e6f7f4;
  --ink:#1e293b; --muted:#64748b; --line:#e8edf2; --page:#f6f9fb;
  --top-h:60px; --nav-h:64px;
}
*{ -webkit-tap-highlight-color: rgba(13,148,136,.15); }
body{
  background:var(--page); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-top:var(--top-h);
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
}
a{ text-decoration:none; }

/* ---- Barra superior ---- */
.app-top{
  position:fixed; top:0; left:0; right:0; height:var(--top-h); z-index:1030;
  display:flex; align-items:center; gap:.7rem; padding:0 .9rem;
  background:linear-gradient(135deg,var(--oipsa-dark),#0891b2); color:#fff;
  box-shadow:0 2px 10px rgba(2,6,23,.18);
  padding-top:env(safe-area-inset-top);
  height:calc(var(--top-h) + env(safe-area-inset-top));
}
.app-brand img{ height:26px; width:auto; display:block; }
.app-top-txt{ display:flex; flex-direction:column; line-height:1.1; min-width:0; margin-left:.2rem; }
.app-top-hola{ font-size:.7rem; opacity:.85; }
.app-top-tit{ font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-avatar{
  margin-left:auto; width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; overflow:hidden;
  border:2px solid rgba(255,255,255,.5);
}
.app-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---- Contenido ---- */
.app-main{ max-width:640px; margin:0 auto; padding:.9rem .9rem 1.4rem; }

/* ---- Barra inferior ---- */
.app-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 14px rgba(2,6,23,.06);
}
.app-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; padding:.55rem 0 .5rem; color:var(--muted); font-size:.7rem; font-weight:600;
  height:var(--nav-h);
}
.app-nav-item i{ font-size:1.32rem; }
.app-nav-item.on{ color:var(--oipsa-dark); }
.app-nav-item.on i{ transform:translateY(-1px); }

/* ---- Avisos de conexión ---- */
.barra-offline,.barra-sync{
  position:fixed; left:0; right:0; z-index:1040; text-align:center;
  font-size:.8rem; font-weight:600; padding:.4rem .8rem;
  top:calc(var(--top-h) + env(safe-area-inset-top));
}
.barra-offline{ background:#7c2d12; color:#fff; }
.barra-sync{ background:#0f766e; color:#fff; }
body.hay-aviso .app-main{ padding-top:1.9rem; }

/* ---- Tarjetas de turno ---- */
.card-turno{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 3px rgba(2,6,23,.05); margin-bottom:.8rem;
}
.card-turno .ct-body{ padding:.85rem .9rem; display:flex; gap:.75rem; align-items:flex-start; }
.ct-ini{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--oipsa-soft); color:var(--oipsa-dark); font-weight:700; font-size:.9rem;
}
.ct-nombre{ font-weight:700; font-size:1rem; line-height:1.2; }
.ct-dato{ color:var(--muted); font-size:.83rem; display:flex; align-items:center; gap:.35rem; margin-top:.2rem; }
.ct-hora{ font-weight:700; color:var(--oipsa-dark); font-size:.9rem; }
.card-turno .ct-pie{
  border-top:1px dashed var(--line); padding:.55rem .9rem; display:flex; align-items:center;
  gap:.5rem; background:#fcfdfe; font-size:.8rem;
}
.card-turno.st-en_curso{ border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.card-turno.st-hecha{ opacity:.92; }
.card-turno.st-perdida{ border-color:#fecaca; }

.chip{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700;
  padding:.2rem .55rem; border-radius:999px; border:1px solid transparent;
}
.chip-secondary{ background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.chip-success  { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.chip-primary  { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.chip-danger   { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.chip-warning  { background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ---- Botonera de marcaje ---- */
.btn-marcar{
  border:none; border-radius:16px; color:#fff; font-weight:700; font-size:1.05rem;
  padding:1rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  box-shadow:0 10px 22px rgba(13,148,136,.28);
}
.btn-ingreso{ background:linear-gradient(135deg,#0d9488,#0891b2); }
.btn-egreso { background:linear-gradient(135deg,#b45309,#d97706); box-shadow:0 10px 22px rgba(180,83,9,.25); }
.btn-marcar:disabled{ filter:grayscale(.5); opacity:.7; box-shadow:none; }

.bloque{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:.9rem; margin-bottom:.8rem; }
.bloque h2{ font-size:.95rem; font-weight:700; margin:0 0 .6rem; }
.dato-fila{ display:flex; gap:.6rem; padding:.45rem 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
.dato-fila:last-child{ border-bottom:none; }
.dato-fila .k{ color:var(--muted); min-width:104px; }
.dato-fila .v{ font-weight:600; }

.kpi{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:.8rem; text-align:center; }
.kpi .n{ font-size:1.4rem; font-weight:800; color:var(--oipsa-dark); line-height:1.1; }
.kpi .l{ font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

.dia-sep{
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:1rem .2rem .5rem;
}
.vacio{ text-align:center; color:var(--muted); padding:2.2rem 1rem; }
.vacio i{ font-size:2.4rem; color:#cbd5e1; display:block; margin-bottom:.6rem; }

/* Estado del GPS mientras se busca la ubicación */
.gps-estado{ font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.gps-estado.ok{ color:#047857; }
.gps-estado.mal{ color:#b91c1c; }

/* ---- Campanita y globitos ---- */
.app-campana{
  position:relative; color:#fff; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.14); font-size:1.1rem; flex:0 0 auto;
}
.app-globito{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  background:#dc2626; color:#fff; border-radius:999px; font-size:.66rem; font-weight:800;
  display:grid; place-items:center; border:2px solid #0f766e; line-height:1;
}
.app-nav-ico{ position:relative; display:grid; place-items:center; }
.app-nav-ico .app-globito{ border-color:#fff; top:-6px; right:-10px; }
.app-nav-item{ background:none; border:none; }

/* ---- Parte de la visita ---- */
.vital{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:.5rem .6rem; }
.vital label{ font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.vital input{ border:none; padding:0; font-size:1.15rem; font-weight:700; width:100%; }
.vital input:focus{ outline:none; }
.vital.malo{ border-color:#fca5a5; background:#fff5f5; }
.vital small{ font-size:.68rem; color:var(--muted); }
.chk-cuidado{
  display:flex; align-items:center; gap:.55rem; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:.6rem .7rem; font-size:.9rem; font-weight:600; margin-bottom:.45rem;
}
.chk-cuidado input{ width:22px; height:22px; }
.med-fila{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:.7rem; margin-bottom:.6rem; }
.med-fila.hecha{ border-color:#a7f3d0; background:#f0fdf9; }
.med-fila.omitida{ border-color:#fde68a; background:#fffbeb; }
.firma-caja{ background:#fff; border:2px dashed #cbd5e1; border-radius:14px; touch-action:none; }
.burbuja{ max-width:82%; padding:.55rem .8rem; border-radius:14px; font-size:.92rem; line-height:1.35; }
.burbuja-mia{ background:#0d9488; color:#fff; border-bottom-right-radius:4px; margin-left:auto; }
.burbuja-oipsa{ background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.burbuja-meta{ font-size:.68rem; opacity:.75; margin-top:.2rem; }

/* ---- Botones de cámara / archivo (subir imágenes) ---- */
.foto-botones{ display:flex; gap:.5rem; }
.foto-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:.8rem .5rem;
  font-size:.82rem; font-weight:700; color:var(--oipsa-dark); cursor:pointer; text-align:center;
}
.foto-btn i{ font-size:1.5rem; }
.foto-btn:active{ background:var(--oipsa-soft); }
.foto-btn input{ display:none; }
.foto-prev{
  width:100%; max-height:220px; object-fit:contain; border-radius:12px;
  border:1px solid var(--line); background:#f8fafc; margin-top:.6rem;
}
.foto-info{ font-size:.78rem; color:var(--muted); margin-top:.35rem; display:block; }