/* ---------------------------------------------------------------------
   Portal de pacientes y familia — estilos propios.

   Complementa assets/app.css (la base que comparte con la app del cuidador:
   barra superior, barra inferior, pastillas, tarjetas). Acá va sólo lo que es
   de este portal.

   Criterio: quien lo usa suele ser un familiar grande, en el celular y
   apurado. Texto un poco más grande que en la app del cuidador, mucho aire y
   nada de gestos raros (todo se toca, nada se desliza).
--------------------------------------------------------------------- */

body{ font-size:1.02rem; }

/* ---- Barra "estás viendo a ..." ------------------------------------ */
.pac-barra{
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:.55rem .75rem; margin-bottom:.85rem;
}
.pac-barra-ico{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:var(--oipsa-soft); color:var(--oipsa-dark);
  display:grid; place-items:center; font-size:1.05rem;
}
.pac-barra-txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.pac-barra-rot{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.pac-barra-txt strong{ font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pac-barra-elige .form-select{ max-width:9.5rem; }

/* ---- Tarjetas de sección ------------------------------------------- */
.tarjeta{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:.95rem 1rem; margin-bottom:.85rem;
}
.tarjeta-tit{
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem;
}
.tarjeta-tit .bi{ color:var(--oipsa); font-size:1rem; }
.tarjeta-tit .ver-mas{ margin-left:auto; font-size:.75rem; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--oipsa-dark); }

/* ---- Visita / turno de la agenda ----------------------------------- */
.visita{
  display:flex; gap:.75rem; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:.8rem .9rem; margin-bottom:.6rem;
}
.visita.hoy{ border-color:var(--oipsa); box-shadow:0 0 0 2px var(--oipsa-soft); }
.visita-foto{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  background:var(--oipsa-soft); color:var(--oipsa-dark);
  display:grid; place-items:center; font-weight:700; font-size:.95rem;
}
.visita-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.visita-cuerpo{ min-width:0; flex:1; }
.visita-quien{ font-weight:700; line-height:1.2; }
.visita-rol{ font-size:.8rem; color:var(--muted); }
.visita-hora{ font-size:.92rem; color:var(--ink); margin-top:.15rem; }
.visita-hora .bi{ color:var(--oipsa); }

/* ---- Separador de día ---------------------------------------------- */
.dia-titulo{
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin:1.1rem .2rem .5rem;
}
.dia-titulo:first-child{ margin-top:.2rem; }

/* ---- Filas de datos (ficha, documentos, reclamos) ------------------- */
.fila{
  display:flex; gap:.7rem; align-items:center;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.fila:last-child{ border-bottom:0; padding-bottom:0; }
.fila:first-child{ padding-top:0; }
.fila-ico{
  width:34px; height:34px; flex:0 0 auto; border-radius:10px;
  background:var(--oipsa-soft); color:var(--oipsa-dark);
  display:grid; place-items:center;
}
.fila-cuerpo{ min-width:0; flex:1; }
.fila-tit{ font-weight:600; line-height:1.25; }
.fila-sub{ font-size:.82rem; color:var(--muted); }

/* ---- Accesos grandes de "Salud" y "Más" ---------------------------- */
.acceso{
  display:flex; align-items:center; gap:.8rem;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:.85rem .9rem; margin-bottom:.55rem; color:var(--ink);
}
.acceso:active{ background:var(--oipsa-soft); }
.acceso-ico{
  width:40px; height:40px; flex:0 0 auto; border-radius:12px;
  background:var(--oipsa-soft); color:var(--oipsa-dark);
  display:grid; place-items:center; font-size:1.15rem;
}
.acceso-txt{ min-width:0; flex:1; }
.acceso-txt strong{ display:block; line-height:1.2; }
.acceso-txt span{ font-size:.82rem; color:var(--muted); }
.acceso .bi-chevron-right{ color:var(--muted); }
.acceso.peligro .acceso-ico{ background:#fee2e2; color:#b91c1c; }

/* ---- Números grandes (horas del mes) ------------------------------- */
.numeron{ font-size:1.7rem; font-weight:800; line-height:1; color:var(--oipsa-dark); }
.numeron-rot{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }

/* ---- Encuesta ------------------------------------------------------ */
.enc-pregunta{ padding:.85rem 0; border-bottom:1px solid var(--line); }
.enc-pregunta:last-of-type{ border-bottom:0; }
.enc-pregunta h3{ font-size:1rem; font-weight:700; margin:0 0 .1rem; }
.enc-pregunta p{ font-size:.83rem; color:var(--muted); margin:0 0 .55rem; }
/* Las estrellas son radios de verdad (accesibles y funcionan sin JS).
   Truco clásico: van en el HTML de 5 a 1 y se muestran con row-reverse, así
   `input:checked ~ label` puede pintar la estrella elegida y TODAS las
   anteriores (CSS no sabe seleccionar hermanos previos). */
.enc-estrellas-input{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:.35rem; }
.enc-estrellas-input input{ position:absolute; opacity:0; width:1px; height:1px; }
.enc-estrellas-input label{
  width:46px; height:46px; border-radius:12px; border:1px solid var(--line);
  display:grid; place-items:center; font-size:1.25rem; color:#cbd5e1; background:#fff;
  cursor:pointer;
}
.enc-estrellas-input input:checked + label,
.enc-estrellas-input input:checked ~ label{ color:#f59e0b; border-color:#fcd34d; background:#fffbeb; }
.enc-estrellas-input input:focus-visible + label{ outline:2px solid var(--oipsa); outline-offset:2px; }
.enc-estrellas .bi{ font-size:.95rem; }
.enc-nps{ display:flex; flex-wrap:wrap; gap:.3rem; }
.enc-nps input{ position:absolute; opacity:0; width:1px; height:1px; }
.enc-nps label{
  min-width:38px; height:40px; padding:0 .2rem; border-radius:10px; border:1px solid var(--line);
  display:grid; place-items:center; font-weight:600; background:#fff; cursor:pointer;
}
.enc-nps input:checked + label{ background:var(--oipsa); border-color:var(--oipsa); color:#fff; }

/* ---- Chat (usa .burbuja de app.css, acá sólo el alto del hilo) ------ */
#chatHilo{ min-height:40vh; }

/* ---- Cartel de "no hay nada todavía" ------------------------------- */
.nada{
  text-align:center; color:var(--muted); padding:2rem 1rem;
  background:#fff; border:1px dashed var(--line); border-radius:16px;
}
.nada .bi{ font-size:1.9rem; color:#cbd5e1; display:block; margin-bottom:.4rem; }

/* ---- Bloque de urgencias (siempre visible en Inicio) --------------- */
.urgencia{
  display:flex; align-items:center; gap:.7rem;
  background:#fff7ed; border:1px solid #fed7aa; border-radius:14px;
  padding:.75rem .85rem; margin-bottom:.85rem; color:#7c2d12;
}
.urgencia .bi{ font-size:1.3rem; color:#ea580c; }
.urgencia a{ font-weight:700; color:#c2410c; }