/*
 * Panel "Servicios de Atención Ambulatoria publicados en la web"
 * Pantalla: landing-productosServicios → Modalidad Agenda → Configurar Visibilidad.
 * Framework de estilo propio con prefijo --lsa-*, sin <style> ni style= en la vista.
 */

#panelServiciosAmbulatoria {
    --lsa-borde: #e3e8ef;
    --lsa-borde-fuerte: #cbd5e1;
    --lsa-fondo: #ffffff;
    --lsa-fondo-suave: #f8fafc;
    --lsa-fondo-cabecera: #f1f5f9;
    --lsa-texto: #1e293b;
    --lsa-texto-suave: #64748b;
    --lsa-primario: #1a73e8;
    --lsa-primario-suave: #e8f1fe;
    --lsa-ok: #15803d;
    --lsa-ok-suave: #dcfce7;
    --lsa-alerta: #b45309;
    --lsa-alerta-suave: #fef3c7;
    --lsa-error: #b91c1c;
    --lsa-error-suave: #fee2e2;
    --lsa-radio: 10px;
}

/* ---------- Aclaración de alcance ---------- */

.lsa-alcance {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--lsa-borde);
    border-left: 3px solid var(--lsa-primario);
    border-radius: 8px;
    background: var(--lsa-primario-suave);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--lsa-texto);
}

.lsa-alcance__ico {
    margin-top: 2px;
    font-size: 13px;
    color: var(--lsa-primario);
}

/* ---------- Contenedor y cabecera ---------- */

.lsa-panel {
    border: 1px solid var(--lsa-borde);
    border-radius: var(--lsa-radio);
    background: var(--lsa-fondo);
    overflow: hidden;
}

.lsa-panel__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--lsa-fondo-cabecera);
    border-bottom: 1px solid var(--lsa-borde);
}

.lsa-panel__titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--lsa-texto);
}

.lsa-panel__bajada {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--lsa-texto-suave);
}

.lsa-buscador {
    position: relative;
    min-width: 260px;
    flex: 0 1 320px;
}

.lsa-buscador__input {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 34px;
    border: 1px solid var(--lsa-borde-fuerte);
    border-radius: 999px;
    background: var(--lsa-fondo);
    font-size: 13px;
    color: var(--lsa-texto);
}

.lsa-buscador__input:focus {
    outline: none;
    border-color: var(--lsa-primario);
    box-shadow: 0 0 0 3px var(--lsa-primario-suave);
}

.lsa-buscador__icono {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--lsa-texto-suave);
    pointer-events: none;
}

.lsa-buscador__limpiar {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 12px;
    color: var(--lsa-texto-suave);
    cursor: pointer;
}

.lsa-buscador__limpiar:hover {
    background: var(--lsa-borde);
    color: var(--lsa-texto);
}

/* ---------- Aviso de la modalidad ---------- */

.lsa-aviso {
    margin: 0;
    padding: 12px 16px;
    background: var(--lsa-alerta-suave);
    border-bottom: 1px solid var(--lsa-borde);
    font-size: 12.5px;
    color: var(--lsa-alerta);
}

/* ---------- Grilla de servicios ---------- */

.lsa-tabla {
    display: block;
}

/* Anchos fijos en todas las columnas salvo el nombre: el encabezado y las filas son
   grillas independientes, y con fracciones un nombre largo desalinearía las casillas.
   minmax(0, 1fr) evita además que el nombre empuje la grilla. */
.lsa-tabla__encabezado,
.lsa-servicio__fila {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 108px 108px 108px 210px;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
}

.lsa-tabla__encabezado {
    border-bottom: 1px solid var(--lsa-borde);
    background: var(--lsa-fondo-suave);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--lsa-texto-suave);
}

.lsa-tabla__col--centro {
    text-align: center;
}

.lsa-servicio {
    border-bottom: 1px solid var(--lsa-borde);
}

.lsa-servicio:last-child {
    border-bottom: 0;
}

.lsa-servicio__fila:hover {
    background: var(--lsa-fondo-suave);
}

.lsa-servicio--abierto > .lsa-servicio__fila {
    background: var(--lsa-primario-suave);
}

.lsa-servicio__toggle {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--lsa-borde-fuerte);
    border-radius: 6px;
    background: var(--lsa-fondo);
    font-size: 11px;
    color: var(--lsa-texto-suave);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.lsa-servicio__toggle:hover {
    border-color: var(--lsa-primario);
    color: var(--lsa-primario);
}

.lsa-servicio--abierto .lsa-servicio__toggle {
    transform: rotate(90deg);
    border-color: var(--lsa-primario);
    color: var(--lsa-primario);
}

.lsa-servicio__nombre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lsa-texto);
    word-break: break-word;
}

.lsa-servicio__conteo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--lsa-texto-suave);
}

/* ---------- Casillas de publicación ---------- */

/* En escritorio el envoltorio desaparece y sus 3 casillas son celdas de la grilla del servicio.
   En móvil vuelve a ser un contenedor flex (ver la consulta de medios al final). */
.lsa-servicio__checks {
    display: contents;
}

.lsa-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lsa-check__etiqueta {
    display: none;
}

.lsa-check input {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--lsa-primario);
}

.lsa-check input:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

/* ---------- Distintivos de diagnóstico ---------- */

