/* ============================================================================
   Aldía · Panel administrativo
   ----------------------------------------------------------------------------
   Mismo sistema de diseño que el panel de DietaGo (assets/css/admin.css): tema
   claro, barra lateral fija y contenido en tarjetas. La paleta es la de la marca
   Aldía (assets/landing/landing.css): azul pizarra #334E68 como color de marca,
   tinta #1F2937 para el texto, naranja #FF9C00 sólo como acento decorativo y
   grises neutros. El verde queda reservado para lo SEMÁNTICO (correcto,
   conectado, autorizado): ya no es color de marca.

   Diferencia respecto a DietaGo: allí el panel convive en el mismo documento que
   la landing (bootstrap + style + custom), y por eso su hoja lleva un bloque de
   reinicio con !important. Aquí el panel es el único dueño del documento, así que
   ese reinicio no hace falta.

   Prefijo .pl- en todo, por si algún día esta hoja convive con otra.
   ============================================================================ */

:root {
    --pl-fondo:      #f3f4f6;
    --pl-panel:      #ffffff;
    --pl-panel-alto: #eef1f5;
    --pl-borde:      #e5e7eb;
    --pl-borde-alto: #d9e2ec;
    --pl-texto:      #1f2937;
    --pl-suave:      #6b7280;
    /* Marca (azul pizarra de Aldía): lo activo, el foco y la acción principal. */
    --pl-marca:      #334e68;
    --pl-marca-alto: #243b53;
    --pl-marca-suave:#e1e9f1;
    /* Acento naranja de la marca (la estrella del logo): sólo decorativo. */
    --pl-acento:     #ff9c00;
    --pl-acento-suave:#fff3e0;
    /* Verde semántico: correcto, conectado, autorizado. */
    --pl-verde:      #15803d;
    --pl-verde-alto: #166534;
    --pl-verde-suave:#dcfce7;
    --pl-ambar:      #b45309;
    --pl-rojo:       #d13438;
    --pl-azul:       #1f6fd0;
    --pl-radio:      12px;
    --pl-sombra:     0 1px 2px rgba(31,41,55,.06), 0 4px 14px rgba(31,41,55,.05);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
    margin: 0;
    background: var(--pl-fondo);
    color: var(--pl-texto);
    font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; }
p { margin: 0; }

/* ---------------------------------------------------------------------- Marco */

.pl-app { position: fixed; inset: 0; display: flex; overflow: hidden; }

/* ---------------------------------------------------------------- Barra lateral */

.pl-lateral {
    width: 236px;
    flex: 0 0 236px;
    background: var(--pl-panel);
    border-right: 1px solid var(--pl-borde);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pl-marca {
    padding: 16px 14px 16px 18px;
    border-bottom: 1px solid var(--pl-borde);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Logo de Aldía: isologo (el aro) + nombre, los mismos PNG que usa la landing. */
.pl-marca__icono  { height: 26px; width: auto; flex: 0 0 auto; display: block; }
.pl-marca__nombre { height: 24px; width: auto; display: block; }

.pl-marca__etiqueta {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--pl-marca);
    background: var(--pl-marca-suave);
    border: 1px solid rgba(51,78,104,.25);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
}

.pl-nav { padding: 12px 10px; flex: 1; }

.pl-nav__grupo {
    padding: 14px 10px 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
    color: #9ca3af; font-weight: 600;
}

.pl-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 9px;
    color: var(--pl-suave);
    text-decoration: none;
    font-weight: 550;
    transition: background .15s, color .15s;
}

.pl-nav a:hover { background: var(--pl-panel-alto); color: var(--pl-texto); }
.pl-nav a.activo { background: var(--pl-marca-suave); color: var(--pl-marca); }
.pl-nav a svg { width: 16px; height: 16px; flex: 0 0 16px; }

.pl-plegar {
    margin-left: auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: none; border: 1px solid transparent; border-radius: 7px;
    color: var(--pl-suave); cursor: pointer; padding: 0;
}
.pl-plegar:hover { background: var(--pl-panel-alto); color: var(--pl-texto); }
.pl-plegar svg { width: 15px; height: 15px; }

/* --------------------------------------------------------- Menú plegado
   Sólo iconos: se gana ancho para las tablas y la conversación, y el menú
   sigue estando a un clic. El texto se oculta con display:none y no con
   visibility para que no siga ocupando y descentre los iconos. */
