/* ============================================================================
   DietaGo · Panel administrativo
   ----------------------------------------------------------------------------
   Tema claro, con la misma paleta que la web pública: verde de marca #43B02A
   sobre blanco y grises fríos, y el carbón del logotipo (#25303F) como color de
   texto.

   Todo lleva prefijo .dga- a propósito. Estas páginas se cargan dentro del mismo
   documento que la landing, que ya trae bootstrap.css + style.css + custom.css
   globales. Sin prefijo, cualquier regla suelta para .card o .table se pisaría
   con las de la landing (y al revés).
   ============================================================================ */

/* Las variables van en :root y no en .dga-app porque la pantalla de acceso
   (.dga-acceso) es una raíz distinta: colgándolas de .dga-app, allí quedaban sin
   definir y cualquier `background: var(--dga-verde)` se descartaba entero. */
:root {
    --dga-fondo:      #f4f7f9;
    --dga-panel:      #ffffff;
    --dga-panel-alto: #eef2f6;
    --dga-borde:      #dfe6ed;
    --dga-borde-alto: #c9d4de;
    --dga-texto:      #25303f;
    --dga-suave:      #6b7a8c;
    --dga-verde:      #43b02a;
    --dga-verde-alto: #37941f;
    --dga-verde-suave:#eaf6e6;
    --dga-ambar:      #b5730a;
    --dga-rojo:       #d13438;
    --dga-azul:       #1f6fd0;
    --dga-radio:      12px;
    --dga-sombra:     0 1px 2px rgba(37,48,63,.06), 0 4px 14px rgba(37,48,63,.05);
}

/* El panel es una capa fija sobre el documento de la landing. Sin esto el
   documento de debajo sigue teniendo su barra de desplazamiento (que custom.css
   pinta con el color de marca) y asoma como una franja a la derecha del panel. */
html:has(.dga-app), body:has(.dga-app),
html:has(.dga-acceso), body:has(.dga-acceso) { overflow: hidden; }

.dga-app {
    position: fixed;
    inset: 0;
    display: flex;
    background: var(--dga-fondo);
    color: var(--dga-texto);
    font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    z-index: 9999;
    overflow: hidden;
}

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

/* ----------------------------------------------------------------- Reinicio
   La landing carga bootstrap.css + style.css + custom.css en el MISMO documento,
   y esas hojas estilan elementos desnudos: h1 lleva un line-height de 160px y un
   color oliva heredado de la plantilla, p arrastra margen inferior, table sus
   propios bordes. Nada de eso se puede quitar sin tocar la landing, así que se
   neutraliza aquí, acotado a las dos raíces del panel.

   OJO CON LA ESPECIFICIDAD. Los selectores van con :where() alrededor de la raíz,
   que no suma especificidad: así estas reglas pesan lo mismo que las de la landing
   (un selector de elemento) y ganan solo por venir después en el documento, pero
   pierden contra cualquier clase .dga-* de más abajo. Escrito como `.dga-app h2`
   pesaría 0-1-1 y se comería el color de .dga-tarjeta__titulo, que es 0-1-0. */
:where(.dga-app, .dga-acceso) h1,
:where(.dga-app, .dga-acceso) h2,
:where(.dga-app, .dga-acceso) h3,
:where(.dga-app, .dga-acceso) h4,
:where(.dga-app, .dga-acceso) h5,
:where(.dga-app, .dga-acceso) h6 {
    color: inherit;
    font-family: inherit;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 650;
    margin: 0;
}

:where(.dga-app, .dga-acceso) p,
:where(.dga-app, .dga-acceso) ul,
:where(.dga-app, .dga-acceso) ol,
:where(.dga-app, .dga-acceso) figure {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    line-height: 1.5;
}

:where(.dga-app, .dga-acceso) li { list-style: none; }

/* El !important no es decorativo: custom.css de la landing trae
   `a, label, ... { color: #212121 !important }`, y sin otro !important los
   enlaces del panel no respetan su color. Por eso TODAS las reglas de color
   sobre <a> de este fichero lo llevan, y los enlaces con color propio usan clase
   (.dga-enlace, .dga-nav a, …) en vez de estilo en línea: un estilo en línea sin
   !important pierde contra un !important de hoja. */
