/* Portal de personas empleadas: pensado para el móvil, con tipografía grande y mucho contraste. */
.portal { background: var(--nube); }
.portal-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; background: var(--papel); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 30; }
.con-banda-pruebas .portal-barra { top: 1.9rem; }
.portal-sesion { display: flex; align-items: center; gap: .5rem; }
.portal-nombre { font-weight: 700; color: var(--gris); }
.portal-avisos { max-width: 44rem; margin: 1rem auto 0; padding: 0 1rem; }
.portal-contenido { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.portal-titulo { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: .35rem; }
.portal-intro { color: var(--gris); margin-bottom: 1.25rem; }
.volver-portal { display: inline-block; margin-bottom: .5rem; font-weight: 700; text-decoration: none; }

/* Acceso */
.portal-acceso { max-width: 26rem; margin: 0 auto; text-align: center; }
.portal-acceso h1 { font-size: 1.5rem; margin-bottom: .35rem; }
.tarjeta-portal { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-m);
  padding: 1.5rem; text-align: left; }
.tarjeta-portal .campo + .campo { margin-top: 1rem; }

/* Lista de servicios */
.tarjeta-servicio { display: block; background: var(--papel); border: 1px solid var(--linea);
  border-left: 6px solid var(--azul); border-radius: var(--radio-m); padding: 1rem 1.25rem;
  margin-bottom: .85rem; text-decoration: none; color: var(--tinta); }
.tarjeta-servicio:hover { border-color: var(--azul); background: var(--azul-claro); }
.tarjeta-servicio.es-hoy { border-left-color: var(--turquesa); }
.etiqueta-hoy { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--turquesa);
  color: #11303A; font-weight: 700; font-size: .8rem; margin-bottom: .35rem; }
.ts-horario { margin: 0 0 .35rem; }
.ts-hora { display: flex; flex-direction: column; line-height: 1.1; }
.ts-hora small { font-size: .75rem; color: var(--gris); font-weight: 400;
  text-transform: uppercase; letter-spacing: .03em; }
.ts-hora strong { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--azul); }
.ts-resumen { margin: .1rem 0; }
.ts-direccion { margin: 0; color: var(--gris); font-size: .92rem; }

/* Bloques de la guía */
.bloque-portal { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-m);
  padding: 1.25rem; margin-bottom: 1rem; }
.bloque-portal h2 { font-size: 1.25rem; color: var(--azul); margin: 0 0 .85rem; }
.bloque-portal h3 { font-size: 1rem; font-family: var(--fuente-texto); font-weight: 700;
  color: var(--gris); margin: 1.1rem 0 .3rem; }
.bloque-portal p { margin: 0 0 .5rem; }
.datos-portal { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .85rem 1.25rem; margin: 0; }
.datos-portal dt { font-size: .82rem; color: var(--gris); font-weight: 400; }
.datos-portal dd { margin: 0; font-weight: 700; }
.datos-portal dd small { display: block; font-weight: 400; font-size: .85rem; color: var(--gris);
  margin-top: .15rem; }
