/* Escuela Digital 360 — diseño nuevo — todas las pantallas (docente, estudiante, acudiente, rector y Secretaría). Valores de la guía de estilo.
   Se pone encima del diseño actual: si se quita este archivo, todo vuelve a como estaba. */
/* Letra del texto: Source Sans 3 (OFL), recortada al español y renombrada «ED360 Texto» (16 de octubre de 2026). Antes: Atkinson Hyperlegible. */
@font-face { font-family: "ED360 Texto"; src: url(/fuentes/texto-400.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ED360 Texto"; src: url(/fuentes/texto-600.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ED360 Texto"; src: url(/fuentes/texto-700.woff) format("woff"); font-weight: 700; font-display: swap; }
:root {
  --fondo: #f2f5fa; --superficie: #ffffff; --superficie-marca: #e4eefb; --tinta: #10282b; --tinta-2: #4a6265;
  --linea: #d5deea; --linea-control: #7d8fa3; --marca: #0b4fa8; --sobre-marca: #ffffff; --acento: #4cb511; --acento-icono: #3e9e0c;
  --peligro: #c93c36; --peligro-suave: #f8d9d6; --peligro-texto: #a32a25; --exito: #2e8b57; --exito-suave: #ddf1e5; --exito-texto: #1e6b41;
  --aviso: #b98900; --aviso-suave: #fbf0cf; --aviso-texto: #7a5b00;
  --radio-control: 10px; --radio-tarjeta: 16px; --radio-pildora: 999px;
  /* Las variables viejas apuntan a las nuevas */
  --bg: var(--fondo); --surface: var(--superficie); --ink: var(--tinta); --ink-2: var(--tinta-2); --line: var(--linea); --brand: var(--marca); --brand-2: var(--superficie-marca);
}
html body, html body button, html body input, html body select, html body textarea { font-family: "ED360 Texto", "Segoe UI", Verdana, sans-serif; }
html body { background: var(--fondo); color: var(--tinta); font-size: 15px; line-height: 22px; }

/* Menú lateral: blanco, tranquilo y agrupado por tareas.
   Íconos en un solo color; la opción abierta en azul suave. Los grupos siguen el orden del menú. */
html body .tb-lado { background: var(--superficie); border-right: 1px solid var(--linea); }
html body .tb-lado .pest button svg.ico { color: var(--tinta-2); }
html body .tb-lado .pest button.on svg.ico { color: var(--marca) !important; stroke: var(--marca) !important; }
html body .tb-lado .pest button.on { background: var(--superficie-marca); color: var(--marca); box-shadow: none; }
html body .tb-lado .pest button .tb-n, html body .tb-lado .pest button.on .tb-n { background: var(--peligro); color: var(--superficie); font-size: 12px; font-weight: 700; }
@media (min-width: 861px) {
  html body .tb-lado { gap: 16px; padding-top: 20px; }
  html body .tb-marca { padding: 0 8px 16px; border-bottom: 1px solid var(--linea); }
  html body .tb-marca img { width: 40px; height: 40px; }
  html body .tb-marca b { font-size: 14px; line-height: 20px; white-space: nowrap; }
  html body .tb-marca small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--tinta-2); }
  /* Docente / Director de grupo: dos opciones de texto con subrayado */
  html body .tb-seg { background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 0; gap: 0; }
  html body .tb-seg button { background: transparent; border-radius: 0; font-size: 13px; font-weight: 700; color: var(--tinta-2); min-height: 40px; box-shadow: inset 0 -2px 0 transparent; }
  html body .tb-seg button.on { background: transparent; color: var(--marca); box-shadow: inset 0 -2px 0 var(--marca); }
  html body .tb-sede span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
  html body .tb-sede select { border-color: var(--linea-control); border-radius: var(--radio-control); font-size: 14px; }
  /* Opciones del menú */
  html body .tb-lado .pest { gap: 2px; padding-bottom: 8px; }
  html body .tb-lado .pest button { position: relative; font-size: 15px; font-weight: 400; color: var(--tinta); padding: 6px 10px; min-height: 34px; border-radius: 8px; }
  html body .tb-lado .pest button:hover { background: var(--fondo); }
  html body .tb-lado .pest button.on { font-weight: 700; }
  /* Rótulos de grupo (siguen el orden del menú, así el teclado y el lector de pantalla no se pierden) */
  html body #pest[aria-label="Menú del docente"] button[data-v="vGrupo"],
  html body #pest[aria-label="Menú del docente"] button[data-v="vInicio"],
  html body #pest[aria-label="Menú del docente"] button[data-v="vPlan"],
  html body #pest[aria-label="Menú del docente"] button[data-v="vNotas"],
  html body #pest[aria-label="Menú del docente"] button[data-v="vAula"],
  html body #pest[aria-label="Menú del docente"] button[data-v="vObs"],
  html body #pest[aria-label="Menú del docente"] button[data-v="vMsj"],
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vInicio"],
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vAula"],
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vObs"],
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vConv"] { margin-top: 26px; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vGrupo"]::before,
  html body #pest[aria-label="Menú del docente"] button[data-v="vInicio"]::before,
  html body #pest[aria-label="Menú del docente"] button[data-v="vPlan"]::before,
  html body #pest[aria-label="Menú del docente"] button[data-v="vNotas"]::before,
  html body #pest[aria-label="Menú del docente"] button[data-v="vAula"]::before,
  html body #pest[aria-label="Menú del docente"] button[data-v="vObs"]::before,
  html body #pest[aria-label="Menú del docente"] button[data-v="vMsj"]::before,
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vInicio"]::before,
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vAula"]::before,
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vObs"]::before,
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vConv"]::before { position: absolute; left: 10px; top: -21px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); pointer-events: none; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vGrupo"]::before { content: "Dirección de grupo"; content: "Dirección de grupo" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vInicio"]::before { content: "Mi día"; content: "Mi día" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vPlan"]::before { content: "Planear"; content: "Planear" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vNotas"]::before { content: "Evaluar"; content: "Evaluar" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vAula"]::before { content: "En clase"; content: "En clase" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vObs"]::before { content: "Acompañar"; content: "Acompañar" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vMsj"]::before { content: "Comunicación"; content: "Comunicación" / ""; }
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vInicio"]::before { content: "Mi día"; content: "Mi día" / ""; }
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vAula"]::before { content: "Mis clases"; content: "Mis clases" / ""; }
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vObs"]::before { content: "Mi camino"; content: "Mi camino" / ""; }
  html body #pest[aria-label="Menú del estudiante"] button[data-v="vConv"]::before { content: "Ayuda y mensajes"; content: "Ayuda y mensajes" / ""; }
  html body #pest[aria-label="Menú del docente"] button[data-v="vInicio"], html body #pest[aria-label="Menú del docente"] button[data-v="vGrupo"], html body #pest[aria-label="Menú del estudiante"] button[data-v="vInicio"] { margin-top: 20px; }
}