.pl-lateral--compacta { width: 64px; flex: 0 0 64px; }

.pl-lateral--compacta .pl-marca__nombre,
.pl-lateral--compacta .pl-marca__etiqueta,
.pl-lateral--compacta .pl-nav__grupo,
.pl-lateral--compacta .pl-nav a span,
.pl-lateral--compacta .pl-nav-apagado span,
.pl-lateral--compacta .pl-estado__texto,
.pl-lateral--compacta .pl-lateral__pie .pl-btn span { display: none; }

.pl-lateral--compacta .pl-marca { padding: 14px 0 10px; flex-direction: column; justify-content: center; gap: 8px; }
.pl-lateral--compacta .pl-marca__icono { height: 28px; }
.pl-lateral--compacta .pl-plegar { margin: 0; }
.pl-lateral--compacta .pl-nav { padding: 10px 8px; }

.pl-lateral--compacta .pl-nav a,
.pl-lateral--compacta .pl-nav-apagado {
    justify-content: center;
    padding: 11px 0;
}

.pl-lateral--compacta .pl-lateral__pie { padding: 10px 8px; }
.pl-lateral--compacta .pl-estado { justify-content: center; padding: 9px 0; }
.pl-lateral--compacta .pl-lateral__pie .pl-btn { width: 100%; justify-content: center; padding: 8px 0; }

/* Entrada de menú bloqueada hasta que haya sesión de WhatsApp. */
.pl-nav-apagado {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: 9px;
    color: #b3bcc7;
    font-weight: 550;
    cursor: not-allowed;
}
.pl-nav-apagado svg { width: 16px; height: 16px; flex: 0 0 16px; }

.pl-lateral__pie { padding: 14px; border-top: 1px solid var(--pl-borde); }
.pl-lateral__pie form { margin: 0; }

/* Estado de la sesión de WhatsApp, siempre a la vista en la barra lateral. */
.pl-estado {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; margin-bottom: 10px;
    border: 1px solid var(--pl-borde);
    border-radius: 9px;
    background: var(--pl-panel-alto);
    text-decoration: none;
    color: var(--pl-texto);
}
.pl-estado:hover { border-color: var(--pl-borde-alto); text-decoration: none; }
.pl-estado__texto { display: flex; flex-direction: column; min-width: 0; }
.pl-estado__texto b { font-size: 12.5px; font-weight: 650; }
.pl-estado__texto small {
    font-size: 11.5px; color: var(--pl-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pl-punto { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.pl-punto.ok { background: var(--pl-verde); box-shadow: 0 0 0 3px rgba(21,128,61,.18); }
.pl-punto.mal { background: var(--pl-rojo); box-shadow: 0 0 0 3px rgba(209,52,56,.16); }
.pl-punto.medio { background: var(--pl-ambar); box-shadow: 0 0 0 3px rgba(180,83,9,.16); }

/* ------------------------------------------------------------------- Contenido */

.pl-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pl-cabecera {
    padding: 16px 26px;
    border-bottom: 1px solid var(--pl-borde);
    background: var(--pl-panel);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.pl-cabecera h1 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.pl-cabecera p  { margin-top: 2px; font-size: 12.5px; color: var(--pl-suave); }
.pl-cabecera__acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.pl-cuerpo { flex: 1; overflow-y: auto; padding: 22px 26px 60px; }

/* --------------------------------------------------------------------- Tarjetas */

.pl-rejilla { display: grid; gap: 14px; }
.pl-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Alta/edición de mensaje: decisiones a la izquierda, redacción a la derecha.
   align-items:start para que las columnas no se estiren a la misma altura. */
.pl-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.pl-editor__col { min-width: 0; }

@media (max-width: 1150px) {
    .pl-editor { grid-template-columns: minmax(0, 1fr); }
}

.pl-tarjeta {
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde);
    border-radius: var(--pl-radio);
    padding: 16px 18px;
    box-shadow: var(--pl-sombra);
    margin-bottom: 14px;
}

.pl-tarjeta__titulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
    color: var(--pl-suave); margin-bottom: 12px; font-weight: 700;
}

/* ----------------------------------------------------------------------- Tablas */

.pl-tabla-scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

.pl-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }

.pl-tabla th {
    text-align: left; padding: 9px 10px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--pl-suave); font-weight: 700;
    border-bottom: 1px solid var(--pl-borde); white-space: nowrap;
}

