/* Plantilla «Alojamiento con ocupación diaria» (CEDIA): misma paleta de POA, con los elementos propios de la LOD, la RVP y el lector. */

/* Barra de accesos de la plantilla */
.oc-accesos { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 1.25rem; }
.oc-acceso { padding: .35rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--sgp-borde); color: var(--sgp-texto);
    font-size: .85rem; font-weight: 700; text-decoration: none; }
.oc-acceso:hover { color: var(--sgp-rojo); border-color: var(--sgp-rojo); }
.oc-acceso.active { background: var(--sgp-oscuro); border-color: var(--sgp-oscuro); color: #fff; }

/* Navegación por días */
.oc-dia { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.oc-dia-fecha { font-size: 1.15rem; font-weight: 700; min-width: 15rem; text-align: center; text-transform: capitalize; }
.oc-dia .btn-sgp-icon { width: 38px; height: 38px; }
.oc-pasado { background: #FFF6E5; color: #7A4A00; border-radius: 8px; padding: .5rem 1rem; font-size: .85rem; font-weight: 500; }

/* Chips de sección */
.oc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.oc-chip { padding: .3rem .9rem; border-radius: 999px; background: #fff; color: var(--sgp-texto); font-size: .82rem; font-weight: 700;
    text-decoration: none; border: 1px solid transparent; }
.oc-chip:hover { color: var(--sgp-rojo); }
.oc-chip.active { background: var(--sgp-rojo); color: #fff; }
.oc-chip small { font-weight: 400; opacity: .8; }

/* Tabla de ocupación */
.oc-tabla { margin-top: .5rem; font-size: .88rem; }
.oc-tabla thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.oc-tabla td { vertical-align: middle; }
.oc-seccion td { background: var(--sgp-rosa-bloque) !important; font-weight: 700; color: var(--sgp-rojo); text-transform: uppercase; font-size: .78rem; }
.oc-plaza { font-weight: 700; font-size: 1rem; width: 3rem; text-align: center; }
.oc-libre td { color: var(--sgp-texto-desactivado); font-style: italic; }
.oc-baja td { color: var(--sgp-texto-desactivado); text-decoration: line-through; }
.oc-codigo { display: inline-block; padding: .05rem .45rem; border-radius: 4px; background: var(--sgp-input); font-size: .72rem; font-weight: 700; }
.oc-codigo.escm { background: #E3ECFA; color: #1D4E9E; }
.oc-codigo.pension { background: #EFE5F7; color: #5B2A86; }
.oc-origen { display: block; font-size: .72rem; color: var(--sgp-texto-desactivado); }

/* Profesionales de referencia */
.oc-pill { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.oc-pill.ts { background: #E6F2E6; color: #145214; }
.oc-pill.is { background: #E3ECFA; color: #1D4E9E; }
.oc-pill.falta { background: var(--sgp-rosa-bloque); color: #8B0F17; }

/* Comidas: botones D C Ce */
.oc-comidas { display: inline-flex; gap: .2rem; }
.oc-comida { width: 2.1rem; height: 1.8rem; border-radius: 4px; border: 1px solid var(--sgp-borde); background: #fff; color: var(--sgp-texto-desactivado);
    font-size: .72rem; font-weight: 700; padding: 0; }
.oc-comida.si { background: var(--sgp-verde); border-color: var(--sgp-verde); color: #fff; }
.oc-comida:disabled { cursor: default; }

/* Aviso de la fila */
.oc-aviso { display: flex; gap: .25rem; }
.oc-aviso input { font-size: .8rem; min-width: 8.5rem; background: #FFFBEA !important; }
.oc-aviso-texto { font-size: .8rem; background: #FFFBEA; border-radius: 4px; padding: .1rem .4rem; }
.oc-aviso-autor { display: block; font-size: .68rem; color: var(--sgp-texto-desactivado); }
.oc-btn-mini { border: 1px solid var(--sgp-borde); background: #fff; border-radius: 999px; font-size: .74rem; font-weight: 700; padding: .15rem .65rem;
    color: var(--sgp-texto); text-decoration: none; white-space: nowrap; }
.oc-btn-mini:hover { border-color: var(--sgp-rojo); color: var(--sgp-rojo); }
.oc-btn-mini.rojo { color: var(--sgp-rojo); }

/* Panel lateral */
.oc-lateral .sgp-card { padding: 1.25rem; margin-bottom: 1rem; }
.oc-lateral h2 { font-size: .9rem; font-weight: 700; color: var(--sgp-rojo); text-transform: uppercase; margin-bottom: .75rem; }
.oc-barra { height: 8px; border-radius: 4px; background: var(--sgp-gris-desactivado); overflow: hidden; margin: .2rem 0 .6rem; }
.oc-barra > span { display: block; height: 100%; background: var(--sgp-verde); }
.oc-barra.cerca > span { background: #D98A00; }
.oc-barra.supera > span { background: var(--sgp-rojo); }
.oc-fila-dato { display: flex; justify-content: space-between; font-size: .85rem; }
.oc-comidas-total { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.oc-comidas-total div { background: var(--sgp-fondo); border-radius: 8px; padding: .4rem; }
.oc-comidas-total b { display: block; font-size: 1.4rem; color: var(--sgp-rojo); }
.oc-alerta { font-size: .82rem; padding: .35rem .5rem; border-left: 3px solid #D98A00; background: #FFF6E5; margin-bottom: .35rem; }
.oc-alerta.roja { border-color: var(--sgp-rojo); background: var(--sgp-rosa-bloque); }
.oc-mov { font-size: .78rem; border-bottom: 1px solid var(--sgp-borde); padding: .3rem 0; }
.oc-mov small { color: var(--sgp-texto-desactivado); display: block; }

/* Rejilla de plazas (alta y traslado) */
.oc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .4rem; }
.oc-rejilla input { display: none; }
.oc-rejilla label { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3.2rem; border-radius: 8px;
    border: 2px solid var(--sgp-verde); background: #fff; font-weight: 700; cursor: pointer; font-size: 1rem; }
.oc-rejilla label small { font-size: .6rem; font-weight: 700; color: #1D4E9E; }
.oc-rejilla input:checked + label { background: var(--sgp-verde); color: #fff; }
.oc-rejilla input:checked + label small { color: #fff; }
.oc-rejilla label.ocupada { border-color: var(--sgp-gris-desactivado); background: var(--sgp-gris-desactivado); color: var(--sgp-texto-desactivado); cursor: not-allowed; }
.oc-rejilla label.vetada { border-style: dashed; border-color: var(--sgp-texto-desactivado); color: var(--sgp-texto-desactivado); cursor: not-allowed; }
.oc-rejilla.recursos { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.oc-leyenda { display: flex; gap: 1.25rem; font-size: .75rem; color: var(--sgp-texto-desactivado); margin-top: .5rem; }
.oc-leyenda span::before { content: ""; display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px;
    border: 2px solid var(--sgp-verde); }
.oc-leyenda .o::before { background: var(--sgp-gris-desactivado); border-color: var(--sgp-gris-desactivado); }
.oc-leyenda .v::before { border-style: dashed; border-color: var(--sgp-texto-desactivado); }

/* RVP: pasos de las diez áreas */
.oc-pasos { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.25rem; }
.oc-paso { display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--sgp-fondo);
    border: 1px solid var(--sgp-borde); font-size: .78rem; font-weight: 700; color: var(--sgp-texto); text-decoration: none; }
.oc-paso b { display: inline-flex; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; align-items: center; justify-content: center; font-size: .7rem; border: 1px solid var(--sgp-borde); }
.oc-paso.ok b { background: var(--sgp-verde); color: #fff; border-color: var(--sgp-verde); }
.oc-paso.falta b { background: var(--sgp-rojo); color: #fff; border-color: var(--sgp-rojo); }
.oc-area { scroll-margin-top: 1rem; border-top: 1px solid var(--sgp-borde); padding-top: 1rem; margin-top: 1rem; }
.oc-area-titulo { font-size: 1rem; font-weight: 700; color: var(--sgp-rojo); margin-bottom: .75rem; }
.oc-area-titulo b { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sgp-rojo); color: #fff;
    align-items: center; justify-content: center; font-size: .8rem; margin-right: .4rem; }
.oc-recorrido { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--sgp-rosa-bloque); }
.oc-recorrido li { position: relative; padding: .25rem 0 .7rem 1.1rem; font-size: .85rem; }
.oc-recorrido li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--sgp-rojo); }
.oc-recorrido small { color: var(--sgp-texto-desactivado); display: block; }
.oc-situacion { display: inline-block; padding: .05rem .55rem; border-radius: 4px; font-size: .74rem; font-weight: 700; background: var(--sgp-input); }
.oc-situacion.plaza { background: #E6F2E6; color: #145214; }
.oc-situacion.espera { background: #FFF6E5; color: #7A4A00; }
.oc-situacion.fin { background: var(--sgp-gris-desactivado); color: var(--sgp-texto-desactivado); }
.oc-situacion.no { background: var(--sgp-rosa-bloque); color: #8B0F17; }

/* Lector de tarjetas */
.oc-modos { display: flex; gap: .5rem; flex-wrap: wrap; }
.oc-lector-uid { font-size: 1.6rem; letter-spacing: .1em; text-align: center; font-family: Consolas, monospace; }
.oc-resultado { border-radius: 16px; padding: 2rem 1.5rem; text-align: center; color: #fff; margin-top: 1rem; }
.oc-resultado h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: .4rem; }
.oc-resultado p { font-size: 1.1rem; margin: 0; }
.oc-resultado.V { background: var(--sgp-verde); }
.oc-resultado.N { background: #D98A00; }
.oc-resultado.R { background: var(--sgp-rojo); }
.oc-resultado .btn { margin: 1rem .4rem 0; background: #fff; color: var(--sgp-texto); }
.oc-simuladas { display: flex; flex-wrap: wrap; gap: .4rem; }
.oc-lectura { display: flex; gap: .6rem; align-items: center; font-size: .82rem; border-bottom: 1px solid var(--sgp-borde); padding: .3rem 0; }
.oc-punto { width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; }
.oc-punto.V { background: var(--sgp-verde); } .oc-punto.N { background: #D98A00; } .oc-punto.R { background: var(--sgp-rojo); }

/* Vista de noche (móvil) */
.oc-noche { max-width: 34rem; margin: 0 auto; }
.oc-noche-fila { background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); padding: .7rem .9rem; margin-bottom: .5rem;
    display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: center; }
.oc-noche-fila .oc-plaza { font-size: 1.3rem; }
.oc-noche-fila.libre { opacity: .55; }
.oc-noche-nombre { font-weight: 700; line-height: 1.2; }



/* Paneles de resumen de la LOD, bajo la lista para que la tabla tenga todo el ancho */
.oc-lateral-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; align-items: start; }
.oc-lateral-fila .sgp-card { margin-bottom: 0; }
.oc-lod .sgp-card { padding: 1.5rem; }
.oc-lod .sgp-block { padding: .75rem .5rem .5rem; }
.oc-lod .sgp-panel { padding: 1rem .75rem; }