/* Barra de arriba */
html body .tb-arriba { background: var(--fondo); border-bottom: 1px solid var(--linea); }

/* Secciones de la página: pestañas con subrayado, no una fila de píldoras */
html body .sc-barra { gap: 0; border-bottom: 1px solid var(--linea); padding: 0; margin-bottom: 24px; background: var(--fondo); }
html body .sc-barra button { background: transparent; border: 0; border-radius: 0; color: var(--tinta-2); font-weight: 700; font-size: 15px; padding: 10px 14px; min-height: 44px; box-shadow: inset 0 -3px 0 transparent; }
html body .sc-barra button:hover { color: var(--tinta); border-color: transparent; }
html body .sc-barra button.on, html body .sc-barra button.sc-todo.on { background: transparent; color: var(--marca); box-shadow: inset 0 -3px 0 var(--acento); }
html body .sc-barra button.sc-todo { margin-left: auto; font-weight: 400; }

/* Saludo: un título de página, sin cartel degradado ni adornos */
html body .tb-hola { background: var(--fondo) !important; color: var(--tinta); border: 0; padding: 4px 0 0; box-shadow: none; }
html body .tb-hola .tb-deco, html body .tb-hola .tb-av { display: none; }
html body .tb-hola h1 { color: var(--tinta); font-size: 26px; line-height: 32px; margin: 0 0 6px; }
html body .tb-hola p { color: var(--tinta-2); opacity: 1; font-size: 15px; }
html body .tb-hola .tb-chip { background: var(--exito-suave); color: var(--exito-texto); border: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; margin-top: 14px; }
html body .tb-hola .tb-chip i { background: var(--exito); }