.pl-tabla td { padding: 10px; border-bottom: 1px solid var(--pl-borde); vertical-align: middle; }
.pl-tabla tbody tr:hover { background: var(--pl-panel-alto); }
.pl-tabla tbody tr.inactiva { opacity: .55; }
.pl-tabla td.acciones { white-space: nowrap; text-align: right; }
.pl-tabla td.recorte { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pl-vacio { padding: 34px; text-align: center; color: var(--pl-suave); }

/* --------------------------------------------------------------------- Etiquetas */

.pl-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 650; white-space: nowrap;
    background: var(--pl-panel-alto); color: var(--pl-suave);
    border: 1px solid var(--pl-borde);
}
.pl-chip--verde { background: var(--pl-verde-suave); color: var(--pl-verde-alto); border-color: rgba(21,128,61,.35); }
.pl-chip--ambar { background: var(--pl-acento-suave); color: var(--pl-ambar); border-color: #f5d9a8; }
.pl-chip--rojo  { background: #fdecec; color: var(--pl-rojo);  border-color: #f4c9ca; }
.pl-chip--azul  { background: #e9f1fc; color: var(--pl-azul);  border-color: #c6dcf6; }

/* --------------------------------------------------------------------- Controles */

.pl-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px;
    border: 1px solid var(--pl-borde-alto);
    background: var(--pl-panel); color: var(--pl-texto);
    font-size: 13px; font-weight: 650; cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.pl-btn:hover:not(:disabled) { background: var(--pl-panel-alto); }
.pl-btn:disabled { opacity: .45; cursor: not-allowed; }
.pl-btn--principal { background: var(--pl-marca); border-color: var(--pl-marca); color: #fff; }
.pl-btn--principal:hover:not(:disabled) { background: var(--pl-marca-alto); border-color: var(--pl-marca-alto); }
.pl-btn--peligro { background: var(--pl-panel); border-color: #f0c4c5; color: var(--pl-rojo); }
.pl-btn--peligro:hover:not(:disabled) { background: #fdecec; }
.pl-btn--fino { padding: 5px 10px; font-size: 12px; }
.pl-btn svg { width: 14px; height: 14px; flex: 0 0 14px; }

.pl-campo { display: block; margin-bottom: 12px; }
.pl-campo > span { display: block; font-size: 11.5px; color: var(--pl-suave); margin-bottom: 5px; font-weight: 650; }

.pl-input, .pl-textarea {
    width: 100%;
    padding: 8px 11px;
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde-alto);
    border-radius: 9px;
    color: var(--pl-texto);
    font-size: 13px;
    font-family: inherit;
}
.pl-input::placeholder, .pl-textarea::placeholder { color: #a6b1bd; }
.pl-input:focus, .pl-textarea:focus {
    outline: none; border-color: var(--pl-marca); box-shadow: 0 0 0 3px rgba(51,78,104,.15);
}
.pl-textarea { min-height: 92px; resize: vertical; }

.pl-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pl-filtros .pl-campo { margin-bottom: 0; min-width: 120px; }
.pl-filtros .pl-campo--ancho { flex: 1; min-width: 240px; }

.pl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; user-select: none; }
.pl-check input { width: 15px; height: 15px; accent-color: var(--pl-marca); }

/* Interruptor para los sí/no importantes (activo/pausado). La casilla nativa se
   veía pobre al lado del resto de controles y además no dice de un vistazo si lo
   que hay marcado es "encendido" o "pendiente de marcar". */
.pl-interruptor {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    font-size: 13px; font-weight: 600;
}

.pl-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.pl-interruptor .pista {
    width: 40px; height: 23px; flex: 0 0 40px;
    background: var(--pl-borde-alto);
    border-radius: 999px;
    position: relative;
    transition: background .18s;
}

.pl-interruptor .pista::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(31,41,55,.3);
    transition: transform .18s;
}

.pl-interruptor input:checked + .pista { background: var(--pl-marca); }
.pl-interruptor input:checked + .pista::after { transform: translateX(17px); }
.pl-interruptor input:focus-visible + .pista { outline: 2px solid var(--pl-marca); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pl-interruptor .pista, .pl-interruptor .pista::after { transition: none; }
}

.pl-acciones { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }

/* Control segmentado (recurrente / puntual), igual que .dga-pestanas de DietaGo:
   cápsula gris con la opción activa como pastilla blanca elevada. */
.pl-segmento {
    display: inline-flex; gap: 3px; flex-wrap: wrap;
    background: var(--pl-panel-alto);
    border: 1px solid var(--pl-borde);
    border-radius: 12px;
    padding: 4px;
    max-width: 100%;
}

.pl-segmento button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border: 1px solid transparent; border-radius: 9px;
    background: none; cursor: pointer;
    color: var(--pl-suave);
    font-size: 13px; font-weight: 650; font-family: inherit;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}
.pl-segmento button:hover { color: var(--pl-texto); background: rgba(255,255,255,.6); }
.pl-segmento button.activa {
    background: var(--pl-panel);
    border-color: var(--pl-borde);
    color: var(--pl-marca);
    box-shadow: 0 1px 2px rgba(31,41,55,.10);
}

/* Semana como una tira de siete celdas iguales, al estilo de un calendario: se ve
   de un golpe qué días están dentro. Antes eran pastillas de anchos distintos con
   los nombres largos, y no había forma de leerlo rápido. */
.pl-semana { display: flex; gap: 6px; flex-wrap: wrap; }

.pl-semana__dia {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--pl-borde-alto);
    border-radius: 10px;
    background: var(--pl-panel);
    color: var(--pl-suave);
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.pl-semana__dia:hover { background: var(--pl-panel-alto); color: var(--pl-texto); }
.pl-semana__dia.activo {
    background: var(--pl-marca);
    border-color: var(--pl-marca);
    color: #fff;
}

/* Atajos como pastillas discretas, no como enlaces azules subrayados: no llevan
   a ninguna parte, rellenan el campo de al lado. */
.pl-atajos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.pl-atajo {
    padding: 5px 11px;
    border: 1px solid var(--pl-borde);
    border-radius: 999px;
    background: var(--pl-panel-alto);
    color: var(--pl-suave);
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.pl-atajo:hover { background: var(--pl-panel); color: var(--pl-texto); border-color: var(--pl-borde-alto); }

/* Hora en pasos, con la misma forma que el selector de fecha. */
.pl-hora {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 8px;
    border: 1px solid var(--pl-borde-alto);
    border-radius: 10px;
    background: var(--pl-panel);
}
.pl-hora__paso {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: none; border-radius: 7px;
    background: var(--pl-panel-alto);
    color: var(--pl-texto);
    font-size: 15px; font-family: inherit;
    cursor: pointer;
}
.pl-hora__paso:hover { background: var(--pl-borde); }
.pl-hora__valor {
    min-width: 34px; text-align: center;
    font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pl-hora__sep { color: var(--pl-suave); margin: 0 4px; font-weight: 700; }

/* Resumen en lenguaje llano de cuándo saldrá el mensaje. Con hora, minuto, días
   y tipo repartidos por el formulario, es fácil guardar algo distinto de lo que
   uno creía; esta línea lo dice con palabras antes de guardar. */
.pl-resumen {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px;
    background: var(--pl-marca-suave);
    border: 1px solid rgba(51,78,104,.25);
    border-radius: 10px;
    color: var(--pl-marca-alto); font-size: 13px;
    margin-bottom: 14px;
}

/* El mismo resumen cuando lo que dice es un problema (fecha pasada). */
.pl-resumen--mal {
    background: #fdecec;
    border-color: #f4c9ca;
    color: #a3282c;
}

/* ------------------------------------------------------------- Conversación
   Vista partida al estilo WhatsApp Web: lista a la izquierda, mensajes a la
   derecha. Ocupa el alto disponible y son las dos columnas las que desplazan,
   no la página. */
.pl-conv {
    flex: 1;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.pl-conv__lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--pl-borde);
    background: var(--pl-panel);
}

.pl-conv__buscar { padding: 12px; border-bottom: 1px solid var(--pl-borde); }
.pl-conv__chats { flex: 1; overflow-y: auto; }

.pl-conv__chat {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pl-borde);
    text-decoration: none;
    color: var(--pl-texto);
}
.pl-conv__chat:hover { background: var(--pl-panel-alto); text-decoration: none; }
.pl-conv__chat.activo { background: var(--pl-marca-suave); }

.pl-conv__chat-fila {
    display: flex; align-items: baseline; gap: 8px;
    justify-content: space-between;
}
.pl-conv__chat-fila b {
    font-size: 13.5px; font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-conv__chat-fila small { font-size: 11px; color: var(--pl-suave); flex: 0 0 auto; }

.pl-conv__previo {
    font-size: 12px; color: var(--pl-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pl-conv__globo {
    flex: 0 0 auto;
    background: var(--pl-marca); color: #fff;
    border-radius: 999px; padding: 1px 7px;
    font-size: 11px; font-weight: 700;
}

.pl-conv__panel {
    display: flex; flex-direction: column;
    min-height: 0;
    background: #f7f4ef;   /* el fondo cálido de la conversación de WhatsApp */
}

.pl-conv__mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 7px;
}

.pl-conv__escribir {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--pl-borde);
    background: var(--pl-panel);
}
.pl-conv__escribir > :first-child { flex: 1; min-width: 0; }

.pl-burbuja {
    max-width: min(70%, 560px);
    padding: 7px 11px 5px;
    border-radius: 10px;
    background: var(--pl-panel);
    box-shadow: 0 1px 1px rgba(37, 48, 63, .12);
    font-size: 13.5px;
    line-height: 1.45;
    display: flex; flex-direction: column;
}

.pl-burbuja.entrante { align-self: flex-start; border-top-left-radius: 3px; }
.pl-burbuja.saliente { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }

.pl-burbuja__autor { font-size: 12px; font-weight: 700; color: var(--pl-marca); margin-bottom: 2px; }
.pl-burbuja__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-burbuja__texto.adjunto { color: var(--pl-suave); font-style: italic; }

.pl-burbuja__pie {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; color: var(--pl-suave); margin-top: 2px;
}
.pl-burbuja__acuse.leido { color: #53bdeb; }

/* Burbuja recién escrita que aún no ha salido: se ve más apagada hasta que
   WhatsApp la confirma, y en rojo si el envío falló. */
.pl-burbuja.fallida { background: #fdecec; border: 1px solid #f4c9ca; }

.pl-burbuja__reintentar {
    background: none; border: none; padding: 0;
    color: var(--pl-rojo); font-size: 10.5px; font-family: inherit;
    cursor: pointer; text-decoration: underline;
}

@media (max-width: 900px) {
    .pl-conv { grid-template-columns: minmax(0, 1fr); }
    /* Con un chat abierto la lista estorba en móvil; se llega por el menú. */
    .pl-conv__lista { display: none; }
}

/* ------------------------------------------------- Pantalla superpuesta
   Tras escanear el QR, WhatsApp tarda unos segundos en cargar la sesión. En ese
   hueco la pantalla parecía "colgada" y daba pie a recargar o a volver a
   escanear, que es justo lo que rompe la vinculación. Se tapa todo el panel para
   que no haya nada más que tocar hasta que termine. */
.pl-superpuesto {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    background: rgba(31,41,55,.45);
    backdrop-filter: blur(2px);
    padding: 20px;
}

.pl-superpuesto__caja {
    width: min(420px, 100%);
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde);
    border-radius: 16px;
    padding: 34px 30px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(31,41,55,.25);
}

.pl-superpuesto__caja h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pl-superpuesto__caja p { font-size: 13.5px; color: var(--pl-suave); }
.pl-superpuesto__caja .pl-btn { margin-top: 20px; width: 100%; justify-content: center; }

.pl-girador {
    width: 44px; height: 44px; margin: 0 auto 18px;
    border: 3px solid var(--pl-panel-alto);
    border-top-color: var(--pl-marca);
    border-radius: 50%;
    animation: pl-girar .9s linear infinite;
}

@keyframes pl-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pl-girador { animation-duration: 2.5s; }
}

.pl-tic {
    width: 54px; height: 54px; margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--pl-verde-suave);
    color: var(--pl-verde-alto);
    display: grid; place-items: center;
}
.pl-tic svg { width: 28px; height: 28px; }

/* Ficha de la cuenta vinculada en la pantalla de conexión. */
.pl-cuenta { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.pl-cuenta__foto {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--pl-borde);
    background: var(--pl-panel-alto);
    display: inline-grid; place-items: center;
    font-size: 18px; font-weight: 700; color: var(--pl-suave);
}
.pl-cuenta__datos b { display: block; font-size: 15px; font-weight: 700; }
.pl-cuenta__datos span { display: block; font-size: 13px; color: var(--pl-suave); }

.pl-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.pl-dato span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--pl-suave); }
.pl-dato b { display: block; font-size: 14px; font-weight: 650; margin-top: 2px; overflow-wrap: anywhere; }

/* ------------------------------------------------------- Buscador de chats
   Sugerencias en línea bajo el campo. No es un popover a propósito: al elegir
   destinatario conviene ver la lista sin que tape el resto del formulario. */
.pl-buscador { position: relative; }

.pl-sugerencias {
    margin-top: 6px;
    border: 1px solid var(--pl-borde);
    border-radius: 9px;
    overflow: hidden;
    background: var(--pl-panel);
}

.pl-sugerencia {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none; border-bottom: 1px solid var(--pl-borde);
    background: var(--pl-panel);
    font: inherit; font-size: 13px;
    text-align: left; cursor: pointer;
}
.pl-sugerencia:last-child { border-bottom: none; }
.pl-sugerencia:hover { background: var(--pl-marca-suave); }

.pl-sugerencia__nombre {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pl-elegido { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- Modal
   Mismo patrón que el .dga-modal de DietaGo: capa oscura, tarjeta centrada
   con cabecera, cuerpo desplazable y pie con las acciones. */
.pl-modal-fondo {
    position: fixed; inset: 0;
    background: rgba(37, 48, 63, .45);
    backdrop-filter: blur(2px);
    display: grid; place-items: center;
    padding: 20px;
    z-index: 120;
}

.pl-modal {
    background: var(--pl-panel);
    border: 1px solid var(--pl-borde);
    border-radius: 14px;
    width: min(640px, 100%);
    max-height: 88vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(37, 48, 63, .22);
}

.pl-modal__cabecera {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pl-borde);
    display: flex; align-items: center; gap: 10px;
}
.pl-modal__cabecera h3 { margin: 0; font-size: 15px; font-weight: 700; }

.pl-modal__cerrar {
    margin-left: auto;
    background: none; border: none;
    color: var(--pl-suave);
    font-size: 22px; line-height: 1;
    cursor: pointer; padding: 0 2px;
}
.pl-modal__cerrar:hover { color: var(--pl-texto); }

.pl-modal__cuerpo { padding: 18px 20px; overflow-y: auto; }

.pl-modal__pie {
    padding: 14px 20px;
    border-top: 1px solid var(--pl-borde);
    display: flex; gap: 9px; align-items: center;
}

/* Filas de la lista que abren detalle. */
.pl-tabla--clic tbody tr { cursor: pointer; }

/* Equis de borrado al final de la fila. Discreta hasta que pasas por encima:
   borra de verdad y no conviene que invite a pulsarla sin querer. */
.pl-borrar {
    background: none;
    border: none;
    padding: 0 6px;
    margin-left: 4px;
    color: var(--pl-rojo);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    font-family: inherit;
}
.pl-borrar:hover { opacity: 1; }

/* -------------------------------------------------------- Borradores de IA
   Cada borrador enseña el mensaje que llegó y la respuesta propuesta, para
   poder juzgar de un vistazo si se envía tal cual o hay que retocarla. */
.pl-borrador {
    border: 1px solid var(--pl-borde);
    border-radius: var(--pl-radio);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--pl-panel);
}

.pl-borrador__cabecera {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.pl-borrador__quien { font-weight: 700; font-size: 14px; }
.pl-borrador__fecha { font-size: 11.5px; color: var(--pl-suave); margin-left: auto; }

.pl-borrador__entrante {
    background: var(--pl-panel-alto);
    border-left: 3px solid var(--pl-borde-alto);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--pl-texto);
    margin-bottom: 10px;
    white-space: pre-wrap;
}

.pl-borrador__respuesta { margin-bottom: 10px; }

.pl-borrador__motivo {
    font-size: 12px; color: var(--pl-ambar);
    margin-bottom: 10px;
}

/* Semáforo de confianza de la IA. */
.pl-confianza { font-size: 11px; font-weight: 700; }
.pl-confianza--alta { color: var(--pl-verde-alto); }
.pl-confianza--media { color: var(--pl-ambar); }
.pl-confianza--baja { color: var(--pl-rojo); }

/* ---------------------------------------------------------------------- Aviso */

.pl-aviso {
    padding: 11px 14px; border-radius: 10px; margin-bottom: 16px;
    font-size: 13px; border: 1px solid;
    display: flex; align-items: flex-start; gap: 9px;
}
.pl-aviso--ok    { background: var(--pl-verde-suave); border-color: rgba(21,128,61,.35); color: var(--pl-verde-alto); }
.pl-aviso--error { background: #fdecec; border-color: #f4c9ca; color: #a3282c; }
.pl-aviso--info  { background: #e9f1fc; border-color: #c6dcf6; color: #17518f; }

/* ------------------------------------------------------------------ Vinculación */

.pl-qr {
    display: block;
    width: 250px; height: 250px;
    background: #fff;
    padding: 10px;
    border: 1px solid var(--pl-borde);
    border-radius: 12px;
    margin: 14px 0 10px;
}

.pl-pasos { font-size: 13px; color: var(--pl-suave); }
.pl-pasos b { color: var(--pl-texto); font-weight: 650; }
.pl-nota { font-size: 12px; color: var(--pl-suave); margin-top: 6px; }

/* Tarjeta de vinculación cuando ocupa la pantalla entera (sin sesión). */
.pl-tarjeta--centrada {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.pl-tarjeta--centrada .pl-qr { margin-left: auto; margin-right: auto; }

.pl-pasos-lista {
    text-align: left;
    display: inline-block;
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--pl-suave);
    line-height: 1.9;
}
.pl-pasos-lista b { color: var(--pl-texto); font-weight: 650; }

.pl-qr--grande { width: 300px; height: 300px; }

/* ------------------------------------------------------------------ Pantalla PIN */

.pl-acceso {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background:
        radial-gradient(760px 440px at 50% -12%, rgba(51,78,104,.18) 0%, rgba(51,78,104,0) 65%),
        radial-gradient(520px 320px at 90% 108%, rgba(255,156,0,.16) 0%, rgba(255,156,0,0) 70%),
        var(--pl-fondo);
    padding: 20px;
}

.pl-acceso__caja {
    width: min(380px, 100%);
    background: var(--pl-panel); border: 1px solid var(--pl-borde);
    border-radius: 16px; padding: 32px 28px; text-align: center;
    box-shadow: 0 10px 40px rgba(31,41,55,.10);
}

/* Logo de Aldía (isologo + nombre), los mismos PNG que la landing. */
.pl-acceso__marca { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pl-acceso__marca img { display: block; width: auto; }
.pl-acceso__icono { height: 40px; }
.pl-acceso__logo  { height: 38px; }

.pl-acceso__caja h1 { font-size: 19px; margin-bottom: 4px; font-weight: 700; }
.pl-acceso__caja > p { font-size: 13px; color: var(--pl-suave); margin-bottom: 22px; }

.pl-pin {
    width: 100%; text-align: center;
    font-size: 30px; letter-spacing: 14px; text-indent: 14px;
    padding: 13px 10px;
    background: var(--pl-panel); border: 1px solid var(--pl-borde-alto); border-radius: 11px;
    color: var(--pl-texto); font-family: inherit; font-weight: 700;
}
.pl-pin:focus { outline: none; border-color: var(--pl-marca); box-shadow: 0 0 0 3px rgba(51,78,104,.16); }

.pl-acceso .pl-btn { width: 100%; justify-content: center; margin-top: 16px; }
.pl-acceso .pl-aviso { text-align: left; }

/* --------------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
    .pl-app { flex-direction: column; }
    .pl-lateral {
        width: 100%; flex: 0 0 auto;
        flex-direction: row; align-items: center;
        border-right: none; border-bottom: 1px solid var(--pl-borde);
        overflow-x: auto; overflow-y: hidden;
    }
    .pl-marca { border-bottom: none; border-right: 1px solid var(--pl-borde); padding: 12px 14px; }
    .pl-marca__etiqueta { display: none; }
    .pl-nav { display: flex; gap: 4px; padding: 8px; }
    .pl-nav__grupo { display: none; }
    .pl-nav a { white-space: nowrap; padding: 8px 11px; }
    .pl-lateral__pie { border-top: none; border-left: 1px solid var(--pl-borde); }
    .pl-cuerpo { padding: 16px 14px 50px; }
    .pl-cabecera { padding: 13px 14px; }
}