.dato-grande { font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--azul); }
.proximas-fechas { margin-top: 1rem !important; color: var(--gris); }
.direccion-portal { font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.riesgo { display: inline-block; padding: .1rem .7rem; border-radius: 999px; font-weight: 700; }
.riesgo-alto { background: var(--baja); color: #fff; }
.riesgo-medio { background: var(--turquesa); color: #11303A; }
.riesgo-bajo { background: #DCF0E7; color: var(--ok); }
.nota-destacada { margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radio-s);
  background: var(--turquesa); color: #11303A; font-weight: 700; }
.nota-servicio { color: var(--gris); }
.lista-portal { list-style: none; margin: 0; padding: 0; }
.lista-portal li { padding: .6rem 0 .6rem 1.9rem; border-bottom: 1px solid var(--linea); position: relative;
  font-weight: 700; }
.lista-portal li:last-child { border-bottom: 0; }
.lista-portal li::before { content: '•'; position: absolute; left: .45rem; color: var(--azul); font-size: 1.4rem;
  line-height: 1; top: .55rem; }
.lista-tareas li::before { content: '✓'; font-size: 1rem; color: var(--ok); top: .7rem; }
.lista-portal small { display: block; font-weight: 400; color: var(--gris); margin-top: .15rem; }
.aviso-servicio { padding: .85rem 1.1rem; border-radius: var(--radio-m); background: #FBE9E7;
  border-left: 5px solid var(--baja); margin-bottom: 1rem; }

/* Incidencias */
.bloque-incidencias { border-top: 5px solid var(--turquesa); }
.bloque-incidencias .campo + .campo { margin-top: .85rem; }
.bloque-incidencias .campo[hidden] { display: none; }
.bloque-incidencias button { margin-top: 1rem; }
.enviados { list-style: none; padding: 0; margin: .5rem 0 0; }
.enviados li { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .5rem 0;
  border-top: 1px solid var(--linea); }
.enviados span { color: var(--gris); font-size: .9rem; }

/* Pie */
.portal-pie { background: var(--azul); color: #fff; padding: 1.5rem 1rem 2rem; text-align: center; margin-top: 1rem; }
.pie-titulo { font-family: var(--fuente-titulo); font-size: 1.2rem; margin: 0 0 .75rem; }
.pie-acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.portal-pie .btn-secundario { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.6);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--azul); --bs-btn-hover-border-color: #fff; }
/* El azul del botón se pierde sobre el azul del pie: se le pone borde */
.portal-pie .btn-sima { --bs-btn-border-color: rgba(255,255,255,.6); --bs-btn-hover-border-color: #fff; }
/* Urgencias: el botón que tiene que verse el primero, a cualquier hora */
.btn-urgencias { --bs-btn-color: #fff; --bs-btn-bg: var(--baja); --bs-btn-border-color: var(--baja);
  --bs-btn-hover-bg: #8E2B22; --bs-btn-hover-border-color: #8E2B22; --bs-btn-hover-color: #fff;
  font-weight: 700; padding: .6rem 1.2rem; }
.pie-nota { margin: 1rem 0 0; font-size: .9rem; color: #C6D4EE; }
@media (max-width: 480px) {
  .pie-acciones .btn { width: 100%; }
}

/* Quejas asignadas */
.bloque-quejas { border-top: 5px solid var(--baja); }
.lista-quejas { list-style: none; margin: 0; padding: 0; }
.lista-quejas li { padding: .85rem 0; border-top: 1px solid var(--linea); }
.q-cabecera { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem !important; }
.q-nivel { padding: .05rem .55rem; border-radius: 999px; background: #ECEEF3; color: var(--gris);
  font-size: .82rem; font-weight: 700; }
.q-nivel.grave { background: #F6DCD8; color: var(--baja); }
.q-fecha { color: var(--gris); font-size: .9rem; margin-left: auto; }
.q-texto { white-space: pre-line; }
.q-medidas { padding: .6rem .8rem; border-radius: var(--radio-s); background: var(--nube); }

/* Festivos que le tocan a la auxiliar */
.aviso-festivo { background: #FDEEDF; border-color: #C2620E; color: #6B3607; }
.aviso-festivo ul { margin: .4rem 0; padding-left: 1.1rem; }
.aviso-festivo small { color: #8A5420; }

/* ---------- Portal de la persona usuaria (solo consulta) ---------- */
.ts-titulo { font-size: 1.15rem; margin: 0 0 .6rem; color: var(--azul); }
.lista-auxiliares { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: .5rem; }
.lista-auxiliares li { background: var(--nube); border-radius: 999px; padding: .35rem .9rem;
  font-weight: 700; }
.cal-navegacion { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: 1rem; }
.cal-rango { font-size: 1.05rem; }
.cal-vistas { margin-left: auto; display: flex; gap: .4rem; }
/* El calendario del portal no lleva enlaces: se ve, no se toca */
.calendario-portal .cal-servicio { cursor: default; }
/* Aquí el nombre es lo importante: que se lea entero aunque ocupe dos líneas */
.calendario-portal .cs-aux { font-weight: 700; white-space: normal; overflow: visible;
  text-overflow: clip; grid-column: 1 / -1; line-height: 1.25; }
.calendario-portal .cal-servicio:hover { filter: none; }
.lista-documentos { list-style: none; margin: 0; padding: 0; }
.lista-documentos li { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .85rem 0; border-top: 1px solid var(--linea); }
.lista-documentos li:first-child { border-top: 0; }
@media (max-width: 560px) {
  /* En el móvil, el título de la semana primero y las flechas juntas debajo */
  .cal-navegacion { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; }
  .cal-rango { grid-column: 1 / -1; order: -1; }
  .cal-vistas { grid-column: 3; justify-self: end; }
}