.lsa-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.lsa-badge--ok {
    background: var(--lsa-ok-suave);
    color: var(--lsa-ok);
}

.lsa-badge--alerta {
    background: var(--lsa-alerta-suave);
    color: var(--lsa-alerta);
}

.lsa-badge--error {
    background: var(--lsa-error-suave);
    color: var(--lsa-error);
}

.lsa-badge--neutro {
    background: var(--lsa-fondo-cabecera);
    color: var(--lsa-texto-suave);
}

.lsa-badge--info {
    background: var(--lsa-primario-suave);
    color: var(--lsa-primario);
}

/* ---------- Detalle de profesionales ---------- */

.lsa-detalle {
    padding: 12px 16px 16px 48px;
    background: var(--lsa-fondo-suave);
    border-top: 1px dashed var(--lsa-borde-fuerte);
}

.lsa-detalle__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.lsa-detalle__filtro {
    flex: 1 1 200px;
    max-width: 280px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--lsa-borde-fuerte);
    border-radius: 6px;
    background: var(--lsa-fondo);
    font-size: 12.5px;
    color: var(--lsa-texto);
}

.lsa-detalle__filtro:focus {
    outline: none;
    border-color: var(--lsa-primario);
}

.lsa-detalle__accion {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--lsa-borde-fuerte);
    border-radius: 6px;
    background: var(--lsa-fondo);
    font-size: 12px;
    font-weight: 600;
    color: var(--lsa-texto);
    cursor: pointer;
}

.lsa-detalle__accion:hover {
    border-color: var(--lsa-primario);
    color: var(--lsa-primario);
}

.lsa-detalle__accion:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.lsa-detalle__vacio,
.lsa-detalle__cargando {
    padding: 10px 0;
    font-size: 12.5px;
    color: var(--lsa-texto-suave);
}

.lsa-prof {
    display: grid;
    grid-template-columns: 58px minmax(160px, 2fr) minmax(120px, 1fr) 90px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--lsa-borde);
    border-radius: 8px;
    background: var(--lsa-fondo);
    margin-bottom: 6px;
}

.lsa-prof:last-child {
    margin-bottom: 0;
}

.lsa-prof__nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--lsa-texto);
    word-break: break-word;
}

.lsa-prof__cargo {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--lsa-texto-suave);
}

.lsa-prof__enlace {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lsa-primario);
    text-align: right;
    white-space: nowrap;
}

.lsa-prof__enlace:hover {
    color: var(--lsa-primario);
    text-decoration: underline;
}

/* Interruptor de reserva en línea */

.lsa-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
}

.lsa-switch input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.lsa-switch__pista {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--lsa-borde-fuerte);
    transition: background 0.15s ease;
    pointer-events: none;
}

.lsa-switch__pista::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.lsa-switch input:checked + .lsa-switch__pista {
    background: var(--lsa-ok);
}

.lsa-switch input:checked + .lsa-switch__pista::after {
    transform: translateX(20px);
}

.lsa-switch input:disabled + .lsa-switch__pista {
    opacity: 0.45;
}

.lsa-switch input:disabled {
    cursor: not-allowed;
}

/* ---------- Estados generales ---------- */

.lsa-estado {
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--lsa-texto-suave);
}

.lsa-oculto {
    display: none;
}

/* Enlace "Configurar" dentro de la tarjeta de modalidad */

.lsa-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 24px;
    font-size: 11.5px;
    color: var(--lsa-texto-suave);
}

.lsa-resumen__enlace {
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lsa-primario);
    cursor: pointer;
}

.lsa-resumen__enlace:hover {
    text-decoration: underline;
}

/* Resalte temporal al llegar desde "Configurar" */

.lsa-destacado {
    animation: lsa-pulso 1.4s ease;
}

@keyframes lsa-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
    35%      { box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.28); }
}

/* ---------- Responsive: la grilla pasa a tarjeta ---------- */

@media (max-width: 1100px) {
    .lsa-tabla__encabezado {
        display: none;
    }

    .lsa-servicio__fila {
        grid-template-columns: 32px 1fr;
        grid-template-areas:
            "toggle nombre"
            ".      conteo"
            ".      checks";
        row-gap: 6px;
    }

    .lsa-servicio__fila > .lsa-servicio__toggle { grid-area: toggle; }
    .lsa-servicio__fila > .lsa-servicio__nombre { grid-area: nombre; }
    .lsa-servicio__fila > .lsa-servicio__conteo { grid-area: conteo; }

    .lsa-servicio__checks {
        grid-area: checks;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .lsa-check {
        justify-content: flex-start;
        gap: 6px;
        font-size: 12px;
        color: var(--lsa-texto-suave);
    }

    .lsa-check__etiqueta {
        display: inline;
    }

    .lsa-detalle {
        padding-left: 16px;
    }

    .lsa-prof {
        grid-template-columns: 58px 1fr;
        grid-template-areas:
            "switch nombre"
            ".      agenda"
            ".      enlace";
        row-gap: 4px;
    }

    .lsa-prof > .lsa-prof__switch { grid-area: switch; }
    .lsa-prof > .lsa-prof__nombre { grid-area: nombre; }
    .lsa-prof > .lsa-prof__agenda { grid-area: agenda; }
    .lsa-prof > .lsa-prof__enlace { grid-area: enlace; text-align: left; }
}