/* Copiada tal cual de gemind.app el 16-09-2026 (docs-ia/referencias/gemind/css/gm-tokens-componentes.css).
No se edita aquí: lo propio del aula va en aula.css. Si el patrón cambia, se vuelve a copiar. */
/* =====================================================================
GEMIND — tokens y componentes del patrón de diseño, en limpio
---------------------------------------------------------------------
Extraído el 16-09-2026 de VPS-GEMIND para otro proyecto.
De dónde sale:
- Tokens y piezas: página de muestras del patrón aprobado por Mikel el
03-09-2026 (/opt/diseno-homogeneo/docs-ia/capturas/patron-muestras.html).
- Puesto al día con lo que se cambió después y ya está en producción:
la PESTAÑA (09-09-2026, tres señales en la activa) y el FOCO del
botón (halo con box-shadow, no outline).
Qué NO es: no es una copia de las hojas de producción de gemind.app.
Aquellas (carpeta produccion-gemind-no-copiar/) reescriben con
!important los selectores de 25 plugins viejos; en un proyecto nuevo no
sirven. Esta hoja es el patrón tal cual, sin !important, para usarlo
con las clases gm-*.
Fuentes (Google Fonts, no hay ficheros propios). Cargar UNA vez:
===================================================================== */
/* =====================================================================
1. TOKENS
===================================================================== */
:root {
/* Interfaz (ROSA de edootek desde el 29-09-2026, decisión de Mikel del 28-09; en gemind es turquesa #00c4cc).
Los 9 tokens que cambian vienen de la prueba paleta-rosa.css (hoy en _archivo/ del tema).
El claro NO contrasta como texto sobre blanco: para texto, el oscuro. */
--gm-primary: #cf386d; /* el rosa de edootek.com */
--gm-primary-dark: #a82b58; /* cabecera, títulos, enlaces: blanco encima cumple contraste */
--gm-primary-light: #e0678f;
--gm-primary-subtle: #fbeaf0; /* SÓLIDO. En el tema de gemind es rgba(0,196,204,.1): trampa conocida */
/* Contraste: azul petróleo del logo de Edootek (decisión de Mikel, 28-09-2026, el mismo de edootek.info). Títulos de
sección de la portada. Blanco encima y encima de blanco cumplen contraste. */
--gm-contraste: #124d68;
/* Acento (naranja del logo). NO es botón de trabajo: comercial, modo alumno, etiqueta de IA */
--gm-secondary: #fab43a;
--gm-secondary-dark: #f09a1a;
--gm-secondary-light: #ffc55a;
--gm-secondary-subtle: #fff4de; /* SÓLIDO (misma trampa que el primary-subtle) */
/* La única escala de grises (Tailwind gray). Nada de slate. */
--gm-gray-50: #f9fafb; --gm-gray-100: #f3f4f6; --gm-gray-200: #e5e7eb; --gm-gray-300: #d1d5db;
--gm-gray-400: #9ca3af; --gm-gray-500: #6b7280; --gm-gray-600: #4b5563; --gm-gray-700: #374151;
--gm-gray-800: #1f2937; --gm-gray-900: #111827;
/* Fondos */
--gm-fondo-pagina: #f7f3f5; /* gris cálido: el gris azulado de gemind (#f2f5f6) chocaba con el rosa */
--gm-fondo-pie: #f6e4eb;
--gm-superficie: #ffffff;
/* Estados: color · fondo suave · texto oscuro. Los -subtle son FONDOS, nunca texto. */
--gm-success: #10b981; --gm-success-subtle: #d1fae5; --gm-success-text: #065f46;
--gm-warning: #f59e0b; --gm-warning-subtle: #fef3c7; --gm-warning-text: #92400e;
--gm-error: #ef4444; --gm-error-subtle: #fee2e2; --gm-error-text: #991b1b;
--gm-info: #a82b58; --gm-info-subtle: #fbeaf0; --gm-info-text: #6e1b3a;
/* Texto */
--gm-texto: #111827; /* títulos */
--gm-texto-2: #374151; /* texto */
--gm-texto-suave: #6b7280; /* secundario, ayudas */
/* Colores de área cognitiva: son FUNCIÓN, no decoración. Se conservan. */
--gm-area-atencion: #C2185B;
--gm-area-memoria: #8E24AA;
--gm-area-velocidad: #2E7D32;
--gm-area-instrucciones-escritas: #5DADE2;
--gm-area-conceptos-basicos: #D4A017;
--gm-area-orientacion-espacial: #2E86C1;
--gm-area-lectura-discriminacion: #E67E22;
--gm-area-lectura-comprension: #EF6609;
--gm-area-lectura-velocidad: #C62828;
--gm-area-lectura-construccion: #1976D2;
--gm-area-numeracion: #16A085;
/* Tipografía: Nunito siempre */
--gm-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
--gm-t-xxl: 32px; /* 800 portada, landing */
--gm-t-xl: 26px; /* 800 título de página y de panel */
--gm-t-lg: 22px; /* 800 título de sección */
--gm-t-md: 18px; /* 700 título de tarjeta (modal 20) */
--gm-t-base: 16px; /* 400 texto de lectura, máx. 72ch */
/* 15 = interfaz: botones, pestañas, celdas, campos (400-600) */
--gm-t-sm: 14px; /* 600 etiquetas de campo, notas */
--gm-t-xs: 13px; /* 400 ayudas, fechas, contadores */
--gm-t-label: 12px; /* 700 MAYÚSCULAS, letter-spacing .06em: cabecera de tabla, etiqueta de bloque */
/* Espacio. Mínimos de aire: 32 entre bloques · 16 dentro de un grupo · 24 al borde · 28 instrucción→control */
--gm-sp-1: 4px; --gm-sp-2: 8px; --gm-sp-3: 12px; --gm-sp-4: 16px;
--gm-sp-5: 24px; --gm-sp-6: 32px; --gm-sp-7: 40px; --gm-sp-8: 48px;
/* Radios: no hay 10, ni 14, ni 20 */
--gm-radius-sm: 6px; /* píldora pequeña */
--gm-radius-md: 8px; /* botones, campos, avisos */
--gm-radius-lg: 12px; /* tarjetas */
--gm-radius-xl: 16px; /* paneles, modales */
--gm-radius-pill: 999px;
/* Sombras: sm tarjetas · md paneles y tarjeta al pasar · lg modales */
--gm-shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.08);
--gm-shadow-md: 0 4px 6px -1px rgba(17,24,39,.08), 0 10px 24px -12px rgba(17,24,39,.18);
--gm-shadow-lg: 0 20px 40px -12px rgba(17,24,39,.28);
/* Anchos */
--gm-ancho-panel: 1400px;
--gm-ancho-lectura: 72ch;
--gm-ancho-modal: 560px; /* 720 el selector de alumnos */
/* Foco y tiempos */
--gm-halo-foco: 0 0 0 3px rgba(207,56,109,.35);
--gm-halo-campo: 0 0 0 3px rgba(207,56,109,.2);
--gm-transition: .15s ease;
}
/* =====================================================================
2. BASE
===================================================================== */
body {
margin: 0;
background: var(--gm-fondo-pagina);
color: var(--gm-texto);
font-family: var(--gm-font-family);
font-size: 16px;
line-height: 1.5;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* =====================================================================
3. COMPONENTES
===================================================================== */
/* ---- Botón ----------------------------------------------------------
Alto 44 (36 -sm, 52 -lg), relleno 0 20, radio 8, 15/600, borde 1,5.
UNA acción principal por pantalla. Tres estados SIEMPRE: reposo, hover y foco. */
.gm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 20px; border-radius: var(--gm-radius-md);
font: 600 15px/1 var(--gm-font-family);
border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background var(--gm-transition), color var(--gm-transition), border-color var(--gm-transition), box-shadow var(--gm-transition);
}
.gm-btn .material-symbols-outlined { font-size: 20px; }
.gm-btn:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.gm-btn:disabled, .gm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.gm-btn-primary { background: var(--gm-primary); color: #fff; border-color: var(--gm-primary); }
.gm-btn-primary:hover { background: var(--gm-primary-dark); border-color: var(--gm-primary-dark); }
.gm-btn-secondary { background: #fff; color: var(--gm-primary-dark); border-color: var(--gm-primary); }
.gm-btn-secondary:hover { background: var(--gm-primary-subtle); }
.gm-btn-neutral { background: #fff; color: var(--gm-texto-2); border-color: var(--gm-gray-300); } /* cancelar, volver */
.gm-btn-neutral:hover { background: var(--gm-gray-50); border-color: var(--gm-gray-400); }
/* Peligro, siempre con confirmación. Borde GRIS en el aula (29-09-2026): con el rosa, el borde rojo de gemind se
confundía con el de «Editar» (secundario). Lo distinguen el borde, el texto rojo y el icono de papelera. */
.gm-btn-danger { background: #fff; color: var(--gm-error-text); border-color: var(--gm-gray-300); }
.gm-btn-danger:hover { background: var(--gm-error); color: #fff; border-color: var(--gm-error); }
.gm-btn-ghost { background: transparent; color: var(--gm-primary-dark); border-color: transparent; }
.gm-btn-ghost:hover { background: var(--gm-primary-subtle); }
.gm-btn-acento { background: var(--gm-secondary); color: var(--gm-gray-900); border-color: var(--gm-secondary); border-radius: var(--gm-radius-pill); } /* SOLO comercial */
.gm-btn-acento:hover { background: var(--gm-secondary-light); border-color: var(--gm-secondary-light); }
.gm-btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.gm-btn-sm .material-symbols-outlined { font-size: 18px; }
.gm-btn-lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.gm-btn-icon { width: 44px; padding: 0; }
/* ---- Tarjeta --------------------------------------------------------
Blanca, borde 1 gris 200, radio 12, sombra sm, relleno 24.
Si el color de una tarjeta SIGNIFICA algo (área, estado), se respeta. */
.gm-card { background: var(--gm-superficie); border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); box-shadow: var(--gm-shadow-sm); padding: 24px; }
.gm-card-hover { transition: box-shadow var(--gm-transition), border-color var(--gm-transition); }
.gm-card-hover:hover { box-shadow: var(--gm-shadow-md); border-color: var(--gm-primary-light); }
.gm-card-titulo { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--gm-texto); }
.gm-card-texto { margin: 0; color: var(--gm-texto-suave); font-size: 15px; }
/* Tile: la tarjeta con icono grande y texto centrado (accesos de la home) */
.gm-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px 16px; text-decoration: none; color: var(--gm-texto); font-weight: 700; font-size: 15px; }
.gm-tile .material-symbols-outlined { font-size: 36px; color: var(--gm-primary-dark); }
/* Portada de nivel: cabecera del color del área (--ac), número grande */
.gm-nivel { border-radius: var(--gm-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--gm-gray-200); box-shadow: var(--gm-shadow-sm); }
.gm-nivel-cab { --ac: var(--gm-area-atencion); background: var(--ac); color: #fff; padding: 16px 16px 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; min-height: 104px; }
.gm-nivel-cab .t { font-weight: 800; font-size: 15px; line-height: 1.15; }
.gm-nivel-cab .n { font-size: 56px; font-weight: 800; line-height: .85; }
.gm-nivel-cab .l { font-size: 12px; font-weight: 700; opacity: .9; margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.gm-nivel-pie { padding: 10px 12px; font-size: 13px; color: var(--gm-texto-suave); text-align: center; }
/* ---- Título de página ----------------------------------------------
Toda pantalla tiene el suyo, arriba y sin hueco encima: 26/800 con icono de 28. */
.gm-page-title { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--gm-texto); letter-spacing: -.01em; }
.gm-page-title .material-symbols-outlined { font-size: 28px; color: var(--gm-primary-dark); }
.gm-page-title small { font-size: 18px; font-weight: 600; color: var(--gm-primary-dark); }
/* ---- Panel de módulo (título + pestañas + cuerpo) ------------------- */
.gm-panel { max-width: var(--gm-ancho-panel); margin: 0 auto; background: #fff; border-radius: var(--gm-radius-xl); box-shadow: var(--gm-shadow-md); overflow: hidden; }
.gm-panel-cab { padding: 24px 32px 0; }
.gm-panel-cab .gm-page-title { margin-bottom: 16px; }
.gm-panel-cuerpo { padding: 32px; }
/* ---- Pestañas (versión del 09-09-2026) ------------------------------
SUBRAYADAS, nunca píldora. La activa lleva TRES señales a la vez
(texto gris 900 en 800 + fondo turquesa suave + línea de 4 turquesa oscuro):
con una sola no se distingue (medido: 3,08:1 → 17,7:1). */
.gm-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--gm-gray-200); overflow-x: auto; }
.gm-panel-cab + .gm-tabs, .gm-panel .gm-tabs { padding: 0 32px; }
.gm-tab {
display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px;
font: 600 15px var(--gm-font-family); color: var(--gm-gray-500);
background: none; border: 0; border-bottom: 4px solid transparent; border-radius: 8px 8px 0 0;
margin-bottom: -2px; cursor: pointer; white-space: nowrap;
}
.gm-tab .material-symbols-outlined { font-size: 20px; }
.gm-tab:not(.activa):hover { color: var(--gm-gray-700); background: var(--gm-gray-50); }
.gm-tab:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.gm-tab.activa { color: var(--gm-gray-900); font-weight: 800; background: var(--gm-primary-subtle); border-bottom-color: var(--gm-primary-dark); }
/* Contador dentro de la pestaña: sobre la activa se rellena (en suave choca con el fondo) */
.gm-tab-contador { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; align-items: center; justify-content: center; border-radius: var(--gm-radius-pill); background: var(--gm-primary-subtle); color: var(--gm-info-text); font-size: 12px; font-weight: 700; }
.gm-tab.activa .gm-tab-contador { background: var(--gm-primary-dark); color: #fff; }
/* ---- Campo ----------------------------------------------------------
Alto 44, relleno 0 14, borde 1,5 gris 300, radio 8, fondo BLANCO siempre, 15/400.
Etiqueta 14/600 encima; ayuda 13 debajo. El error dice QUÉ ARREGLAR. */
.gm-campo { margin-bottom: 24px; }
.gm-label { display: block; font-size: 14px; font-weight: 600; color: var(--gm-texto-2); margin-bottom: 8px; }
.gm-input, .gm-select, .gm-textarea {
width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px;
border: 1.5px solid var(--gm-gray-300); border-radius: var(--gm-radius-md); background: #fff;
font: 400 15px var(--gm-font-family); color: var(--gm-texto);
transition: border-color var(--gm-transition), box-shadow var(--gm-transition);
}
.gm-textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.gm-input:focus, .gm-select:focus, .gm-textarea:focus { outline: none; border-color: var(--gm-primary); box-shadow: var(--gm-halo-campo); }
.gm-input.error, .gm-select.error, .gm-textarea.error { border-color: var(--gm-error); }
.gm-help { font-size: 13px; color: var(--gm-texto-suave); margin: 8px 0 0; }
.gm-help.error { color: var(--gm-error-text); }
.gm-campo-icono { position: relative; }
.gm-campo-icono .material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gm-gray-400); font-size: 20px; }
.gm-campo-icono .gm-input { padding-left: 42px; }
.gm-check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--gm-texto-2); cursor: pointer; }
.gm-check input { width: 20px; height: 20px; accent-color: var(--gm-primary-dark); }
.gm-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--gm-texto-2); cursor: pointer; }
.gm-switch input { appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--gm-gray-300); position: relative; transition: background var(--gm-transition); margin: 0; }
.gm-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left var(--gm-transition); }
.gm-switch input:checked { background: var(--gm-primary); }
.gm-switch input:checked::after { left: 21px; }
.gm-switch input:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
/* ---- Aviso ----------------------------------------------------------
Cuatro y solo cuatro. Relleno 16 20, radio 8, texto 15, borde de 4 a la izquierda.
Primera frase (en ) = QUÉ PASA; el resto = QUÉ HACER. */
.gm-aviso { display: flex; gap: 12px; padding: 16px 20px; border-radius: var(--gm-radius-md); border-left: 4px solid; font-size: 15px; line-height: 1.5; }
.gm-aviso .material-symbols-outlined { font-size: 22px; flex: none; }
.gm-aviso b { display: block; margin-bottom: 2px; }
.gm-aviso-info { background: var(--gm-info-subtle); border-color: var(--gm-info); color: var(--gm-info-text); }
.gm-aviso-exito { background: var(--gm-success-subtle); border-color: var(--gm-success); color: var(--gm-success-text); }
.gm-aviso-atencion { background: var(--gm-warning-subtle); border-color: var(--gm-warning); color: var(--gm-warning-text); }
.gm-aviso-error { background: var(--gm-error-subtle); border-color: var(--gm-error); color: var(--gm-error-text); }
/* ---- Etiqueta / píldora ---------------------------------------------
12/700, relleno 4 12, radio 999, fondo suave + texto oscuro del mismo color. */
.gm-pildora { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--gm-radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.gm-pildora .material-symbols-outlined { font-size: 16px; }
.gm-pildora-primaria { background: var(--gm-primary-subtle); color: var(--gm-info-text); }
.gm-pildora-acento { background: var(--gm-secondary-subtle); color: #7a4a00; } /* IA, próximamente */
.gm-pildora-exito { background: var(--gm-success-subtle); color: var(--gm-success-text); }
.gm-pildora-atencion { background: var(--gm-warning-subtle); color: var(--gm-warning-text); }
.gm-pildora-error { background: var(--gm-error-subtle); color: var(--gm-error-text); }
.gm-pildora-neutra { background: var(--gm-gray-100); color: var(--gm-texto-2); }
/* ---- Estado vacío ---------------------------------------------------
NO es «Cargando…» ni un error. Centrado, icono en círculo de 88, título 18/700,
texto 15 gris de máx. 46ch, acción opcional (secundario). */
.gm-vacio { text-align: center; padding: 48px 24px; }
.gm-vacio-icono { width: 88px; height: 88px; border-radius: 50%; background: var(--gm-primary-subtle); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.gm-vacio-icono .material-symbols-outlined { font-size: 44px; color: var(--gm-primary-dark); }
.gm-vacio h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--gm-texto); }
.gm-vacio p { margin: 0 auto 24px; max-width: 46ch; color: var(--gm-texto-suave); font-size: 15px; }
/* ---- Tabla ----------------------------------------------------------
Cabecera 12 MAYÚSCULAS sobre gris 50; celdas 15, relleno 14 16, línea gris 200;
la fila se ilumina al pasar; números a la derecha con cifras tabulares; sin franjas. */
.gm-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.gm-tabla th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto-suave); background: var(--gm-gray-50); padding: 12px 16px; border-bottom: 1px solid var(--gm-gray-200); }
.gm-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--gm-gray-200); color: var(--gm-texto-2); vertical-align: middle; }
.gm-tabla tbody tr:hover td { background: var(--gm-gray-50); }
.gm-tabla td.num, .gm-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gm-tabla .acciones { display: flex; gap: 8px; justify-content: flex-end; } /* botones -sm: secundario · neutro · peligro */
/* ---- Modal ----------------------------------------------------------
Velo rgba(17,24,39,.55), caja blanca radio 16, sombra lg, máx. 560 (720 selector de alumnos).
Cabecera 20 24 con título 20/800 + icono y aspa; cuerpo 24; botones abajo a la derecha.
SIN bandas de color en la cabecera. Pensado para