/* =========================================================
Gestión Docente Theme
Hoja de estilos global
========================================================= */
/* =========================================================
1. Variables globales
========================================================= */
:root {
--gd-color-primary: #1E3A5F;
--gd-color-primary-hover: #162D49;
--gd-color-secondary: #2F80ED;
--gd-color-secondary-hover: #1C6DD0;
--gd-color-background: #F4F6F8;
--gd-color-surface: #FFFFFF;
--gd-color-surface-soft: #F9FAFB;
--gd-color-text: #1F2933;
--gd-color-text-soft: #4B5563;
--gd-color-text-muted: #6B7280;
--gd-color-border: #D1D5DB;
--gd-color-border-soft: #E5E7EB;
--gd-color-error: #D93025;
--gd-color-error-soft: #FDECEA;
--gd-color-success: #188038;
--gd-color-success-soft: #E6F4EA;
--gd-color-warning: #B45309;
--gd-color-warning-soft: #FEF3C7;
--gd-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
--gd-shadow-card: 0 16px 36px rgba(15, 23, 42, 0.10);
--gd-shadow-focus: 0 0 0 3px rgba(47, 128, 237, 0.22);
--gd-radius-sm: 8px;
--gd-radius-md: 12px;
--gd-radius-lg: 18px;
--gd-radius-xl: 24px;
--gd-spacing-xs: 4px;
--gd-spacing-sm: 8px;
--gd-spacing-md: 12px;
--gd-spacing-lg: 16px;
--gd-spacing-xl: 24px;
--gd-spacing-2xl: 32px;
--gd-spacing-3xl: 48px;
--gd-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--gd-header-height: 76px;
--gd-content-max-width: 1920px;
}
/* =========================================================
2. Reset y estilos base
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-height: 100%;
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
min-height: 100%;
margin: 0;
background: var(--gd-color-background);
color: var(--gd-color-text);
font-family: var(--gd-font-family);
font-size: 1rem;
line-height: 1.5;
}
img,
svg {
max-width: 100%;
height: auto;
}
a {
color: var(--gd-color-secondary);
text-decoration: none;
}
a:hover {
color: var(--gd-color-secondary-hover);
text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: none;
box-shadow: var(--gd-shadow-focus);
}
p {
margin: 0 0 var(--gd-spacing-md);
}
h1,
h2,
h3,
h4 {
margin-top: 0;
color: var(--gd-color-primary);
line-height: 1.2;
}
h1 {
margin-bottom: var(--gd-spacing-md);
font-size: clamp(1.9rem, 2.6vw, 2.8rem);
font-weight: 800;
}
h2 {
margin-bottom: var(--gd-spacing-md);
font-size: clamp(1.35rem, 2vw, 2rem);
font-weight: 800;
}
h3 {
margin-bottom: var(--gd-spacing-sm);
font-size: 1.25rem;
font-weight: 750;
}
ul,
ol {
margin-top: 0;
}
table {
border-collapse: collapse;
}
.hidden,
[hidden] {
display: none !important;
}
/* =========================================================
3. Layout general
========================================================= */
.gd-page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.gd-main-content {
flex: 1 0 auto;
width: 100%;
padding: var(--gd-spacing-2xl) var(--gd-spacing-lg);
}
.gd-main-content__inner {
width: 100%;
max-width: var(--gd-content-max-width);
margin: 0 auto;
}
.path-user .gd-main-content,
.gd-login-page + .gd-main-content {
padding: 0;
}
/* =========================================================
4. Cabecera interna de la aplicación
========================================================= */
.gd-app-header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
background: var(--gd-color-primary);
color: #FFFFFF;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}
.gd-app-header__inner {
width: 100%;
min-height: var(--gd-header-height);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--gd-spacing-xl);
max-width: var(--gd-content-max-width);
margin: 0 auto;
padding: 0 var(--gd-spacing-lg);
}
.gd-app-brand {
min-width: 0;
display: inline-flex;
align-items: center;
gap: var(--gd-spacing-md);
color: #FFFFFF;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.gd-app-brand:hover {
color: #FFFFFF;
text-decoration: none;
}
.gd-app-brand__logo {
width: 46px;
height: 46px;
flex: 0 0 46px;
object-fit: contain;
border-radius: var(--gd-radius-md);
background: #FFFFFF;
padding: 4px;
}
.gd-app-brand__logo-placeholder {
width: 46px;
height: 46px;
flex: 0 0 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--gd-radius-md);
background: rgba(255, 255, 255, 0.14);
color: #FFFFFF;
font-size: 0.75rem;
font-weight: 700;
}
.gd-app-brand__text {
max-width: 320px;
overflow: visible;
font-size: 1rem;
line-height: 1.25;
white-space: normal;
}
.gd-app-nav {
min-width: 0;
display: flex;
align-items: center;
gap: var(--gd-spacing-xs);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}
.gd-app-nav::-webkit-scrollbar {
height: 6px;
}
.gd-app-nav::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, 0.35);
}
.gd-app-nav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 var(--gd-spacing-md);
border-radius: 999px;
color: rgba(255, 255, 255, 0.88);
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.gd-app-nav a:hover,
.gd-app-nav a:focus-visible,
.gd-app-nav a.gd-nav-link--active {
background: rgba(255, 255, 255, 0.16);
color: #FFFFFF;
text-decoration: none;
}
.gd-app-nav a:hover {
transform: translateY(-1px);
}
.gd-user-menu {
display: flex;
justify-content: flex-end;
white-space: nowrap;
}
.gd-logout-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 var(--gd-spacing-lg);
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 999px;
color: #FFFFFF;
font-size: 0.92rem;
font-weight: 800;
text-decoration: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;
}
.gd-logout-button:hover,
.gd-logout-button:focus-visible {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.70);
color: #FFFFFF;
text-decoration: none;
}
.gd-logout-button:hover {
transform: translateY(-1px);
}
/* =========================================================
5. Footer interno
========================================================= */
.gd-app-footer {
flex-shrink: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.18);
background: var(--gd-color-primary);
color: #FFFFFF;
}
.gd-app-footer__inner {
max-width: var(--gd-content-max-width);
margin: 0 auto;
padding: var(--gd-spacing-xl) var(--gd-spacing-lg);
color: rgba(255, 255, 255, 0.82);
font-size: 0.9rem;
}
.gd-app-footer strong {
display: block;
margin-bottom: 2px;
color: #FFFFFF;
}
.gd-app-footer p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
}
/* =========================================================
6. Login
========================================================= */
.gd-login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--gd-spacing-xl);
background:
radial-gradient(circle at top left, rgba(47, 128, 237, 0.12), transparent 28%),
radial-gradient(circle at bottom right, rgba(30, 58, 95, 0.10), transparent 34%),
var(--gd-color-background);
}
.gd-login-card {
width: 100%;
max-width: 460px;
padding: var(--gd-spacing-2xl);
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-xl);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-card);
}
.gd-login-logo {
display: flex;
justify-content: center;
margin-bottom: var(--gd-spacing-xl);
}
.gd-login-logo img {
max-width: 104px;
max-height: 104px;
object-fit: contain;
}
.gd-login-logo-placeholder {
width: 104px;
height: 104px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--gd-color-border);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface-soft);
color: var(--gd-color-text-muted);
font-size: 0.85rem;
font-weight: 700;
text-align: center;
}
.gd-login-header {
margin-bottom: var(--gd-spacing-xl);
text-align: center;
}
.gd-login-header h1 {
margin-bottom: var(--gd-spacing-sm);
color: var(--gd-color-primary);
font-size: clamp(1.55rem, 4.6vw, 2rem);
}
.gd-login-header p {
margin: 0;
color: var(--gd-color-text-muted);
font-size: 1rem;
}
.gd-login-form form {
margin: 0;
}
.gd-login-form .form-item {
margin-bottom: var(--gd-spacing-lg);
}
.gd-login-form label {
display: block;
margin-bottom: var(--gd-spacing-sm);
color: var(--gd-color-text);
font-size: 0.95rem;
font-weight: 800;
}
.gd-login-form input[type="text"],
.gd-login-form input[type="email"],
.gd-login-form input[type="password"] {
width: 100%;
min-height: 48px;
padding: 0 var(--gd-spacing-md);
border: 1px solid var(--gd-color-border);
border-radius: var(--gd-radius-md);
background: #FFFFFF;
color: var(--gd-color-text);
font-size: 1rem;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.gd-login-form input:hover {
border-color: #AEB7C2;
}
.gd-login-form input:focus {
border-color: var(--gd-color-secondary);
box-shadow: var(--gd-shadow-focus);
}
.gd-login-form .form-actions {
margin-top: var(--gd-spacing-xl);
}
.gd-login-form form.user-login-form .form-actions {
justify-content: center;
}
.gd-login-form input[type="submit"],
.gd-login-form button[type="submit"] {
width: auto;
min-width: 11.5rem;
min-height: 50px;
border: 0;
border-radius: var(--gd-radius-md);
background: var(--gd-color-primary);
color: #FFFFFF;
cursor: pointer;
font-size: 1rem;
font-weight: 800;
transition:
background-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}
.gd-login-form input[type="submit"]:hover,
.gd-login-form button[type="submit"]:hover {
background: var(--gd-color-primary-hover);
box-shadow: 0 10px 22px rgba(30, 58, 95, 0.22);
transform: translateY(-1px);
}
.gd-login-form input[type="submit"]:active,
.gd-login-form button[type="submit"]:active {
transform: translateY(0);
}
.gd-login-forgot-password {
margin-top: var(--gd-spacing-lg);
text-align: center;
}
.gd-login-forgot-password a {
color: var(--gd-color-secondary);
font-size: 0.95rem;
font-weight: 700;
}
.gd-login-error-message {
margin-top: var(--gd-spacing-md);
padding: var(--gd-spacing-md);
border: 1px solid rgba(217, 48, 37, 0.22);
border-radius: var(--gd-radius-md);
background: var(--gd-color-error-soft);
color: var(--gd-color-error);
font-size: 0.92rem;
font-weight: 700;
text-align: center;
}
/* =========================================================
7. Páginas internas y cabeceras
========================================================= */
.gd-admin-page,
.gd-equipo-directivo-page {
width: 100%;
}
.gd-admin-page__header {
display: block;
width: 100%;
max-width: none;
height: auto;
min-height: 0;
margin-bottom: var(--gd-spacing-2xl);
padding-bottom: 0.15rem;
overflow: visible;
}
.gd-admin-page__eyebrow {
display: block;
width: 100%;
height: auto;
margin: 0 0 var(--gd-spacing-sm);
overflow: visible;
color: var(--gd-color-secondary);
font-size: 0.84rem;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: normal;
overflow-wrap: break-word;
}
.gd-admin-page__header h1 {
display: block;
width: 100%;
max-width: none;
height: auto;
margin: 0 0 var(--gd-spacing-md);
padding-bottom: 0.08em;
overflow: visible;
line-height: 1.2;
white-space: normal;
text-overflow: clip;
overflow-wrap: break-word;
word-break: normal;
}
.gd-admin-page__header p:not(.gd-admin-page__eyebrow) {
display: block;
width: 100%;
max-width: none;
height: auto;
min-height: 0;
margin: 0;
padding-bottom: 0.18em;
overflow: visible;
color: var(--gd-color-text-muted);
font-size: 1.05rem;
line-height: 1.65;
white-space: normal;
text-overflow: clip;
overflow-wrap: break-word;
word-break: normal;
}
.gd-admin-page__header p.gd-admin-page__description--full-width {
width: 100%;
max-width: none;
}
/* =========================================================
8. Tarjetas y dashboards
========================================================= */
.gd-admin-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--gd-spacing-xl);
margin-bottom: var(--gd-spacing-2xl);
}
.gd-admin-card {
min-height: 210px;
display: flex;
flex-direction: column;
padding: var(--gd-spacing-xl);
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-soft);
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
.gd-admin-card:hover {
border-color: rgba(47, 128, 237, 0.28);
box-shadow: var(--gd-shadow-card);
transform: translateY(-2px);
}
.gd-admin-card h2 {
margin-bottom: var(--gd-spacing-md);
color: var(--gd-color-primary);
font-size: 1.28rem;
}
.gd-admin-card p {
flex: 1;
height: auto;
max-height: none;
margin-bottom: var(--gd-spacing-xl);
overflow: visible;
color: var(--gd-color-text-muted);
font-size: 0.98rem;
line-height: 1.6;
white-space: normal;
text-overflow: clip;
overflow-wrap: break-word;
word-break: normal;
}
.gd-questionnaire-card {
width: 100%;
margin-bottom: var(--gd-spacing-2xl);
padding: var(--gd-spacing-2xl);
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-soft);
}
.gd-directivo-empty {
margin: var(--gd-spacing-lg) 0;
padding: var(--gd-spacing-xl);
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface-soft);
color: var(--gd-color-text-muted);
}
.gd-directivo-empty p:last-child {
margin-bottom: 0;
}
.gd-directivo-form-intro {
margin: var(--gd-spacing-2xl) 0 var(--gd-spacing-lg);
}
.gd-directivo-form-intro h2 {
margin-bottom: var(--gd-spacing-sm);
}
.gd-directivo-form-intro h2,
.gd-directivo-form-intro p,
.gd-questionnaire-card h2,
.gd-questionnaire-card h3,
.gd-questionnaire-card > p,
.gd-directivo-empty p {
height: auto;
max-height: none;
overflow: visible;
white-space: normal;
text-overflow: clip;
overflow-wrap: break-word;
word-break: normal;
}
.gd-directivo-form-intro p {
margin: 0;
color: var(--gd-color-text-muted);
line-height: 1.6;
}
/* =========================================================
9. Formularios
========================================================= */
.gd-config-form,
.gd-profile-form-custom,
.gd-directivo-form,
.gd-curso-academico-form {
width: 100%;
}
.gd-config-form fieldset,
.gd-profile-form-custom fieldset,
.gd-directivo-form fieldset,
.gd-curso-academico-form fieldset {
margin: 0 0 var(--gd-spacing-xl);
padding: 0;
border: 0;
}
.gd-config-form legend,
.gd-profile-form-custom legend,
.gd-directivo-form legend,
.gd-curso-academico-form legend {
margin-bottom: var(--gd-spacing-lg);
color: var(--gd-color-primary);
font-size: 1.22rem;
font-weight: 850;
}
.gd-config-form .form-item,
.gd-profile-form-custom .form-item,
.gd-directivo-form .form-item,
.gd-curso-academico-form .form-item,
.gd-questionnaire-card .form-item {
margin-bottom: var(--gd-spacing-lg);
}
.gd-config-form label,
.gd-profile-form-custom label,
.gd-directivo-form label,
.gd-curso-academico-form label,
.gd-questionnaire-card label {
display: block;
margin-bottom: var(--gd-spacing-sm);
color: var(--gd-color-text);
font-size: 0.95rem;
font-weight: 850;
}
.gd-config-form input[type="text"],
.gd-config-form input[type="email"],
.gd-config-form input[type="password"],
.gd-config-form input[type="number"],
.gd-config-form input[type="date"],
.gd-config-form input[type="color"],
.gd-config-form select,
.gd-config-form textarea,
.gd-profile-form-custom input[type="text"],
.gd-profile-form-custom input[type="email"],
.gd-profile-form-custom input[type="password"],
.gd-profile-form-custom input[type="number"],
.gd-profile-form-custom input[type="date"],
.gd-profile-form-custom select,
.gd-profile-form-custom textarea,
.gd-directivo-form input[type="text"],
.gd-directivo-form input[type="email"],
.gd-directivo-form input[type="password"],
.gd-directivo-form input[type="number"],
.gd-directivo-form input[type="date"],
.gd-directivo-form select,
.gd-directivo-form textarea,
.gd-curso-academico-form input[type="text"],
.gd-curso-academico-form input[type="email"],
.gd-curso-academico-form input[type="password"],
.gd-curso-academico-form input[type="number"],
.gd-curso-academico-form input[type="date"],
.gd-curso-academico-form select,
.gd-curso-academico-form textarea,
.gd-questionnaire-card input[type="text"],
.gd-questionnaire-card input[type="email"],
.gd-questionnaire-card input[type="password"],
.gd-questionnaire-card input[type="number"],
.gd-questionnaire-card input[type="date"],
.gd-questionnaire-card select,
.gd-questionnaire-card textarea {
width: 100%;
max-width: none;
min-height: 46px;
padding: 0 var(--gd-spacing-md);
border: 1px solid var(--gd-color-border);
border-radius: var(--gd-radius-md);
background: #FFFFFF;
color: var(--gd-color-text);
font: inherit;
font-size: 0.98rem;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.gd-config-form textarea,
.gd-profile-form-custom textarea,
.gd-directivo-form textarea,
.gd-curso-academico-form textarea,
.gd-questionnaire-card textarea {
min-height: 110px;
padding-top: var(--gd-spacing-md);
resize: vertical;
}
.gd-config-form input[type="color"] {
width: 76px;
max-width: 76px;
padding: 4px;
}
.gd-config-form select,
.gd-profile-form-custom select,
.gd-directivo-form select,
.gd-curso-academico-form select,
.gd-questionnaire-card select {
cursor: pointer;
}
.gd-config-form input:hover,
.gd-config-form select:hover,
.gd-config-form textarea:hover,
.gd-profile-form-custom input:hover,
.gd-profile-form-custom select:hover,
.gd-profile-form-custom textarea:hover,
.gd-directivo-form input:hover,
.gd-directivo-form select:hover,
.gd-directivo-form textarea:hover,
.gd-curso-academico-form input:hover,
.gd-curso-academico-form select:hover,
.gd-curso-academico-form textarea:hover,
.gd-questionnaire-card input:hover,
.gd-questionnaire-card select:hover,
.gd-questionnaire-card textarea:hover {
border-color: #AEB7C2;
}
.gd-config-form input:focus,
.gd-config-form select:focus,
.gd-config-form textarea:focus,
.gd-profile-form-custom input:focus,
.gd-profile-form-custom select:focus,
.gd-profile-form-custom textarea:focus,
.gd-directivo-form input:focus,
.gd-directivo-form select:focus,
.gd-directivo-form textarea:focus,
.gd-curso-academico-form input:focus,
.gd-curso-academico-form select:focus,
.gd-curso-academico-form textarea:focus,
.gd-questionnaire-card input:focus,
.gd-questionnaire-card select:focus,
.gd-questionnaire-card textarea:focus {
border-color: var(--gd-color-secondary);
box-shadow: var(--gd-shadow-focus);
}
.gd-field-invalid,
input.gd-field-invalid,
select.gd-field-invalid,
textarea.gd-field-invalid {
border-color: var(--gd-color-error) !important;
background: #FFF8F7;
}
.gd-field-invalid:focus {
box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.18) !important;
}
.gd-config-form .description,
.gd-config-form .form-item__description,
.gd-config-form .form-item .description,
.gd-config-form small.description,
.gd-profile-form-custom .description,
.gd-profile-form-custom .form-item__description,
.gd-profile-form-custom .form-item .description,
.gd-profile-form-custom small.description,
.gd-directivo-form .description,
.gd-directivo-form .form-item__description,
.gd-directivo-form .form-item .description,
.gd-directivo-form small.description,
.gd-curso-academico-form .description,
.gd-curso-academico-form .form-item__description,
.gd-curso-academico-form .form-item .description,
.gd-curso-academico-form small.description,
.gd-questionnaire-card .description,
.gd-questionnaire-card .form-item__description,
.gd-questionnaire-card .form-item .description,
.gd-questionnaire-card small.description {
max-width: none;
margin-top: 6px;
margin-bottom: 10px;
color: var(--gd-color-text-muted);
font-size: 0.86rem;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
}
.gd-validation-message {
min-height: 20px;
margin-top: 6px;
color: var(--gd-color-text-muted);
font-size: 0.86rem;
font-weight: 500;
line-height: 1.45;
}
.gd-validation-message--invalid {
color: var(--gd-color-error);
font-weight: 700;
}
/* =========================================================
10. Mensajes superiores
========================================================= */
.gd-top-messages,
.gd-main-content__inner > .messages-list,
.gd-main-content__inner > .messages,
.gd-main-content__inner > .gd-form-save-message,
.gd-main-content__inner > .gd-form-warning-message {
width: 100%;
margin-top: 0;
margin-bottom: var(--gd-spacing-xl);
}
.messages,
.messages-list {
margin: 0 0 var(--gd-spacing-xl);
}
.messages {
width: 100%;
padding: var(--gd-spacing-md) var(--gd-spacing-lg);
border-radius: var(--gd-radius-md);
font-size: 0.95rem;
font-weight: 800;
}
.gd-form-save-message,
.messages--status {
display: block;
width: 100%;
margin: 0 0 var(--gd-spacing-xl);
padding: var(--gd-spacing-md) var(--gd-spacing-lg);
border: 1px solid rgba(24, 128, 56, 0.24);
border-radius: var(--gd-radius-md);
background: var(--gd-color-success-soft);
color: var(--gd-color-success);
font-size: 0.95rem;
font-weight: 800;
}
.gd-form-warning-message,
.messages--warning {
display: block;
width: 100%;
margin: 0 0 var(--gd-spacing-xl);
padding: var(--gd-spacing-md) var(--gd-spacing-lg);
border: 1px solid rgba(180, 83, 9, 0.28);
border-radius: var(--gd-radius-md);
background: var(--gd-color-warning-soft);
color: var(--gd-color-warning);
font-size: 0.95rem;
font-weight: 800;
}
.messages--error {
display: block;
width: 100%;
margin: 0 0 var(--gd-spacing-xl);
padding: var(--gd-spacing-md) var(--gd-spacing-lg);
border: 1px solid rgba(217, 48, 37, 0.22);
border-radius: var(--gd-radius-md);
background: var(--gd-color-error-soft);
color: var(--gd-color-error);
font-size: 0.95rem;
font-weight: 800;
}
/* =========================================================
11. Botones
========================================================= */
.gd-form-actions,
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gd-spacing-md);
margin-top: var(--gd-spacing-xl);
}
.gd-button,
.button,
input[type="submit"],
button[type="submit"],
.user-logout-confirm .form-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 var(--gd-spacing-xl);
border: 1px solid transparent;
border-radius: var(--gd-radius-md);
cursor: pointer;
font-family: var(--gd-font-family);
font-size: 0.96rem;
font-weight: 850;
line-height: 1;
text-decoration: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.gd-button:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.user-logout-confirm .form-actions a:hover {
text-decoration: none;
transform: translateY(-1px);
}
.gd-button--primary,
.button--primary,
input[type="submit"],
button[type="submit"] {
background: var(--gd-color-primary);
color: #FFFFFF;
}
.gd-button--primary:hover,
.button--primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
background: var(--gd-color-primary-hover);
color: #FFFFFF;
box-shadow: 0 10px 22px rgba(30, 58, 95, 0.22);
}
.gd-button--secondary,
.button--secondary,
.user-logout-confirm .form-actions a {
border-color: var(--gd-color-border);
background: #FFFFFF;
color: var(--gd-color-primary);
}
.gd-button--secondary:hover,
.button--secondary:hover,
.user-logout-confirm .form-actions a:hover,
.user-logout-confirm .form-actions a:focus-visible {
border-color: var(--gd-color-primary);
background: #F8FAFC;
color: var(--gd-color-primary-hover);
}
.gd-button-danger {
background: var(--gd-color-error) !important;
color: #FFFFFF !important;
}
.gd-button-danger:hover {
background: #B3261E !important;
color: #FFFFFF !important;
}
.gd-button[disabled],
.button[disabled],
input[type="submit"][disabled],
button[disabled] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* =========================================================
12. Tablas
========================================================= */
.gd-directivo-table {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: visible;
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-soft);
}
.gd-directivo-table thead {
background: var(--gd-color-surface-soft);
}
.gd-directivo-table th,
.gd-directivo-table td {
padding: var(--gd-spacing-lg) 0.85rem;
border-bottom: 1px solid var(--gd-color-border-soft);
color: var(--gd-color-text);
text-align: left;
vertical-align: middle;
}
.gd-directivo-table th {
color: var(--gd-color-primary);
font-size: 0.92rem;
font-weight: 900;
}
.gd-directivo-table td {
font-size: 0.95rem;
text-align: center;
}
.gd-directivo-table tbody tr:last-child td {
border-bottom: 0;
}
.gd-directivo-table tbody tr:hover {
background: #FBFCFE;
}
/*
* Tabla de guardias disponibles.
*
* La última columna reserva espacio suficiente para la acción. El botón puede
* ocupar el ancho disponible y dividir su texto en varias líneas, evitando que
* sobresalga de la celda incluso en resoluciones de escritorio reducidas.
*/
.gd-main-content .gd-guardias-disponibles-table .gd-guardia-action-column,
.gd-main-content .gd-guardias-disponibles-table .gd-guardia-action-cell {
width: 13rem;
min-width: 0 !important;
padding-inline: 0.6rem;
}
.gd-main-content .gd-guardias-disponibles-table .gd-guardia-action-cell {
overflow: hidden;
}
.gd-main-content .gd-guardias-disponibles-table .gd-guardia-action-button {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.05rem;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
padding: 0.78rem 0.55rem;
line-height: 1.25;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
hyphens: none;
}
.gd-main-content .gd-guardias-disponibles-table
.gd-guardia-action-button__line {
display: block;
max-width: 100%;
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
hyphens: none;
}
/*
* Los criterios de prioridad de la confirmación se presentan como cuatro
* datos independientes para facilitar su lectura en cualquier dispositivo.
*/
.gd-guardia-priority-details {
display: grid;
gap: 0.45rem;
margin-top: var(--gd-spacing-sm);
}
.gd-guardia-priority-detail {
margin: 0;
line-height: 1.5;
}
.gd-guardia-priority-detail strong {
color: var(--gd-color-text);
font-weight: 800;
}
/*
* Acciones de edición y eliminación en tablas.
*
* Se usa un único componente visual en todos los listados. El fondo pertenece
* a la celda, no al enlace, reproduciendo la presentación de la tabla de
* familias profesionales sin convertir la acción en un botón de ancho completo.
*/
.gd-table-action-button {
display: inline-flex;
width: auto !important;
max-width: 100%;
min-width: 0 !important;
min-height: 44px !important;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.65rem 0.9rem;
border: 0;
border-radius: var(--gd-radius-sm);
background: transparent;
color: var(--gd-color-secondary);
font-size: 1rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap !important;
transition:
background-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease;
}
.gd-table-action-button--edit {
color: #4880E5;
}
.gd-table-action-button--delete {
color: #C64031;
}
.gd-table-action-button:hover,
.gd-table-action-button:focus-visible {
background: rgba(72, 128, 229, 0.10);
color: #2F6FD7;
text-decoration: none;
}
.gd-table-action-button--delete:hover,
.gd-table-action-button--delete:focus-visible {
background: rgba(198, 64, 49, 0.10);
color: #A92F23;
}
.gd-table-action-button__icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
font-size: 1.35rem;
line-height: 1;
}
.gd-table-action-button__text {
min-width: 0;
white-space: nowrap;
}
/*
* La clase se añade mediante JavaScript a partir de la acción de la celda.
* :has() actúa como respaldo en navegadores actuales antes de que termine el
* comportamiento de Drupal.
*/
.gd-main-content table td.gd-table-action-cell,
.gd-main-content table td:has(.gd-table-action-button--edit),
.gd-main-content table td:has(.gd-table-action-button--delete) {
background: transparent;
text-align: center !important;
vertical-align: middle;
}
.gd-main-content table td.gd-table-action-cell + td.gd-table-action-cell,
.gd-main-content table td:has(.gd-table-action-button--edit) + td:has(.gd-table-action-button--delete) {
border-left: 1px solid var(--gd-color-border-soft);
}
/* =========================================================
13. Imágenes, avatares y perfiles
========================================================= */
.gd-directivo-avatar {
width: 54px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--gd-color-primary);
color: #FFFFFF;
font-size: 1rem;
font-weight: 900;
overflow: hidden;
}
.gd-directivo-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gd-directivo-delete-box {
padding: var(--gd-spacing-xl);
border: 1px solid rgba(217, 48, 37, 0.22);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-error-soft);
}
.gd-directivo-delete-box h2 {
color: var(--gd-color-error);
}
.gd-directivo-delete-box p {
color: var(--gd-color-text);
}
/* =========================================================
14. Estados y utilidades
========================================================= */
.gd-muted {
color: var(--gd-color-text-muted);
}
/* =========================================================
15. Pantallas del sistema Drupal
========================================================= */
.user-logout-confirm {
max-width: 860px;
}
.user-logout-confirm .form-actions {
gap: var(--gd-spacing-xl);
margin-top: var(--gd-spacing-2xl);
}
.user-logout-confirm .form-actions input[type="submit"] {
width: auto;
min-width: 230px;
min-height: 58px;
padding: 0 var(--gd-spacing-2xl);
border-radius: var(--gd-radius-lg);
font-size: 1.08rem;
font-weight: 900;
}
.user-logout-confirm .form-actions a {
width: auto;
min-width: 170px;
min-height: 58px;
padding: 0 var(--gd-spacing-2xl);
border-radius: var(--gd-radius-lg);
font-size: 1.08rem;
font-weight: 900;
}
/* =========================================================
16. Responsive
========================================================= */
@media (max-width: 1180px) {
.gd-app-header__inner {
gap: var(--gd-spacing-lg);
min-width: 0;
}
.gd-app-brand__text {
max-width: 200px;
}
}
@media (max-width: 900px) {
.gd-main-content {
padding: var(--gd-spacing-xl) var(--gd-spacing-lg);
}
.gd-app-header__inner {
grid-template-columns: 1fr auto;
grid-template-areas:
"brand logout"
"nav nav";
gap: var(--gd-spacing-md);
padding-top: var(--gd-spacing-md);
padding-bottom: var(--gd-spacing-md);
}
.gd-app-brand {
grid-area: brand;
}
.gd-app-nav {
grid-area: nav;
width: 100%;
padding-bottom: 2px;
}
.gd-user-menu {
grid-area: logout;
}
.gd-admin-dashboard {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.gd-questionnaire-card {
padding: var(--gd-spacing-xl);
}
}
@media (max-width: 640px) {
html {
font-size: 15px;
}
.gd-main-content {
padding: var(--gd-spacing-lg) var(--gd-spacing-md);
}
.gd-login-page {
align-items: flex-start;
padding: var(--gd-spacing-lg);
}
.gd-login-card {
margin-top: var(--gd-spacing-xl);
padding: var(--gd-spacing-xl);
}
.gd-app-header__inner {
padding-left: var(--gd-spacing-md);
padding-right: var(--gd-spacing-md);
}
.gd-app-brand__logo,
.gd-app-brand__logo-placeholder {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.gd-app-brand__text {
max-width: 170px;
font-size: 0.92rem;
}
.gd-app-nav a {
min-height: 40px;
padding: 0 var(--gd-spacing-md);
font-size: 0.86rem;
}
.gd-logout-button {
min-height: 38px;
padding: 0 var(--gd-spacing-md);
font-size: 0.86rem;
}
.gd-admin-page__header {
margin-bottom: var(--gd-spacing-xl);
}
.gd-admin-card,
.gd-questionnaire-card {
padding: var(--gd-spacing-lg);
border-radius: var(--gd-radius-lg);
}
.gd-admin-dashboard {
grid-template-columns: 1fr;
gap: var(--gd-spacing-lg);
}
.gd-form-actions,
.form-actions {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.gd-button,
.button,
input[type="submit"],
button[type="submit"],
.user-logout-confirm .form-actions a {
width: auto;
min-width: 9rem;
min-height: 48px;
flex: 0 0 auto;
}
.user-logout-confirm .form-actions input[type="submit"] {
min-width: 10.5rem;
}
.user-logout-confirm .form-actions a {
min-width: 9rem;
}
.gd-directivo-table th,
.gd-directivo-table td {
padding: var(--gd-spacing-md);
}
}
@media (max-width: 420px) {
.gd-login-card {
padding: var(--gd-spacing-lg);
}
.gd-login-logo img,
.gd-login-logo-placeholder {
width: 88px;
height: 88px;
}
.gd-app-brand__text {
max-width: 140px;
}
}
/* =========================================================
17. Accesibilidad y preferencias de movimiento
========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
}
/* =========================================================
Tipo de enseñanza del curso académico
========================================================= */
.gd-tipo-ensenanza,
.form-radios.gd-tipo-ensenanza {
margin-top: var(--gd-spacing-md);
}
.gd-tipo-ensenanza .fieldset-legend {
color: var(--gd-color-primary);
font-size: 1.15rem;
font-weight: 700;
}
.gd-tipo-ensenanza .fieldset-wrapper {
margin: 0;
}
/*
* Drupal puede colocar la clase gd-tipo-ensenanza en el contenedor exterior
* o directamente en .form-radios. Se contemplan ambas estructuras.
*/
.gd-tipo-ensenanza .form-radios,
.form-radios.gd-tipo-ensenanza {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gd-spacing-lg);
width: 100%;
margin: var(--gd-spacing-md) 0 0;
}
.gd-tipo-ensenanza .form-type-radio,
.form-radios.gd-tipo-ensenanza .form-type-radio {
position: relative;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.gd-tipo-ensenanza .form-type-radio input[type="radio"],
.form-radios.gd-tipo-ensenanza .form-type-radio input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.gd-tipo-ensenanza .form-type-radio label,
.form-radios.gd-tipo-ensenanza .form-type-radio label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
margin: 0;
padding: 0.8rem 1.15rem;
border: 1px solid var(--gd-color-border);
border-radius: var(--gd-radius-sm);
background: var(--gd-color-surface);
color: var(--gd-color-primary);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
cursor: pointer;
box-shadow: none;
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.gd-tipo-ensenanza .form-type-radio label:hover,
.form-radios.gd-tipo-ensenanza .form-type-radio label:hover {
border-color: var(--gd-color-secondary);
background: #EEF5FE;
color: var(--gd-color-secondary-hover);
}
.gd-tipo-ensenanza .form-type-radio input[type="radio"]:focus-visible + label,
.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:focus-visible) label,
.form-radios.gd-tipo-ensenanza .form-type-radio input[type="radio"]:focus-visible + label,
.form-radios.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:focus-visible) label {
border-color: var(--gd-color-secondary);
outline: 0;
box-shadow: var(--gd-shadow-focus);
}
.gd-tipo-ensenanza .form-type-radio input[type="radio"]:checked + label,
.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:checked) label,
.form-radios.gd-tipo-ensenanza .form-type-radio input[type="radio"]:checked + label,
.form-radios.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:checked) label {
border-color: var(--gd-color-primary);
background: var(--gd-color-primary);
color: #FFFFFF;
}
.gd-tipo-ensenanza .form-type-radio input[type="radio"]:checked + label:hover,
.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:checked) label:hover,
.form-radios.gd-tipo-ensenanza .form-type-radio input[type="radio"]:checked + label:hover,
.form-radios.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:checked) label:hover {
border-color: var(--gd-color-primary-hover);
background: var(--gd-color-primary-hover);
color: #FFFFFF;
}
.gd-tipo-ensenanza .form-type-radio input[type="radio"]:disabled + label,
.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:disabled) label,
.form-radios.gd-tipo-ensenanza .form-type-radio input[type="radio"]:disabled + label,
.form-radios.gd-tipo-ensenanza .form-type-radio:has(input[type="radio"]:disabled) label {
border-color: var(--gd-color-border-soft);
background: var(--gd-color-surface-soft);
color: var(--gd-color-text-muted);
cursor: not-allowed;
box-shadow: none;
}
.gd-tipo-ensenanza .description {
max-width: 52rem;
margin-top: var(--gd-spacing-md);
color: var(--gd-color-text-muted);
font-size: 0.95rem;
line-height: 1.5;
}
/*
* Los botones de alta independientes se separan del formulario o del listado
* que aparece a continuación. No afecta a los grupos de acciones de filtros.
*/
.gd-directivo-actions:has(> .gd-button--primary:only-child) {
margin-top: var(--gd-spacing-lg);
margin-bottom: var(--gd-spacing-xl);
}
@media (min-width: 768px) and (max-width: 1023px) {
.gd-tipo-ensenanza .form-radios,
.form-radios.gd-tipo-ensenanza {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gd-tipo-ensenanza .form-radios,
.form-radios.gd-tipo-ensenanza {
grid-template-columns: 1fr;
gap: var(--gd-spacing-sm);
}
.gd-tipo-ensenanza .form-type-radio,
.gd-tipo-ensenanza .form-type-radio label,
.form-radios.gd-tipo-ensenanza .form-type-radio,
.form-radios.gd-tipo-ensenanza .form-type-radio label {
width: 100%;
}
.gd-tipo-ensenanza .form-type-radio label,
.form-radios.gd-tipo-ensenanza .form-type-radio label {
min-height: 48px;
padding: 0.8rem 1rem;
}
}
/* =========================================================
Tablas de estadísticas e informes
========================================================= */
/*
* Las tablas se unifican en la sección responsive situada más abajo. Se
* mantienen aquí únicamente los ajustes propios de las tarjetas de informes.
*/
.gd-admin-page .gd-questionnaire-card {
overflow: visible;
}
/* ==========================================================================
CAMPOS DE BÚSQUEDA UNIFICADOS EN FILTROS DE HORARIOS, PERMISOS Y AUSENCIAS
========================================================================== */
.gd-admin-page input[type="search"],
.gd-admin-page input.form-search,
.gd-admin-page .form-item-search input,
.gd-admin-page .form-item-buscar input,
.gd-admin-page input[name="search"],
.gd-admin-page input[name="buscar"],
.gd-directivo-form input[type="search"],
.gd-questionnaire-card input[type="search"] {
display: block;
width: 100%;
max-width: none;
min-height: 46px;
padding: 0 var(--gd-spacing-md);
border: 1px solid var(--gd-color-border);
border-radius: var(--gd-radius-md);
background: #FFFFFF;
color: var(--gd-color-text);
font: inherit;
line-height: 1.4;
box-sizing: border-box;
appearance: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.gd-admin-page input[type="search"]::placeholder,
.gd-admin-page input.form-search::placeholder,
.gd-admin-page .form-item-search input::placeholder,
.gd-admin-page .form-item-buscar input::placeholder,
.gd-admin-page input[name="search"]::placeholder,
.gd-admin-page input[name="buscar"]::placeholder,
.gd-directivo-form input[type="search"]::placeholder,
.gd-questionnaire-card input[type="search"]::placeholder {
color: var(--gd-color-text-muted);
opacity: 1;
}
.gd-admin-page input[type="search"]:hover,
.gd-admin-page input.form-search:hover,
.gd-admin-page .form-item-search input:hover,
.gd-admin-page .form-item-buscar input:hover,
.gd-admin-page input[name="search"]:hover,
.gd-admin-page input[name="buscar"]:hover,
.gd-directivo-form input[type="search"]:hover,
.gd-questionnaire-card input[type="search"]:hover {
border-color: #AEB7C2;
}
.gd-admin-page input[type="search"]:focus,
.gd-admin-page input.form-search:focus,
.gd-admin-page .form-item-search input:focus,
.gd-admin-page .form-item-buscar input:focus,
.gd-admin-page input[name="search"]:focus,
.gd-admin-page input[name="buscar"]:focus,
.gd-directivo-form input[type="search"]:focus,
.gd-questionnaire-card input[type="search"]:focus {
border-color: var(--gd-color-primary);
outline: 0;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.gd-admin-page input[type="search"]:disabled,
.gd-admin-page input.form-search:disabled,
.gd-admin-page .form-item-search input:disabled,
.gd-admin-page .form-item-buscar input:disabled,
.gd-admin-page input[name="search"]:disabled,
.gd-admin-page input[name="buscar"]:disabled,
.gd-directivo-form input[type="search"]:disabled,
.gd-questionnaire-card input[type="search"]:disabled {
cursor: not-allowed;
background: var(--gd-color-background);
color: var(--gd-color-text-muted);
opacity: 0.75;
}
/* Evita el estilo compacto nativo del navegador en WebKit. */
.gd-admin-page input[type="search"]::-webkit-search-decoration,
.gd-admin-page input[type="search"]::-webkit-search-cancel-button,
.gd-admin-page input[type="search"]::-webkit-search-results-button,
.gd-admin-page input[type="search"]::-webkit-search-results-decoration {
appearance: none;
}
/* ==========================================================================
TABLAS UNIFICADAS SIN DESPLAZAMIENTO HORIZONTAL
========================================================================== */
/*
* Ninguna tabla funcional depende de un ancho mínimo fijo. En escritorio se
* conserva la retícula; en pantallas estrechas el JavaScript accesible añade
* las etiquetas de columna y la tabla se transforma en tarjetas.
*/
.gd-main-content .gd-table-responsive {
width: 100%;
max-width: 100%;
min-width: 0;
margin-top: var(--gd-spacing-lg);
overflow: visible;
border: 0;
background: transparent;
}
.gd-main-content table,
.gd-main-content .gd-admin-table,
.gd-main-content .gd-directivo-table,
.gd-main-content .gd-table--grupos-curso,
.gd-main-content .gd-table--normativas,
.gd-main-content .gd-table--documentos-oficiales,
.gd-main-content .gd-table--solicitudes-ausencia,
.gd-main-content .gd-table--estadisticas-ausencias {
width: 100% !important;
max-width: 100%;
min-width: 0 !important;
table-layout: fixed !important;
border: 1px solid var(--gd-color-border-soft);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--gd-radius-lg);
overflow: visible;
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-soft);
}
/*
* Redondeo explícito de las celdas exteriores. Se mantiene overflow visible
* para no recortar menús de operaciones, pero las cabeceras y fondos respetan
* visualmente el radio exterior de la tabla.
*/
.gd-main-content table > thead:first-of-type > tr:first-child > :first-child,
.gd-main-content table > tbody:first-child > tr:first-child > :first-child {
border-top-left-radius: calc(var(--gd-radius-lg) - 1px);
}
.gd-main-content table > thead:first-of-type > tr:first-child > :last-child,
.gd-main-content table > tbody:first-child > tr:first-child > :last-child {
border-top-right-radius: calc(var(--gd-radius-lg) - 1px);
}
.gd-main-content table > tbody:last-child > tr:last-child > :first-child,
.gd-main-content table > tfoot:last-child > tr:last-child > :first-child {
border-bottom-left-radius: calc(var(--gd-radius-lg) - 1px);
}
.gd-main-content table > tbody:last-child > tr:last-child > :last-child,
.gd-main-content table > tfoot:last-child > tr:last-child > :last-child {
border-bottom-right-radius: calc(var(--gd-radius-lg) - 1px);
}
.gd-main-content table thead {
background: var(--gd-color-surface-soft);
}
.gd-main-content table th,
.gd-main-content table td {
width: auto;
min-width: 0 !important;
max-width: none;
height: auto;
padding: 0.9rem 0.75rem;
border: 0;
border-bottom: 1px solid var(--gd-color-border-soft);
color: var(--gd-color-text);
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
vertical-align: middle;
white-space: normal !important;
text-overflow: clip;
overflow-wrap: anywhere;
word-break: normal;
hyphens: auto;
}
.gd-main-content table th {
background: var(--gd-color-surface-soft);
color: var(--gd-color-primary);
font-size: 0.9rem;
font-weight: 900;
}
.gd-main-content table th + th,
.gd-main-content table td + td {
border-left: 1px solid var(--gd-color-border-soft);
}
.gd-main-content table tbody tr:nth-child(even) > td,
.gd-main-content table tbody tr:nth-child(even) > th {
background: #FAFBFC;
}
.gd-main-content table tbody tr:hover > td,
.gd-main-content table tbody tr:hover > th {
background: #F0F6FF;
}
.gd-main-content table tbody tr:last-child > td,
.gd-main-content table tbody tr:last-child > th {
border-bottom: 0;
}
.gd-main-content table a:not(.gd-table-action-button),
.gd-main-content table button,
.gd-main-content table .button,
.gd-main-content table .gd-button {
max-width: 100%;
height: auto;
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
}
.gd-main-content table td .operations,
.gd-main-content table td .dropbutton-wrapper,
.gd-main-content table td .form-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gd-spacing-xs);
min-width: 0;
}
/* Cadenas especialmente largas, como nombres de archivo o correos. */
.gd-table--normativas a,
.gd-table--documentos-oficiales a,
.gd-table--solicitudes-ausencia a,
.gd-main-content table a[href^="mailto:"] {
overflow-wrap: anywhere;
}
/* La tabla sin JavaScript también se ajusta al ancho disponible. */
.gd-main-content table:not([data-gd-responsive-ready="true"]) {
min-width: 0 !important;
}
/* ==========================================================================
DEPURACIÓN RESPONSIVE Y AJUSTE DE TEXTOS
========================================================================== */
/* Utilidades de accesibilidad necesarias al no heredar de un tema base. */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
/* Evita que hijos flex/grid y cadenas largas ensanchen la página. */
.gd-main-content,
.gd-admin-page,
.gd-questionnaire-card,
.gd-directivo-section,
.gd-directivo-form-wrapper,
.gd-profile-intro,
.gd-filter-grid,
.form-item,
.form-wrapper {
min-width: 0;
max-width: 100%;
}
.gd-main-content h1,
.gd-main-content h2,
.gd-main-content h3,
.gd-main-content h4,
.gd-main-content p,
.gd-main-content li,
.gd-main-content dd,
.gd-main-content dt,
.gd-main-content a,
.gd-main-content label,
.gd-main-content legend,
.gd-main-content td,
.gd-main-content th,
.gd-app-brand__text {
overflow-wrap: anywhere;
}
.gd-main-content img,
.gd-main-content svg,
.gd-main-content video,
.gd-main-content iframe {
max-width: 100%;
height: auto;
}
.gd-main-content pre {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
}
.gd-main-content code {
overflow-wrap: anywhere;
}
.gd-main-content input:not([type="checkbox"]):not([type="radio"]),
.gd-main-content select,
.gd-main-content textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Carga de archivos común para toda la aplicación. */
.form-managed-file {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gd-spacing-md);
width: 100%;
}
.form-managed-file input[type="file"],
.form-managed-file .form-file {
width: auto;
max-width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--gd-color-text);
font: inherit;
}
.form-managed-file input[type="file"]:hover,
.form-managed-file input[type="file"]:focus,
.form-managed-file .form-file:hover,
.form-managed-file .form-file:focus {
border: 0;
background: transparent;
box-shadow: none;
}
.form-managed-file input[type="file"]:focus-visible,
.form-managed-file .form-file:focus-visible {
outline: 3px solid rgba(47, 128, 237, 0.28);
outline-offset: 4px;
}
.form-managed-file input[type="file"]::file-selector-button,
.form-managed-file .form-file::file-selector-button,
.form-managed-file input[type="file"]::-webkit-file-upload-button,
.form-managed-file .form-file::-webkit-file-upload-button {
min-height: 44px;
margin-right: var(--gd-spacing-md);
padding: 0 var(--gd-spacing-lg);
border: 0;
border-radius: var(--gd-radius-md);
background: var(--gd-color-surface-soft);
color: var(--gd-color-primary);
cursor: pointer;
font: inherit;
font-weight: 850;
transition:
background-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease;
}
.form-managed-file input[type="file"]:hover::file-selector-button,
.form-managed-file .form-file:hover::file-selector-button,
.form-managed-file input[type="file"]:hover::-webkit-file-upload-button,
.form-managed-file .form-file:hover::-webkit-file-upload-button {
background: #EEF2F6;
color: var(--gd-color-primary-hover);
}
.form-managed-file input[type="submit"],
.form-managed-file button[type="submit"],
.form-managed-file .form-submit {
align-self: flex-start;
width: auto;
margin: 0;
}
.gd-main-content .button,
.gd-main-content .gd-button,
.gd-main-content input[type="submit"],
.gd-main-content button {
max-width: 100%;
height: auto;
min-height: 44px;
line-height: 1.25;
text-align: center;
white-space: normal;
}
.gd-filter-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gd-spacing-lg);
align-items: stretch;
width: 100%;
}
.gd-directivo-section {
margin-bottom: var(--gd-spacing-xl);
}
.gd-directivo-form-wrapper {
width: 100%;
}
.gd-directivo-delete-wrapper {
max-width: 760px;
margin-inline: auto;
}
.gd-estadisticas-actions,
.gd-directivo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--gd-spacing-sm);
align-items: center;
}
.gd-profile-intro {
margin-bottom: var(--gd-spacing-xl);
}
.gd-text-muted {
color: var(--gd-color-text-muted);
}
.gd-directivo-avatar--initials {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
text-transform: uppercase;
}
.gd-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 800;
line-height: 1.25;
text-align: center;
white-space: normal;
}
.gd-status-badge--success {
color: #155724;
background: #dff3e4;
}
.gd-status-badge--danger {
color: #8b1e2d;
background: #fbe4e8;
}
.gd-status-badge--info {
color: #174a73;
background: #e4f0fa;
}
/* Clases funcionales de formularios y páginas con comportamiento JavaScript. */
.gd-estadisticas-horarios-page,
.gd-estadisticas-guardias-page,
.gd-estadisticas-ausencias-page {
width: 100%;
min-width: 0;
}
.gd-profile-name-input,
.gd-profile-surname-input,
.gd-profile-password-input,
.gd-profile-password-confirm-input,
.gd-directivo-name-input,
.gd-directivo-surname-input,
.gd-directivo-position-input,
.gd-directivo-email-input,
.gd-directivo-password-input,
.gd-directivo-password-confirm-input {
width: 100%;
max-width: 100%;
}
/* ==========================================================================
TABLAS COMO TARJETAS EN TABLET Y MÓVIL
========================================================================== */
/*
* El atributo data-gd-responsive-ready se añade solo después de que el script
* haya calculado las etiquetas. Si JavaScript falla, la tabla sigue visible y
* ajustada, sin ocultar sus encabezados.
*/
.gd-table-responsive--cards {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: visible;
}
@media (max-width: 1180px) {
.gd-main-content,
.gd-main-content__inner,
.gd-admin-page,
.gd-equipo-directivo-page,
.gd-questionnaire-card,
.gd-directivo-section {
width: 100%;
max-width: 100%;
min-width: 0;
}
.gd-table-responsive--cards {
margin-top: var(--gd-spacing-lg);
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"],
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tr,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th {
display: block;
width: 100% !important;
min-width: 0 !important;
max-width: 100%;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] {
border: 0 !important;
border-radius: 0 !important;
table-layout: auto !important;
background: transparent !important;
box-shadow: none !important;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] caption {
display: block;
width: 100%;
margin-bottom: var(--gd-spacing-sm);
text-align: left;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] thead {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 28rem), 1fr)
);
gap: var(--gd-spacing-lg);
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr {
align-self: start;
overflow: visible;
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-soft);
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th {
display: grid;
grid-template-columns: minmax(8rem, 38%) minmax(0, 1fr);
gap: var(--gd-spacing-sm);
align-items: start;
min-height: 0;
padding: 0.85rem 1rem;
border: 0;
border-bottom: 1px solid var(--gd-color-border-soft);
background: var(--gd-color-surface) !important;
color: var(--gd-color-text);
font-size: 0.95rem;
line-height: 1.5;
text-align: left !important;
white-space: normal !important;
text-overflow: clip;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > :first-child {
border-top-left-radius: calc(var(--gd-radius-lg) - 1px);
border-top-right-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > :last-child {
border-bottom: 0;
border-bottom-right-radius: calc(var(--gd-radius-lg) - 1px);
border-bottom-left-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > :only-child {
border-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td::before,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th::before {
content: attr(data-label);
display: block;
min-width: 0;
color: var(--gd-color-primary);
font-weight: 900;
line-height: 1.45;
text-align: left;
white-space: normal;
overflow-wrap: break-word;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
[data-label=""]::before,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-cell--colspan::before {
display: none;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-cell--colspan {
grid-template-columns: minmax(0, 1fr);
}
/*
* Las tablas de detalle sin thead ya contienen una etiqueta | y un valor
* | en cada fila. Se mantienen como una ficha única en lugar de crear una
* tarjeta independiente por cada dato.
*/
table.gd-table--key-value[data-gd-responsive-ready="true"] {
overflow: hidden !important;
border: 1px solid var(--gd-color-border-soft) !important;
border-radius: var(--gd-radius-lg) !important;
background: var(--gd-color-surface) !important;
box-shadow: var(--gd-shadow-soft) !important;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody {
display: block;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr {
display: grid;
grid-template-columns: minmax(8rem, 38%) minmax(0, 1fr);
gap: 0;
overflow: visible;
border: 0;
border-bottom: 1px solid var(--gd-color-border-soft);
border-radius: 0;
background: var(--gd-color-surface);
box-shadow: none;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr:last-child {
border-bottom: 0;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr:first-child > :first-child {
border-top-left-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr:first-child > :last-child {
border-top-right-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr:last-child > :first-child {
border-bottom-left-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr:last-child > :last-child {
border-bottom-right-radius: calc(var(--gd-radius-lg) - 1px);
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > th,
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > td {
border-radius: 0;
display: block;
width: 100% !important;
padding: 0.85rem 1rem;
border: 0;
background: var(--gd-color-surface) !important;
text-align: left !important;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > th {
color: var(--gd-color-primary);
font-weight: 900;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > th::before,
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > td::before {
display: none;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] td .operations,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] td .dropbutton-wrapper,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] td .form-actions {
justify-content: flex-start;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-action-cell {
grid-template-columns: minmax(0, 1fr);
background: transparent !important;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-action-cell::before {
display: none;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-action-cell .gd-table-action-button {
justify-self: center;
}
.gd-filter-grid {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
width: 100%;
}
.gd-estadisticas-actions,
.gd-directivo-actions {
flex-wrap: wrap;
width: 100%;
}
}
@media (max-width: 700px) {
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody {
grid-template-columns: 1fr;
}
.gd-main-content {
padding-inline: var(--gd-spacing-md);
}
.gd-filter-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
.gd-estadisticas-actions,
.gd-directivo-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--gd-spacing-md);
width: 100%;
}
}
@media (max-width: 480px) {
.gd-admin-page__header p:not(.gd-admin-page__eyebrow) {
font-size: 1rem;
line-height: 1.65;
}
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td,
table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th {
grid-template-columns: minmax(0, 1fr);
gap: 0.3rem;
padding: 0.8rem 0.9rem;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr {
grid-template-columns: minmax(0, 1fr);
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > th {
padding-bottom: 0.25rem;
}
table.gd-table--key-value[data-gd-responsive-ready="true"] tbody > tr > td {
padding-top: 0.25rem;
}
}
/* ==========================================================================
v4 - Normalización de botones en todos los dispositivos
- Evita botones a ancho completo.
- Mantiene acciones alineadas a la izquierda.
- Botón principal ligeramente mayor que el secundario.
========================================================================== */
.gd-main-content .form-actions,
.gd-main-content .views-exposed-form .form-actions,
.gd-main-content .actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--gd-spacing-md);
}
.gd-main-content .form-actions > *,
.gd-main-content .views-exposed-form .form-actions > *,
.gd-main-content .actions > * {
flex: 0 0 auto;
}
.gd-main-content .gd-button,
.gd-main-content .button,
.gd-main-content input[type="submit"],
.gd-main-content button[type="submit"],
.gd-main-content .user-logout-confirm .form-actions a {
display: inline-flex !important;
width: auto !important;
max-width: 100%;
min-width: 10.5rem;
min-height: 3rem;
align-self: flex-start;
justify-content: center;
text-align: center;
white-space: normal;
padding: 0.8rem 1.35rem;
}
.gd-main-content .button--primary,
.gd-main-content .gd-button--primary,
.gd-main-content input[type="submit"],
.gd-main-content button[type="submit"],
.gd-main-content .form-actions .button.button--primary,
.gd-main-content .views-exposed-form .form-actions .button.button--primary {
min-width: 12rem;
min-height: 3.35rem;
padding: 0.92rem 1.7rem;
font-size: 1rem;
font-weight: 800;
}
.gd-main-content .button--secondary,
.gd-main-content .gd-button--secondary,
.gd-main-content .form-actions .button:not(.button--primary):not(.button--danger),
.gd-main-content .views-exposed-form .form-actions .button:not(.button--primary):not(.button--danger),
.gd-main-content .user-logout-confirm .form-actions a {
min-width: 10rem;
min-height: 3rem;
padding: 0.78rem 1.3rem;
font-size: 0.96rem;
font-weight: 700;
}
.gd-main-content .button--small,
.gd-main-content .button--extrasmall {
min-width: auto;
min-height: 2.5rem;
padding: 0.55rem 0.9rem;
}
@media (max-width: 767px) {
.gd-main-content .gd-button,
.gd-main-content .button,
.gd-main-content input[type="submit"],
.gd-main-content button[type="submit"],
.gd-main-content .user-logout-confirm .form-actions a {
width: auto !important;
min-width: 9.75rem;
max-width: 100%;
}
.gd-main-content .button--primary,
.gd-main-content .gd-button--primary,
.gd-main-content input[type="submit"],
.gd-main-content button[type="submit"] {
min-width: 11rem;
}
.gd-main-content .button--secondary,
.gd-main-content .gd-button--secondary,
.gd-main-content .form-actions .button:not(.button--primary):not(.button--danger),
.gd-main-content .views-exposed-form .form-actions .button:not(.button--primary):not(.button--danger),
.gd-main-content .user-logout-confirm .form-actions a {
min-width: 9.5rem;
}
}
/* ==========================================================================
v6 - Recuperación de contraseña
========================================================================== */
.gd-password-reset-form {
width: 100%;
min-width: 0;
}
.gd-password-reset-intro {
margin-bottom: var(--gd-spacing-xl);
}
.gd-password-reset-intro h2 {
margin: 0 0 var(--gd-spacing-sm);
color: var(--gd-color-primary);
font-size: clamp(1.35rem, 3vw, 1.7rem);
line-height: 1.2;
}
.gd-password-reset-intro p {
margin: 0;
color: var(--gd-color-text-muted);
line-height: 1.6;
overflow-wrap: anywhere;
}
.gd-password-reset-intro--error {
padding: var(--gd-spacing-lg);
border: 1px solid rgba(217, 48, 37, 0.24);
border-radius: var(--gd-radius-md);
background: var(--gd-color-error-soft);
}
.gd-password-reset-form .form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--gd-spacing-md);
}
.gd-login-form .gd-password-reset-form input[type="submit"],
.gd-login-form .gd-password-reset-form button[type="submit"],
.gd-login-form .gd-password-reset-form .gd-button {
width: auto !important;
min-width: 10rem;
max-width: 100%;
}
.gd-login-form .gd-password-reset-form input[type="submit"],
.gd-login-form .gd-password-reset-form button[type="submit"],
.gd-login-form .gd-password-reset-form .gd-button--primary {
min-width: 12rem;
}
@media (max-width: 480px) {
.gd-password-reset-form .form-actions {
gap: var(--gd-spacing-sm);
}
.gd-login-form .gd-password-reset-form input[type="submit"],
.gd-login-form .gd-password-reset-form button[type="submit"],
.gd-login-form .gd-password-reset-form .gd-button {
min-width: 9.5rem;
}
}
/* ==========================================================================
v8 - Recuperación y restablecimiento de contraseña
========================================================================== */
/*
* El formulario se comporta como una tarjeta autónoma cuando Drupal utiliza
* la plantilla general. Dentro de la tarjeta de acceso no se duplica el
* contenedor visual.
*/
.gd-password-reset-form {
width: min(100% - 2rem, 34rem);
min-width: 0;
margin: clamp(1.5rem, 8vh, 4.5rem) auto;
padding: clamp(1.5rem, 4vw, 2rem);
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-xl);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-card);
}
.gd-login-card .gd-password-reset-form {
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.gd-password-reset-intro {
margin-bottom: var(--gd-spacing-xl);
}
.gd-password-reset-intro h2 {
margin: 0 0 var(--gd-spacing-sm);
color: var(--gd-color-primary);
font-size: clamp(1.4rem, 3vw, 1.8rem);
line-height: 1.2;
}
.gd-password-reset-intro p {
margin: 0;
color: var(--gd-color-text-muted);
font-size: 1rem;
line-height: 1.6;
overflow-wrap: anywhere;
}
.gd-password-reset-intro--error {
padding: var(--gd-spacing-lg);
border: 1px solid rgba(217, 48, 37, 0.24);
border-radius: var(--gd-radius-md);
background: var(--gd-color-error-soft);
}
.gd-password-reset-form .form-item {
width: 100%;
margin: 0 0 var(--gd-spacing-lg);
}
.gd-password-reset-form label {
display: block;
margin: 0 0 var(--gd-spacing-sm);
color: var(--gd-color-text);
font-size: 0.95rem;
font-weight: 800;
line-height: 1.35;
}
.gd-password-reset-form input[type="text"],
.gd-password-reset-form input[type="email"],
.gd-password-reset-form input[type="password"] {
display: block;
width: 100%;
min-width: 0;
min-height: 48px;
padding: 0 var(--gd-spacing-md);
border: 1px solid var(--gd-color-border);
border-radius: var(--gd-radius-md);
background: #FFFFFF;
color: var(--gd-color-text);
font: inherit;
line-height: 1.4;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.gd-password-reset-form input:hover {
border-color: #AEB7C2;
}
.gd-password-reset-form input:focus {
border-color: var(--gd-color-secondary);
outline: 0;
box-shadow: var(--gd-shadow-focus);
}
.gd-password-reset-form .description {
margin-top: var(--gd-spacing-sm);
color: var(--gd-color-text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.gd-password-reset-form .form-actions,
.gd-password-reset-form .gd-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--gd-spacing-md);
margin-top: var(--gd-spacing-xl);
}
.gd-password-reset-form .form-actions > *,
.gd-password-reset-form .gd-form-actions > * {
flex: 0 0 auto;
}
.gd-password-reset-form input[type="submit"],
.gd-password-reset-form button[type="submit"],
.gd-password-reset-form .gd-button {
display: inline-flex !important;
width: auto !important;
max-width: 100%;
min-width: 9.5rem;
min-height: 3rem;
align-items: center;
justify-content: center;
padding: 0.78rem 1.3rem;
border-radius: var(--gd-radius-md);
line-height: 1.2;
text-align: center;
white-space: normal;
}
.gd-password-reset-form input[type="submit"],
.gd-password-reset-form button[type="submit"],
.gd-password-reset-form .gd-button--primary {
min-width: 11.5rem;
min-height: 3.3rem;
padding: 0.9rem 1.6rem;
font-size: 1rem;
font-weight: 800;
}
.gd-password-reset-form .gd-button--secondary {
border-color: var(--gd-color-border);
background: #FFFFFF;
color: var(--gd-color-primary);
font-size: 0.96rem;
font-weight: 700;
}
.gd-password-reset-form .gd-button--secondary:hover,
.gd-password-reset-form .gd-button--secondary:focus-visible {
border-color: var(--gd-color-primary);
background: var(--gd-color-surface-soft);
color: var(--gd-color-primary-hover);
text-decoration: none;
}
@media (max-width: 480px) {
.gd-password-reset-form {
width: min(100% - 1.25rem, 34rem);
margin-top: var(--gd-spacing-lg);
margin-bottom: var(--gd-spacing-lg);
padding: var(--gd-spacing-xl);
}
.gd-login-card .gd-password-reset-form {
width: 100%;
margin: 0;
padding: 0;
}
.gd-password-reset-form .form-actions,
.gd-password-reset-form .gd-form-actions {
gap: var(--gd-spacing-sm);
}
.gd-password-reset-form input[type="submit"],
.gd-password-reset-form button[type="submit"],
.gd-password-reset-form .gd-button {
min-width: 8.75rem;
}
.gd-password-reset-form input[type="submit"],
.gd-password-reset-form button[type="submit"],
.gd-password-reset-form .gd-button--primary {
min-width: 10.25rem;
}
}
/* ==========================================================================
v9 - Tablas sin desplazamiento horizontal y botones proporcionales
========================================================================== */
/*
* Neutraliza contenedores heredados que convierten las tablas en superficies
* desplazables. Las tablas se adaptan como tarjetas hasta 1180 px.
*/
html,
body,
.gd-page,
.gd-main-content,
.gd-main-content__inner {
max-width: 100%;
min-width: 0;
}
.gd-main-content .gd-table-responsive,
.gd-main-content .gd-table-responsive--auto,
.gd-main-content .gd-table-responsive--cards,
.gd-main-content .table-responsive,
.gd-main-content .responsive-enabled,
.gd-main-content [class*="table-responsive"],
.gd-main-content .views-form,
.gd-main-content .views-form form {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: visible !important;
}
.gd-main-content table:not(.gd-table--no-responsive) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
table-layout: fixed !important;
}
.gd-main-content table:not(.gd-table--no-responsive) th,
.gd-main-content table:not(.gd-table--no-responsive) td {
min-width: 0 !important;
max-width: 100%;
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
}
/*
* Sistema único de tarjetas para cualquier tabla procesada por el tema,
* aunque Drupal o un módulo contribuyan clases de tabla distintas.
*/
@media (max-width: 1180px) {
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"],
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] {
display: block !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
table-layout: auto !important;
background: transparent !important;
box-shadow: none !important;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] thead {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody {
display: grid !important;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 28rem), 1fr)
) !important;
gap: var(--gd-spacing-lg);
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr {
display: block !important;
align-self: start;
overflow: hidden !important;
border: 1px solid var(--gd-color-border-soft);
border-radius: var(--gd-radius-lg);
background: var(--gd-color-surface);
box-shadow: var(--gd-shadow-soft);
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td {
display: grid !important;
grid-template-columns: minmax(7.5rem, 36%) minmax(0, 1fr) !important;
gap: var(--gd-spacing-sm);
align-items: start;
padding: 0.85rem 1rem;
overflow: visible !important;
border: 0;
border-bottom: 1px solid var(--gd-color-border-soft);
background: var(--gd-color-surface) !important;
text-align: left !important;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > :last-child {
border-bottom: 0;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th::before,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td::before {
content: attr(data-label);
display: block;
min-width: 0;
color: var(--gd-color-primary);
font-weight: 900;
line-height: 1.4;
overflow-wrap: anywhere;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
[data-label=""]::before,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-cell--colspan::before,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-action-cell::before {
display: none;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-cell--colspan,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr >
.gd-table-action-cell {
grid-template-columns: minmax(0, 1fr) !important;
}
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] img,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] input,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] select,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] textarea {
max-width: 100% !important;
min-width: 0 !important;
}
}
@media (max-width: 700px) {
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (max-width: 480px) {
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > th,
body table.gd-table--mobile-cards[data-gd-responsive-ready="true"] tbody > tr > td {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0.3rem;
}
}
/*
* Botones principal y secundario con proporción estable. Ningún botón de
* acción general se estira al ancho disponible en tablet o móvil.
*/
.gd-form-actions,
.form-actions,
.gd-estadisticas-actions,
.gd-directivo-actions,
.gd-filter-actions,
.views-exposed-form .form-actions {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
gap: var(--gd-spacing-md);
}
.gd-form-actions > *,
.form-actions > *,
.gd-estadisticas-actions > *,
.gd-directivo-actions > *,
.gd-filter-actions > *,
.views-exposed-form .form-actions > * {
flex: 0 0 auto;
}
.gd-button,
.button,
input[type="submit"],
button[type="submit"],
.user-logout-confirm .form-actions a,
.gd-login-form input[type="submit"],
.gd-login-form button[type="submit"] {
width: auto !important;
max-width: 100%;
min-width: 9.5rem;
min-height: 3rem;
align-self: flex-start;
padding: 0.78rem 1.3rem;
white-space: normal;
}
.gd-button--primary,
.button--primary,
input[type="submit"],
button[type="submit"],
.form-actions .button.button--primary,
.views-exposed-form .form-actions .button.button--primary {
min-width: 11.5rem;
min-height: 3.3rem;
padding: 0.9rem 1.6rem;
font-size: 1rem;
font-weight: 800;
}
.gd-button--secondary,
.button--secondary,
.form-actions .button:not(.button--primary):not(.button--danger),
.views-exposed-form .form-actions .button:not(.button--primary):not(.button--danger),
.user-logout-confirm .form-actions a {
min-width: 9.5rem;
min-height: 3rem;
padding: 0.78rem 1.3rem;
font-size: 0.96rem;
font-weight: 700;
}
@media (max-width: 768px) {
.gd-form-actions,
.form-actions,
.gd-estadisticas-actions,
.gd-directivo-actions,
.gd-filter-actions,
.views-exposed-form .form-actions {
align-items: center;
justify-content: flex-start;
gap: var(--gd-spacing-sm);
}
.gd-button,
.button,
input[type="submit"],
button[type="submit"],
.user-logout-confirm .form-actions a,
.gd-login-form input[type="submit"],
.gd-login-form button[type="submit"] {
width: auto !important;
min-width: 8.75rem;
max-width: 100%;
}
.gd-button--primary,
.button--primary,
input[type="submit"],
button[type="submit"],
.form-actions .button.button--primary,
.views-exposed-form .form-actions .button.button--primary {
min-width: 10.5rem;
}
.gd-button--secondary,
.button--secondary,
.form-actions .button:not(.button--primary):not(.button--danger),
.views-exposed-form .form-actions .button:not(.button--primary):not(.button--danger),
.user-logout-confirm .form-actions a {
min-width: 8.75rem;
}
}
@media (max-width: 360px) {
.gd-button,
.button,
input[type="submit"],
button[type="submit"],
.user-logout-confirm .form-actions a,
.gd-login-form input[type="submit"],
.gd-login-form button[type="submit"] {
min-width: 8.25rem;
padding-inline: 1rem;
}
.gd-button--primary,
.button--primary,
input[type="submit"],
button[type="submit"] {
min-width: 9.5rem;
}
}
/* ==========================================================================
Ajustes consolidados sobre la versión v9
========================================================================== */
.gd-login-page {
flex-direction: column;
gap: var(--gd-spacing-lg);
}
.gd-login-messages {
width: 100%;
max-width: 460px;
margin: 0;
}
.gd-login-messages .messages,
.gd-login-messages .messages-list,
.gd-login-messages [data-drupal-messages] {
width: 100%;
margin: 0;
}
.gd-login-messages .messages--status {
margin: 0;
box-shadow: var(--gd-shadow-soft);
}
@media (max-width: 640px) {
.gd-login-page {
gap: var(--gd-spacing-md);
}
}
/* ==========================================================================
Cabecera del profesorado con fotografía o iniciales
========================================================================== */
.gd-profesorado-page-header {
--gd-profesorado-avatar-size: 76px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: var(--gd-spacing-xl);
}
.gd-profesorado-page-header__content {
min-width: 0;
}
.gd-profesorado-page-header__avatar {
display: flex;
flex: 0 0 var(--gd-profesorado-avatar-size);
align-items: flex-start;
justify-content: flex-end;
width: var(--gd-profesorado-avatar-size);
min-width: var(--gd-profesorado-avatar-size);
height: var(--gd-profesorado-avatar-size);
min-height: var(--gd-profesorado-avatar-size);
aspect-ratio: 1 / 1;
padding-top: 0.15rem;
box-sizing: content-box;
}
.gd-profesorado-avatar {
width: var(--gd-profesorado-avatar-size);
min-width: var(--gd-profesorado-avatar-size);
max-width: var(--gd-profesorado-avatar-size);
height: var(--gd-profesorado-avatar-size);
min-height: var(--gd-profesorado-avatar-size);
max-height: var(--gd-profesorado-avatar-size);
flex: 0 0 var(--gd-profesorado-avatar-size);
aspect-ratio: 1 / 1;
box-sizing: border-box;
overflow: hidden;
border: 3px solid #FFFFFF;
border-radius: 50%;
background: var(--gd-color-primary);
box-shadow: var(--gd-shadow-soft);
color: #FFFFFF;
line-height: 1;
object-fit: cover;
}
/*
* Esta regla más específica prevalece sobre la regla general
* ".gd-main-content img { height: auto; }" y evita que una fotografía
* horizontal o vertical convierta el avatar en un óvalo.
*/
.gd-main-content img.gd-profesorado-avatar {
display: block;
width: var(--gd-profesorado-avatar-size);
min-width: var(--gd-profesorado-avatar-size);
max-width: var(--gd-profesorado-avatar-size);
height: var(--gd-profesorado-avatar-size);
min-height: var(--gd-profesorado-avatar-size);
max-height: var(--gd-profesorado-avatar-size);
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
span.gd-profesorado-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
/*
* Avatar del profesorado dentro de la tabla de gestión.
*
* Reutiliza el mismo componente visual de las cabeceras, pero con un tamaño
* adecuado para una fila de tabla. La variable mantiene idénticos el ancho y
* el alto, por lo que la imagen o las iniciales conservan siempre la forma
* circular en escritorio, tablet y móvil.
*/
.gd-profesorado-table__avatar-column,
.gd-profesorado-table__avatar-cell {
width: 5rem;
min-width: 5rem;
padding-inline: 0.5rem !important;
text-align: center !important;
}
.gd-profesorado-table__avatar-cell {
--gd-profesorado-avatar-size: 52px;
}
.gd-profesorado-table__avatar-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--gd-profesorado-avatar-size);
min-width: var(--gd-profesorado-avatar-size);
height: var(--gd-profesorado-avatar-size);
min-height: var(--gd-profesorado-avatar-size);
aspect-ratio: 1 / 1;
vertical-align: middle;
}
.gd-profesorado-table__avatar {
font-size: 0.88rem;
font-weight: 900;
letter-spacing: 0.02em;
}
@media (max-width: 1180px) {
table.gd-profesorado-table[data-gd-responsive-ready="true"]
.gd-profesorado-table__avatar-cell {
--gd-profesorado-avatar-size: 52px;
align-items: center;
}
}
@media (max-width: 640px) {
table.gd-profesorado-table[data-gd-responsive-ready="true"]
.gd-profesorado-table__avatar-cell {
--gd-profesorado-avatar-size: 48px;
}
.gd-profesorado-table__avatar {
font-size: 0.82rem;
}
}
/*
* Avatar común del equipo directivo.
*
* La posición absoluta actúa como respaldo si JavaScript no está disponible
* o una pantalla no utiliza la cabecera estándar. Cuando el comportamiento
* JavaScript lo introduce en la cabecera, vuelve al flujo normal de la
* cuadrícula.
*/
.gd-main-content__inner--equipo-avatar {
position: relative;
}
.gd-equipo-directivo-avatar-source {
--gd-profesorado-avatar-size: 76px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: var(--gd-profesorado-avatar-size);
min-width: var(--gd-profesorado-avatar-size);
height: var(--gd-profesorado-avatar-size);
min-height: var(--gd-profesorado-avatar-size);
aspect-ratio: 1 / 1;
}
.gd-main-content__inner--equipo-avatar .gd-admin-page__header,
.gd-main-content__inner--equipo-avatar .gd-directivo-form-intro {
min-height: var(--gd-profesorado-avatar-size, 76px);
padding-right: calc(76px + var(--gd-spacing-xl));
}
.gd-main-content__inner--equipo-avatar
.gd-equipo-directivo-page-header {
padding-right: 0;
}
.gd-equipo-directivo-page-header
> .gd-equipo-directivo-avatar-source[data-gd-avatar-placed="true"] {
position: static;
top: auto;
right: auto;
z-index: auto;
align-self: start;
width: var(--gd-profesorado-avatar-size);
min-width: var(--gd-profesorado-avatar-size);
height: var(--gd-profesorado-avatar-size);
min-height: var(--gd-profesorado-avatar-size);
}
.gd-equipo-directivo-page-header
> .gd-equipo-directivo-avatar-source[data-gd-avatar-placed="true"]
.gd-equipo-directivo-page-header__avatar {
padding-top: 0;
}
@media (max-width: 640px) {
.gd-profesorado-page-header,
.gd-equipo-directivo-avatar-source {
--gd-profesorado-avatar-size: 60px;
}
.gd-profesorado-page-header {
gap: var(--gd-spacing-md);
}
.gd-main-content__inner--equipo-avatar .gd-admin-page__header,
.gd-main-content__inner--equipo-avatar .gd-directivo-form-intro {
min-height: 60px;
padding-right: calc(60px + var(--gd-spacing-md));
}
.gd-profesorado-avatar {
font-size: 0.9rem;
}
}
@media (max-width: 380px) {
.gd-profesorado-page-header,
.gd-equipo-directivo-avatar-source {
--gd-profesorado-avatar-size: 52px;
}
.gd-profesorado-page-header {
gap: var(--gd-spacing-sm);
}
.gd-main-content__inner--equipo-avatar .gd-admin-page__header,
.gd-main-content__inner--equipo-avatar .gd-directivo-form-intro {
min-height: 52px;
padding-right: calc(52px + var(--gd-spacing-sm));
}
.gd-profesorado-avatar {
font-size: 0.82rem;
}
}
/* ==========================================================================
v14 - Columnas de acciones contenidas en tablas de estadísticas
========================================================================== */
/*
* Reserva un ancho estable para las acciones en escritorio y evita que los
* enlaces salgan de la celda. El texto puede ocupar varias líneas, pero las
* palabras no se cortan. En tablet y móvil la celda pasa a ocupar todo el
* ancho de la tarjeta responsive.
*/
.gd-main-content table th.gd-table-action-column,
.gd-main-content table td.gd-table-action-cell--contained {
width: 10.5rem;
max-width: 10.5rem;
min-width: 0 !important;
padding-inline: 0.55rem;
box-sizing: border-box;
text-align: center !important;
vertical-align: middle;
}
.gd-main-content table td.gd-table-action-cell--contained >
.gd-table-action-button {
box-sizing: border-box;
width: auto !important;
max-width: 100%;
min-width: 0 !important;
white-space: normal !important;
}
.gd-main-content table td.gd-table-action-cell--contained
.gd-table-action-button__text {
min-width: 0;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
@media (max-width: 1180px) {
body .gd-main-content table.gd-table--mobile-cards
th.gd-table-action-column,
body .gd-main-content table.gd-table--mobile-cards
td.gd-table-action-cell--contained {
width: 100% !important;
max-width: 100% !important;
}
body .gd-main-content table.gd-table--mobile-cards
td.gd-table-action-cell--contained > .gd-table-action-button {
justify-self: center;
}
}
|