/* ===========================================================================
   Diseño de la casa, el mismo de Gb app.
   Barra blanca arriba con el logo, encabezado blanco con el título y la acción
   principal, fondo gris claro y el contenido en tarjetas blancas. La acción es
   casi negra (como el botón CREAR) y el índigo solo marca dónde estás.
   Los mismos colores están en el tema de MudBlazor (Components/Layout/MainLayout.razor):
   si se cambia uno, se cambia el otro.
   =========================================================================== */

/* La letra va en el proyecto: sin salida a Internet, una hoja de Google Fonts dejaba la página en blanco. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --gb-fondo: #F3F4F6;
    --gb-superficie: #FFFFFF;
    --gb-superficie-2: #F9FAFB;
    --gb-linea: #E5E7EB;
    --gb-linea-fuerte: #D1D5DB;
    --gb-tinta: #111827;
    --gb-tinta-2: #374151;
    --gb-tinta-3: #6B7280;
    --gb-tinta-4: #9CA3AF;
    --gb-accion: #1F2937;
    --gb-acento: #818CF8;
    --gb-acento-suave: #EEF2FF;
    --gb-sombra: 0 1px 3px rgba(17, 24, 39, .08), 0 1px 2px rgba(17, 24, 39, .04);
    --gb-radio: 6px;
    --gb-ancho: 1460px;
    --gb-letra: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --gb-codigo: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

html { color-scheme: light; }

body {
    margin: 0;
    background: var(--gb-fondo);
    color: var(--gb-tinta-2);
    font-family: var(--gb-letra);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* ---------- barra de arriba ---------- */
.gb-nav {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--gb-superficie);
    border-bottom: 1px solid var(--gb-linea);
}

.gb-nav__in {
    max-width: var(--gb-ancho);
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.gb-nav__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: none;
}

.gb-nav__marca img { display: block; height: 35px; width: auto; }

.gb-nav__app {
    padding-left: 12px;
    border-left: 1px solid var(--gb-linea);
    color: var(--gb-tinta-2);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.gb-nav__links { display: flex; align-self: stretch; gap: 8px; }

.gb-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--gb-tinta-3);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .15s, box-shadow .15s;
}

.gb-nav__link:hover { color: var(--gb-tinta); }
.gb-nav__link.active { color: var(--gb-tinta); box-shadow: inset 0 -2px 0 var(--gb-acento); }