/* Cifras: rótulo arriba, número grande; sin cuadritos de colores */
html body .tb-kpi { border-radius: var(--radio-tarjeta); border-color: var(--linea); padding: 16px; align-items: flex-start; }
html body .tb-kpi .ic { display: none; }
html body .tb-kpi > div { display: flex; flex-direction: column-reverse; gap: 4px; }
html body .tb-kpi b { font-size: 30px; line-height: 34px; }
html body .tb-kpi span { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
html body .tb-kpi.a b { color: var(--aviso-texto); }

/* Tarjetas */
html body .tb-c { border-radius: var(--radio-tarjeta); border-color: var(--linea); padding: 24px; box-shadow: none; }
html body .tb-cab h2 { font-size: 18px; line-height: 24px; }
html body .tb-cab h2 svg { color: var(--acento-icono); }
html body .tb-link { font-size: 15px; color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }

/* Clases de hoy: tarjetas iguales, la hora como dato principal */
html body .tb-hb { border: 1px solid var(--linea) !important; border-radius: var(--radio-control); padding: 12px 14px; gap: 2px; }
html body .tb-hb .h { font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; }
html body .tb-hb .t { font-weight: 700; }
html body .tb-hb .s { color: var(--tinta-2); font-size: 13px; }

/* Etiquetas de estado */
html body .tb-pill { border: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; margin-top: 6px; }
html body .tb-pill.a { background: var(--aviso-suave); color: var(--aviso-texto); }
html body .tb-pill.r { background: var(--peligro-suave); color: var(--peligro-texto); }
html body .tb-pill.v { background: var(--exito-suave); color: var(--exito-texto); }

/* Avatar y campana */
html body .mp-boton { border-radius: var(--radio-pildora); border-color: var(--linea); }
html body .mp-av { background: var(--marca); color: var(--sobre-marca); }
html body .tb-pill { text-transform: none; letter-spacing: 0; font-size: 13px; white-space: nowrap; }
html body .tb-hb .h { white-space: nowrap; font-size: 14px; }
html body .tb-hoy { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }

/* ===================================================================
   Pantallas del rector y de la Secretaría (14 de octubre de 2026)
   =================================================================== */

/* Barra de arriba: blanca y baja. Logo y nombre a la izquierda, escudo y nombre del colegio,
   y a la derecha la campana y el avatar. Sin lemas, sin degradado y sin panel azul en diagonal. */
html body header.top.bn { min-height: 64px; background: var(--superficie); color: var(--tinta); border-bottom: 1px solid var(--linea); box-shadow: none; }
html body header.top.bn .bn-lema1, html body header.top.bn .bn-lema2 { display: none; }
html body header.top.bn .bn-marca { padding: 8px 12px 8px 20px; gap: 10px; }
html body header.top.bn .logo-barra { width: 44px; height: 44px; filter: none; }
html body header.top.bn .t { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 16px; font-weight: 700; color: var(--tinta); white-space: nowrap; }
html body header.top.bn .bn-colegio { justify-content: flex-start; gap: 10px; padding: 0 16px; border-left: 1px solid var(--linea); margin: 12px 0; }
html body header.top.bn .bn-escudo .mc-enbarra { height: 40px; max-width: 64px; filter: none; }
html body header.top.bn .bn-nombre { font-size: 16px; font-weight: 700; color: var(--tinta); -webkit-line-clamp: 1; max-width: 520px; }
html body header.top.bn .bn-azul { filter: none; }
html body header.top.bn .bn-azul-in { background: transparent; clip-path: none; color: var(--tinta); padding: 0 20px 0 12px; }
html body header.top.bn .c { color: var(--tinta-2); opacity: 1; font-weight: 400; }
html body header.top.bn button { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); font-weight: 700; }
html body header.top.bn button:hover { background: var(--fondo); }
html body header.top.bn select { border: 1px solid var(--linea-control); border-radius: var(--radio-control); }
@media (max-width: 900px) {
  html body header.top.bn { background: var(--superficie); color: var(--tinta); }
  html body header.top.bn .bn-claro { background: transparent; border-radius: 0; }
  html body header.top.bn .t { display: none; }
  html body header.top.bn .bn-colegio { border-left: 0; margin: 0; }
}