:where(.dga-app, .dga-acceso) a {
    color: inherit !important;
    text-decoration: none;
    font-family: inherit;
}

.dga-app .dga-enlace,
.dga-acceso .dga-enlace { color: var(--dga-azul) !important; }
.dga-app .dga-enlace:hover { text-decoration: underline; }

/* Mismo motivo que los enlaces: esa regla de custom.css incluye `label`, y el
   texto suelto dentro de una etiqueta (las casillas .dga-check) salía negro. */
:where(.dga-app, .dga-acceso) label { color: inherit !important; }

/* Botones que en realidad son enlaces (<a class="dga-btn">): el reinicio de
   arriba les mete color:inherit !important y taparía el color del botón. */
.dga-app a.dga-btn { color: var(--dga-texto) !important; }
.dga-app a.dga-btn.dga-btn--principal { color: #ffffff !important; }
.dga-app a.dga-btn.dga-btn--peligro { color: var(--dga-rojo) !important; }

:where(.dga-app, .dga-acceso) a::before,
:where(.dga-app, .dga-acceso) a::after { content: none; }

:where(.dga-app) table { width: 100%; margin: 0; background: none; color: inherit; }
:where(.dga-app) th,
:where(.dga-app) td { background: none; }

:where(.dga-app) code,
:where(.dga-app) pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: none;
    color: inherit;
    padding: 0;
    border: none;
}

:where(.dga-app, .dga-acceso) input,
:where(.dga-app, .dga-acceso) select,
:where(.dga-app, .dga-acceso) textarea,
:where(.dga-app, .dga-acceso) button {
    font-family: inherit;
    line-height: 1.4;
    box-shadow: none;
    margin: 0;
}

:where(.dga-app) img { max-width: 100%; }

/* custom.css pinta la barra de desplazamiento con el color de marca en oliva y
   ancho grueso; dentro del panel eso se ve como una franja al borde derecho. */
.dga-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.dga-app ::-webkit-scrollbar-track { background: transparent; }
.dga-app ::-webkit-scrollbar-thumb {
    background: var(--dga-borde-alto);
    border-radius: 999px;
    border: 2px solid var(--dga-fondo);
}
.dga-app ::-webkit-scrollbar-thumb:hover { background: #aebbc7; }
.dga-app { scrollbar-color: var(--dga-borde-alto) transparent; scrollbar-width: thin; }

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

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

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

/* El logotipo completo en la barra y el isotipo suelto cuando no cabe. */
.dga-marca__logo { height: 30px; width: auto; display: block; }
.dga-marca__iso  { height: 30px; width: 30px; display: none; }

.dga-marca__etiqueta {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--dga-verde);
    background: var(--dga-verde-suave);
    border: 1px solid rgba(67,176,42,.3);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
}

.dga-nav { padding: 12px 10px; flex: 1; }
.dga-nav__grupo { padding: 14px 10px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #9aa7b5; font-weight: 600; }

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

.dga-nav a:hover { background: var(--dga-panel-alto); color: var(--dga-texto) !important; }
.dga-nav a.activo { background: var(--dga-verde-suave); color: var(--dga-verde-alto) !important; }
.dga-nav a i { width: 17px; text-align: center; font-size: 13px; }

.dga-lateral__pie { padding: 14px; border-top: 1px solid var(--dga-borde); }

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

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

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

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

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

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

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

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

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

.dga-kpi__valor { font-size: 26px; font-weight: 750; letter-spacing: -.6px; line-height: 1.1; }
.dga-kpi__pie   { font-size: 12px; color: var(--dga-suave); margin-top: 4px; }
.dga-kpi__valor--verde { color: var(--dga-verde-alto); }
.dga-kpi__valor--ambar { color: var(--dga-ambar); }
.dga-kpi__valor--azul  { color: var(--dga-azul); }
.dga-kpi__valor--rojo  { color: var(--dga-rojo); }

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

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

.dga-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.dga-tabla th {
    text-align: left; padding: 9px 10px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--dga-suave); font-weight: 700;
    border-bottom: 1px solid var(--dga-borde); white-space: nowrap;
}
.dga-tabla td { padding: 10px; border-bottom: 1px solid var(--dga-borde); vertical-align: middle; }
.dga-tabla tbody tr:hover { background: var(--dga-panel-alto); }
.dga-tabla td.num, .dga-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dga-tabla--clic tbody tr { cursor: pointer; }