/* ---------- encabezado de la página ---------- */
.gb-head {
    background: var(--gb-superficie);
    border-bottom: 1px solid var(--gb-linea);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.gb-head__in {
    max-width: var(--gb-ancho);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gb-head__titulo { margin: 0; color: var(--gb-tinta); font-size: 24px; font-weight: 500; line-height: 1.3; }
.gb-head__titulo:focus { outline: none; } /* Blazor le pasa el foco al título al abrir la página */
.gb-head__sub { margin: 2px 0 0; color: var(--gb-tinta-3); font-size: 14px; }
.gb-head__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- cuerpo ---------- */
.gb-body { padding: 24px; }

.gb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.gb-grid--panel { grid-template-columns: minmax(0, 1fr) 400px; }
.gb-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gb-panel[hidden] { display: none !important; }
.gb-panel { position: sticky; top: 88px; }

@media (max-width: 1200px) {
    .gb-grid--panel { grid-template-columns: minmax(0, 1fr); }
    .gb-panel { position: static; }
}

@media (max-width: 700px) {
    .gb-nav__in, .gb-head__in { padding-left: 16px; padding-right: 16px; }
    .gb-nav__in { gap: 16px; }
    .gb-nav__app { display: none; }
    .gb-body { padding: 16px; }
}

.gb-card {
    background: var(--gb-superficie);
    border-radius: var(--gb-radio);
    box-shadow: var(--gb-sombra);
    padding: 20px;
}

.gb-card--tabs { padding: 0; overflow: hidden; }

/* La pregunta */
.gb-pregunta__pie { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gb-pregunta__pie .gb-campo { margin: 0; }
/* MudSelect va envuelto en un .mud-select que crece solo: se le fija el ancho para que no abra un hueco */
.gb-pregunta__pie > .mud-select, .gb-pregunta__pie > .mud-input-control { flex: 0 1 240px; }
.gb-estado { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--gb-tinta-3); font-size: 14px; }

/* Rótulo chico en mayúsculas, como los encabezados de la tabla */
.gb-rotulo {
    margin: 4px 0 8px;
    color: var(--gb-tinta-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gb-respuesta { border-left: 3px solid var(--gb-acento); }
.gb-md { color: var(--gb-tinta-2); line-height: 1.6; }
.gb-md p { margin: 0 0 8px; }
.gb-md p:last-child { margin-bottom: 0; }
.gb-md ul, .gb-md ol { margin: 6px 0 8px 0; padding-left: 22px; }
.gb-md ul { list-style: disc outside; }
.gb-md ol { list-style: decimal outside; }
.gb-md li { margin: 3px 0; }
.gb-md strong { color: var(--gb-tinta); font-weight: 600; }

.gb-aviso { border-radius: var(--gb-radio) !important; }
.gb-aviso ul { margin: 6px 0 0; padding-left: 20px; list-style: disc outside; }
.gb-vacio { margin: 8px 0; color: var(--gb-tinta-3); }
.gb-nota { margin: 0 0 12px; color: var(--gb-tinta-3); font-size: 14px; }
.gb-derecha { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }

.gb-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 12.5px;
    font-weight: 500;
}

/* ---------- pestañas (como el menú de arriba: texto gris y raya índigo en la activa) ---------- */
.gb-tabs .mud-tabs-toolbar {
    background: var(--gb-superficie);
    border-bottom: 1px solid var(--gb-linea);
    padding: 0 8px;
}

.gb-tabs .mud-tab {
    min-height: 52px;
    padding: 0 18px;
    color: var(--gb-tinta-3);
    font-family: var(--gb-letra);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    opacity: 1;
}

.gb-tabs .mud-tab:hover { color: var(--gb-tinta); background: transparent; }
.gb-tabs .mud-tab.mud-tab-active { color: var(--gb-tinta); }
.gb-tabs--chicas .mud-tab { min-width: 0; padding: 0 12px; font-size: 14px; }
.gb-tabs__panel { padding: 20px; }

/* ---------- barra de la tabla ---------- */
.gb-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gb-barra__info { color: var(--gb-tinta-3); font-size: 14px; }
.gb-barra__info b { color: var(--gb-tinta); font-weight: 600; }
.gb-barra__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.gb-opciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: var(--gb-tinta-3); }

/* ---------- tabla (igual a la de Gb app: encabezado gris claro en mayúsculas, filas con línea) ---------- */
.gb-tabla {
    border: 1px solid var(--gb-linea);
    border-radius: var(--gb-radio);
    overflow: hidden;
}

.gb-tabla .mud-table-head .mud-table-cell {
    background: var(--gb-superficie-2);
    color: var(--gb-tinta-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gb-linea);
}

.gb-tabla .mud-table-body .mud-table-cell {
    color: #4B5563;
    font-size: 14.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gb-linea);
}

.gb-tabla.mud-table-dense .mud-table-body .mud-table-cell { padding: 7px 16px; }
.gb-tabla.mud-table-dense .mud-table-head .mud-table-cell { padding: 10px 16px; }
.gb-tabla.mud-table-bordered .mud-table-cell:not(:last-child) { border-right: 1px solid var(--gb-linea); }
.gb-tabla .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none; }

/* Cifras: a la derecha y con todas las cifras del mismo ancho, para que se lean en columna */
.gb-tabla .gb-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.gb-tabla .mud-table-pagination { border-top: 1px solid var(--gb-linea); color: var(--gb-tinta-3); }
.gb-tabla .mud-table-pagination-caption, .gb-tabla .mud-select-input { font-size: 13.5px; }

/* ---------- SQL e intentos ---------- */
.gb-sql textarea { font-family: var(--gb-codigo) !important; font-size: 13.5px !important; line-height: 1.55 !important; }

.gb-lista { margin: 0 0 16px; padding-left: 20px; list-style: disc outside; color: var(--gb-tinta-2); }
.gb-lista li { margin: 3px 0; }

.gb-intento {
    margin: 8px 0;
    padding: 12px 14px;
    border: 1px solid var(--gb-linea);
    border-left-width: 3px;
    border-radius: var(--gb-radio);
    background: var(--gb-superficie-2);
}