/* Menú desplegable: fila blanca; el grupo abierto se subraya en verde, sin bloques de color */
html body .ml-lado { background: var(--superficie); border-bottom: 1px solid var(--linea); padding: 0 16px; }
@media (min-width: 901px) {
  html body nav.tabs#tabs { gap: 0 4px; }
  html body nav.tabs#tabs > button, html body nav.tabs#tabs .ml-gb { font-size: 15px; font-weight: 700; color: var(--tinta-2); padding: 10px 12px; min-height: 52px; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -3px 0 transparent; }
  html body nav.tabs#tabs > button:hover, html body nav.tabs#tabs .ml-gb:hover { background: transparent; color: var(--tinta); border-color: transparent; }
  html body nav.tabs#tabs > button.on, html body nav.tabs#tabs .ml-g.actual > .ml-gb { background: transparent; color: var(--marca); box-shadow: inset 0 -3px 0 var(--acento); }
  html body nav.tabs#tabs .ml-g.abierto > .ml-gb { background: var(--fondo); color: var(--marca); border-color: transparent; }
  html body nav.tabs#tabs > button svg.ico, html body nav.tabs#tabs .ml-gb svg.ico { color: var(--tinta-2); }
  html body nav.tabs#tabs > button.on svg.ico, html body nav.tabs#tabs .ml-g.actual > .ml-gb svg.ico, html body nav.tabs#tabs .ml-g.abierto > .ml-gb svg.ico { color: var(--marca); }
  /* La lista que baja */
  html body nav.tabs#tabs .ml-p { top: 100%; border-radius: var(--radio-control); border-color: var(--linea); box-shadow: 0 6px 24px rgba(16,40,43,.18); padding: 6px; }
  html body nav.tabs#tabs .ml-p button { font-size: 15px; font-weight: 400; color: var(--tinta); min-height: 38px; padding: 8px 10px; border-radius: 8px; }
  html body nav.tabs#tabs .ml-p button svg.ico { color: var(--tinta-2); }
  html body nav.tabs#tabs .ml-p button:hover { background: var(--fondo); }
  html body nav.tabs#tabs .ml-p button.on { background: var(--superficie-marca); color: var(--marca); font-weight: 700; }
  html body nav.tabs#tabs .ml-p button.on svg.ico { color: var(--marca); }
}
html body .ml-lado .ml-n { background: var(--peligro); color: var(--superficie); font-size: 12px; font-weight: 700; }