/* La tabla de usuarios tiene once columnas y no cabe en pantallas normales, así
   que se desplaza en horizontal. La columna de acciones se queda fija al borde
   derecho: si se fuera con el resto, los botones de baja y borrado quedarían
   fuera de la vista justo cuando hacen falta. */
.dga-tabla--acciones th:last-child,
.dga-tabla--acciones td:last-child {
    position: sticky;
    right: 0;
    background: var(--dga-panel);
    box-shadow: -7px 0 8px -7px rgba(37,48,63,.25);
}
.dga-tabla--acciones tbody tr:hover td:last-child { background: var(--dga-panel-alto); }

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

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

.dga-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(--dga-panel-alto); color: var(--dga-suave);
    border: 1px solid var(--dga-borde);
}
.dga-chip--verde { background: var(--dga-verde-suave);  color: var(--dga-verde-alto); border-color: rgba(67,176,42,.35); }
.dga-chip--ambar { background: #fdf3e2;  color: var(--dga-ambar);      border-color: #f0d9ae; }
.dga-chip--rojo  { background: #fdecec;  color: var(--dga-rojo);       border-color: #f4c9ca; }
.dga-chip--azul  { background: #e9f1fc;  color: var(--dga-azul);       border-color: #c6dcf6; }

.dga-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    background: var(--dga-panel-alto); border: 1px solid var(--dga-borde);
    display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--dga-suave);
    flex: 0 0 30px;
}

.dga-usuario-celda { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dga-usuario-celda > div { min-width: 0; }
.dga-usuario-celda b { display: block; font-weight: 650; }

/* Los emails de invitado ocupan 60 caracteres y, sin recortarlos, empujaban la
   tabla tan a la derecha que las columnas de estado y acciones se salían de la
   pantalla. El email completo sigue estando en el title y en la ficha. */
.dga-usuario-celda small {
    display: block;
    color: var(--dga-suave);
    font-size: 11.5px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

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

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

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

/* -------------------------------------------------------------------- Pestañas */

/* Control segmentado: las pestañas viven dentro de una cápsula gris y la activa
   es una pastilla blanca elevada. Antes eran texto suelto con un subrayado, que
   sobre fondo claro casi no se distinguía de un título. */
.dga-pestanas {
    display: inline-flex;
    gap: 3px;
    flex-wrap: wrap;
    background: var(--dga-panel-alto);
    border: 1px solid var(--dga-borde);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    max-width: 100%;
}

.dga-pestanas 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(--dga-suave);
    font-size: 13px; font-weight: 650; font-family: inherit;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}

.dga-pestanas button i { font-size: 12px; opacity: .85; }
.dga-pestanas button:hover { color: var(--dga-texto); background: rgba(255,255,255,.6); }

.dga-pestanas button.activa {
    background: var(--dga-panel);
    border-color: var(--dga-borde);
    color: var(--dga-verde-alto);
    box-shadow: 0 1px 2px rgba(37,48,63,.10);
}

/* Contador dentro de la pestaña (nº de elementos de esa sección). */
.dga-pestanas .dga-cuenta {
    font-size: 11px; font-weight: 700;
    background: var(--dga-borde); color: var(--dga-suave);
    border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.dga-pestanas button.activa .dga-cuenta { background: var(--dga-verde-suave); color: var(--dga-verde-alto); }

/* ------------------------------------------------------------ Barra flotante
   Acciones de la ficha ancladas abajo y centradas, siempre a la vista aunque el
   contenido se desplace. Va oscura a propósito: es la única pieza del panel que
   debe destacar sobre el fondo claro sin competir con las tarjetas. */
.dga-flotante {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
    background: #1c2530;
    border: 1px solid #2f3b49;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(28,37,48,.28);
    max-width: calc(100vw - 32px);
    overflow-x: auto;
}

.dga-flotante__quien {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 5px;
    color: #e6edf3; font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.dga-flotante__quien img,
.dga-flotante__quien span.dga-ini {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px;
    background: #2f3b49; display: inline-grid; place-items: center; font-size: 11px;
}

.dga-flotante__sep { width: 1px; align-self: stretch; background: #3a4756; margin: 2px 2px; }

.dga-flotante .dga-btn {
    background: #2a3543;
    border-color: #3a4756;
    color: #e6edf3 !important;
    border-radius: 999px;
    white-space: nowrap;
}
.dga-flotante .dga-btn:hover:not(:disabled) { background: #35424f; }
.dga-flotante .dga-btn:disabled { opacity: .4; }
.dga-flotante .dga-btn--principal { background: var(--dga-verde); border-color: var(--dga-verde); color: #fff !important; }
.dga-flotante .dga-btn--principal:hover:not(:disabled) { background: var(--dga-verde-alto); }
.dga-flotante .dga-btn--peligro { background: var(--dga-rojo); border-color: var(--dga-rojo); color: #fff !important; }
.dga-flotante .dga-btn--peligro:hover:not(:disabled) { background: #b82b2f; }

.dga-flotante .dga-chip { background: #35424f; border-color: #46545f; color: #cfd8e3; }

/* La barra tapa el final del contenido si no se le hace sitio. */
.dga-cuerpo--flotante { padding-bottom: 110px; }

@media (max-width: 700px) {
    .dga-flotante { left: 12px; right: 12px; transform: none; max-width: none; border-radius: 16px; }
    .dga-flotante__quien { display: none; }
}

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

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

/* ----------------------------------------------------------------------- Modal */

.dga-modal-fondo {
    position: fixed; inset: 0; background: rgba(37,48,63,.45);
    display: grid; place-items: center; padding: 20px; z-index: 10000;
}
.dga-modal {
    background: var(--dga-panel); border: 1px solid var(--dga-borde);
    border-radius: 14px; width: min(560px, 100%); max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 50px rgba(37,48,63,.22);
}
.dga-modal__cabecera { padding: 16px 20px; border-bottom: 1px solid var(--dga-borde); display: flex; align-items: center; }
.dga-modal__cabecera h3 { margin: 0; font-size: 15px; font-weight: 700; }
.dga-modal__cuerpo { padding: 18px 20px; overflow-y: auto; }
.dga-modal__pie { padding: 14px 20px; border-top: 1px solid var(--dga-borde); display: flex; gap: 9px; justify-content: flex-end; }
.dga-modal__cerrar { margin-left: auto; background: none; border: none; color: var(--dga-suave); font-size: 20px; cursor: pointer; line-height: 1; }

/* -------------------------------------------------------------------- Gráficas */

/* Barras en CSS puro: una gráfica de 30 columnas no justifica cargar una
   librería de 90 KB en un panel que solo usa el administrador. */
.dga-barras { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.dga-barras__col { flex: 1; background: var(--dga-panel-alto); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.dga-barras__col--lleno { background: linear-gradient(180deg, #6cc954, var(--dga-verde)); }
.dga-barras__col:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: var(--dga-texto); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 5px;
    white-space: nowrap; margin-bottom: 5px; z-index: 5;
}

.dga-progreso { height: 7px; border-radius: 999px; background: var(--dga-panel-alto); overflow: hidden; }
.dga-progreso__valor { height: 100%; background: linear-gradient(90deg, var(--dga-verde), #6cc954); }

/* -------------------------------------------------------------- Ficha de usuario */

.dga-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px 20px; }
.dga-dato span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--dga-suave); }
/* overflow-wrap: los emails de invitado son de 60 caracteres sin espacios y se
   salían de su columna, tapando la de al lado. */
.dga-dato b { display: block; font-size: 14px; font-weight: 650; margin-top: 2px; overflow-wrap: anywhere; }

/* Foto de perfil en la cabecera de la ficha. */
.dga-foto {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--dga-borde);
    background: var(--dga-panel-alto);
}
.dga-foto--vacia {
    display: inline-grid; place-items: center;
    font-size: 18px; font-weight: 700; color: var(--dga-suave);
}

.dga-medalla { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; }
.dga-medalla--1 { background: #f5c518; color: #4a3a00; }
.dga-medalla--2 { background: #ccd5de; color: #38424f; }
.dga-medalla--3 { background: #dfa46a; color: #4a2c0b; }

/* --------------------------------------------------------------- Verificado
   El distintivo de perfil verificado, en azul y con check, que es el código
   visual que la gente ya reconoce de otras apps. En verde se confundía con los
   chips de "activo" y "publicada", que significan otra cosa. */
.dga-foto--verificada { border-color: var(--dga-azul); }

.dga-verificado {
    position: absolute; right: -3px; bottom: -3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--dga-azul); color: #fff;
    display: grid; place-items: center; font-size: 9px;
    border: 2px solid var(--dga-panel);
}

.dga-foto-envoltorio { position: relative; display: inline-block; line-height: 0; }

.dga-chip--verificado { background: #e9f1fc; color: var(--dga-azul); border-color: #b9d3f5; }

/* ------------------------------------------------------------------- Lupa
   Cualquier foto del panel se amplía al pulsarla. Las fotos de perfil y las
   evidencias de los retos se ven a 30-46 px, que no da para juzgar nada. */
.dga-ampliable { cursor: zoom-in; }

.dga-lupa {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(15, 20, 25, .88);
    display: grid; place-items: center; padding: 28px;
    cursor: zoom-out;
}
.dga-lupa img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    object-fit: contain;
}
.dga-lupa__pie {
    position: absolute; left: 0; right: 0; bottom: 22px;
    text-align: center; color: #e6edf3; font-size: 13px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.dga-lupa__cerrar {
    position: absolute; top: 18px; right: 22px;
    background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 20px; cursor: pointer; line-height: 1;
}
.dga-lupa__cerrar:hover { background: rgba(255,255,255,.22); }

/* ------------------------------------------------------- Galería de fotos */

.dga-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

.dga-galeria__ficha {
    border: 1px solid var(--dga-borde);
    border-radius: 10px;
    overflow: hidden;
    background: var(--dga-panel);
}
.dga-galeria__ficha img { width: 100%; height: 140px; object-fit: cover; display: block; }
.dga-galeria__vacia {
    width: 100%; height: 140px; display: grid; place-items: center;
    background: var(--dga-panel-alto); color: var(--dga-suave); font-size: 22px;
}
.dga-galeria__pie { padding: 8px 10px; font-size: 12px; }
.dga-galeria__pie b { display: block; }
.dga-galeria__pie small { color: var(--dga-suave); }

/* ------------------------------------------------- Barra de selección múltiple
   Aparece al marcar filas y agrupa las acciones sobre lo seleccionado. Mismo
   lenguaje que la barra flotante de la ficha: oscura, anclada abajo y centrada. */
.dga-seleccion {
    position: fixed;
    left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 9998;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px 9px 14px;
    background: #1c2530;
    border: 1px solid #2f3b49;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(28,37,48,.28);
    max-width: calc(100vw - 32px);
}

.dga-seleccion__cuenta {
    display: inline-flex; align-items: center; gap: 8px;
    color: #e6edf3; font-size: 13px; font-weight: 650; white-space: nowrap;
}
.dga-seleccion__cuenta i { color: #8b98a9; }

.dga-seleccion .dga-btn {
    background: #2a3543; border-color: #3a4756; color: #e6edf3 !important; border-radius: 999px;
}
.dga-seleccion .dga-btn:hover:not(:disabled) { background: #35424f; }
.dga-seleccion .dga-btn--peligro { background: var(--dga-rojo); border-color: var(--dga-rojo); color: #fff !important; }
.dga-seleccion .dga-btn--peligro:hover:not(:disabled) { background: #b82b2f; }

.dga-seleccion__cerrar {
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: none; color: #1c2530;
    font-size: 17px; line-height: 1; cursor: pointer;
}

/* Checkbox de fila. */
.dga-tabla input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--dga-verde); cursor: pointer; }
.dga-tabla tr.dga-marcada { background: var(--dga-verde-suave); }
.dga-tabla tr.dga-marcada:hover { background: #e0f1da; }

/* --------------------------------------------------------- Visor de correo */

.dga-modal--ancho { width: min(880px, 100%); }

/* El email va en un iframe sandbox: su HTML trae estilos propios pensados para
   un cliente de correo y, embebido directamente, se comería el CSS del panel. */
.dga-correo {
    width: 100%; height: 62vh; border: 1px solid var(--dga-borde);
    border-radius: 10px; background: #fff;
}

.dga-codigo {
    background: var(--dga-panel-alto);
    border: 1px solid var(--dga-borde);
    border-radius: 9px;
    padding: 11px 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow: auto;
}

/* ------------------------------------------------------------- Snackbar
   Avisos flotantes arriba a la derecha. Por encima de los modales (z-index
   mayor que .dga-modal-fondo) a propósito: el resultado de guardar dentro de un
   modal tiene que verse aunque el modal siga abierto. */
.dga-snacks {
    position: fixed;
    top: 18px; right: 18px;
    z-index: 10050;
    display: flex; flex-direction: column; gap: 10px;
    max-width: min(420px, calc(100vw - 36px));
    pointer-events: none;
}

.dga-snack {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1c2530;
    color: #e6edf3;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(28,37,48,.30);
    border-left: 4px solid #4c8dff;
    animation: dga-snack-entra .22s cubic-bezier(.2,.8,.3,1);
}

.dga-snack i { margin-top: 2px; font-size: 14px; }
.dga-snack span { flex: 1; word-break: break-word; }

.dga-snack__cerrar {
    background: none; border: none; color: #8b98a9;
    font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.dga-snack__cerrar:hover { color: #e6edf3; }

.dga-snack--ok    { border-left-color: #57d139; }
.dga-snack--ok i  { color: #57d139; }
.dga-snack--error { border-left-color: #ff6b6f; }
.dga-snack--error i { color: #ff6b6f; }
.dga-snack--info i  { color: #6ea8ff; }

.dga-snack--saliendo { animation: dga-snack-sale .22s ease forwards; }

@keyframes dga-snack-entra {
    from { opacity: 0; transform: translateX(28px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes dga-snack-sale {
    from { opacity: 1; transform: none; max-height: 120px; }
    to   { opacity: 0; transform: translateX(28px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -10px; }
}

@media (max-width: 600px) {
    .dga-snacks { top: auto; bottom: 96px; left: 12px; right: 12px; max-width: none; }
}

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

.dga-acceso {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: radial-gradient(900px 520px at 50% -8%, #e8f6e3 0%, var(--dga-fondo) 62%);
    font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
    color: var(--dga-texto); padding: 20px;
}

.dga-acceso__caja {
    width: min(380px, 100%);
    background: var(--dga-panel); border: 1px solid var(--dga-borde);
    border-radius: 16px; padding: 32px 28px; text-align: center;
    box-shadow: 0 10px 40px rgba(37,48,63,.10);
}
.dga-acceso__logo { height: 34px; width: auto; margin: 0 auto 18px; display: block; }
.dga-acceso__caja h1 { font-size: 19px; margin: 0 0 4px; font-weight: 700; }
.dga-acceso__caja p  { font-size: 13px; color: var(--dga-suave); margin: 0 0 22px; }

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

.dga-acceso__volver { display: inline-block; margin-top: 18px; color: var(--dga-suave) !important; font-size: 12.5px; text-decoration: none; }
.dga-acceso__volver:hover { color: var(--dga-texto) !important; }

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

@media (max-width: 900px) {
    .dga-app { flex-direction: column; }
    .dga-lateral {
        width: 100%; flex: 0 0 auto;
        flex-direction: row; align-items: center;
        border-right: none; border-bottom: 1px solid var(--dga-borde);
        overflow-x: auto; overflow-y: hidden;
    }
    .dga-marca { border-bottom: none; border-right: 1px solid var(--dga-borde); padding: 12px 14px; }
    /* En la barra horizontal el logotipo completo se come media pantalla: se
       cambia por el isotipo, que es la misma marca en cuadrado. */
    .dga-marca__logo { display: none; }
    .dga-marca__iso  { display: block; }
    .dga-marca__etiqueta { display: none; }
    .dga-nav { display: flex; gap: 4px; padding: 8px; }
    .dga-nav__grupo { display: none; }
    .dga-nav a { white-space: nowrap; padding: 8px 11px; }
    .dga-nav a span { display: none; }
    .dga-lateral__pie { border-top: none; border-left: 1px solid var(--dga-borde); }
    .dga-cuerpo { padding: 16px 14px 50px; }
    .dga-cabecera { padding: 13px 14px; }
}