/* ui-servicios.css — estilos del módulo "servicios" (perfiles Residente / Control de acceso). Prefijo de clases: cs-servicios-* */
/* También cubre las pantallas de documentos del residente. */

.cs-servicios-h { font-size: 1.2rem; font-weight: 800; color: var(--cs-ink); }
.cs-servicios-nota { font-size: .86rem; color: var(--cs-muted); }
.cs-servicios-sub { font-size: .82rem; color: var(--cs-muted); display: block; }
.cs-servicios-cuenta { align-self: flex-end; color: var(--cs-muted); font-size: .75rem; }

/* ---- Filtros ---- */
.cs-servicios-filtro { display: flex; gap: .5rem; }
.cs-servicios-pill { min-height: 40px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font-weight: 700; cursor: pointer; }
.cs-servicios-pill--sel { background: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary, #fff); }

/* ---- Lista ---- */
.cs-servicios-fila { text-decoration: none; }
.cs-servicios-fila-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.cs-servicios-fila .cs-fila-cuerpo span:not(.cs-servicios-fila-chips) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Pasos ---- */
.cs-servicios-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.cs-servicios-pasos i { height: 6px; border-radius: 3px; background: var(--cs-line); transition: background .25s; }
.cs-servicios-pasos i.cs-servicios-paso--on { background: var(--cs-primary); }
.cs-servicios-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.cs-servicios-cat { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; padding: .9rem; border-radius: var(--cs-radius); border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); cursor: pointer; min-height: 112px; box-shadow: var(--cs-shadow); transition: transform .12s, border-color .15s; }
.cs-servicios-cat:active { transform: scale(.97); }
.cs-servicios-cat strong { color: var(--cs-ink); font-size: .98rem; line-height: 1.2; }
.cs-servicios-cat small { color: var(--cs-muted); font-size: .76rem; line-height: 1.3; }
.cs-servicios-cat[disabled] { opacity: .55; cursor: not-allowed; }
.cs-servicios-cat--sel { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-servicios-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; background: var(--cs-line); border-radius: 16px; }
.cs-servicios-seg-op { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; border-radius: 12px; border: 0; background: transparent; color: var(--cs-muted); font-weight: 700; cursor: pointer; }
.cs-servicios-seg-op--on { background: var(--cs-surface); color: var(--cs-primary-dark); box-shadow: var(--cs-shadow); }
.cs-servicios-nav { margin-top: .25rem; }
.cs-servicios-resumen { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cs-servicios-resumen > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--cs-line); font-size: .92rem; }
.cs-servicios-resumen > div:last-child { border-bottom: 0; }
.cs-servicios-resumen span { color: var(--cs-muted); }
.cs-servicios-resumen strong { text-align: right; color: var(--cs-ink); }

/* ---- Fotos ---- */
.cs-servicios-fotos { display: flex; gap: .6rem; flex-wrap: wrap; }
.cs-servicios-foto { width: 84px; height: 84px; border-radius: 16px; background: var(--cs-surface-2); border: 1px solid var(--cs-line); display: grid; place-items: center; overflow: hidden; color: var(--cs-muted); }
.cs-servicios-foto img { width: 100%; height: 100%; object-fit: cover; }
.cs-servicios-foto--nueva { border: 1.5px dashed var(--cs-primary); color: var(--cs-primary-dark); background: var(--cs-primary-soft); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; }
.cs-servicios-foto--nueva[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Detalle ---- */
.cs-servicios-cab { display: flex; flex-direction: column; gap: .7rem; }
.cs-servicios-cab-fila { display: flex; align-items: center; gap: .75rem; }
.cs-servicios-cab-fila h2 { flex: 1; margin: 0; font-size: 1.1rem; }
.cs-servicios-desc { color: var(--cs-text); white-space: pre-line; font-size: .94rem; }
.cs-servicios-datos { margin: 0; display: flex; flex-direction: column; }
.cs-servicios-datos > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--cs-line); font-size: .9rem; }
.cs-servicios-datos > div:last-child { border-bottom: 0; }
.cs-servicios-datos dt { color: var(--cs-muted); }
.cs-servicios-datos dd { margin: 0; text-align: right; color: var(--cs-ink); font-weight: 600; }
.cs-servicios-estrellas-fijas { color: #F59E0B !important; letter-spacing: 2px; }
.cs-servicios-cargo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cs-servicios-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cs-servicios-ev { position: relative; display: flex; gap: .8rem; padding-bottom: 1rem; }
.cs-servicios-ev::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--cs-line); }
.cs-servicios-ev:last-child::before { display: none; }
.cs-servicios-ev > i { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--cs-primary); box-shadow: 0 0 0 4px var(--cs-primary-soft); }
.cs-servicios-ev--mio > i { background: var(--cs-info); box-shadow: 0 0 0 4px var(--cs-info-bg); }
.cs-servicios-ev > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.cs-servicios-ev header { display: flex; justify-content: space-between; gap: .5rem; width: 100%; font-size: .85rem; }
.cs-servicios-ev header time { color: var(--cs-muted); font-size: .76rem; }
.cs-servicios-ev p { margin: 0; font-size: .93rem; color: var(--cs-text); white-space: pre-line; }
.cs-servicios-comentar { display: flex; gap: .5rem; align-items: flex-end; border-top: 1px solid var(--cs-line); padding-top: .8rem; }
.cs-servicios-comentar textarea { flex: 1; min-height: 48px; padding: .6rem .8rem; border-radius: 14px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font: inherit; resize: vertical; }
.cs-servicios-calificar { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.cs-servicios-calificar input { min-height: 48px; padding: .6rem .85rem; border-radius: 14px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font: inherit; }
.cs-servicios-estrellas { display: flex; justify-content: center; gap: .35rem; }
.cs-servicios-estrella { width: 52px; height: 52px; border: 0; background: transparent; color: var(--cs-line); cursor: pointer; display: grid; place-items: center; border-radius: 50%; transition: transform .12s, color .15s; }
.cs-servicios-estrella:active { transform: scale(.9); }
.cs-servicios-estrella--on { color: #F59E0B; }
.cs-servicios-estrella--on .cs-ico { fill: currentColor; }

/* ---- Documentos ---- */
.cs-servicios-buscar input { min-height: 48px; }
.cs-servicios-anteriores { display: flex; align-items: center; gap: .6rem; min-height: 40px; font-size: .9rem; color: var(--cs-muted); }
.cs-servicios-anteriores input { width: 20px; height: 20px; accent-color: var(--cs-primary); }

/* las etiquetas dentro de .cs-fila-cuerpo no deben heredar "span { display:block }" de ui-base */
.cs-servicios-fila .cs-fila-cuerpo .cs-servicios-fila-chips { display: flex; }
.cs-servicios-fila .cs-fila-cuerpo .cs-chip { display: inline-flex; }