/* Contenido */
html body main#vista { padding-top: 24px; }
html body .card { border-radius: var(--radio-tarjeta); border-color: var(--linea); box-shadow: none; }
html body .card h2 { font-size: 18px; line-height: 24px; }
html body .tiles { gap: 12px; }
html body .tile { border-radius: var(--radio-tarjeta); border-color: var(--linea); padding: 16px; display: flex; flex-direction: column-reverse; gap: 4px; }
html body .tile b { font-size: 30px; line-height: 34px; color: var(--tinta); font-variant-numeric: tabular-nums; }
html body .tile span { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
/* Tarjeta de la licencia: sin la franja de color a la izquierda; el estado lo dice su etiqueta */
html body .lic-t { border-left: 1px solid var(--linea) !important; }
/* Botones de las pantallas del rector y la Secretaría */
html body main#vista button:not(.alt):not(.sm):not(.peligro):not([role="tab"]) { border-radius: var(--radio-control); }
html body button.alt { border-color: var(--linea-control); color: var(--marca); }
html body table th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }

/* ===================================================================
   Pestañas dentro de las páginas: el mismo estilo que el menú
   (subrayado verde en la que está abierta, sin píldoras azules)
   =================================================================== */
html body .ui-pest, html body .hr-tabs, html body .sc-barra.sc-sub, html body main .pest:not(#pest):not(#acPest) {
  gap: 0; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent; padding: 0; margin: 0 0 16px;
}
html body .ui-pest button, html body .hr-tabs button, html body .sc-barra.sc-sub button, html body main .pest:not(#pest):not(#acPest) button {
  background: transparent; border: 0; border-radius: 0; color: var(--tinta-2); font-size: 15px; font-weight: 700; padding: 10px 14px; min-height: 44px; box-shadow: inset 0 -3px 0 transparent;
}
html body .ui-pest button:hover, html body .hr-tabs button:hover, html body .sc-barra.sc-sub button:hover, html body main .pest:not(#pest):not(#acPest) button:hover { color: var(--tinta); background: transparent; }
html body .ui-pest button.on, html body .hr-tabs button.on, html body .sc-barra.sc-sub button.on, html body main .pest:not(#pest):not(#acPest) button.on {
  background: transparent; color: var(--marca); border-color: transparent; box-shadow: inset 0 -3px 0 var(--acento);
}

/* ===================================================================
   Gráficas: una paleta suave y de la misma familia.
   Desempeños de menor a mayor: coral suave, arena, azul claro y azul.
   =================================================================== */
:root { --g-bajo: #d9827a; --g-basico: #e8c46a; --g-alto: #8db8e8; --g-superior: #2f67b8; --g-barra: #6e9bdb; --g-verde: #5fa27d; --g-morado: #9b86d9; }
/* Rector: estudiantes por grado y promedio por materia */
html body .gv-bar { background: var(--g-barra); border-radius: 6px 6px 0 0; }
html body .gv-col:hover .gv-bar { filter: none; background: var(--marca); }
html body .gm-pista { background: var(--fondo); border-radius: 999px; }
html body .gm-bar { background: var(--g-barra); border-radius: 999px; }
html body .gm-bar.baja { background: var(--g-bajo); }
html body .gm-fila:hover .gm-bar { filter: none; background: var(--marca); }
html body .gm-fila:hover .gm-bar.baja { background: var(--peligro); }
/* Rector: desempeño por periodo (los colores vienen escritos en cada barra) */
html body .gh-seg[style*="#C93C36"], html body .gl i[style*="#C93C36"] { background: var(--g-bajo) !important; }
html body .gh-seg[style*="#E9A23B"], html body .gl i[style*="#E9A23B"] { background: var(--g-basico) !important; }
html body .gh-seg[style*="#6FA0E0"], html body .gl i[style*="#6FA0E0"] { background: var(--g-alto) !important; }
html body .gh-seg[style*="#0B4FA8"], html body .gl i[style*="#0B4FA8"] { background: var(--g-superior) !important; }
html body .gh-seg span, html body .gh-seg span.osc { color: var(--tinta); }
html body .gh-seg[style*="#0B4FA8"] span { color: var(--superficie); }
html body .gh-barra { gap: 2px; border-radius: 999px; background: var(--fondo); }
html body .gh-seg:hover { filter: brightness(.95); }
/* Docente y estudiante: barras de notas, leyenda, calendario y anillos */
html body .tb-bar .p i { background: var(--g-barra); }
html body .tb-bar .p i.bajo, html body .tb-ley i[style*="#C93C36"] { background: var(--g-bajo) !important; }
html body .tb-bar .p i.basico, html body .tb-ley i[style*="#C99A00"] { background: var(--g-basico) !important; }
html body .tb-bar .p i.alto, html body .tb-ley i[style*="#2E8B57"] { background: var(--g-alto) !important; }
html body .tb-bar .p i.superior, html body .tb-ley i[style*="var(--brand)"] { background: var(--g-superior) !important; }
html body .tb-cal .k-entrega { background: var(--g-basico); }
html body .tb-cal .k-evaluacion { background: var(--g-morado); }
html body .tb-cal .k-periodo { background: var(--g-verde); }
html body .tb-cal .k-festivo { background: var(--g-bajo); }
html body .tb-anillo circle[stroke="#2E8B57"] { stroke: var(--g-verde); }
html body .tb-anillo circle[stroke="#C99A00"] { stroke: var(--g-basico); }
html body .tb-anillo circle[stroke="#7A55D6"] { stroke: var(--g-morado); }
html body .tb-anillo circle[stroke="var(--brand)"] { stroke: var(--g-superior); }

/* ===================================================================
   Más compacto (14 oct, 9:10 a. m.): cifras y tarjetas más pequeñas, menos espacio vacío
   =================================================================== */
html body .tiles, html body .tb-kpis { gap: 10px; margin-bottom: 14px; }
html body .tile, html body .tb-kpi { padding: 10px 14px; border-radius: 12px; gap: 2px; }
html body .tile b, html body .tb-kpi b { font-size: 22px; line-height: 26px; }
html body .tile span, html body .tb-kpi span { font-size: 11px; line-height: 14px; }
html body .card, html body .tb-c { padding: 18px 20px; border-radius: 14px; }
html body .card h2, html body .tb-cab h2 { font-size: 17px; line-height: 22px; margin-bottom: 2px; }
html body .card p.muted { margin: 2px 0 12px; }
html body .sc-barra { margin-bottom: 14px; }
html body .sc-barra button { min-height: 40px; padding: 8px 12px; font-size: 14px; }
html body main#vista { padding-top: 16px; }
html body .tb-hola h1 { font-size: 22px; line-height: 28px; }
html body .gl { margin-bottom: 10px; }
html body .gh { margin-bottom: 10px; }
html body .gh-barra { height: 22px; }

/* ===================================================================
   Menú del rector y de la Secretaría: los mismos efectos de botón que el menú
   del docente y del estudiante (14 oct, 9:30 a. m.). Solo cambia el efecto:
   al pasar el mouse, fondo gris claro; el botón elegido, fondo azul suave,
   letra azul en negrilla e ícono azul. Sin subrayado verde.
   =================================================================== */
@media (min-width: 901px) {
  html body nav.tabs#tabs { padding: 6px 0; gap: 2px 4px; }
  html body nav.tabs#tabs > button, html body nav.tabs#tabs .ml-gb {
    min-height: 38px; padding: 6px 12px; border-radius: 8px; font-weight: 400; color: var(--tinta); box-shadow: none;
  }
  html body nav.tabs#tabs > button:hover, html body nav.tabs#tabs .ml-gb:hover { background: var(--fondo); color: var(--tinta); }
  html body nav.tabs#tabs > button.on, html body nav.tabs#tabs .ml-g.actual > .ml-gb, html body nav.tabs#tabs .ml-g.abierto > .ml-gb {
    background: var(--superficie-marca); color: var(--marca); font-weight: 700; box-shadow: none;
  }
  html body nav.tabs#tabs > button.on svg.ico, html body nav.tabs#tabs .ml-g.actual > .ml-gb svg.ico, html body nav.tabs#tabs .ml-g.abierto > .ml-gb svg.ico { color: var(--marca); }
  html body nav.tabs#tabs .ml-p button { border-radius: 8px; }
}