.gb-intento--ok { border-left-color: #15803D; }
.gb-intento--error { border-left-color: #B91C1C; }
.gb-intento p { margin: 0 0 8px; white-space: pre-wrap; }
.gb-intento pre { margin: 0; white-space: pre-wrap; font-family: var(--gb-codigo); font-size: 12.5px; color: var(--gb-tinta-2); }

/* ---------- panel derecho ---------- */
.gb-lista-clic { padding: 0; border: 1px solid var(--gb-linea); border-radius: var(--gb-radio); }
.gb-lista-clic .mud-list-item { border-bottom: 1px solid var(--gb-linea); }
.gb-lista-clic .mud-list-item:last-child { border-bottom: none; }
.gb-lista-clic .mud-list-item-text p { font-size: 14px; color: var(--gb-tinta-2); }
.gb-lista-clic .mud-list-item-icon { min-width: 34px; color: var(--gb-tinta-4); }

.gb-msj { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--gb-radio); font-size: 14px; }
.gb-msj--yo { background: var(--gb-acento-suave); color: var(--gb-tinta); margin-left: 32px; }
.gb-msj--ia { background: var(--gb-superficie-2); border: 1px solid var(--gb-linea); margin-right: 32px; }

.gb-arbol .mud-treeview-item-content { font-size: 13.5px; }

/* ---------- controles de MudBlazor con la forma de la casa ---------- */
.mud-button-root { border-radius: 4px; }
.mud-button-outlined.mud-button-outlined-default { border-color: var(--gb-linea-fuerte); color: var(--gb-tinta-2); }
.mud-button-outlined.mud-button-outlined-default:hover { background: var(--gb-superficie-2); }
.mud-button-filled.mud-button-filled-primary { box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.mud-input-outlined .mud-input-outlined-border { border-radius: 4px; }
.mud-alert { border-radius: var(--gb-radio); }

/* ---------- usuario en la barra de arriba ---------- */
.gb-nav__usuario { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.gb-nav__persona {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--gb-radio);
    color: var(--gb-tinta-2);
    text-decoration: none;
}
.gb-nav__persona:hover { background: var(--gb-superficie-2); }
.gb-nav__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gb-acento-suave);
    color: #4338CA;
    font-size: 13px;
    font-weight: 600;
    flex: none;
}
.gb-nav__quien { display: flex; flex-direction: column; line-height: 1.25; }
.gb-nav__nombre { max-width: 180px; overflow: hidden; color: var(--gb-tinta); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.gb-nav__rol { color: var(--gb-tinta-3); font-size: 12px; }

@media (max-width: 900px) {
    .gb-nav__quien { display: none; }
    .gb-nav__links { gap: 0; }
    .gb-nav__link { padding: 0 10px; }
}

@media (max-width: 560px) {
    .gb-nav__link { font-size: 0; gap: 0; }   /* en el celular quedan solo los íconos */
    .gb-nav__salir .mud-button-label { font-size: 0; }
}

/* ---------- ¿la respuesta es correcta? ---------- */
.gb-calificar { padding: 14px 20px; }
.gb-calificar__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gb-calificar__pregunta { color: var(--gb-tinta); font-weight: 500; }
.gb-calificar__botones { display: flex; gap: 8px; flex-wrap: wrap; }
.gb-calificar__comentario { margin-top: 14px; }
.gb-calificar__gracias { display: inline-flex; align-items: center; gap: 8px; color: var(--gb-tinta-2); }
.gb-calificar--ok { border-left: 3px solid #15803D; }
.gb-calificar--ok .gb-calificar__gracias .mud-icon-root { color: #15803D; }
.gb-calificar--mal { border-left: 3px solid #B91C1C; }
.gb-calificar--mal .gb-calificar__gracias .mud-icon-root { color: #B91C1C; }

/* ---------- revisión (bandeja del administrador) ---------- */
.gb-cifra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--gb-linea);
    border-radius: 999px;
    background: var(--gb-superficie-2);
    color: var(--gb-tinta-3);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}
.gb-cifra:hover { border-color: var(--gb-linea-fuerte); background: var(--gb-superficie); }
.gb-cifra:focus-visible { outline: 2px solid var(--gb-acento); outline-offset: 2px; }
.gb-cifra b { color: var(--gb-tinta); font-weight: 600; }
.gb-cifra--mal b { color: #B91C1C; }
.gb-cifra--ok b { color: #15803D; }

.gb-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 20px; }
.gb-filtros > .mud-select, .gb-filtros > .mud-input-control { flex: 0 1 220px; margin: 0; }
.gb-filtros > .gb-filtros__buscar { flex: 1 1 260px; }

.gb-revision { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .gb-revision { grid-template-columns: minmax(0, 1fr); } }

.gb-items { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 300px); min-height: 200px; overflow-y: auto; padding: 2px; }
@media (max-width: 1000px) { .gb-items { max-height: 420px; } }

.gb-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--gb-linea);
    border-radius: var(--gb-radio);
    background: var(--gb-superficie);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.gb-item:hover { border-color: var(--gb-linea-fuerte); }
.gb-item:focus-visible { outline: 2px solid var(--gb-acento); outline-offset: 2px; }
.gb-item--activo { border-color: var(--gb-acento); box-shadow: 0 0 0 2px var(--gb-acento-suave); }
.gb-item > * { min-width: 0; max-width: 100%; }
.gb-item__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gb-item__chips .gb-chip { margin-left: 0; }
.gb-item__fecha { margin-left: auto; color: var(--gb-tinta-4); font-size: 12.5px; }
.gb-item__pregunta {
    display: -webkit-box;
    overflow: hidden;
    color: var(--gb-tinta);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gb-item__quien { overflow: hidden; color: var(--gb-tinta-3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.gb-chip--ok { background: #DCFCE7; color: #166534; }
.gb-chip--mal { background: #FEE2E2; color: #991B1B; }
.gb-chip--gris { background: #F3F4F6; color: #4B5563; }

.gb-detalle__pregunta { margin: 10px 0 4px; color: var(--gb-tinta); font-size: 18px; font-weight: 500; line-height: 1.4; }
.gb-cita {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--gb-acento);
    border-radius: var(--gb-radio);
    background: var(--gb-acento-suave);
    color: var(--gb-tinta);
}
.gb-cita .gb-rotulo { margin-top: 0; }
.gb-cita__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-plegable { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--gb-linea); border-radius: var(--gb-radio); }
.gb-plegable summary { color: var(--gb-tinta-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.gb-plegable[open] summary { margin-bottom: 10px; }
.gb-nota--pie { margin: 12px 0 0; }
.gb-nota--sin { margin: 0 0 8px; }
.gb-derecha--envolver { flex-wrap: wrap; }

/* ---------- usuarios y mi cuenta ---------- */
.gb-angosto { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; margin: 0 auto; }
.gb-card--chica { width: 100%; max-width: 460px; box-sizing: border-box; }
.gb-form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.gb-form-fila .mud-input-control { margin: 0; }
.gb-form-fila--dos { grid-template-columns: minmax(0, 420px); }
.gb-card--tabla { padding: 0; overflow-x: auto; }

.gb-tabla-simple { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.gb-tabla-simple th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gb-linea);
    background: var(--gb-superficie-2);
    color: var(--gb-tinta-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.gb-tabla-simple td { padding: 8px 16px; border-bottom: 1px solid var(--gb-linea); color: #4B5563; vertical-align: middle; }
.gb-tabla-simple tr:last-child td { border-bottom: none; }
.gb-tabla-simple .gb-num { text-align: right; font-variant-numeric: tabular-nums; }
.gb-fila--inactiva td { color: var(--gb-tinta-4); }
.gb-campo-tabla { min-width: 160px; margin: 0 !important; }
.gb-derecha-celda { text-align: right; white-space: nowrap; }
.gb-clave { font-family: var(--gb-codigo); letter-spacing: .04em; user-select: all; }

/* ---------- entrar (página HTML simple, fuera de Blazor: Services/Cuentas.cs) ---------- */
body.gb-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 24px 16px;
}
.gb-login__card {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 32px;
    border-radius: var(--gb-radio);
    background: var(--gb-superficie);
    box-shadow: var(--gb-sombra);
}
.gb-login__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.gb-login__marca img { display: block; width: auto; height: 35px; }
.gb-login__marca span { padding-left: 12px; border-left: 1px solid var(--gb-linea); color: var(--gb-tinta-2); font-weight: 600; }
.gb-login h1 { margin: 0; color: var(--gb-tinta); font-size: 22px; font-weight: 500; }
.gb-login__sub { margin: 4px 0 20px; color: var(--gb-tinta-3); font-size: 14px; line-height: 1.5; }
.gb-login__form { display: flex; flex-direction: column; gap: 14px; }
.gb-login__campo { display: flex; flex-direction: column; gap: 6px; color: var(--gb-tinta-2); font-size: 13px; font-weight: 500; }
.gb-login__campo input {
    padding: 10px 12px;
    border: 1px solid var(--gb-linea-fuerte);
    border-radius: 4px;
    outline: none;
    background: #FFFFFF;
    color: var(--gb-tinta);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
}
.gb-login__campo input:focus { border-color: var(--gb-acento); box-shadow: 0 0 0 3px var(--gb-acento-suave); }
.gb-login__check { display: flex; align-items: center; gap: 8px; color: var(--gb-tinta-3); font-size: 14px; }
.gb-login__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    padding: 11px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--gb-accion);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .12);
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}
.gb-login__boton:hover { background: var(--gb-tinta); }
.gb-login__boton:focus-visible { outline: 3px solid var(--gb-acento); outline-offset: 2px; }
.gb-login__error, .gb-login__ok { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--gb-radio); font-size: 14px; line-height: 1.45; }
.gb-login__error { border: 1px solid #FECACA; background: #FEF2F2; color: #991B1B; }
.gb-login__ok { border: 1px solid #BBF7D0; background: #F0FDF4; color: #166534; }
.gb-login__nota { margin: 20px 0 0; color: var(--gb-tinta-3); font-size: 13px; line-height: 1.5; }