/* =========================================================
EYE GESTIÓN - Sistema de diseño institucional
Departamento de Electricidad y Electrónica
CIFP NOROESTE
========================================================= */
:root {
color-scheme: light;
/* Paleta principal */
--bg-base: #f0f9fb;
--bg-soft: #e6f4f9;
--bg-card: #ffffff;
--bg-elevated: #fbfeff;
/* Alias retrocompatible para los ~14 usos legacy de var(--bg).
Mantiene el contraste correcto en KPIs / cards / banners. */
--bg: var(--bg-card);
/* Azul corporativo (institucional) */
--navy-900: #0b2545;
--navy-800: #13315c;
--navy-700: #1e3a5f;
--navy-600: #2a4d7c;
/* Cyan/turquesa (acentos y acción) */
--cyan-50: #ecfeff;
--cyan-100: #cffafe;
--cyan-200: #a5f3fc;
--cyan-300: #67e8f9;
--cyan-400: #22d3ee;
--cyan-500: #06b6d4;
--cyan-600: #0891b2;
--cyan-700: #0e7490;
--cyan-800: #155e75;
/* Texto */
--text-main: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b; /* contraste WCAG AA sobre fondo claro */
--text-inverse: #ffffff;
/* Estados */
--success: #10b981;
--success-bg: #d1fae5;
--warning: #f59e0b;
--warning-bg: #fef3c7;
--danger: #ef4444;
--danger-bg: #fee2e2;
--info: #3b82f6;
--info-bg: #dbeafe;
/* Bordes y sombras */
--border: #e2e8f0;
--border-strong: #cbd5e1;
--shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
--shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
--shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
--shadow-glow: 0 0 0 4px rgba(6, 182, 212, 0.12);
/* Geometría */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
/* Tipografía */
--font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}
/* =========================================================
Reset y base
========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--text-main);
background: var(--bg-base);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--cyan-700); text-decoration: none; }
a:hover { color: var(--cyan-800); }
/* =========================================================
Login / Landing
========================================================= */
.landing {
min-height: 100vh;
display: grid;
grid-template-columns: 1.05fr 1fr;
background:
radial-gradient(1200px 600px at -10% -20%, rgba(34, 211, 238, 0.18), transparent 60%),
radial-gradient(900px 500px at 110% 110%, rgba(11, 37, 69, 0.10), transparent 55%),
linear-gradient(180deg, #f0fbfd 0%, #ffffff 100%);
}
.landing-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px 72px;
overflow: hidden;
}
.landing-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(11, 37, 69, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 37, 69, 0.05) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
pointer-events: none;
}
.landing-hero > * { position: relative; z-index: 1; }
.brand-mark {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 48px;
font-weight: 700;
color: var(--navy-900);
letter-spacing: -0.01em;
}
.brand-mark .logo {
width: 48px; height: 48px;
border-radius: 14px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--cyan-500), var(--navy-700));
box-shadow: 0 10px 24px -8px rgba(6, 182, 212, 0.55);
color: white;
overflow: hidden;
}
.brand-mark .logo.logo-img {
background: transparent;
box-shadow: 0 10px 24px -8px rgba(6, 182, 212, 0.45);
padding: 2px;
}
.brand-mark .logo.logo-img img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.sidebar .brand-mark .logo.logo-img {
width: 40px; height: 40px;
border-radius: 12px;
}
.sidebar.super .brand-mark .logo.logo-img {
box-shadow: 0 10px 24px -8px rgba(245, 158, 11, 0.55);
}
.brand-mark .name { font-size: 19px; line-height: 1; }
.brand-mark .name small {
display: block;
font-weight: 500;
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.landing-title {
font-size: 56px;
line-height: 1.05;
font-weight: 800;
color: var(--navy-900);
letter-spacing: -0.025em;
margin: 0 0 20px;
}
.landing-title .accent {
background: linear-gradient(120deg, var(--cyan-600), var(--cyan-400));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.landing-subtitle {
font-size: 18px;
color: var(--text-secondary);
max-width: 520px;
margin: 0 0 40px;
}
.landing-bullets {
list-style: none;
padding: 0;
margin: 0 0 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 32px;
max-width: 560px;
}
.landing-bullets li {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 14px;
color: var(--text-main);
}
.landing-bullets li::before {
content: "";
flex: 0 0 18px;
width: 18px; height: 18px;
border-radius: 50%;
margin-top: 1px;
background: var(--cyan-100);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
}
.landing-footer {
margin-top: auto;
display: flex;
gap: 24px;
color: var(--text-muted);
font-size: 12px;
}
.landing-form-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 64px;
background: transparent;
}
.login-card {
width: 100%;
max-width: 440px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 40px;
box-shadow: var(--shadow-lg);
}
.login-card h2 {
margin: 0 0 6px;
font-size: 24px;
color: var(--navy-900);
letter-spacing: -0.01em;
}
.login-card .hint {
color: var(--text-secondary);
margin: 0 0 28px;
}
.login-card .roles {
display: flex; flex-wrap: wrap;
gap: 6px;
margin: 16px 0 28px;
padding: 14px;
background: var(--bg-soft);
border-radius: var(--radius);
border: 1px dashed var(--border-strong);
}
.login-card .roles small {
width: 100%;
display: block;
margin-bottom: 6px;
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
}
.role-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: white;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--navy-800);
cursor: pointer;
transition: all .15s;
}
.role-chip:hover { border-color: var(--cyan-400); color: var(--cyan-700); }
.role-chip.active {
background: var(--cyan-600);
color: white;
border-color: var(--cyan-600);
}
/* =========================================================
Layout principal (post-login)
========================================================= */
.app-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 264px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
background: var(--bg-base);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
color: #cbd9ec;
padding: 22px 16px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
/* Mostrar/ocultar contraseña (login) */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-toggle {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; border: none; background: transparent; cursor: pointer;
display: grid; place-items: center; color: var(--text-muted); border-radius: 8px;
}
.pw-toggle:hover { color: var(--cyan-700); background: var(--cyan-100); }
.pw-toggle svg { width: 19px; height: 19px; }
/* Pantalla de cierre por inactividad */
.inactivity-lock {
position: fixed; inset: 0; z-index: 4000;
background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
color: #e6eefb; display: grid; place-items: center; text-align: center; padding: 24px;
}
.inactivity-lock .box { max-width: 440px; }
.inactivity-lock .ico { width: 72px; height: 72px; margin: 0 auto 18px; color: var(--cyan-300); }
.inactivity-lock h1 { font-size: 24px; font-weight: 800; margin: 0 0 10px; color: #fff; }
.inactivity-lock p { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.sidebar .brand-mark {
color: white;
margin-bottom: 28px;
padding: 4px 8px;
display: flex; align-items: center; gap: 10px;
}
.sidebar-pin {
margin-left: auto; flex: 0 0 auto;
width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center;
background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: all .15s;
}
.sidebar-pin:hover { background: rgba(255,255,255,0.14); color: #fff; }
.sidebar-pin svg { width: 16px; height: 16px; }
.app-shell.sidebar-auto .sidebar-pin { color: var(--cyan-300); transform: rotate(45deg); }
.sidebar-edge { display: none; }
/* Modo auto-ocultar (solo escritorio) */
@media (min-width: 901px) {
.app-shell.sidebar-auto { grid-template-columns: 0 1fr; }
.app-shell.sidebar-auto > .sidebar {
position: fixed; left: 0; top: 0; bottom: 0; width: 264px;
transform: translateX(-100%); transition: transform .2s ease; z-index: 120;
box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.app-shell.sidebar-auto > .sidebar:hover,
.app-shell.sidebar-auto > .sidebar.peek { transform: translateX(0); }
.app-shell.sidebar-auto .sidebar-edge {
display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 12px; z-index: 119;
}
}
.sidebar .brand-mark .name small { color: rgba(255,255,255,0.55); }
.sidebar-section {
margin-top: 18px;
margin-bottom: 6px;
padding: 0 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
margin: 2px 0;
border-radius: var(--radius);
color: rgba(255,255,255,0.78);
font-weight: 500;
font-size: 13.5px;
cursor: pointer;
transition: all .15s;
border-left: 3px solid transparent;
}
.nav-item:hover {
background: rgba(255,255,255,0.06);
color: white;
}
.nav-item.active {
background: linear-gradient(90deg, rgba(6, 182, 212, 0.22), rgba(6, 182, 212, 0.05));
color: white;
border-left-color: var(--cyan-400);
}
.nav-item .icon { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-item .badge {
margin-left: auto;
background: var(--cyan-500);
color: white;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
}
.nav-item .badge.warn { background: var(--warning); }
/* Grupo de navegación desplegable (Actas → Órdenes / Hoja de firmas) */
.nav-caret { width: 15px; height: 15px; margin-left: auto; flex: 0 0 15px; transition: transform .18s; opacity: .8; }
.nav-group.open .nav-parent .nav-caret { transform: rotate(180deg); }
.nav-parent .badge { margin-left: 6px; }
.nav-children { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.nav-group.open .nav-children { max-height: 280px; }
.nav-child { padding-left: 30px; font-size: 12.8px; color: rgba(255,255,255,0.66); }
.nav-child .icon { width: 15px; height: 15px; flex: 0 0 15px; }
.sidebar-user {
margin-top: 24px;
padding: 14px;
background: rgba(255,255,255,0.05);
border-radius: var(--radius);
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-user .avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan-400), var(--cyan-700));
display: grid; place-items: center;
color: white;
font-weight: 700;
font-size: 13px;
}
.sidebar-user .meta { flex: 1; min-width: 0; }
.sidebar-user .meta .who { color: white; font-weight: 600; font-size: 13px; }
.sidebar-user .meta .role { color: rgba(255,255,255,0.5); font-size: 11px; }
/* Header */
.topbar {
grid-area: header;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
padding: 14px 32px;
display: flex;
align-items: center;
gap: 20px;
position: sticky;
top: 0;
z-index: 20;
}
.topbar .page-head {
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.topbar .crumbs { color: var(--text-muted); font-size: 11.5px; line-height: 1.2; }
.topbar h1 {
margin: 1px 0 0;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--navy-900);
line-height: 1.15;
}
.topbar .page-sub {
color: var(--text-secondary);
font-size: 12px;
line-height: 1.25;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60vw;
}
.topbar .page-sub:empty { display: none; }
/* Reducir el padding vertical de la topbar — sin el subtítulo bajo el h1 en
las vistas, las cabeceras del cuerpo eran redundantes y ocupaban altura. */
.topbar { padding-top: 10px; padding-bottom: 10px; }
/* Cuando la section-hd quedó solo con acciones (post-proceso de cabeceras),
alineamos el bloque de acciones a la derecha sin ocupar la altura completa. */
.section-hd.section-hd-actions-only {
margin-bottom: 8px;
justify-content: flex-end;
}
.topbar .search {
margin-left: auto;
min-width: 320px;
position: relative;
}
.topbar .search input {
width: 100%;
padding: 9px 14px 9px 38px;
border: 1px solid var(--border);
background: var(--bg-base);
border-radius: var(--radius);
font-size: 13px;
outline: none;
transition: border-color .15s, background .15s;
}
.topbar .search input:focus {
border-color: var(--cyan-500);
background: white;
}
.topbar .search svg {
position: absolute;
left: 12px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--text-muted);
}
.topbar .icon-btn {
position: relative;
width: 38px; height: 38px;
border-radius: var(--radius);
display: grid; place-items: center;
background: var(--bg-soft);
color: var(--navy-800);
transition: all .15s;
}
.topbar .icon-btn:hover { background: var(--cyan-100); color: var(--cyan-700); }
.topbar .icon-btn .dot {
position: absolute; top: 9px; right: 9px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--warning);
border: 2px solid var(--bg-card);
}
.topbar .user-pill {
display: flex; align-items: center; gap: 10px;
padding: 4px 4px 4px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-card);
}
.topbar .user-pill .avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan-400), var(--cyan-700));
display: grid; place-items: center; color: white; font-weight: 700; font-size: 11px;
}
/* Main */
.main {
grid-area: main;
padding: 28px 32px 48px;
overflow-x: hidden;
}
/* =========================================================
Componentes reutilizables
========================================================= */
/* Botones */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--radius);
font-weight: 600;
font-size: 13.5px;
letter-spacing: -0.005em;
border: 1px solid transparent;
transition: all .15s;
white-space: nowrap;
}
.btn-primary {
background: var(--cyan-600);
color: white;
box-shadow: 0 6px 14px -6px rgba(8, 145, 178, 0.55);
}
.btn-primary:hover { background: var(--cyan-700); }
.btn-secondary {
background: var(--bg-card);
color: var(--navy-800);
border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--cyan-500); color: var(--cyan-700); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--navy-800); }
/* Botón "Envío Elección a Docentes": azul intenso, borde azul muy oscuro y
borde interior fino blanco (anillo blanco por dentro del borde). */
.btn-envio-eleccion {
background: #1d4ed8;
color: #fff;
font-weight: 700;
border: 2px solid #0a1e44;
box-shadow: inset 0 0 0 1.5px #ffffff, 0 6px 14px -6px rgba(10, 30, 68, 0.55);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.btn-envio-eleccion:hover {
background: #1e40af;
border-color: #06122c;
box-shadow: inset 0 0 0 1.5px #ffffff, 0 8px 18px -6px rgba(10, 30, 68, 0.7);
}
.btn-envio-eleccion svg { color: #fff; }
/* Selección de docentes en el modal de envío de la elección */
.eh-env-all {
font-weight: 700; font-size: 13px; cursor: pointer;
padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg-soft); margin-bottom: 8px;
}
.eh-env-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.eh-env-row {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; font-size: 13px;
border-bottom: 1px solid var(--border);
}
.eh-env-row:last-child { border-bottom: none; }
.eh-env-row:hover { background: var(--bg-soft); }
.eh-env-pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.eh-env-info { flex: 1; min-width: 0; }
.eh-env-prev { flex: none; white-space: nowrap; }
.eh-env-all input, .eh-env-chk { width: 16px; height: 16px; flex: none; cursor: pointer; }
/* Botón "Volver a categorías": sombreado rojo suave con borde rojo intenso. */
.btn-volver-cat { background: #fee2e2; color: #b42318; border: 1.5px solid #dc2626; box-shadow: var(--shadow-sm); }
.btn-volver-cat:hover { background: #fecaca; color: #991b1b; border-color: #b91c1c; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.config-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 20px;
cursor: pointer;
}
.config-toggle > span:first-child {
font-size: 13px;
color: var(--navy-900);
}
.config-switch-wrap {
position: relative;
flex: 0 0 auto;
width: 36px;
height: 20px;
}
.config-switch-wrap input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.config-switch {
position: absolute;
inset: 0;
background: var(--bg-soft);
border-radius: 999px;
transition: background .15s;
}
.config-switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,.15);
transition: left .15s;
}
.config-switch-wrap input:checked + .config-switch { background: var(--cyan-600); }
.config-switch-wrap input:checked + .config-switch::after { left: 18px; }
.config-switch-wrap input:focus-visible + .config-switch {
outline: 3px solid var(--cyan-200);
outline-offset: 2px;
}
/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
font-size: 12px;
font-weight: 600;
color: var(--navy-800);
letter-spacing: 0.01em;
}
.field label .req { color: var(--danger); }
.input, .select, .textarea {
padding: 10px 14px;
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: var(--radius);
font-size: 13.5px;
color: var(--text-main);
width: 100%;
outline: none;
transition: all .15s;
}
.input:focus, .select:focus, .textarea:focus {
border-color: var(--cyan-500);
box-shadow: var(--shadow-glow);
}
.input::placeholder { color: var(--text-muted); }
.textarea { resize: vertical; min-height: 90px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.field-help { color: var(--text-muted); font-size: 11px; margin-top: -2px; }
/* Tarjetas */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow-sm);
}
.card.flat { box-shadow: none; }
.card-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.card-hd h3 {
margin: 0;
font-size: 15px;
color: var(--navy-900);
letter-spacing: -0.005em;
}
.card-hd .actions { display: flex; gap: 8px; }
/* Tarjetas de acceso a módulo (dashboard) */
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.module-card {
display: flex; flex-direction: column; gap: 10px;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all .2s;
position: relative;
overflow: hidden;
}
.module-card::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.06) 100%);
opacity: 0;
transition: opacity .2s;
}
.module-card:hover {
border-color: var(--cyan-400);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.module-card:hover::before { opacity: 1; }
.module-card > * { position: relative; z-index: 1; }
.module-card .ico {
width: 44px; height: 44px;
border-radius: 12px;
display: grid; place-items: center;
color: white;
background: linear-gradient(135deg, var(--cyan-500), var(--cyan-700));
}
.module-card .ico.navy { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); }
.module-card .ico.amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.module-card .ico.violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.module-card .ico.emerald { background: linear-gradient(135deg, #34d399, #047857); }
.module-card .ico.rose { background: linear-gradient(135deg, #fb7185, #be123c); }
.module-card .ico.slate { background: linear-gradient(135deg, #64748b, #334155); }
.module-card h4 { margin: 0; font-size: 14.5px; color: var(--navy-900); }
.module-card p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.module-card .meta {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto;
padding-top: 12px;
font-size: 11.5px;
color: var(--text-muted);
}
.module-card .meta strong { color: var(--cyan-700); font-weight: 700; }
/* KPI tiles */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
position: relative;
overflow: hidden;
}
.kpi .label { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi .value {
font-size: 28px;
font-weight: 700;
color: var(--navy-900);
margin-top: 4px;
letter-spacing: -0.02em;
line-height: 1.1;
}
.kpi .delta {
font-size: 11px;
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.kpi .delta.up { color: var(--success); }
.kpi .delta.dn { color: var(--danger); }
.kpi .ico-bg {
position: absolute;
right: 12px; bottom: 8px;
color: var(--cyan-100);
width: 48px; height: 48px;
}
/* Badges */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
letter-spacing: 0.02em;
}
.badge.success { background: var(--success-bg); color: #047857; }
.badge.warning { background: var(--warning-bg); color: #b45309; }
.badge.danger { background: var(--danger-bg); color: #b91c1c; }
.badge.info { background: var(--info-bg); color: #1d4ed8; }
.badge.neutral { background: var(--bg-soft); color: var(--navy-700); }
.badge.cyan { background: var(--cyan-100); color: var(--cyan-800); }
.badge .dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
/* Tablas */
/* overflow-x:auto permite desplazarse en horizontal cuando la tabla es más ancha que
el contenedor (p. ej. la tabla de Asignación FEOE con "Tutor académico"); el
border-radius sigue recortando las esquinas. */
.table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }
table.data {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
table.data thead th {
background: var(--bg-soft);
padding: 12px 14px;
text-align: left;
font-weight: 600;
font-size: 11px;
color: var(--navy-800);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
}
table.data tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--border);
color: var(--text-main);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--bg-soft); }
/* Catálogo de compras */
.catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.product-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all .15s;
}
.product-card:hover {
border-color: var(--cyan-400);
box-shadow: var(--shadow);
}
.product-card .thumb {
aspect-ratio: 16/10;
background: linear-gradient(135deg, var(--bg-soft), var(--cyan-50));
display: grid; place-items: center;
color: var(--cyan-700);
font-size: 36px;
position: relative; overflow: hidden;
}
.product-card .thumb .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg-soft); }
.product-card .thumb .thumb-ico { position: relative; z-index: 0; }
.product-card .body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card .name { font-weight: 600; color: var(--navy-900); font-size: 14px; }
.product-card .ref { font-size: 11px; color: var(--text-muted); }
.product-card .desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin: 4px 0 8px; }
.product-card .footer {
margin-top: auto;
padding-top: 8px;
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.product-card .price { font-weight: 700; color: var(--navy-900); }
/* Categorías */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
background: var(--bg-card);
color: var(--navy-800);
cursor: pointer;
transition: all .15s;
}
.chip:hover { border-color: var(--cyan-400); color: var(--cyan-700); }
.chip.active { background: var(--cyan-600); color: white; border-color: var(--cyan-600); }
/* Hoja de firmas - timeline */
.signers-list { list-style: none; padding: 0; margin: 0; }
.signer {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.signer:last-child { border-bottom: 0; }
.signer .avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan-400), var(--navy-700));
color: white;
display: grid; place-items: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.signer .who { flex: 1; min-width: 0; }
.signer .who .name { font-weight: 600; color: var(--navy-900); font-size: 14px; }
.signer .who .role { color: var(--text-muted); font-size: 11.5px; }
.signer .stamp { text-align: right; }
.signer .stamp .ts { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
/* Pasos / Stepper */
.steps { display: flex; gap: 8px; margin-bottom: 22px; }
.step {
padding: 8px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
display: flex; align-items: center; gap: 6px;
}
.step .n {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg-soft);
color: var(--text-muted);
font-size: 10px;
display: grid; place-items: center;
}
.step.active { background: var(--cyan-600); border-color: var(--cyan-600); color: white; }
.step.active .n { background: rgba(255,255,255,0.25); color: white; }
.step.done { background: var(--success-bg); border-color: var(--success-bg); color: #047857; }
.step.done .n { background: var(--success); color: white; }
/* Barra de progreso */
.progress {
width: 100%;
height: 6px;
background: var(--bg-soft);
border-radius: 999px;
overflow: hidden;
}
.progress .bar {
height: 100%;
background: linear-gradient(90deg, var(--cyan-500), var(--cyan-700));
border-radius: 999px;
transition: width .4s;
}
/* Banner / Alert */
.banner {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 18px;
border-left: 3px solid;
}
.banner.success { background: var(--success-bg); color: #065f46; border-color: var(--success); }
.banner.warning { background: var(--warning-bg); color: #92400e; border-color: var(--warning); }
.banner.danger { background: var(--danger-bg); color: #991b1b; border-color: var(--danger); }
.banner.info { background: var(--info-bg); color: #1e40af; border-color: var(--info); }
.banner svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
/* El contenido interno ocupa todo el ancho restante para que el texto fluya en
una sola línea cuando el espacio lo permite (en pantallas anchas). */
.banner > div { flex: 1; min-width: 0; line-height: 1.45; }
/* Antes el era display:block, lo que rompía cualquier banner en líneas:
"texto antes" / "STRONG" / "texto después". Volvemos al comportamiento inline
natural; los pocos banners que usan como título de aviso quedan
igualmente destacados por la negrita. Usamos !important para blindarnos
ante cualquier regla más específica (p. ej. .card .banner strong) que
pudiese reintroducir el block-display heredado. */
.banner strong,
.banner > div strong,
.banner.info strong,
.banner.warning strong,
.banner.success strong,
.banner.danger strong { display: inline !important; margin: 0 !important; }
/* Modificador opcional: si en algún caso el debe seguir comportándose
como título separado (ocupando su propia línea), basta con añadir la clase
`banner-titled` al banner. */
.banner.banner-titled strong { display: block !important; margin-bottom: 2px !important; }
/* Card plegable de valoración de empresas FEOE
─────────────────────────────────────────────
Por defecto cada empresa pendiente / valorada aparece colapsada y solo se
muestran el nombre de la empresa y la etiqueta "Sin valorar" / "Valorado".
Pulsar sobre la cabecera despliega el resto (estrellas, exclusión, botón).
*/
.fe-val-card { padding: 0; overflow: hidden; }
.fe-val-hd {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
padding: 12px 16px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: background-color .15s ease;
}
.fe-val-hd:hover { background: rgba(0,0,0,0.025); }
.fe-val-hd-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.fe-val-hd strong { color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-val-caret {
flex-shrink: 0;
color: var(--text-muted);
transition: transform .2s ease;
}
.fe-val-card.is-open .fe-val-caret { transform: rotate(90deg); }
.fe-val-body { padding: 0 16px 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.fe-val-body[hidden] { display: none !important; }
/* Section header */
.section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-hd h2 { margin: 0; font-size: 18px; color: var(--navy-900); letter-spacing: -0.01em; }
.section-hd .actions { display: flex; gap: 8px; }
.section-sub { color: var(--text-secondary); font-size: 13px; margin: -4px 0 18px; }
/* Documento estilo PDF */
.doc-preview {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 44px;
font-family: 'Georgia', 'Times New Roman', serif;
color: var(--text-main);
line-height: 1.7;
box-shadow: var(--shadow);
}
.doc-preview .doc-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 2px solid var(--navy-900);
font-family: var(--font-sans);
}
.doc-preview .doc-head .left { display: flex; align-items: center; gap: 14px; }
.doc-preview .doc-head .doc-logos { display: flex; align-items: center; gap: 12px; }
.doc-preview .doc-head .doc-logos img { height: 52px; width: auto; max-width: 80px; object-fit: contain; }
.doc-preview .doc-head .seal {
width: 52px; height: 52px;
background: linear-gradient(135deg, #DC2626, #991B1B);
border-radius: 6px;
color: white;
display: grid; place-items: center;
font-size: 8px; text-align: center;
font-weight: 700; line-height: 1.1;
padding: 2px;
}
.doc-preview .doc-head .gov {
font-size: 10px; color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.doc-preview .doc-head .center {
font-size: 13px; color: var(--navy-900);
font-weight: 700;
}
.doc-preview h2 {
font-family: var(--font-sans);
text-align: center;
font-size: 16px;
margin: 18px 0 24px;
color: var(--navy-900);
}
.doc-preview h3 {
font-family: var(--font-sans);
font-size: 14px;
color: var(--navy-900);
margin: 22px 0 8px;
}
.doc-preview p { margin: 8px 0; }
.doc-preview ul { padding-left: 22px; }
.doc-preview .signature {
margin-top: 48px;
text-align: right;
}
/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab {
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all .15s;
}
.tab:hover { color: var(--cyan-700); }
.tab.active { color: var(--cyan-700); border-color: var(--cyan-600); }
/* Layouts especiales */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: flex-start; }
/* Elección de módulos: izquierda más estrecha y derecha (cola de turno) más ancha. */
.eh-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: flex-start; }
.split-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* Dashboard trio: Tareas (compacto) · Horario del día (medio, ajustado) · Calendario */
.dashboard-trio {
display: grid;
grid-template-columns: 0.85fr 1.05fr 1.05fr;
gap: 18px;
align-items: flex-start;
}
@media (max-width: 1200px) {
.dashboard-trio { grid-template-columns: 1fr 1fr; }
.dashboard-trio > .card:nth-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.dashboard-trio { grid-template-columns: 1fr; }
.dashboard-trio > .card:nth-child(1) { grid-column: auto; }
}
/* Lista compacta para Tareas pendientes (más densa, menos altura por fila) */
.simple-list-compact li { padding: 7px 0; gap: 8px; }
.simple-list-compact li .ico { width: 26px; height: 26px; }
.simple-list-compact li .meta .t { font-size: 13px; line-height: 1.25; }
.simple-list-compact li .meta .s { font-size: 11px; }
/* Widget "Horario del día" */
.hdia-hd { flex-wrap: wrap; gap: 8px; }
.hdia-picker { display: inline-flex; align-items: center; gap: 4px; }
.hdia-picker .input-sm { padding: 4px 8px; font-size: 12px; height: 30px; }
.hdia-picker .hdia-fecha { width: 140px; }
.hdia-cabecera {
padding: 6px 12px 10px;
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
border-bottom: 1px solid var(--border);
}
.hdia-cabecera.es-hoy { color: var(--navy-900); }
.hdia-body { padding: 8px 10px 10px; max-height: 360px; overflow-y: auto; }
.hdia-row {
display: grid;
grid-template-columns: 64px 1fr;
gap: 10px;
padding: 8px;
border-radius: 8px;
border: 1px solid var(--border);
margin-bottom: 6px;
cursor: pointer;
transition: background .15s, border-color .15s;
background: var(--bg);
}
.hdia-row:hover { background: var(--bg-soft); border-color: var(--cyan-400); }
.hdia-row.hdia-now {
background: linear-gradient(90deg, rgba(220,38,38,0.08), transparent 60%);
border-color: var(--danger);
box-shadow: 0 0 0 1px var(--danger);
}
.hdia-row.hdia-reunion { border-style: dashed; }
.hdia-hora {
display: flex; flex-direction: column; align-items: flex-start;
font-size: 13px; color: var(--navy-900); line-height: 1.1;
}
.hdia-hora strong { font-size: 14px; }
.hdia-info { min-width: 0; }
.hdia-modulo { font-size: 13px; color: var(--navy-900); line-height: 1.3; }
.hdia-meta { margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hdia-meta svg { vertical-align: middle; }
.hdia-empty {
display: flex; align-items: center; gap: 10px;
padding: 14px; color: var(--text-secondary); font-size: 13px;
background: var(--bg-soft); border-radius: 8px;
}
.hdia-reuniones { margin-top: 4px; }
/* ============ Seguimiento diario del Cuaderno de Aula ============ */
.cad-seguimiento { padding: 12px 0; }
/* Toolbar compacta en una sola línea: fecha | semana | franjas. Wrap solo en
resoluciones muy estrechas; en escritorio queda toda en horizontal. */
.cad-seg-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 10px;
background: var(--bg-soft); border: 1px solid var(--border);
margin-bottom: 14px;
flex-wrap: wrap;
}
.cad-seg-fecha-nav {
display: flex; align-items: center; gap: 6px;
flex-wrap: nowrap;
}
.cad-seg-fecha-nav .input { padding: 4px 8px; font-size: 12px; height: 30px; width: 130px; }
.cad-seg-fecha-nav .btn-sm { height: 28px; padding: 4px 8px; }
.cad-seg-fecha-label {
font-weight: 600; color: var(--navy-900); font-size: 13px; margin: 0 4px;
white-space: nowrap;
}
.cad-seg-toolbar .badge { white-space: nowrap; }
/* Separador vertical entre bloques de la toolbar */
.cad-seg-toolbar::before,
.cad-seg-toolbar::after { content: none; }
.cad-seg-sep {
width: 1px; height: 24px; background: var(--border);
margin: 0 2px;
flex-shrink: 0;
}
/* Mini-semana: en línea, compacta */
.cad-seg-semana {
display: inline-flex; gap: 3px; align-items: stretch;
flex-shrink: 0;
}
/* Franjas: en línea, scroll horizontal si no caben en pantallas pequeñas */
.cad-seg-franjas {
display: flex; gap: 5px;
flex: 1; min-width: 0;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 2px;
}
.cad-seg-franjas::-webkit-scrollbar { height: 4px; }
.cad-seg-franjas::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.cad-seg-franja {
display: inline-flex; flex-direction: column; align-items: flex-start;
gap: 1px; padding: 4px 10px; border-radius: 6px;
border: 1px solid var(--border); background: var(--bg);
cursor: pointer; transition: all .15s;
min-width: auto;
flex-shrink: 0;
line-height: 1.15;
}
.cad-seg-franja strong { font-size: 12px; }
.cad-seg-franja .text-xs { font-size: 10px; }
.cad-seg-franja .badge { display: none; }
/* En la nueva toolbar compacta no mostramos el badge "Prog./OK" dentro de la
franja para ganar espacio (sigue siendo accesible via tiene-reg con borde verde). */
@media (max-width: 900px) {
.cad-seg-toolbar { gap: 8px; }
.cad-seg-fecha-label { display: none; }
.cad-seg-semana .cad-seg-dia { width: 30px; padding: 4px 2px; }
.cad-seg-sep { display: none; }
}
.cad-seg-franja:hover { border-color: var(--cyan-400); }
.cad-seg-franja.on {
background: var(--cyan-100); border-color: var(--cyan-500);
color: var(--cyan-800); box-shadow: 0 0 0 1px var(--cyan-500);
}
.cad-seg-franja .text-xs { color: var(--text-muted); }
.cad-seg-franja.on .text-xs { color: var(--cyan-700); }
.cad-seg-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
margin-bottom: 18px;
}
.cad-seg-card-hd {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; margin-bottom: 14px;
padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
/* Dropdown del módulo en la cabecera del seguimiento diario.
Tiene el mismo peso visual que el que reemplaza, pero con
un borde discontinuo cian que sugiere que es interactivo. Al pasar
el ratón cambia a borde sólido. */
.cad-seg-mod-pick {
font-size: 15px;
font-weight: 700;
color: var(--navy-900);
background: transparent;
border: 1px dashed var(--cyan-400);
border-radius: 6px;
padding: 4px 30px 4px 10px;
cursor: pointer;
appearance: auto;
max-width: 100%;
transition: background-color .12s, border-style .12s, box-shadow .12s;
}
.cad-seg-mod-pick:hover {
background: var(--cyan-50);
border-style: solid;
box-shadow: 0 0 0 2px var(--cyan-100);
}
.cad-seg-mod-pick:focus {
outline: none;
border-style: solid;
border-color: var(--cyan-600);
box-shadow: 0 0 0 3px var(--cyan-100);
}
.cad-seg-mod-pick:disabled { opacity: 0.6; cursor: not-allowed; border-style: solid; }
.cad-seg-grid { display: grid; gap: 12px; }
.cad-seg-actividades {
margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
}
.cad-seg-acts-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cad-seg-act-chip {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 8px;
border: 1px solid var(--cyan-300); background: var(--cyan-50);
cursor: pointer; transition: background .15s;
font-size: 13px;
}
.cad-seg-act-chip:hover { background: var(--cyan-100); }
.cad-seg-actions {
display: flex; justify-content: space-between; align-items: center;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
gap: 10px; flex-wrap: wrap;
}
.cad-seg-historico h4 { font-size: 14px; color: var(--navy-900); }
.cad-seg-hist-list { display: flex; flex-direction: column; gap: 6px; }
.cad-seg-hist-row {
display: grid; grid-template-columns: 130px 1fr auto; gap: 12px;
padding: 8px 12px; border-radius: 8px;
border: 1px solid var(--border); background: var(--bg);
cursor: pointer; transition: background .15s;
align-items: center;
}
.cad-seg-hist-row:hover { background: var(--bg-soft); border-color: var(--cyan-400); }
.cad-seg-hist-fecha { display: flex; flex-direction: column; align-items: flex-start; }
.cad-seg-hist-marks { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* === KPIs del mes en Seguimiento === */
.cad-seg-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 14px;
}
@media (max-width: 768px) { .cad-seg-kpis { grid-template-columns: repeat(2, 1fr); } }
.cad-seg-kpi {
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid var(--cyan-500);
border-radius: 10px;
padding: 10px 14px;
}
.cad-seg-kpi-num {
font-size: 22px;
font-weight: 800;
color: var(--navy-900);
line-height: 1.05;
}
.cad-seg-kpi-lab {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: 600;
margin-top: 2px;
}
/* === Mini-semana visual === */
.cad-seg-semana {
display: flex;
gap: 4px;
align-items: stretch;
}
.cad-seg-dia {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 38px;
padding: 6px 4px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
cursor: pointer;
position: relative;
transition: all .15s;
}
.cad-seg-dia:hover { border-color: var(--cyan-400); }
.cad-seg-dia.on { background: var(--cyan-100); border-color: var(--cyan-500); }
.cad-seg-dia.tiene-reg { border-color: var(--success); }
.cad-seg-dia-l { font-size: 9px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.cad-seg-dia-n { font-size: 14px; font-weight: 700; color: var(--navy-900); }
.cad-seg-dia.on .cad-seg-dia-n { color: var(--cyan-800); }
.cad-seg-dia-dot {
position: absolute; bottom: 3px; right: 3px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--success);
}
/* === Franja: indicador "tiene-reg" === */
.cad-seg-franja.tiene-reg { border-color: var(--success); }
.cad-seg-franja.tiene-reg::after {
content: '';
position: absolute; top: 6px; right: 6px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--success);
}
.cad-seg-franja { position: relative; }
/* === Acciones rápidas (conexiones con otros submódulos) === */
.cad-seg-quick {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 14px 0;
}
@media (max-width: 768px) { .cad-seg-quick { grid-template-columns: repeat(2, 1fr); } }
.cad-seg-qa {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
cursor: pointer;
text-align: left;
transition: all .15s;
}
.cad-seg-qa:hover { border-color: var(--cyan-500); background: var(--bg-soft); transform: translateY(-1px); }
.cad-seg-qa svg { color: var(--cyan-700); flex-shrink: 0; }
.cad-seg-qa.done { border-color: var(--success); background: rgba(34,197,94,0.05); }
.cad-seg-qa.done svg { color: var(--success); }
.cad-seg-qa div { display: flex; flex-direction: column; min-width: 0; }
.cad-seg-qa strong { font-size: 13px; color: var(--navy-900); line-height: 1.2; }
/* === Sub-tabs internas === */
.cad-seg-subtabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border);
margin: 14px 0 12px;
overflow-x: auto;
}
.cad-seg-subtab {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
padding: 8px 14px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
margin-bottom: -2px;
transition: all .15s;
}
.cad-seg-subtab:hover { color: var(--cyan-700); }
.cad-seg-subtab.on {
color: var(--cyan-700);
border-bottom-color: var(--cyan-600);
background: linear-gradient(180deg, transparent 60%, var(--cyan-50) 100%);
}
.cad-seg-subtab-body { padding: 6px 0; }
/* === Asistencia: resumen de KPIs dentro del seguimiento === */
.cad-seg-asist-resumen {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.cad-seg-asist-kpi {
text-align: center;
padding: 14px 8px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
}
.cad-seg-asist-kpi strong { display: block; font-size: 26px; font-weight: 800; color: var(--navy-900); }
.cad-seg-asist-kpi span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.cad-seg-asist-kpi.presente { border-color: var(--success); background: rgba(34,197,94,0.05); }
.cad-seg-asist-kpi.ausente { border-color: var(--danger); background: rgba(220,38,38,0.05); }
.cad-seg-asist-kpi.retraso { border-color: var(--warning); background: rgba(245,158,11,0.05); }
.cad-seg-asist-kpi.justi { border-color: var(--info, #0891b2); background: rgba(8,145,178,0.05); }
/* === RAs lista === */
.cad-seg-ras-list { display: flex; flex-direction: column; gap: 6px; }
.cad-seg-ra-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
background: var(--bg);
}
.cad-seg-ra-row:hover { border-color: var(--cyan-400); background: var(--bg-soft); }
.cad-seg-ra-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.cad-seg-ra-row strong { color: var(--navy-900); }
/* === Incidencias === */
.cad-seg-incid-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--border);
border-left: 4px solid var(--warning);
border-radius: 8px;
background: var(--bg);
margin-bottom: 6px;
}
.cad-seg-incid-add {
display: grid;
grid-template-columns: 1.4fr 1fr 2fr auto;
gap: 8px;
margin-top: 10px;
padding: 10px;
border-radius: 8px;
background: var(--bg-soft);
}
@media (max-width: 768px) { .cad-seg-incid-add { grid-template-columns: 1fr; } }
/* === Evidencias === */
.cad-seg-evid-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
margin-bottom: 6px;
}
.cad-seg-evid-row svg { color: var(--cyan-700); flex-shrink: 0; }
.cad-seg-evid-add {
display: grid;
grid-template-columns: 1.5fr 2fr 2fr auto;
gap: 8px;
margin-top: 10px;
padding: 10px;
border-radius: 8px;
background: var(--bg-soft);
}
@media (max-width: 768px) { .cad-seg-evid-add { grid-template-columns: 1fr; } }
/* Avatar mini compartido */
.cad-avatar-mini {
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--cyan-100);
color: var(--cyan-800);
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
/* Listas pequeñas */
.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li {
padding: 11px 0;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
font-size: 13px;
}
.simple-list li:last-child { border-bottom: 0; }
.simple-list li .ico {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--bg-soft);
color: var(--cyan-700);
display: grid; place-items: center;
flex-shrink: 0;
}
.simple-list li .meta { flex: 1; min-width: 0; }
.simple-list li .meta .t { font-weight: 600; color: var(--navy-900); }
.simple-list li .meta .s { color: var(--text-muted); font-size: 11.5px; }
/* Iconos decorativos en SVG inline */
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }
/* Toast container — apila notificaciones */
.toast-stack {
position: fixed;
right: 24px; bottom: 24px;
display: flex; flex-direction: column-reverse;
gap: 10px;
z-index: 200;
pointer-events: none;
}
.toast-stack > * { pointer-events: auto; }
/* Toast / notificación flotante */
.toast {
background: white;
border: 1px solid var(--border);
border-left: 3px solid var(--success);
border-radius: var(--radius-lg);
padding: 14px 20px 14px 16px;
box-shadow: var(--shadow-lg);
display: flex; align-items: center; gap: 12px;
min-width: 280px;
max-width: 380px;
animation: slideIn .25s ease-out;
transition: opacity .3s, transform .3s;
}
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warning); }
.toast.info { border-left-color: var(--info, var(--cyan-600)); }
.toast .ico {
width: 32px; height: 32px;
background: var(--success-bg);
color: #047857;
border-radius: 50%;
display: grid; place-items: center;
}
.toast.err .ico { background: var(--danger-bg); color: #b91c1c; }
.toast.warn .ico { background: var(--warning-bg); color: #b45309; }
.toast.info .ico { background: var(--info-bg, var(--cyan-50)); color: var(--cyan-700); }
.toast .t { font-weight: 600; color: var(--navy-900); font-size: 13.5px; }
.toast .s { color: var(--text-secondary); font-size: 12px; }
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Modal */
.modal-back {
position: fixed; inset: 0;
background: rgba(11, 37, 69, 0.45);
backdrop-filter: blur(2px);
z-index: 100;
display: grid; place-items: center;
padding: 20px;
animation: fadeIn .15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: white;
border-radius: var(--radius-lg);
width: 100%;
max-width: 560px;
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: pop .2s ease-out;
}
@keyframes pop {
from { transform: scale(.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.modal-hd { padding: 22px 26px 8px; }
.modal-hd h3 { margin: 0; font-size: 17px; color: var(--navy-900); }
.modal-hd p { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }
.modal-bd { padding: 18px 26px; }
.modal-ft { padding: 16px 26px; background: var(--bg-soft); display: flex; justify-content: flex-end; gap: 10px; }
/* Resumen de seguridad documental */
.security-panel {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: white;
border-radius: var(--radius-lg);
padding: 26px;
position: relative;
overflow: hidden;
}
.security-panel::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.25), transparent 50%),
radial-gradient(circle at 0% 100%, rgba(6, 182, 212, 0.18), transparent 50%);
pointer-events: none;
}
.security-panel > * { position: relative; }
.security-panel h3 {
margin: 0 0 6px;
font-size: 18px;
display: flex; align-items: center; gap: 8px;
}
.security-panel .lead { color: rgba(255,255,255,0.7); font-size: 13px; margin: 0 0 22px; }
.security-panel .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.security-panel .hash {
font-family: var(--font-mono);
font-size: 13px;
background: rgba(0,0,0,0.25);
padding: 10px 12px;
border-radius: 8px;
word-break: break-all;
display: flex; align-items: center; gap: 10px;
}
.security-panel .hash button {
margin-left: auto;
color: rgba(255,255,255,0.7);
flex-shrink: 0;
}
.security-panel .hash button:hover { color: var(--cyan-300); }
/* Sello "completado" */
.success-stamp {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: 28px 0;
text-align: center;
}
.success-stamp .circle {
width: 92px; height: 92px;
border-radius: 50%;
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
display: grid; place-items: center;
position: relative;
}
.success-stamp .circle::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px dashed rgba(16, 185, 129, 0.3);
animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.success-stamp .circle svg { width: 44px; height: 44px; color: var(--success); }
.success-stamp h3 { margin: 0; font-size: 20px; color: var(--navy-900); }
.success-stamp p { margin: 0; color: var(--text-secondary); max-width: 460px; }
/* Charts */
.chart-bar { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 8px 0; }
.chart-bar .b {
flex: 1; border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, var(--cyan-400), var(--cyan-700));
position: relative;
min-height: 6px;
transition: opacity .15s;
}
.chart-bar .b:hover { opacity: 0.85; }
.chart-bar .b::after {
content: attr(data-l);
position: absolute;
bottom: -22px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: var(--text-muted);
}
.chart-legend { display: flex; gap: 18px; font-size: 12px; color: var(--text-secondary); margin-top: 30px; }
.chart-legend span::before {
content: ""; display: inline-block;
width: 9px; height: 9px; border-radius: 2px;
background: var(--cyan-500); margin-right: 6px;
vertical-align: middle;
}
/* Donut chart */
.donut {
--p: 60;
--s: 130px;
--c1: var(--cyan-500);
--c2: var(--bg-soft);
width: var(--s); height: var(--s);
border-radius: 50%;
background: conic-gradient(var(--c1) calc(var(--p) * 1%), var(--c2) 0);
display: grid; place-items: center;
position: relative;
}
.donut::before {
content: "";
width: 70%; height: 70%;
background: white;
border-radius: 50%;
position: absolute;
}
.donut span {
position: relative;
font-size: 22px;
font-weight: 700;
color: var(--navy-900);
}
/* Heatmap */
.heatmap { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.heatmap div {
aspect-ratio: 1;
background: var(--bg-soft);
border-radius: 3px;
}
.heatmap div[data-i="1"] { background: #cffafe; }
.heatmap div[data-i="2"] { background: #67e8f9; }
.heatmap div[data-i="3"] { background: #06b6d4; }
.heatmap div[data-i="4"] { background: #0e7490; }
/* Mobile + Tablet */
.bottom-nav { display: none; }
.menu-toggle { display: none; }
@media (max-width: 1024px) {
.landing { grid-template-columns: 1fr; }
.landing-hero { padding: 48px 32px 24px; }
.landing-form-wrap { padding: 24px 32px 48px; }
.landing-title { font-size: 42px; }
.landing-bullets { grid-template-columns: 1fr; }
.split { grid-template-columns: 1fr; }
.eh-split { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
.superadmin-banner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; font-size: 12px; }
.superadmin-banner .stats { margin-left: 0; width: 100%; gap: 12px; font-size: 11px; }
.a11y-panel { width: calc(100% - 32px); max-width: 360px; right: 16px; }
}
@media (max-width: 768px) {
.app-shell {
grid-template-columns: 1fr;
grid-template-areas: "header" "main";
}
.superadmin-banner { padding: 8px 14px; font-size: 11.5px; }
.a11y-fab { right: 14px; bottom: 78px; width: 42px; height: 42px; }
.a11y-panel { right: 14px; bottom: 130px; width: calc(100% - 28px); }
.sidebar {
position: fixed;
left: 0; top: 0; bottom: 0;
z-index: 60;
width: 280px;
transform: translateX(-100%);
transition: transform .2s;
}
.sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(11, 37, 69, 0.4);
z-index: 55;
}
.sidebar.open + .sidebar-overlay { display: block; }
.menu-toggle { display: grid; }
.topbar { padding: 12px 16px; }
.topbar .search { display: none; }
.topbar h1 { font-size: 16px; }
.main { padding: 18px 16px 80px; }
.module-grid { grid-template-columns: 1fr 1fr; }
.catalog-grid { grid-template-columns: 1fr 1fr; }
.field-row, .field-row-3 { grid-template-columns: 1fr; }
.landing-title { font-size: 36px; }
.login-card { padding: 28px; }
.doc-preview { padding: 24px 18px; }
.split-3 { grid-template-columns: 1fr; }
.landing-hero { padding: 32px 20px 12px; }
.landing-form-wrap { padding: 12px 20px 32px; }
.brand-mark { margin-bottom: 24px; }
.topbar .user-pill .meta { display: none; }
.bottom-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--bg-card);
border-top: 1px solid var(--border);
z-index: 40;
}
.bottom-nav .nav {
display: flex; flex-direction: column;
align-items: center; gap: 4px;
padding: 10px 4px;
color: var(--text-muted);
font-size: 10px;
cursor: pointer;
position: relative;
}
.bottom-nav .nav.active { color: var(--cyan-700); }
.bottom-nav .nav.fab {
margin-top: -22px;
background: var(--cyan-600);
color: white;
border-radius: 50%;
width: 52px; height: 52px;
justify-self: center; align-self: start;
box-shadow: 0 10px 24px -6px rgba(8, 145, 178, 0.6);
}
.bottom-nav .nav.fab span { display: none; }
}
@media (max-width: 480px) {
.kpi-row { grid-template-columns: 1fr 1fr; }
.module-grid { grid-template-columns: 1fr; }
.catalog-grid { grid-template-columns: 1fr; }
.steps { flex-wrap: wrap; }
.landing-title { font-size: 30px; }
}
/* =========================================================
Informes — categorías + tarjetas de plantilla a pantalla completa
========================================================= */
/* Buscador embebido dentro de la vista informes */
.inf-search-wrap {
position: relative;
flex: 1;
min-width: 240px;
}
.inf-search-wrap > svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-muted);
pointer-events: none;
}
.inf-search-input {
padding-left: 38px !important;
width: 100%;
}
/* Grid de tarjetas de categoría — ocupa todo el ancho disponible */
.inf-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
/* Tarjeta de categoría premium: fondo blanco, acento por categoría (--cat) */
.inf-cat-tile {
--cat: #0891b2;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 20px 20px 22px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 18px;
text-align: left;
cursor: pointer;
width: 100%;
min-height: 178px;
font-family: inherit;
color: inherit;
box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.inf-cat-tile::before {
content: "";
position: absolute; inset: 0;
border-radius: 18px;
pointer-events: none;
background: linear-gradient(150deg, rgba(255,255,255,0) 45%, var(--cat) 260%);
opacity: .07;
}
.inf-cat-tile:hover {
transform: translateY(-3px);
border-color: var(--cat);
box-shadow: 0 18px 32px -18px var(--cat);
}
.inf-cat-tile:focus-visible {
outline: 2px solid var(--cat);
outline-offset: 2px;
}
.inf-cat-watermark {
position: absolute;
top: -16px; right: -12px;
color: var(--cat);
opacity: .08;
pointer-events: none;
line-height: 0;
}
.inf-cat-ico-lg {
position: relative; z-index: 1;
flex-shrink: 0;
width: 54px; height: 54px;
border-radius: 15px;
display: grid;
place-items: center;
color: #fff;
background-color: var(--cat);
background-image: linear-gradient(145deg, rgba(255,255,255,.30), rgba(0,0,0,.14));
box-shadow: 0 9px 18px -8px var(--cat), inset 0 1px 0 rgba(255,255,255,.35);
}
.inf-cat-ico {
width: 32px; height: 32px;
border-radius: 9px;
color: #fff;
background-color: var(--cat, #0891b2);
background-image: linear-gradient(145deg, rgba(255,255,255,.28), rgba(0,0,0,.12));
display: inline-grid;
place-items: center;
}
.inf-cat-title {
position: relative; z-index: 1;
font-size: 18px;
font-weight: 800;
color: var(--navy-900);
letter-spacing: -0.01em;
line-height: 1.2;
margin-top: 4px;
}
.inf-cat-desc {
position: relative; z-index: 1;
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.4;
max-width: 92%;
}
.inf-cat-meta {
position: relative; z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
padding-top: 8px;
padding-right: 46px;
}
.inf-cat-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 700;
color: var(--navy-800);
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px;
}
.inf-cat-chip.pre { color: var(--cat); border-color: transparent; }
.inf-cat-go {
position: absolute;
right: 18px; bottom: 18px;
z-index: 1;
width: 38px; height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background-color: var(--cat);
background-image: linear-gradient(145deg, rgba(255,255,255,.26), rgba(0,0,0,.12));
box-shadow: 0 9px 16px -8px var(--cat);
transition: transform .15s ease;
}
.inf-cat-tile:hover .inf-cat-go { transform: translateX(2px) scale(1.07); }
/* Grid de plantillas (cards) — defensiva contra desbordes */
.tpl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 14px;
}
.tpl-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 14px);
min-width: 0; /* permite que los hijos truncados encojan */
overflow: hidden;
}
.tpl-card-hd {
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
}
.tpl-fmt {
text-transform: uppercase;
font-size: 10px;
flex-shrink: 0;
}
.tpl-title {
flex: 1;
margin: 0;
font-size: 14.5px;
font-weight: 700;
color: var(--navy-900);
letter-spacing: -0.01em;
line-height: 1.3;
min-width: 0;
word-break: break-word;
overflow-wrap: anywhere;
}
.tpl-desc {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tpl-file {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11.5px;
color: var(--text-muted);
background: var(--bg-soft);
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.tpl-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: auto;
padding-top: 6px;
}
.tpl-actions > .tpl-btn:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.tpl-actions > .tpl-btn:first-child:nth-last-child(2),
.tpl-actions > .tpl-btn:first-child:nth-last-child(2) ~ .tpl-btn { grid-column: span 1; }
.tpl-btn {
min-width: 0;
padding: 8px 10px;
font-size: 12.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tpl-btn svg { flex-shrink: 0; }
.tpl-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Estado vacío */
.empty-state {
background: var(--bg-card);
border: 1px dashed var(--border);
border-radius: var(--radius-lg, 14px);
padding: 28px;
text-align: center;
color: var(--text-muted);
}
.empty-state svg { color: var(--text-muted); }
/* =========================================================
Panel de ayuda lateral (drawer derecho)
========================================================= */
.help-back {
position: fixed;
inset: 0;
background: rgba(11, 37, 69, 0.45);
z-index: 80;
display: flex;
justify-content: flex-end;
animation: helpFadeIn .18s ease;
}
@keyframes helpFadeIn { from { opacity: 0; } to { opacity: 1; } }
.help-drawer {
width: min(560px, 100%);
background: var(--bg-card);
display: flex;
flex-direction: column;
box-shadow: -20px 0 50px -10px rgba(11, 37, 69, 0.35);
animation: helpSlideIn .22s ease;
}
@keyframes helpSlideIn { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.help-hd {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: var(--bg-card);
}
.help-hd h2 {
margin: 0;
font-size: 17px;
color: var(--navy-900);
letter-spacing: -0.01em;
flex: 1;
}
.help-body {
overflow-y: auto;
padding: 18px 20px 32px;
flex: 1;
}
.help-search {
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: var(--bg-soft);
position: relative;
}
.help-search input {
width: 100%;
padding: 9px 14px 9px 36px;
border: 1px solid var(--border);
background: var(--bg-base);
border-radius: var(--radius);
font-size: 13px;
outline: none;
}
.help-search input:focus { border-color: var(--cyan-500); background: white; }
.help-search svg {
position: absolute;
left: 32px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--text-muted);
}
/* ---- Resultados incrementales de la ayuda ---- */
.help-results {
padding: 8px 20px 10px;
border-bottom: 1px solid var(--border);
background: var(--bg-base);
max-height: 46%;
overflow-y: auto;
}
.help-res-hd {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-muted);
font-weight: 700;
margin: 2px 2px 8px;
}
.help-res {
display: block;
width: 100%;
text-align: left;
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: 8px;
padding: 9px 11px;
margin-bottom: 7px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.help-res:hover { border-color: var(--cyan-500); background: var(--bg-soft); }
.help-res-t { display: block; font-weight: 600; font-size: 13px; color: var(--navy-900); margin-bottom: 2px; }
.help-res-s { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.help-res mark, .help-section .help-content mark {
background: var(--cyan-100, #cffafe);
color: var(--navy-900);
padding: 0 1px;
border-radius: 3px;
}
.help-empty { font-size: 13px; color: var(--text-muted); padding: 6px 2px; }
.help-flash { animation: helpFlash 1.1s ease; }
@keyframes helpFlash {
0% { box-shadow: 0 0 0 0 var(--cyan-500); }
30% { box-shadow: 0 0 0 3px var(--cyan-500); }
100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
/* ---- Modal de incidencias / tickets de soporte ---- */
.seg-control { display: flex; gap: 8px; }
.seg-btn {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px 12px;
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: 9px;
font-size: 13px; font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.seg-btn:hover { border-color: var(--cyan-500); }
.seg-btn.active {
border-color: var(--cyan-500);
background: var(--cyan-50, #ecfeff);
color: var(--cyan-700, #0e7490);
box-shadow: inset 0 0 0 1px var(--cyan-500);
}
.seg-btn svg { width: 15px; height: 15px; }
.incid-drop {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px;
border: 1.5px dashed var(--border);
border-radius: 10px;
color: var(--text-muted);
font-size: 13px;
cursor: pointer;
text-align: center;
transition: border-color .12s, background .12s, color .12s;
}
.incid-drop:hover { border-color: var(--cyan-500); color: var(--cyan-700, #0e7490); background: var(--bg-soft); }
.incid-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.incid-thumb {
position: relative; width: 84px; height: 84px;
border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.incid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.incid-thumb button {
position: absolute; top: 3px; right: 3px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border: none; border-radius: 50%;
background: rgba(15, 23, 42, .72); color: #fff;
cursor: pointer; padding: 0;
}
.incid-thumb button:hover { background: var(--danger); }
.incidencia-btn:hover { color: var(--danger); }
/* ---- Detalle de incidencia (registro/seguimiento) ---- */
.incid-detalle-grid {
display: grid;
grid-template-columns: 150px 1fr;
gap: 6px 12px;
font-size: 13px;
}
.incid-dt-k { color: var(--text-muted); font-weight: 600; }
.incid-dt-v { color: var(--text-secondary); }
.incid-desc-box {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-soft);
white-space: pre-wrap;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.incid-cap-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.incid-cap-grid img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.incid-cap-link { display: inline-block; line-height: 0; }
.incid-cap-ph {
width: 120px; height: 90px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 1px dashed var(--border); border-radius: 8px;
color: var(--text-muted); font-size: 11px;
}
/* ---- Pop-up de respuesta al usuario ---- */
.incid-resp-card {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 12px;
background: var(--bg-card);
}
.incid-resp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.incid-resp-q {
font-size: 12.5px; color: var(--text-muted);
border-left: 3px solid var(--border); padding-left: 9px; margin-bottom: 9px;
}
.incid-resp-a {
font-size: 14px; color: var(--navy-900); line-height: 1.5;
white-space: pre-wrap;
background: var(--cyan-50, #ecfeff); border: 1px solid var(--cyan-500);
border-radius: 8px; padding: 10px 12px;
}
.help-section {
margin-bottom: 14px;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg-card);
}
.help-section summary {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
background: var(--bg-soft);
color: var(--navy-900);
font-weight: 600;
font-size: 14px;
}
.help-section summary::-webkit-details-marker { display: none; }
.help-section summary .ch {
margin-left: auto;
transition: transform .15s;
color: var(--text-muted);
}
.help-section[open] summary .ch { transform: rotate(180deg); }
.help-section .help-content {
padding: 14px 16px;
font-size: 13.5px;
color: var(--text-secondary);
line-height: 1.55;
}
.help-section .help-content p { margin: 0 0 10px; }
.help-section .help-content ul { margin: 0 0 10px; padding-left: 20px; }
.help-section .help-content li { margin-bottom: 4px; }
.help-section .help-content strong { color: var(--navy-900); }
.help-section .help-content kbd {
display: inline-block;
padding: 1px 6px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--navy-800);
}
/* Botón Ayuda en la topbar */
.help-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius);
background: var(--cyan-100);
color: var(--cyan-700);
border: 1px solid transparent;
transition: all .15s;
white-space: nowrap;
}
.help-btn:hover {
background: var(--cyan-600);
color: white;
}
.help-btn svg { width: 16px; height: 16px; }
@media (max-width: 820px) {
.help-btn span { display: none; }
.help-btn { padding: 8px; width: 38px; height: 38px; justify-content: center; }
}
@media (max-width: 600px) {
.inf-cat-grid { grid-template-columns: 1fr; }
.tpl-grid { grid-template-columns: 1fr; }
.tpl-actions { grid-template-columns: 1fr; }
}
/* =========================================================
Horarios y Aulas — rejilla semanal
========================================================= */
.horario-grid {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-size: 12.5px;
}
.horario-grid thead th {
background: var(--bg-soft);
color: var(--navy-900);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 10px 8px;
border-bottom: 2px solid var(--border);
text-align: center;
}
.horario-grid .hr-time-col {
background: var(--bg-soft);
width: 96px;
text-align: center;
padding: 8px;
font-size: 12px;
border-right: 1px solid var(--border);
vertical-align: middle;
}
.horario-grid .hr-cell {
padding: 8px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
vertical-align: top;
min-height: 64px;
height: 64px;
background: var(--bg-card);
overflow: hidden;
}
.horario-grid .hr-recreo {
background: repeating-linear-gradient(135deg, var(--bg-soft) 0 8px, var(--bg-base) 8px 16px);
color: var(--text-muted);
text-align: center;
font-size: 11px;
font-style: italic;
vertical-align: middle;
}
.horario-grid .hr-row-recreo .hr-time-col {
background: var(--bg-soft);
font-style: italic;
font-size: 11px;
color: var(--text-muted);
}
/* Filas del turno de TARDE: ligera tinta cian para distinguirlas del de mañana */
.horario-grid .hr-row-tarde .hr-time-col {
background: linear-gradient(180deg, var(--cyan-100), var(--bg-soft));
border-left: 3px solid var(--cyan-500);
}
.horario-grid .hr-row-tarde .hr-cell:not(.hr-clase) {
background: rgba(8, 145, 178, 0.03);
}
.horario-grid .hr-libre {
text-align: center;
color: var(--text-muted);
font-style: italic;
background: var(--bg-base);
}
/* Hueco libre RESERVADO por un docente: sombreado ámbar con franjas + borde, y el motivo. */
.horario-grid .hr-reservada {
background: repeating-linear-gradient(45deg, #fef9c3, #fef9c3 7px, #fde68a 7px, #fde68a 14px);
border-left: 3px solid #d97706;
}
.horario-grid .hr-reservada .hr-mod { color: #92400e; }
.horario-grid .hr-reservada .hr-nombre { color: #b45309; font-size: 11px; font-weight: 600; }
.horario-grid .hr-reservada .hr-aula { color: #92400e; }
[data-theme="dark"] .horario-grid .hr-reservada {
background: repeating-linear-gradient(45deg, rgba(217,119,6,0.22), rgba(217,119,6,0.22) 7px, rgba(217,119,6,0.38) 7px, rgba(217,119,6,0.38) 14px);
}
[data-theme="dark"] .horario-grid .hr-reservada .hr-mod,
[data-theme="dark"] .horario-grid .hr-reservada .hr-nombre,
[data-theme="dark"] .horario-grid .hr-reservada .hr-aula { color: #fcd34d; }
.horario-grid .hr-mod {
font-weight: 700;
color: var(--navy-900);
font-size: 12px;
letter-spacing: -0.005em;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.horario-grid .hr-nombre {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.25;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.horario-grid .hr-aula {
font-size: 11px;
}
.horario-grid .hr-aula a {
color: var(--cyan-700);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.horario-grid .hr-aula a:hover { color: var(--cyan-600); text-decoration: underline; }
/* Modo edición — drag & drop de horarios */
.horario-grid .hr-clase[draggable="true"] {
cursor: grab;
position: relative;
}
.horario-grid .hr-clase[draggable="true"]:active { cursor: grabbing; }
.horario-grid .hr-clase[draggable="true"]::after {
content: '⋮⋮';
position: absolute;
top: 4px; right: 6px;
font-size: 12px;
color: var(--text-muted);
opacity: 0.5;
}
.horario-grid .hr-droptarget {
border: 2px dashed var(--cyan-400);
background: rgba(8, 145, 178, 0.05) !important;
}
.horario-grid .hr-droptarget:hover {
background: rgba(8, 145, 178, 0.12) !important;
border-color: var(--cyan-600);
}
.horario-grid .hr-clase-mod {
box-shadow: inset 0 0 0 2px var(--warning);
position: relative;
}
.hr-pendiente {
display: inline-block;
color: var(--warning);
font-weight: 700;
font-size: 11px;
margin-left: 2px;
}
/* Selector de docente (modal) */
.hdoc-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.hdoc-pick {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg-soft);
border: 1px solid var(--border);
cursor: pointer;
text-align: left;
transition: background .12s, border-color .12s;
font-family: inherit;
color: inherit;
}
.hdoc-pick:hover {
background: var(--cyan-100);
border-color: var(--cyan-400);
}
.hdoc-pick .meta { flex: 1; min-width: 0; }
.hdoc-pick .meta .t {
font-weight: 600;
color: var(--navy-900);
font-size: 13.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hdoc-pick .meta .s {
color: var(--text-muted);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 820px) {
.horario-grid { font-size: 11px; }
.horario-grid .hr-time-col { width: 72px; padding: 6px 4px; }
.horario-grid .hr-cell { padding: 6px 4px; height: auto; min-height: 56px; }
.horario-grid .hr-nombre { display: none; }
}
/* =========================================================
Color picker para tareas (modal Nueva/Editar tarea)
========================================================= */
.color-picker {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 6px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.color-swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
display: inline-grid;
place-items: center;
padding: 0;
transition: transform .12s, border-color .12s, box-shadow .12s;
color: rgba(255,255,255,0.85);
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.on {
border-color: var(--navy-900);
box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--cyan-500);
}
.color-swatch.color-none {
background: var(--bg-base);
color: var(--text-muted);
border: 2px dashed var(--border-strong);
}
.color-swatch.color-none.on {
border-style: solid;
color: var(--navy-900);
}
.color-custom {
position: relative;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
display: inline-grid;
place-items: center;
background: conic-gradient(red, orange, yellow, green, cyan, blue, magenta, red);
border: 2px solid transparent;
color: white;
}
.color-custom input[type="color"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
border: none;
padding: 0;
background: transparent;
}
/* Etiqueta "PRIORITARIO" para tareas con prioridad urgente */
.prio-tag {
display: inline-block;
background: var(--danger);
color: white;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 1px 5px;
border-radius: 3px;
vertical-align: middle;
text-transform: uppercase;
line-height: 1.4;
flex-shrink: 0;
}
.cal-event .prio-tag {
font-size: 7.5px;
padding: 0 4px;
margin-right: 3px;
line-height: 1.3;
}
.cal-event.has-color { /* el color inline ya sobrescribe el de prioridad */ }
.cal-event-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
Carga de imágenes en el modal de pre-relleno
========================================================= */
.upload-zone {
background: var(--bg-soft);
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 12px;
}
.upload-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
margin-top: 10px;
}
.upload-preview:empty { margin-top: 0; }
.upload-thumb {
margin: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.upload-thumb img {
width: 100%;
height: 90px;
object-fit: cover;
display: block;
}
.upload-thumb figcaption {
padding: 6px 8px;
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
Cuaderno de Aula Digital (CAD)
========================================================= */
.cad-header { margin-bottom: 4px; }
.cad-title { font-size: 22px; color: var(--navy-900); letter-spacing: -0.01em; margin: 0 0 4px; }
/* Cabecera del Cuaderno de Aula: layout compacto y minimalista. */
.cad-title-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 10px;
}
/* Variante compacta SIN el h2/subtítulo de la izquierda: solo selector
"Ver cuaderno de" + botón Transferir + chip Sincronizado. La barra
queda pegada arriba sin espacio vacío encima. */
.cad-title-row.cad-title-row-compact {
margin: 0 0 8px;
padding: 0;
}
.cad-title-row.section-hd-actions-only {
padding: 4px 0;
margin-bottom: 8px;
}
.cad-title-row .cad-docente-picker,
.cad-title-row > .btn,
.cad-title-row .cad-sync { align-self: center; }
/* Selector "Ver cuaderno de" — en una sola línea con label inline */
.cad-docente-picker {
display: inline-flex; flex-direction: row; align-items: center;
gap: 8px;
background: transparent;
border: none;
padding: 0;
border-radius: 6px;
}
.cad-docente-picker label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
margin: 0;
white-space: nowrap;
}
.cad-docente-picker .select {
background: var(--bg-card);
font-size: 12px;
padding: 4px 8px;
height: 28px;
border-radius: 6px;
border: 1px solid var(--border);
max-width: 220px;
min-width: 140px;
}
/* Badge "Sincronizado" reducido a chip plano */
.cad-sync {
display: inline-flex; flex-direction: row; align-items: center;
background: var(--success-bg); color: #065f46;
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; gap: 6px;
height: 24px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.cad-sync small { display: none; } /* hora detallada solo en tooltip */
.cad-sync svg { display: inline-block; vertical-align: middle; }
/* Botón Transferir cuaderno: compacto */
.cad-title-row .btn-secondary.btn-sm {
align-self: center !important;
height: 28px;
padding: 4px 10px;
font-size: 12px;
}
/* Botón Transferir cuaderno destacado: sombreado AZUL con borde NARANJA
brillante para llamar la atención cuando el rol es gestión. */
.btn.btn-transferir-cuad {
background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e3a8a;
border: 2px solid #fb923c;
font-weight: 700;
height: 30px;
padding: 4px 14px;
font-size: 12.5px;
border-radius: 6px;
box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.18), 0 2px 4px rgba(30, 64, 175, 0.18);
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
transition: background .12s, box-shadow .12s, transform .08s;
}
.btn.btn-transferir-cuad:hover {
background: linear-gradient(180deg, #bfdbfe 0%, #93c5fd 100%);
box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.32), 0 3px 6px rgba(30, 64, 175, 0.24);
transform: translateY(-1px);
}
.btn.btn-transferir-cuad:focus {
outline: none;
box-shadow: 0 0 0 3px #fdba74, 0 0 0 5px #fed7aa;
}
.cad-selectors {
display: grid;
/* Curso · Ciclo · Grupo · Módulo (ancho) — la pill de Evaluación
se ha eliminado: la elección se hace dentro de la pestaña
Evaluaciones mediante las sub-pestañas correspondientes. */
grid-template-columns: 1fr 1.2fr 0.9fr 2fr;
gap: 10px;
align-items: end;
/* Sombreado VERDE suave para destacar la barra de selectores principal
del Cuaderno de Aula. Borde con tinte verde para dar coherencia. */
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 60%, #a7f3d0 100%);
border: 1px solid #6ee7b7;
border-radius: var(--radius);
padding: 8px 12px 10px;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(16, 185, 129, 0.10);
}
@media (max-width: 1100px) {
.cad-selectors { grid-template-columns: 1fr 1fr 1fr auto; }
.cad-selectors .field:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.cad-selectors { grid-template-columns: 1fr 1fr; }
.cad-selectors .field:nth-child(4),
.cad-selectors .cad-eval-pill { grid-column: 1 / -1; }
}
.cad-selectors .field { margin: 0; }
.cad-selectors .field label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; display: block; font-weight: 700; }
.cad-selectors .select { height: 32px; padding: 4px 28px 4px 10px; font-size: 12.5px; }
.cad-eval-pill {
background: var(--cyan-100);
border: 1px solid var(--cyan-400);
border-radius: var(--radius);
padding: 8px 14px;
text-align: center;
min-width: 160px;
}
.cad-eval-label { color: var(--cyan-700); font-weight: 700; font-size: 14px; }
.cad-eval-sub { color: var(--cyan-700); font-size: 11px; opacity: 0.8; margin-bottom: 4px; }
.cad-eval-switch { display: flex; gap: 4px; justify-content: center; }
.cad-eval-switch button {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: 4px;
font-size: 10px;
padding: 2px 6px;
cursor: pointer;
font-weight: 600;
}
.cad-eval-switch button.on {
background: var(--cyan-600); color: white; border-color: var(--cyan-600);
}
/* === Evaluación destacada (sombreado ROJO SUAVE de fondo + ROJO FUERTE para
la evaluación activa). Llama la atención sobre el resto de selectores y
refuerza visualmente cuál es la evaluación en curso (1.ª / 2.ª / Final). */
.cad-eval-pill.cad-eval-highlight {
background: linear-gradient(135deg, var(--danger-bg) 0%, #fef2f2 60%, #fecaca 100%);
border: 2px solid #f87171;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.22), 0 0 0 4px rgba(239, 68, 68, 0.08);
padding: 10px 16px;
min-width: 180px;
position: relative;
transition: transform .15s, box-shadow .15s;
}
.cad-eval-pill.cad-eval-highlight:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32), 0 0 0 4px rgba(239, 68, 68, 0.14);
}
.cad-eval-pill.cad-eval-highlight::before {
content: 'EVALUACIÓN';
position: absolute;
top: -9px; left: 12px;
background: #dc2626;
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45);
}
.cad-eval-pill.cad-eval-highlight .cad-eval-label {
color: #7f1d1d;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.01em;
}
.cad-eval-pill.cad-eval-highlight .cad-eval-sub {
color: #b91c1c;
font-size: 12px;
margin-bottom: 6px;
opacity: 1;
}
.cad-eval-pill.cad-eval-highlight .cad-eval-switch button {
background: rgba(255,255,255,0.75);
border-color: #fca5a5;
color: #991b1b;
padding: 3px 8px;
font-size: 11px;
}
.cad-eval-pill.cad-eval-highlight .cad-eval-switch button:hover {
background: #fff;
border-color: #f87171;
}
.cad-eval-pill.cad-eval-highlight .cad-eval-switch button.on {
background: #dc2626;
border-color: #b91c1c;
color: #fff;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45);
}
.cad-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border);
overflow-x: auto;
scrollbar-width: thin;
}
.cad-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: transparent;
border: none;
color: var(--text-secondary);
font-weight: 600;
font-size: 13px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.cad-tab:hover { color: var(--navy-900); }
.cad-tab.on { color: var(--cyan-700); border-bottom-color: var(--cyan-600); }
.cad-tab svg { width: 14px; height: 14px; }
.cad-body { padding-top: 18px; }
.cad-section-title { font-size: 16px; color: var(--navy-900); margin: 0 0 12px; letter-spacing: -0.01em; }
.cad-kpis {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.cad-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.cad-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.cad-kpi {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
}
.cad-kpi.compact { padding: 10px 12px; }
.cad-kpi .lbl {
font-size: 11px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 600;
margin-bottom: 6px;
}
.cad-kpi .val {
font-size: 28px; font-weight: 700; color: var(--navy-900);
line-height: 1;
}
.cad-kpi.compact .val { font-size: 22px; }
.cad-kpi .val.ok { color: var(--success); }
.cad-kpi .val.warn { color: var(--warning); }
.cad-kpi .val.err { color: var(--danger); }
.cad-kpi .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.cad-table th { background: var(--bg-soft); font-weight: 700; font-size: 12px; }
.cad-table tbody tr:hover { background: var(--bg-soft); }
.cad-table small { font-size: 10.5px; }
.cad-pct {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
background: var(--bg-soft);
color: var(--text-secondary);
}
.cad-pct.ok { background: var(--success-bg); color: #065f46; }
.cad-pct.warn { background: var(--warning-bg); color: #92400e; }
.cad-pct.err { background: var(--danger-bg); color: #991b1b; }
.cad-cell-num {
display: inline-block; padding: 2px 8px; border-radius: 6px;
font-weight: 700; font-size: 12.5px;
}
.cad-cell-num.ok { background: var(--success-bg); color: #065f46; }
.cad-cell-num.err { background: var(--danger-bg); color: #991b1b; }
/* Selector "Ver cuaderno de" — visible para Jefatura/Admin/Calidad/Auditoría/Superadmin */
/* (Estilos antiguos de .cad-docente-picker movidos al bloque superior compacto) */
/* Banner de modo lectura o edición supervisada (cuaderno de otro docente) */
.cad-lectura-banner {
display: flex; gap: 10px; align-items: center;
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 14px;
font-size: 13px;
flex-wrap: wrap;
}
.cad-lectura-banner.lectura {
background: #eff6ff; color: #1e40af;
border-left: 4px solid #2563eb;
}
.cad-lectura-banner.edit {
background: #fef3c7; color: #78350f;
border-left: 4px solid #d97706;
}
.cad-lectura-banner strong { color: inherit; }
.cad-lectura-banner button { margin-left: auto; }
.cad-as-of {
display: inline-block;
font-size: 12px;
background: var(--cyan-100);
color: var(--cyan-700);
padding: 2px 8px;
border-radius: 999px;
font-weight: 700;
vertical-align: middle;
letter-spacing: 0.04em;
margin-left: 4px;
}
/* Cuando el cuaderno es de otro docente y no podemos editar, atenuamos el fondo
con un velo translúcido (similar a histórico pero en azul). */
.cad-header.cad-lectura:not(.cad-historico) ~ .cad-body { filter: saturate(0.92); }
/* Modo "curso histórico": tinta sepia, bloqueo visual de la sección */
.cad-header.cad-historico,
.cad-header.cad-historico ~ .cad-body { filter: sepia(0.25) saturate(0.85); }
.cad-historico-banner {
display: flex; gap: 10px; align-items: flex-start;
background: #fff7ed;
color: #92400e;
border-left: 4px solid #c2410c;
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 14px;
font-size: 13px;
}
.cad-historico-banner strong { color: #7c2d12; }
.cad-curso-pill {
display: inline-block;
padding: 2px 8px;
background: var(--success-bg);
color: #065f46;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 6px;
vertical-align: middle;
}
/* Selector "Evaluar por RA / por CE" */
.cad-eval-mode {
display: flex; align-items: center; gap: 8px;
padding: 8px 4px 14px;
font-size: 12.5px;
}
.cad-evmode {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}
.cad-evmode.on {
background: var(--cyan-600);
color: white;
border-color: var(--cyan-600);
}
.cad-evmode:hover:not(.on) { border-color: var(--cyan-400); color: var(--navy-900); }
/* Panel "Pase de lista de hoy" en la pestaña Asistencia */
.cad-asis-panel { }
.cad-asis-now {
background: var(--cyan-100);
border: 1px solid var(--cyan-400);
border-radius: var(--radius);
padding: 14px 16px;
}
.cad-asis-now-h {
display: flex; align-items: center; gap: 8px;
font-weight: 700; color: var(--cyan-700);
font-size: 14px;
}
.cad-asis-sesiones {
display: flex; flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.cad-asis-sesion {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 12px;
align-items: center;
background: var(--bg-card);
padding: 10px 14px;
border-radius: 10px;
border-left: 3px solid var(--border);
}
.cad-asis-sesion.now {
border-left-color: var(--success);
background: linear-gradient(90deg, var(--success-bg), var(--bg-card));
}
.cad-asis-sesion-time {
font-weight: 700; color: var(--navy-900);
font-size: 13.5px;
}
.cad-asis-sesion-mod { color: var(--navy-900); font-size: 13px; }
/* Modal de pase de lista */
.cad-pase-lista {
display: flex; flex-direction: column;
gap: 4px;
max-height: 60vh; overflow-y: auto;
}
.cad-pase-row {
display: grid;
grid-template-columns: 30px 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg-soft);
border-radius: 8px;
}
.cad-pase-n { color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: center; }
.cad-pase-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cad-pase-name strong { font-size: 13.5px; color: var(--navy-900); }
.cad-pase-estados {
display: flex; gap: 4px;
}
.cad-pase-btn {
width: 32px; height: 32px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-muted);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: transform 0.1s, border-color 0.12s;
}
.cad-pase-btn:hover { transform: scale(1.08); }
.cad-pase-btn.on.cad-pase-p { background: var(--success-bg); color: #065f46; border-color: var(--success); }
.cad-pase-btn.on.cad-pase-a { background: var(--danger-bg); color: #991b1b; border-color: var(--danger); }
.cad-pase-btn.on.cad-pase-r { background: var(--warning-bg); color: #92400e; border-color: var(--warning); }
.cad-pase-btn.on.cad-pase-j { background: var(--info-bg); color: #1e40af; border-color: var(--info); }
/* =========================================================
Diana de evaluación competencial (radar SVG)
========================================================= */
.cad-ra-flex {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 16px;
align-items: start;
}
.cad-diana-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 14px);
padding: 14px;
text-align: center;
}
.cad-radar { display: flex; justify-content: center; padding: 8px 0; }
.cad-radar-svg { max-width: 100%; height: auto; }
.cad-diana-info {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-secondary);
margin-top: 8px;
}
.cad-diana-info .cad-leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.cad-diana-actions {
display: flex; gap: 6px; justify-content: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
.cad-ra-flex { grid-template-columns: 1fr; }
}
/* =========================================================
Mapa de clase (seating plan)
========================================================= */
.cad-seat-wrap {
display: grid;
grid-template-columns: 240px 1fr;
gap: 14px;
align-items: start;
}
.cad-seat-side {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
max-height: 580px;
overflow-y: auto;
}
.cad-seat-pool {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 60px;
margin-top: 6px;
}
.cad-seat-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
cursor: grab;
transition: background 0.12s;
}
.cad-seat-pill:active { cursor: grabbing; }
.cad-seat-pill:hover { background: var(--cyan-100); border-color: var(--cyan-400); }
.cad-seat-grid {
display: grid;
gap: 8px;
padding: 16px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
min-height: 500px;
position: relative;
}
/* Indicador de "frente del aula" (línea superior estilo pizarra) */
.cad-seat-grid::before {
content: '📋 PIZARRA · FRENTE DEL AULA';
position: absolute;
top: -10px; left: 50%;
transform: translateX(-50%);
background: var(--navy-700, #1e3a5f);
color: white;
padding: 4px 14px;
font-size: 10px;
letter-spacing: 0.1em;
border-radius: 999px;
font-weight: 700;
}
.cad-seat {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 10px;
padding: 6px;
min-height: 64px;
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s, transform 0.1s;
position: relative;
}
.cad-seat:hover { border-color: var(--cyan-400); }
.cad-seat.empty { background: transparent; border-style: dashed; opacity: 0.6; }
.cad-seat.empty:hover { opacity: 1; }
.cad-seat.doble { background: linear-gradient(180deg, var(--bg-card), var(--cyan-100)); border-color: var(--cyan-400); }
.cad-seat-empty {
display: grid; place-items: center;
height: 100%;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cad-seat-alumno {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
background: var(--bg-soft);
border-radius: 6px;
font-size: 11.5px;
flex-wrap: wrap;
position: relative;
}
.cad-seat-name { font-weight: 600; color: var(--navy-900); }
.cad-seat-estado {
position: absolute; top: -6px; right: -6px;
background: var(--cyan-600);
color: white;
font-weight: 800; font-size: 10px;
width: 18px; height: 18px;
border-radius: 50%;
display: grid; place-items: center;
box-shadow: 0 0 0 2px var(--bg-card);
}
.cad-seat-alumno.seat-p { background: var(--success-bg); }
.cad-seat-alumno.seat-p .cad-seat-estado { background: var(--success); }
.cad-seat-alumno.seat-a { background: var(--danger-bg); }
.cad-seat-alumno.seat-a .cad-seat-estado { background: var(--danger); }
.cad-seat-alumno.seat-r { background: var(--warning-bg); }
.cad-seat-alumno.seat-r .cad-seat-estado { background: var(--warning); }
.cad-seat-alumno.seat-j { background: var(--info-bg); }
.cad-seat-alumno.seat-j .cad-seat-estado { background: var(--info); }
.cad-seat-alumno.intervenido {
outline: 2px dashed var(--cyan-600);
outline-offset: 2px;
animation: cadInterPulse 1.5s ease-in-out infinite;
}
@keyframes cadInterPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(8,145,178,0.4); }
50% { box-shadow: 0 0 0 6px rgba(8,145,178,0); }
}
@media (max-width: 900px) {
.cad-seat-wrap { grid-template-columns: 1fr; }
.cad-seat-side { max-height: 200px; }
}
/* Banner de cierre del proceso de Elección de módulos */
.eh-cierre-banner {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 18px;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 13.5px;
}
.eh-cierre-banner.eh-cierre-provisional {
background: var(--warning-bg);
color: #78350f;
border-left: 4px solid var(--warning);
}
.eh-cierre-banner.eh-cierre-definitivo {
background: var(--danger-bg);
color: #7f1d1d;
border-left: 4px solid var(--danger);
}
.eh-cierre-banner > svg { flex-shrink: 0; margin-top: 1px; }
.eh-cierre-banner strong { color: inherit; }
.eh-cierre-banner button { flex-shrink: 0; }
/* Avisos de baja: banner naranja con motivo, mostrado al inicio de la próxima sesión */
.cad-baja-avisos {
display: flex; flex-direction: column;
gap: 8px;
}
.cad-baja-aviso {
display: flex; align-items: flex-start; gap: 12px;
background: #fff7ed;
color: #7c2d12;
border-left: 4px solid #ea580c;
padding: 12px 14px;
border-radius: var(--radius);
}
.cad-baja-aviso strong { color: #9a3412; }
.cad-baja-aviso > div { flex: 1; }
.cad-baja-aviso button { flex-shrink: 0; }
/* Marca "MENOR" — destaca a los alumnos menores de edad en todas las vistas */
.cad-menor {
display: inline-block;
background: #fef3c7;
color: #92400e;
border: 1px solid #fbbf24;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 1px 6px;
border-radius: 4px;
line-height: 1.3;
text-transform: uppercase;
vertical-align: middle;
cursor: help;
}
.cad-menor::before {
content: '⚠ ';
font-size: 9px;
}
/* Filas atenuadas para baja / convalidado */
.cad-row-baja {
background: rgba(220, 38, 38, 0.04);
opacity: 0.72;
}
.cad-row-baja td { font-style: italic; }
.cad-row-conv { background: rgba(8, 145, 178, 0.04); }
.cad-alum-summary {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
padding: 8px 12px;
background: var(--bg-soft);
border-radius: var(--radius);
font-size: 12px;
}
/* Selector de RAs en el modal de Nueva/Editar actividad */
.cad-ra-picker {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-soft);
max-height: 220px;
overflow-y: auto;
padding: 6px;
}
.cad-ra-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s;
}
.cad-ra-row:hover { background: var(--bg-card); }
.cad-ra-row input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--cyan-600);
flex-shrink: 0;
}
.cad-ra-row .cad-ra-id {
font-weight: 700;
color: var(--navy-900);
font-size: 13px;
margin-bottom: 2px;
}
.cad-ra-row .cad-ra-desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.3;
}
/* Celda "Nota Pincel" — el dato entero (1-10) que se traslada al sistema oficial */
.cad-pincel {
display: inline-grid;
place-items: center;
min-width: 30px;
height: 30px;
padding: 0 8px;
font-weight: 800;
font-size: 15px;
border-radius: 8px;
background: var(--cyan-100);
color: var(--cyan-700);
border: 2px solid var(--cyan-400);
}
.cad-pincel.ok { background: var(--success-bg); color: #065f46; border-color: var(--success); }
.cad-pincel.err { background: var(--danger-bg); color: #991b1b; border-color: var(--danger); }
.cad-pincel.neutral { background: var(--bg-soft); color: var(--text-muted); border-color: var(--border-strong); }
.cad-tope-flag {
display: inline-block; margin-left: 6px;
padding: 1px 5px; font-size: 9px; font-weight: 700;
background: var(--warning-bg); color: #92400e;
border-radius: 3px; text-transform: uppercase;
}
.cad-matrix th, .cad-matrix td { text-align: center; }
.cad-matrix th:first-child, .cad-matrix td:first-child { text-align: left; }
.cad-toolbar {
display: flex; gap: 8px; align-items: center;
margin-bottom: 14px; flex-wrap: wrap;
}
.cad-info-banner {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 14px;
background: var(--info-bg); color: #1e40af;
border-left: 3px solid var(--info);
border-radius: var(--radius);
font-size: 13px;
}
.cad-info-banner svg { flex-shrink: 0; margin-top: 1px; }
.cad-footer-note {
display: flex; justify-content: space-between; align-items: center;
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
color: var(--text-muted); font-size: 12.5px;
}
.cad-avatar-mini {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
background: linear-gradient(135deg, var(--cyan-400), var(--cyan-700));
color: white; font-weight: 700; font-size: 11px;
border-radius: 50%;
flex-shrink: 0;
}
.cad-avatar-big {
display: inline-grid; place-items: center;
width: 64px; height: 64px;
background: linear-gradient(135deg, var(--cyan-400), var(--cyan-700));
color: white; font-weight: 700; font-size: 22px;
border-radius: 50%;
flex-shrink: 0;
}
.cad-breadcrumb {
display: flex; align-items: center; gap: 12px;
margin-bottom: 10px;
}
.cad-alumno-hero {
display: flex; align-items: center; gap: 18px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
margin-bottom: 14px;
}
.cad-alumno-meta { flex: 1; min-width: 0; }
.cad-alumno-kpis {
display: flex; gap: 10px;
}
.cad-asis-table th, .cad-asis-table td { text-align: center; }
.cad-asis-table th:first-child, .cad-asis-table td:first-child { text-align: left; }
.cad-asis-cell {
display: inline-grid; place-items: center;
width: 26px; height: 26px;
border-radius: 6px;
font-weight: 700; font-size: 11px;
}
.cad-asis-cell.asis-p { background: var(--success-bg); color: #065f46; }
.cad-asis-cell.asis-a { background: var(--danger-bg); color: #991b1b; }
.cad-asis-cell.asis-r { background: var(--warning-bg); color: #92400e; }
.cad-asis-cell.asis-j { background: var(--info-bg); color: #1e40af; }
/* Celda editable (días pasados): mismo aspecto que la celda de lectura
pero con border 0 / cursor pointer y un leve realce al pasar. */
button.cad-asis-cell.cad-asis-edit {
border: 0;
padding: 0;
cursor: pointer;
position: relative;
font: inherit;
font-weight: 700;
transition: transform .1s ease, box-shadow .1s ease;
}
button.cad-asis-cell.cad-asis-edit:hover {
transform: scale(1.08);
box-shadow: 0 0 0 2px var(--cyan-300);
}
/* Iniciales del docente que introdujo / corrigió la asistencia.
Aparecen como volado en la esquina superior derecha de la celda. */
.cad-asis-cell .cad-asis-init {
position: absolute;
top: -4px; right: -4px;
font-size: 8px;
font-weight: 700;
background: var(--navy-900);
color: #fff;
border-radius: 999px;
padding: 1px 4px;
line-height: 1.2;
letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cad-asis-cell { position: relative; }
/* === Desplegables del Detalle de Seguimiento (UT, RAs) ===
Reemplazan a las sub-pestañas RA/UT y Asistencia, que se eliminaron.
Funcionan como / nativos: ahorra JS y son accesibles. */
.cad-seg-collapse {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
overflow: hidden;
}
.cad-seg-collapse > summary {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
cursor: pointer;
font-size: 13px;
color: var(--navy-900);
list-style: none;
user-select: none;
}
.cad-seg-collapse > summary::-webkit-details-marker { display: none; }
.cad-seg-collapse > summary::after {
content: '';
margin-left: auto;
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--text-muted);
transition: transform .15s ease;
}
.cad-seg-collapse[open] > summary::after { transform: rotate(-180deg); }
.cad-seg-collapse > summary:hover { background: var(--bg-soft); }
.cad-seg-collapse-meta {
font-weight: 500;
font-size: 12.5px;
color: var(--text-secondary);
margin-left: 2px;
}
.cad-seg-collapse-body {
padding: 12px 14px 14px;
border-top: 1px solid var(--border);
background: var(--bg-soft);
}
/* === Selector de RAs en el modal "Nueva actividad evaluable" ===
Listado vertical (todos los RAs visibles) con checkbox + chip-id +
resumen corto; pulsar la cabecera despliega la descripción completa y
los Criterios de Evaluación asociados. */
.cad-act-ras-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 360px;
overflow-y: auto;
padding: 2px;
}
.cad-act-ra {
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-card);
transition: border-color .12s, box-shadow .12s;
}
.cad-act-ra[open] { border-color: var(--cyan-400); box-shadow: 0 0 0 1px var(--cyan-200); }
.cad-act-ra > summary {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
list-style: none;
user-select: none;
}
.cad-act-ra > summary::-webkit-details-marker { display: none; }
.cad-act-ra-check { display: inline-flex; align-items: center; cursor: pointer; }
.cad-act-ra-check input { accent-color: var(--cyan-600); width: 16px; height: 16px; cursor: pointer; }
.cad-act-ra-chip {
font-weight: 700;
color: var(--cyan-800);
background: var(--cyan-100);
border: 1px solid var(--cyan-300);
padding: 2px 9px;
border-radius: 4px;
font-size: 12px;
letter-spacing: 0.01em;
flex-shrink: 0;
}
.cad-act-ra-short {
color: var(--text-secondary);
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.cad-act-ra-caret {
margin-left: auto;
color: var(--text-muted);
transition: transform .15s ease;
display: inline-flex;
flex-shrink: 0;
}
.cad-act-ra[open] .cad-act-ra-caret { transform: rotate(90deg); }
.cad-act-ra-body {
padding: 10px 14px 12px;
border-top: 1px solid var(--border);
background: var(--bg-soft);
font-size: 12.5px;
line-height: 1.5;
}
.cad-act-ra-desc { color: var(--navy-900); margin: 0 0 8px; }
.cad-act-ra-ce-hd {
display: flex; align-items: center; gap: 6px;
font-weight: 700;
font-size: 11.5px;
color: var(--cyan-700);
margin: 6px 0 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cad-act-ra-ce-list {
margin: 0; padding-left: 18px;
color: var(--text-secondary);
}
.cad-act-ra-ce-list li { margin: 3px 0; }
.cad-act-ra-ce-list li strong { color: var(--navy-900); }
/* === Planificación UT (pestaña del Cuaderno) ===
- Banner violeta con toque rojo: aviso de revisión obligatorio.
- Calendario de 10 columnas (sep→jun) con pills por UT.
- Tabla editable de UTs y ponderación de RA. */
.cad-plan-banner {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 18px;
margin-bottom: 18px;
background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 60%, #faf5ff 100%);
border: 1px solid #c4b5fd;
border-left: 5px solid #dc2626; /* el "toque rojo" del borde */
border-radius: 10px;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.18), 0 0 0 3px rgba(220, 38, 38, 0.06);
}
.cad-plan-banner-ico { color: #7c3aed; flex-shrink: 0; margin-top: 2px; }
.cad-plan-banner-body { flex: 1; min-width: 0; color: #4c1d95; font-size: 13.5px; line-height: 1.55; }
.cad-plan-banner-body strong { color: #5b21b6; }
.cad-plan-banner-btn {
background: #7c3aed;
color: #fff;
border: 0;
border-radius: 8px;
padding: 8px 14px;
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
transition: transform .12s, box-shadow .12s;
}
.cad-plan-banner-btn:hover { background: #6d28d9; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(124, 58, 237, 0.45); }
.cad-plan-banner-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* === Calendario sep→jun diario tipo Gantt (Planificación UT) ===
Sombreado NARANJA SUAVE de fondo (sugerencia del docente).
Cabecera con meses (3 colores por trimestre) + escala de días por mes
(1, 8, 15, 22). Cuerpo con grid de días + barras UT arrastrables y
redimensionables desde los bordes izquierdo/derecho. */
.cad-gantt-wrap {
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
border: 1px solid #fed7aa;
border-radius: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 4px;
box-shadow: inset 0 1px 3px rgba(234, 88, 12, 0.05);
}
.cad-gantt { position: relative; user-select: none; }
.cad-gantt-meses { display: flex; }
.cad-gantt-mes {
font-size: 11px;
padding: 6px 8px;
border-right: 1px solid #fdba74;
background: rgba(255, 255, 255, 0.6);
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
}
.cad-gantt-mes strong { font-weight: 800; letter-spacing: 0.04em; }
.cad-gantt-mes small { color: var(--text-muted); margin-left: 4px; font-size: 10px; }
.cad-gantt-mes.cad-gantt-t1 { border-top: 3px solid #06b6d4; } /* T1 azul */
.cad-gantt-mes.cad-gantt-t2 { border-top: 3px solid #a855f7; } /* T2 violeta */
.cad-gantt-mes.cad-gantt-t3 { border-top: 3px solid #f59e0b; } /* T3 ámbar */
.cad-gantt-dias-hd { display: flex; height: 16px; border-bottom: 1px solid #fed7aa; background: rgba(255,255,255,0.45); }
.cad-gantt-dia-hd {
width: 9px;
flex-shrink: 0;
font-size: 8px;
text-align: center;
color: var(--text-muted);
line-height: 16px;
border-right: 1px dotted #fed7aa;
box-sizing: border-box;
}
.cad-gantt-dia-hd.m1 { color: #c2410c; font-weight: 700; }
.cad-gantt-body { position: relative; }
.cad-gantt-grid { display: flex; position: absolute; inset: 0; }
.cad-gantt-dia {
width: 9px;
flex-shrink: 0;
border-right: 1px solid rgba(254, 215, 170, 0.4);
box-sizing: border-box;
}
.cad-gantt-dia.lunes { border-right-color: #fdba74; }
.cad-gantt-dia.finde { background: rgba(254, 215, 170, 0.45); }
/* Festivos / vacaciones / no lectivos — sombreado naranja MÁS INTENSO
para destacarlos sobre el sombreado naranja suave del fondo. Tonos
diferenciados según el tipo de día. */
.cad-gantt-dia.festivo { background: repeating-linear-gradient(45deg, #fdba74 0 4px, #fb923c 4px 8px); }
.cad-gantt-dia.navidad { background: rgba(220, 38, 38, 0.22); }
.cad-gantt-dia.semana-santa { background: rgba(168, 85, 247, 0.22); }
.cad-gantt-dia.verano { background: rgba(245, 158, 11, 0.28); }
.cad-gantt-dia.libre-disp { background: repeating-linear-gradient(135deg, #fed7aa 0 5px, #fdba74 5px 10px); }
.cad-gantt-dia.no-lectivo { background: rgba(148, 163, 184, 0.25); }
/* Barras UT — color naranja saturado, drag handles a los lados */
.cad-gantt-ut {
position: absolute;
height: 28px;
border-radius: 6px;
background: linear-gradient(180deg, #fdba74 0%, #fb923c 100%);
color: #7c2d12;
border: 1px solid #ea580c;
box-shadow: 0 1px 3px rgba(234, 88, 12, 0.3);
cursor: grab;
display: flex; align-items: center;
overflow: hidden;
transition: box-shadow .12s, transform .08s;
}
.cad-gantt-ut:hover { box-shadow: 0 3px 8px rgba(234, 88, 12, 0.42); z-index: 2; }
.cad-gantt-ut.arrastrando { cursor: grabbing; z-index: 5; box-shadow: 0 6px 18px rgba(234, 88, 12, 0.55); transform: translateY(-1px); }
.cad-gantt-ut-body {
flex: 1; min-width: 0;
padding: 0 6px;
display: flex; align-items: center; gap: 6px;
font-size: 11px;
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
}
.cad-gantt-ut-body strong { font-weight: 800; color: #7c2d12; }
.cad-gantt-ut-body span {
overflow: hidden; text-overflow: ellipsis;
color: #9a3412;
}
.cad-gantt-ut-body small { color: #c2410c; font-size: 9.5px; opacity: 0.85; }
/* Handles laterales para redimensionar — anchos suficientes para que sean
fáciles de pinchar incluso cuando la barra es estrecha. Doble línea
vertical para indicar que se puede arrastrar. */
.cad-gantt-resize {
width: 10px;
height: 100%;
cursor: ew-resize;
background: rgba(124, 45, 18, 0.25);
flex-shrink: 0;
transition: background .12s;
position: relative;
}
.cad-gantt-resize::before,
.cad-gantt-resize::after {
content: '';
position: absolute;
top: 30%; bottom: 30%;
width: 1.5px;
background: rgba(124, 45, 18, 0.55);
border-radius: 1px;
}
.cad-gantt-resize::before { left: 2.5px; }
.cad-gantt-resize::after { right: 2.5px; }
.cad-gantt-resize:hover { background: rgba(124, 45, 18, 0.55); }
.cad-gantt-resize.ini { border-radius: 6px 0 0 6px; }
.cad-gantt-resize.fin { border-radius: 0 6px 6px 0; }
/* UTs partidas en varios tramos — la barra de cada tramo lleva un patrón
de rayas verticales más finas para indicar que pertenece a un grupo. */
.cad-gantt-ut.multi-tramo {
background: repeating-linear-gradient(
90deg,
#fdba74 0 6px,
#fb923c 6px 12px
);
}
/* Tabla de tramos de cada UT (en la sección "Unidades de Trabajo") */
.cad-plan-tramos {
display: flex; flex-direction: column;
gap: 4px;
}
.cad-plan-tramo {
display: flex; align-items: center;
gap: 4px;
font-size: 12.5px;
}
.cad-plan-tramo-num {
display: inline-grid; place-items: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--cyan-100);
color: var(--cyan-800);
font-weight: 700;
font-size: 11px;
flex-shrink: 0;
}
/* Bloque de conteo de sesiones bajo el Gantt */
.cad-plan-conteo {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-soft);
padding: 10px 14px;
}
.cad-plan-conteo-hd {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--navy-900);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cad-plan-conteo-list {
display: flex; flex-direction: column;
gap: 6px;
}
.cad-plan-conteo-row {
display: grid;
grid-template-columns: 1.4fr auto 2fr;
gap: 14px;
align-items: center;
padding: 7px 10px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12.5px;
}
.cad-plan-conteo-ut strong { color: var(--cyan-800); margin-right: 6px; }
.cad-plan-conteo-total {
font-size: 13px;
color: #c2410c;
background: rgba(254, 215, 170, 0.45);
padding: 3px 10px;
border-radius: 999px;
white-space: nowrap;
font-weight: 600;
}
.cad-plan-conteo-desglose {
display: flex; gap: 6px; flex-wrap: wrap;
justify-content: flex-end;
}
.cad-plan-conteo-pill {
font-size: 11px;
background: var(--cyan-50);
border: 1px solid var(--cyan-200);
color: var(--cyan-800);
padding: 2px 8px;
border-radius: 999px;
}
@media (max-width: 900px) {
.cad-plan-conteo-row { grid-template-columns: 1fr; }
.cad-plan-conteo-desglose { justify-content: flex-start; }
}
/* Mantengo (legacy) las antiguas clases para que no fallen otras vistas */
.cad-plan-cal {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 6px;
}
@media (max-width: 1100px) { .cad-plan-cal { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 700px) { .cad-plan-cal { grid-template-columns: repeat(2, 1fr); } }
.cad-plan-mes {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
overflow: hidden;
min-height: 110px;
display: flex; flex-direction: column;
}
.cad-plan-mes-t1 { border-top: 3px solid #06b6d4; } /* T1: azul */
.cad-plan-mes-t2 { border-top: 3px solid #a855f7; } /* T2: violeta */
.cad-plan-mes-t3 { border-top: 3px solid #f59e0b; } /* T3: ámbar */
.cad-plan-mes-hd {
display: flex; align-items: baseline; justify-content: space-between;
padding: 6px 8px;
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
font-size: 11px;
}
.cad-plan-mes-cod { font-weight: 700; color: var(--navy-900); letter-spacing: 0.04em; }
.cad-plan-mes-nombre { color: var(--text-secondary); font-size: 10px; }
.cad-plan-mes-trim { font-size: 9px; color: var(--text-muted); }
.cad-plan-mes-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cad-plan-mes-vacio { font-size: 10.5px; color: var(--text-muted); text-align: center; padding: 6px 0; }
.cad-plan-ut-pill {
display: flex; flex-direction: column; gap: 1px;
padding: 5px 7px;
background: var(--cyan-50);
border: 1px solid var(--cyan-300);
border-radius: 5px;
font-size: 10.5px;
line-height: 1.3;
}
.cad-plan-ut-pill strong { color: var(--cyan-800); font-size: 11px; }
.cad-plan-ut-pill span { color: var(--navy-900); }
.cad-plan-ut-pill small { color: var(--text-muted); font-size: 9px; }
.cad-plan-ra-chk {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
cursor: pointer;
}
.cad-plan-ra-chk input { accent-color: var(--cyan-600); }
.input-sm, .select-sm { padding: 4px 8px; font-size: 12px; height: 30px; }
/* === Matriz Evaluaciones: edición manual de notas === */
.cad-cell-input {
width: 64px;
padding: 4px 6px;
font-size: 12px;
text-align: center;
font-weight: 700;
border: 1px solid var(--cyan-300);
border-radius: 4px;
background: #fffbeb; /* fondo ámbar suave = aviso de edición */
}
.cad-cell-input.manual { background: #fde6c8; border-color: #b45309; }
.cad-cell-input:focus { outline: none; border-color: var(--cyan-600); box-shadow: 0 0 0 2px var(--cyan-100); }
/* Nota modificada manualmente: sombreado MARRÓN (no rojo) para distinguirla
del color de suspenso y dejar claro que es una calificación introducida
directamente por el docente. */
.cad-cell-num.manual {
background: #fde6c8 !important;
color: #78350f !important;
border: 1px dashed #b45309;
position: relative;
}
/* Pesos de RA no suman 100 % → todas las calificaciones se consideran
inválidas: tabla entera con sombreado rojo muy suave y celdas
numéricas teñidas de rojo independientemente de su estado real. */
.cad-eval-invalido .cad-cell-num,
.cad-eval-invalido .cad-cell-num.ok,
.cad-eval-invalido .cad-cell-num.err,
.cad-eval-invalido .cad-cell-num.manual,
.cad-eval-invalido .cad-pincel,
.cad-eval-invalido .cad-pincel.ok,
.cad-eval-invalido .cad-pincel.err,
.cad-eval-invalido .cad-pincel.neutral {
background: var(--danger-bg) !important;
color: #991b1b !important;
border: 1px dashed #ef4444 !important;
}
.cad-eval-invalido table.cad-table tbody tr {
background: rgba(254, 226, 226, 0.25);
}
.cad-eval-invalido table.cad-table tbody tr:hover {
background: rgba(254, 226, 226, 0.45);
}
.cad-eval-invalido .cad-cell-input { background: var(--danger-bg); border-color: #ef4444; color: #991b1b; }
/* Banner de aviso de pesos inválidos: rojo intenso para destacar */
.banner.banner-pesos-invalidos {
border-left-width: 5px;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
}
/* Matriz de Evaluaciones: columnas expandidas por RA
(cada RA puede desplegar las actividades evaluables que contribuyen
a su nota; la media de las actividades = nota del RA). */
.cad-ra-toggle {
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
font-weight: 700;
color: var(--navy-900);
padding: 2px 4px;
border-radius: 3px;
transition: background-color .12s;
}
.cad-ra-toggle:hover { background: var(--cyan-100); }
/* Columnas de ACTIVIDAD evaluable (cuando un RA está expandido):
sombreado VIOLETA intermedio para diferenciarlas visualmente de las
columnas de los RA (que quedan en azul cian). */
.cad-ra-act-hd {
background: #c4b5fd !important; /* violeta intermedio */
border-left: 2px solid #8b5cf6 !important;
font-size: 10px !important;
font-weight: 700;
color: #4c1d95;
padding: 4px 6px !important;
}
.cad-ra-act-hd .cad-ra-act-name {
display: block;
max-width: 100px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #4c1d95;
}
/* Fecha de la actividad, justo debajo del nombre. Si la actividad dura
varios días se muestra el último (fechaFin). */
.cad-ra-act-hd .cad-ra-act-fecha {
display: block;
font-size: 9px;
font-weight: 500;
color: #5b21b6;
margin-top: 2px;
letter-spacing: 0;
text-transform: none;
font-family: var(--font-mono, ui-monospace, monospace);
}
/* Columna de "media RA" (cabecera con el toggle): azul cian para
contrastar con las violetas de las actividades. */
.cad-ra-media-hd {
background: var(--cyan-50) !important;
border-left: 2px solid var(--cyan-500) !important;
border-right: 2px solid var(--cyan-500) !important;
}
.cad-ra-act-cell {
background: #ede9fe; /* violeta muy suave */
border-left: 1px solid #c4b5fd;
}
.cad-ra-act-cell:first-of-type {
border-left: 2px solid #8b5cf6;
}
/* === Seguimiento diario: calendario mensual sep→jun === */
.cad-cal-leyenda {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
padding: 8px 12px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 14px;
font-size: 13px;
}
.cad-cal-leyenda-pill {
display: inline-flex; align-items: center;
padding: 2px 8px;
border: 1px solid;
border-radius: 6px;
font-size: 11.5px;
font-weight: 500;
color: var(--navy-900);
}
/* Filtro de evaluación encima del calendario mensual */
.cad-cal-filtro {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
font-size: 13px;
}
.cad-cal-filtro label {
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.04em;
margin: 0;
}
.cad-cal-filtro .select {
height: 30px;
padding: 4px 26px 4px 10px;
font-size: 12.5px;
max-width: 320px;
}
.cad-cal-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 18px;
}
@media (max-width: 1500px) { .cad-cal-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1200px) { .cad-cal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cad-cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cad-cal-grid { grid-template-columns: 1fr; } }
.cad-cal-mes {
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
overflow: hidden;
}
.cad-cal-mes-t1 { border-top: 3px solid #06b6d4; }
.cad-cal-mes-t2 { border-top: 3px solid #a855f7; }
.cad-cal-mes-t3 { border-top: 3px solid #f59e0b; }
.cad-cal-mes-hd {
padding: 8px 12px;
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
display: flex; align-items: baseline; justify-content: space-between;
}
.cad-cal-mes-hd strong { font-size: 13px; color: var(--navy-900); }
.cad-cal-mes-dows {
display: grid;
grid-template-columns: repeat(7, 1fr);
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
text-align: center;
padding: 4px 0;
background: var(--bg-card);
}
.cad-cal-mes-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
padding: 4px;
}
.cad-cal-dia {
position: relative;
aspect-ratio: 1 / 1;
min-height: 36px;
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: 4px;
cursor: pointer;
padding: 2px;
font-size: 11px;
font-family: inherit;
display: flex; flex-direction: column;
align-items: stretch; justify-content: space-between;
transition: transform .08s ease, box-shadow .12s ease;
}
.cad-cal-dia:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); z-index: 2; }
.cad-cal-dia.vacio { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.cad-cal-dia.vacio:hover { transform: none; box-shadow: none; }
.cad-cal-dia.no-lectivo {
background: repeating-linear-gradient(45deg, rgba(254, 215, 170, 0.6) 0 4px, rgba(253, 186, 116, 0.5) 4px 8px) !important;
}
.cad-cal-dia.festivo {
background: repeating-linear-gradient(45deg, #fdba74 0 4px, #fb923c 4px 8px) !important;
border-color: #ea580c !important;
}
.cad-cal-dia.hoy {
outline: 2px solid var(--cyan-600);
outline-offset: -2px;
}
.cad-cal-dia.sel {
box-shadow: 0 0 0 3px var(--cyan-500), 0 4px 12px rgba(8, 145, 178, 0.35) !important;
transform: translateY(-1px);
z-index: 3;
}
.cad-cal-dia-num {
font-weight: 700;
color: var(--navy-900);
font-size: 11px;
text-align: left;
line-height: 1.1;
}
.cad-cal-dia-dots {
display: flex; gap: 2px; flex-wrap: wrap;
align-items: flex-end;
justify-content: flex-start;
}
.cad-cal-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.cad-cal-dot.eval { background: #78350f; } /* marrón fuerte */
.cad-cal-dot.no-eval { background: #d6b89f; } /* marrón suave */
.cad-cal-dot-mas {
font-size: 9px;
font-weight: 700;
color: #78350f;
}
/* Panel del día seleccionado */
.cad-seg-day-panel { margin-bottom: 18px; }
.cad-seg-day-ut {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
border-radius: 6px;
margin: 10px 0 12px;
font-size: 13px;
color: var(--navy-900);
}
.cad-seg-day-noUt {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
background: var(--bg-soft);
border-left: 4px solid var(--text-muted);
border-radius: 6px;
margin: 10px 0 12px;
font-size: 12.5px;
color: var(--text-secondary);
}
.cad-seg-day-empty {
display: flex; align-items: center; gap: 12px;
padding: 24px;
background: var(--bg-soft);
border: 1px dashed var(--border);
border-radius: 8px;
color: var(--text-secondary);
font-size: 13px;
}
.cad-seg-day-acts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 10px;
margin-top: 4px;
}
/* Chip de actividad: marron fuerte si evaluable, marron suave si no */
.cad-act-chip {
display: flex; flex-direction: column;
align-items: stretch; text-align: left;
padding: 10px 12px;
border: 2px solid;
border-radius: 8px;
cursor: pointer;
font: inherit;
transition: transform .1s, box-shadow .12s;
}
.cad-act-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(120, 53, 15, 0.25); }
.cad-act-chip.evaluable {
background: #78350f; /* marron fuerte */
border-color: #451a03;
color: #fef3c7;
}
.cad-act-chip.no-evaluable {
background: #fde6c8; /* marron suave */
border-color: #d6b89f;
color: #7c2d12;
}
.cad-act-chip-hd {
display: flex; justify-content: space-between; align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.cad-act-chip-hd strong { font-size: 13.5px; font-weight: 700; }
.cad-act-chip-tag {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
}
.cad-act-chip.evaluable .cad-act-chip-tag { background: rgba(254, 243, 199, 0.2); color: #fef3c7; border: 1px solid rgba(254, 243, 199, 0.4); }
.cad-act-chip.no-evaluable .cad-act-chip-tag { background: rgba(120, 53, 15, 0.1); color: #78350f; border: 1px solid rgba(120, 53, 15, 0.3); }
.cad-act-chip-bd {
display: flex; flex-direction: column;
gap: 2px;
font-size: 11.5px;
opacity: 0.9;
}
.cad-act-chip-ras { font-weight: 600; }
.cad-act-chip-codigo {
display: inline-block;
font-weight: 800;
font-size: 11px;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.04em;
margin-right: 2px;
}
.cad-act-chip.evaluable .cad-act-chip-codigo {
background: #fef3c7;
color: #78350f;
}
.cad-act-chip.no-evaluable .cad-act-chip-codigo {
background: #78350f;
color: #fef3c7;
}
.cad-act-chip-rango {
font-size: 11px;
opacity: 0.85;
font-style: italic;
}
.cad-cell-num.manual sup {
font-size: 8px;
color: #b45309;
font-weight: 800;
margin-left: 1px;
}
/* Wrap para celdas editadas manualmente: nota + rótulo MODIF clicable */
.cad-cell-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* Rótulo "MODIF" bajo una nota editada manualmente: MARRÓN para no
confundirse con el rojo de suspenso. Click → abre el prompt de
observación opcional. */
.cad-modif {
font-size: 9px;
font-weight: 800;
color: #78350f;
letter-spacing: 0.06em;
cursor: pointer;
padding: 1px 4px;
border-radius: 3px;
background: rgba(120, 53, 15, 0.10);
border: 1px solid transparent;
user-select: none;
transition: background-color .12s, border-color .12s;
}
.cad-modif:hover {
background: rgba(120, 53, 15, 0.22);
border-color: rgba(120, 53, 15, 0.45);
}
/* Acciones masivas de Asistencia: marcar todo el grupo o un rango */
.cad-asis-bulk {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
}
.cad-asis-bulk-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
}
.cad-asis-bulk-row strong { font-weight: 700; color: var(--navy-900); display: inline-flex; align-items: center; gap: 6px; }
.btn.btn-asis-p { background: var(--success-bg); color: #065f46; border: 1px solid #6ee7b7; }
.btn.btn-asis-p:hover { background: #d1fae5; }
.btn.btn-asis-a { background: var(--danger-bg); color: #991b1b; border: 1px solid #fca5a5; }
.btn.btn-asis-a:hover { background: #fecaca; }
.btn.btn-asis-r { background: var(--warning-bg); color: #92400e; border: 1px solid #fcd34d; }
.btn.btn-asis-r:hover { background: #fde68a; }
.btn.btn-asis-j { background: var(--info-bg); color: #1e40af; border: 1px solid #93c5fd; }
.btn.btn-asis-j:hover { background: #dbeafe; }
.cad-evmode.cad-evmode-edit {
margin-left: auto;
background: var(--warning-bg);
border-color: var(--warning);
color: #92400e;
}
.cad-evmode.cad-evmode-edit.on {
background: #dc2626;
border-color: #b91c1c;
color: #fff;
}
.cad-legend {
display: flex; gap: 14px; flex-wrap: wrap;
margin-bottom: 12px;
font-size: 12px; color: var(--text-secondary);
}
.cad-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.cad-leg-dot {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
border-radius: 4px;
font-weight: 700; font-size: 10px;
background: var(--bg-soft);
}
.cad-leg-dot.asis-p { background: var(--success-bg); color: #065f46; }
.cad-leg-dot.asis-a { background: var(--danger-bg); color: #991b1b; }
.cad-leg-dot.asis-r { background: var(--warning-bg); color: #92400e; }
.cad-leg-dot.asis-j { background: var(--info-bg); color: #1e40af; }
.cad-split-2col {
display: grid;
grid-template-columns: 240px 1fr;
gap: 14px;
}
.cad-side {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
}
.cad-side-title {
font-size: 11px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 700; margin-bottom: 8px;
}
.cad-side-list {
list-style: none; margin: 0; padding: 0;
}
.cad-side-list li {
padding: 8px 10px; border-radius: 6px;
cursor: pointer; font-size: 13px;
color: var(--text-secondary);
transition: background 0.12s, color 0.12s;
margin-bottom: 2px;
}
.cad-side-list li:hover { background: var(--bg-soft); color: var(--navy-900); }
.cad-side-list li.on {
background: var(--cyan-100); color: var(--cyan-700);
font-weight: 600;
}
.cad-side-content {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
}
.cad-bars {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 8px; height: 170px;
padding: 0 4px;
}
.cad-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.cad-bar-fill {
background: var(--cyan-500);
width: 100%;
border-radius: 4px 4px 0 0;
display: grid; place-items: center;
color: white; font-weight: 700; font-size: 12px;
min-height: 22px;
}
.cad-bar-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; }
/* Barras horizontales de los informes (RA, actividades, evolución, absentismo) */
.cad-hbars { display: flex; flex-direction: column; gap: 8px; }
.cad-hbar-row { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 10px; }
.cad-hbar-label {
font-size: 12px; font-weight: 600; color: var(--navy-900);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cad-hbar-track {
position: relative; height: 18px; border-radius: 9px;
background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden;
}
.cad-hbar-fill { height: 100%; border-radius: 9px 0 0 9px; transition: width 0.3s ease; min-width: 2px; }
.cad-hbar-val { font-size: 12px; font-weight: 700; color: var(--navy-900); white-space: nowrap; text-align: right; min-width: 44px; }
.cad-hbar-sub { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); }
@media (max-width: 640px) {
.cad-hbar-row { grid-template-columns: 96px 1fr auto; }
}
/* Filtros del seguimiento de expedientes (Compras → Seguimiento) */
.seg-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.seg-field > span {
font-size: 11px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.03em;
}
.seg-field .input { width: 100%; }
@media (max-width: 820px) {
#tab-seguimiento .card > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}
.cad-donut {
display: flex; align-items: center; gap: 14px;
}
.donut-svg { width: 130px; height: 130px; transform: rotate(0deg); }
.cad-donut-legend { font-size: 12.5px; line-height: 1.8; }
.cad-donut-legend > div { display: flex; align-items: center; gap: 6px; }
.cad-donut-legend .cad-leg-dot { width: 10px; height: 10px; border-radius: 50%; }
.cad-form .cad-field { margin-bottom: 12px; }
.cad-form .cad-field label { display: block; font-size: 13px; color: var(--navy-900); font-weight: 600; margin-bottom: 4px; }
.cad-field-row { display: flex; align-items: center; gap: 8px; }
.cad-form-h4 { font-size: 13px; color: var(--navy-900); margin: 16px 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.cad-form-actions {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
text-align: right;
}
.checkbox-row {
display: flex; align-items: center; gap: 8px;
font-weight: 500 !important;
margin-bottom: 0 !important;
}
.checkbox-row input { accent-color: var(--cyan-600); }
.cad-sync-box {
display: flex; align-items: center; gap: 14px;
background: var(--success-bg);
border-radius: var(--radius);
padding: 14px 18px;
color: #065f46;
}
.cad-rep-tile {
display: flex; align-items: center; gap: 12px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
margin-bottom: 8px;
width: 100%;
transition: background 0.12s, border-color 0.12s;
}
.cad-rep-tile:hover { background: var(--cyan-100); border-color: var(--cyan-400); }
.cad-rep-tile > div { flex: 1; }
.cad-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.cad-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.cad-grade-input {
text-align: center;
font-weight: 700;
}
.text-mono { font-family: var(--font-mono, ui-monospace, monospace); }
@media (max-width: 900px) {
.cad-selectors { grid-template-columns: 1fr 1fr; }
.cad-eval-pill { grid-column: 1 / -1; }
.cad-kpis, .cad-kpis-4, .cad-kpis-3 { grid-template-columns: repeat(2, 1fr); }
.cad-split-2col { grid-template-columns: 1fr; }
.cad-alumno-hero { flex-wrap: wrap; }
.cad-alumno-kpis { width: 100%; }
}
/* Print */
@media print {
.sidebar, .topbar, .bottom-nav, .modal-back, .help-back { display: none; }
.app-shell { grid-template-columns: 1fr; }
.main { padding: 0; }
}
/* Accesibilidad: focus visible */
button:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.chip:focus-visible,
.nav-item:focus-visible {
outline: 2px solid var(--cyan-500);
outline-offset: 2px;
}
/* =========================================================
Tema oscuro institucional
========================================================= */
[data-theme="dark"] {
color-scheme: dark;
--bg-base: #0a1828;
--bg-soft: #122236;
--bg-card: #142b44;
--bg-elevated: #1b3553;
--bg: var(--bg-card); /* alias retrocompatible legacy */
--navy-900: #e2e8f0;
--navy-800: #cbd5e1;
--navy-700: #94a3b8;
--text-main: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border: #1e3a5f;
--border-strong: #2a4d7c;
--success-bg: #064e3b;
--warning-bg: #78350f;
--danger-bg: #7f1d1d;
--info-bg: #1e3a8a;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] body { background: var(--bg-base); }
[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #050d1a 0%, #0a1828 100%); }
[data-theme="dark"] .topbar { background: var(--bg-card); }
[data-theme="dark"] .topbar h1 { color: var(--text-main); }
[data-theme="dark"] .topbar .search input { background: var(--bg-soft); color: var(--text-main); }
[data-theme="dark"] .card, [data-theme="dark"] .kpi, [data-theme="dark"] .module-card, [data-theme="dark"] .product-card, [data-theme="dark"] .login-card, [data-theme="dark"] .table-wrap { background: var(--bg-card); }
[data-theme="dark"] .topbar .icon-btn:hover { background: var(--bg-elevated); }
[data-theme="dark"] .user-pill, [data-theme="dark"] .modal { background: var(--bg-card); }
[data-theme="dark"] .modal-ft { background: var(--bg-soft); }
[data-theme="dark"] .product-card .thumb { background: linear-gradient(135deg, #1e3a5f, #0a1828); color: var(--cyan-400); }
[data-theme="dark"] .chip { background: var(--bg-elevated); color: var(--text-main); }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea { background: var(--bg-soft); color: var(--text-main); }
[data-theme="dark"] table.data thead th { background: var(--bg-soft); color: var(--text-main); }
[data-theme="dark"] table.data tbody tr:hover { background: var(--bg-elevated); }
[data-theme="dark"] .progress { background: var(--bg-elevated); }
[data-theme="dark"] .step:not(.active):not(.done) { background: var(--bg-elevated); }
[data-theme="dark"] .doc-preview { background: var(--bg-card); color: var(--text-main); }
[data-theme="dark"] .landing { background: radial-gradient(1200px 600px at -10% -20%, rgba(34, 211, 238, 0.10), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(11, 37, 69, 0.40), transparent 55%), linear-gradient(180deg, #0a1828 0%, #050d1a 100%); }
[data-theme="dark"] .landing-title { color: var(--text-main); }
[data-theme="dark"] .role-chip { background: var(--bg-soft); color: var(--text-main); }
[data-theme="dark"] .bottom-nav { background: var(--bg-card); }
[data-theme="dark"] .toast { background: var(--bg-card); color: var(--text-main); }
[data-theme="dark"] .heatmap div { background: var(--bg-elevated); }
/* =========================================================
Paleta de comandos (⌘K / Ctrl+K)
========================================================= */
.cmd-back {
position: fixed; inset: 0;
background: rgba(11, 37, 69, 0.45);
backdrop-filter: blur(4px);
z-index: 300;
display: grid;
place-items: start center;
padding-top: 12vh;
animation: fadeIn .15s;
}
/* Resaltado del resultado del buscador global (persiste hasta pulsar ESC) */
.search-hl {
position: relative;
outline: 2px solid var(--cyan-500, #0891b2);
outline-offset: -2px;
border-radius: 8px;
background: rgba(8, 145, 178, 0.10) !important;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
animation: searchHlPulse 1.3s ease-out 1;
scroll-margin-top: 90px;
}
tr.search-hl > td { background: rgba(8, 145, 178, 0.10) !important; }
@keyframes searchHlPulse {
0% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.55); }
70% { box-shadow: 0 0 0 12px rgba(8, 145, 178, 0); }
100% { box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18); }
}
.cmd-palette {
width: 100%; max-width: 580px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: pop .15s;
}
.cmd-input-wrap {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.cmd-input-wrap svg { color: var(--text-muted); flex-shrink: 0; }
.cmd-input {
flex: 1;
border: 0; background: transparent;
outline: none;
font-size: 15px;
color: var(--text-main);
}
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-kbd {
font-family: var(--font-mono);
font-size: 10px;
padding: 3px 7px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text-secondary);
}
.cmd-list {
max-height: 60vh;
overflow-y: auto;
padding: 8px;
}
.cmd-group { margin: 6px 0; }
.cmd-group-title {
padding: 6px 12px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.cmd-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
color: var(--text-main);
font-size: 13.5px;
}
.cmd-item .ico {
width: 28px; height: 28px;
border-radius: 6px;
background: var(--bg-soft);
color: var(--cyan-700);
display: grid; place-items: center;
flex-shrink: 0;
}
.cmd-item .meta { flex: 1; min-width: 0; }
.cmd-item .meta .sub { color: var(--text-muted); font-size: 11.5px; }
.cmd-item .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.cmd-item.active, .cmd-item:hover {
background: var(--cyan-100);
color: var(--cyan-800);
}
.cmd-item.active .ico { background: var(--cyan-600); color: white; }
.cmd-empty { padding: 30px; text-align: center; color: var(--text-muted); }
[data-theme="dark"] .cmd-item.active, [data-theme="dark"] .cmd-item:hover { background: var(--bg-elevated); color: var(--cyan-300); }
/* =========================================================
Empty states
========================================================= */
.empty-state {
padding: 56px 20px;
text-align: center;
color: var(--text-muted);
}
.empty-state .ico {
width: 64px; height: 64px;
background: var(--bg-soft);
border-radius: 50%;
display: inline-grid; place-items: center;
margin-bottom: 14px;
color: var(--cyan-700);
}
.empty-state h4 {
color: var(--navy-900);
margin: 0 0 6px;
font-size: 15px;
}
.empty-state p { margin: 0 0 16px; font-size: 13px; }
/* =========================================================
Skeleton loading
========================================================= */
.skeleton {
background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-elevated) 50%, var(--bg-soft) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 6px;
height: 14px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* =========================================================
Calendario simple para reuniones
========================================================= */
.mini-cal {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
font-size: 12px;
}
.mini-cal .day-hd {
text-align: center;
font-weight: 600;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
padding: 4px 0;
}
.mini-cal .day {
aspect-ratio: 1;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: var(--bg-card);
border: 1px solid var(--border);
font-weight: 500;
cursor: pointer;
position: relative;
padding: 2px 0;
}
.mini-cal .day .mc-num { line-height: 1.1; }
.mini-cal .day.off { color: var(--text-muted); background: transparent; border-color: transparent; }
.mini-cal .day.today {
background: var(--cyan-100);
border-color: var(--cyan-500);
color: var(--cyan-800);
font-weight: 700;
box-shadow: 0 0 0 2px var(--cyan-500), 0 2px 8px rgba(8, 145, 178, 0.30);
position: relative;
z-index: 1;
transform: scale(1.04);
}
.mini-cal .day.today .mc-num { font-size: 13px; }
.mini-cal .day.today.event {
background: linear-gradient(135deg, var(--cyan-600), var(--cyan-700));
color: #fff;
border-color: var(--cyan-700);
}
.mini-cal .day.event {
background: var(--cyan-600); color: white; border-color: var(--cyan-600);
}
.mini-cal .day.event.past { background: var(--bg-soft); color: var(--text-secondary); border-color: var(--border); }
.mini-cal .day:hover:not(.off) { border-color: var(--cyan-400); }
.mini-cal .day.clickable:not(.off) { cursor: pointer; }
.mini-cal .day.clickable:not(.off):hover { background: var(--cyan-100); color: var(--cyan-800); }
/* Puntos de color de tareas dentro de cada día del mini-calendario */
.mini-cal .day .mc-dots {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
line-height: 1;
}
.mini-cal .day .mc-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
flex-shrink: 0;
}
.mini-cal .day .mc-dot-urgent {
width: 7px;
height: 7px;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--danger);
animation: mcPulse 1.6s ease-in-out infinite;
}
@keyframes mcPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.mini-cal .day .mc-more {
font-size: 8.5px;
color: var(--text-muted);
font-weight: 600;
line-height: 1;
}
.mini-cal .day.event .mc-dot,
.mini-cal .day.today .mc-dot {
box-shadow: 0 0 0 1px rgba(255,255,255,0.85);
}
.mini-cal .day.event .mc-more {
color: rgba(255,255,255,0.85);
}
.mini-cal .day.has-tasks:not(.event):not(.today) {
border-color: var(--border-strong);
}
/* Sombreado rojo muy suave para sábados, domingos y festivos */
.mini-cal .day.weekend,
.mini-cal .day.festivo {
background: rgba(220, 38, 38, 0.06);
}
.mini-cal .day.weekend.off,
.mini-cal .day.festivo.off {
background: rgba(220, 38, 38, 0.04);
}
.mini-cal .day.festivo {
/* festivos con borde rojo discontinuo para distinguir de fin de semana */
border-color: rgba(220, 38, 38, 0.45) !important;
border-style: dashed;
}
.mini-cal .day-hd.weekend {
color: #b91c1c;
}
/* Mantener el día actual y eventos con prioridad visual sobre el sombreado */
.mini-cal .day.today.weekend,
.mini-cal .day.today.festivo { background: var(--cyan-100); }
.mini-cal .day.event.weekend,
.mini-cal .day.event.festivo { background: var(--cyan-600); }
/* ====================== Calendario académico (vista completa) ====================== */
.cal-kpis {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 14px;
}
@media (max-width: 1100px) { .cal-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cal-kpis { grid-template-columns: repeat(2, 1fr); } }
.cal-kpi {
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid var(--cyan-500);
border-radius: 8px;
padding: 10px 12px;
}
.cal-kpi-num { font-size: 22px; font-weight: 800; color: var(--navy-900); line-height: 1.05; }
.cal-kpi-lab { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-top: 2px; letter-spacing: 0.03em; }
.cal-toolbar {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 14px;
margin-bottom: 14px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-titulo-mes { font-size: 16px; color: var(--navy-900); min-width: 160px; text-align: center; text-transform: capitalize; }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-filtro {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px;
padding: 4px 10px;
border: 1px solid;
border-radius: 999px;
cursor: pointer;
background: var(--bg-card);
font-weight: 600;
transition: all .15s;
}
.cal-filtro:hover { transform: translateY(-1px); }
.cal-filtro input { margin: 0; }
.cal-filtro-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Calendario mensual completo */
.cal-mensual {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.cal-hd-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
}
.cal-hd-day {
padding: 8px 6px;
text-align: center;
font-size: 11px;
color: var(--text-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cal-hd-day.weekend { color: #b91c1c; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
min-height: 100px;
padding: 6px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: flex; flex-direction: column; gap: 3px;
cursor: pointer;
position: relative;
transition: background .15s;
font-size: 12px;
}
.cal-cell:hover { background: var(--bg-soft); }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.off { background: var(--bg-soft); color: var(--text-muted); cursor: default; }
.cal-cell.off:hover { background: var(--bg-soft); }
.cal-cell.weekend { background: rgba(220, 38, 38, 0.04); }
.cal-cell.weekend.off { background: rgba(220, 38, 38, 0.025); }
.cal-cell.no-lectivo { background: rgba(148, 163, 184, 0.10); }
.cal-cell.festivo,
.cal-cell.navidad { background: rgba(220, 38, 38, 0.07); }
.cal-cell.verano { background: rgba(245, 158, 11, 0.07); }
.cal-cell.semana_santa { background: rgba(168, 85, 247, 0.07); }
.cal-cell.libre_disposicion { background: rgba(6, 182, 212, 0.07); }
.cal-cell.hoy {
background: var(--cyan-100) !important;
box-shadow: inset 0 0 0 2px var(--cyan-500);
}
.cal-num { font-weight: 700; color: var(--navy-900); font-size: 13px; }
.cal-cell.off .cal-num { color: var(--text-muted); font-weight: 500; }
.cal-cell.hoy .cal-num { color: var(--cyan-800); }
.cal-cell.weekend .cal-num { color: #991b1b; }
.cal-chip {
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
cursor: pointer;
}
.cal-chip:hover { filter: brightness(0.95); transform: translateX(1px); }
.cal-more { font-size: 10px; color: var(--text-muted); font-weight: 600; padding: 0 4px; }
@media (max-width: 768px) {
.cal-cell { min-height: 70px; }
.cal-chip { font-size: 9px; padding: 1px 4px; }
}
/* Selector de vista (Año / Mes / Semana) */
.cal-vista-switch {
display: inline-flex;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.cal-vista-btn {
display: inline-flex; align-items: center; gap: 4px;
border: none;
background: transparent;
color: var(--text-secondary);
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.cal-vista-btn:hover { color: var(--cyan-700); background: var(--bg); }
.cal-vista-btn.on {
background: var(--cyan-600);
color: #fff;
box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
}
/* ====================== Vista SEMANA ====================== */
.cal-semana {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
background: transparent;
}
@media (max-width: 900px) { .cal-semana { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cal-semana { grid-template-columns: 1fr; } }
.cal-sem-dia {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px;
min-height: 220px;
display: flex; flex-direction: column;
cursor: pointer;
transition: all .15s;
}
.cal-sem-dia:hover { border-color: var(--cyan-400); transform: translateY(-1px); }
.cal-sem-dia.hoy { border-color: var(--cyan-600); box-shadow: 0 0 0 2px var(--cyan-100); }
.cal-sem-dia.weekend { background: rgba(220, 38, 38, 0.04); }
.cal-sem-dia.festivo,
.cal-sem-dia.navidad { background: rgba(220, 38, 38, 0.07); }
.cal-sem-dia.verano { background: rgba(245, 158, 11, 0.07); }
.cal-sem-dia.semana_santa { background: rgba(168, 85, 247, 0.07); }
.cal-sem-dia.libre_disposicion { background: rgba(6, 182, 212, 0.07); }
.cal-sem-hd {
text-align: center;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
.cal-sem-dow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
font-weight: 700;
}
.cal-sem-dia.weekend .cal-sem-dow { color: #b91c1c; }
.cal-sem-num {
font-size: 28px;
font-weight: 800;
line-height: 1;
color: var(--navy-900);
margin-top: 2px;
}
.cal-sem-dia.hoy .cal-sem-num { color: var(--cyan-700); }
.cal-sem-mes {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
font-weight: 600;
}
.cal-sem-evs { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; max-height: 260px; }
.cal-sem-ev {
padding: 6px 8px;
border-radius: 6px;
font-size: 11px;
cursor: pointer;
transition: all .15s;
}
.cal-sem-ev:hover { filter: brightness(0.95); transform: translateX(1px); }
.cal-sem-ev strong { display: block; line-height: 1.3; }
.cal-sem-hora { display: inline-block; font-size: 10px; font-weight: 700; opacity: 0.75; margin-right: 4px; }
.cal-sem-ev-desc { font-size: 10px; opacity: 0.75; margin-top: 2px; font-weight: 400; color: var(--text-secondary); }
.cal-sem-vacio { font-size: 11px; color: var(--text-muted); padding: 12px 0; text-align: center; font-style: italic; }
/* ====================== Vista AÑO ====================== */
.cal-anio {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@media (max-width: 1100px) { .cal-anio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .cal-anio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cal-anio { grid-template-columns: 1fr; } }
.cal-anio-mes {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px;
}
.cal-anio-mes-hd {
text-align: center;
font-weight: 700;
color: var(--navy-900);
padding: 4px 0 8px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.cal-anio-mes-hd:hover { color: var(--cyan-700); }
.cal-anio-hd-row {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
margin-bottom: 3px;
}
.cal-anio-dh {
text-align: center;
font-size: 9px;
font-weight: 700;
color: var(--text-muted);
padding: 2px 0;
}
.cal-anio-dh.weekend { color: #b91c1c; }
.cal-anio-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-anio-d {
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
color: var(--navy-900);
border-radius: 4px;
cursor: pointer;
background: var(--bg);
transition: all .12s;
position: relative;
}
.cal-anio-d:hover { background: var(--cyan-100); color: var(--cyan-800); }
.cal-anio-d.off { color: var(--text-muted); opacity: 0.4; cursor: default; }
.cal-anio-d.off:hover { background: transparent; }
.cal-anio-d.weekend { background: rgba(220, 38, 38, 0.05); }
.cal-anio-d.festivo,
.cal-anio-d.navidad { background: rgba(220, 38, 38, 0.12); color: #991b1b; }
.cal-anio-d.verano { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.cal-anio-d.semana_santa { background: rgba(168, 85, 247, 0.12); color: #6b21a8; }
.cal-anio-d.libre_disposicion { background: rgba(6, 182, 212, 0.12); color: #155e75; }
.cal-anio-d.con-eventos::after {
content: '';
position: absolute;
bottom: 2px; left: 50%;
transform: translateX(-50%);
width: 4px; height: 4px;
border-radius: 50%;
background: var(--ev-color, var(--cyan-600));
}
.cal-anio-d.hoy {
background: var(--cyan-600) !important;
color: #fff !important;
font-weight: 700;
box-shadow: 0 0 0 2px var(--cyan-700);
}
/* ====================== Módulo CICLOS (drill-down) ====================== */
.ciclos-bc {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
font-size: 13px;
margin-bottom: 14px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
}
.ciclos-bc-link {
color: var(--cyan-700);
cursor: pointer;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ciclos-bc-link:hover { text-decoration: underline; }
.ciclos-bc-sep { color: var(--text-muted); font-weight: 400; }
.ciclos-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.ciclos-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 900px) { .ciclos-grid-3, .ciclos-grid-2 { grid-template-columns: 1fr; } }
.ciclos-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid var(--cyan-500);
border-radius: 10px;
padding: 16px;
cursor: pointer;
transition: all .15s;
display: flex; flex-direction: column; gap: 10px;
}
.ciclos-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(8, 145, 178, 0.12);
border-color: var(--cyan-500);
}
.ciclos-card-hd {
display: flex; align-items: flex-start; gap: 12px;
}
.ciclos-icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 10px;
display: grid; place-items: center;
}
.ciclos-card h3 {
margin: 0;
font-size: 15px;
color: var(--navy-900);
}
.ciclos-card p { margin: 2px 0 0; }
.ciclos-card-meta {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.ciclos-badge-ciclo {
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.02em;
}
/* Lista de módulos del curso elegido */
.ciclos-modulos-list { display: flex; flex-direction: column; gap: 6px; }
.ciclos-modulo-row {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all .15s;
}
.ciclos-modulo-row:hover {
border-color: var(--cyan-500);
background: var(--bg-soft);
}
.ciclos-modulo-codigo {
flex: none;
min-width: 64px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: var(--cyan-700);
background: var(--cyan-100);
padding: 4px 8px;
border-radius: 6px;
text-align: center;
}
.ciclos-modulo-info { flex: 1; min-width: 0; }
.ciclos-modulo-info strong { color: var(--navy-900); }
/* Catálogo editable: ocultos */
.ciclos-ocultos-list { display: flex; flex-direction: column; gap: 8px; }
.ciclos-oculto-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg-soft); font-size: 13px; opacity: .85;
}
.ciclos-modulo-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ciclos-chevron { color: var(--text-muted); }
/* Lista de RAs del módulo */
.ciclos-ra-list { display: flex; flex-direction: column; gap: 8px; }
.ciclos-ra-row {
display: grid;
grid-template-columns: 40px 1fr auto auto;
gap: 14px;
align-items: center;
padding: 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid var(--cyan-500);
border-radius: 8px;
cursor: pointer;
transition: all .15s;
}
.ciclos-ra-row:hover {
border-left-color: var(--cyan-700);
background: var(--bg-soft);
}
.ciclos-ra-num {
font-size: 24px;
font-weight: 800;
color: var(--cyan-700);
text-align: center;
line-height: 1;
}
.ciclos-ra-info strong { color: var(--navy-900); font-size: 14px; }
.ciclos-ra-desc {
color: var(--text-secondary);
font-size: 13px;
margin-top: 3px;
line-height: 1.45;
}
.ciclos-ra-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
/* Lista de CEs */
.ciclos-ce-list {
list-style: none;
margin: 0;
padding: 12px 14px;
}
.ciclos-ce-row {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.ciclos-ce-row:last-child { border-bottom: none; }
.ciclos-ce-id {
font-family: var(--font-mono);
font-size: 12px;
color: var(--cyan-700);
background: var(--cyan-100);
padding: 3px 8px;
border-radius: 4px;
text-align: center;
letter-spacing: 0.02em;
}
.ciclos-ce-desc {
color: var(--text-primary);
line-height: 1.5;
font-size: 13.5px;
}
/* =========================================================
Superadmin (acceso total)
========================================================= */
.role-chip-super {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
color: white !important;
border-color: #d97706 !important;
}
.role-chip-super:hover { background: linear-gradient(135deg, #d97706, #b45309) !important; }
.role-chip-super.active { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.superadmin-banner {
display: flex; align-items: center; gap: 12px;
padding: 10px 18px;
background: linear-gradient(90deg, #f59e0b, #d97706);
color: white;
font-size: 13px;
font-weight: 600;
position: relative;
overflow: hidden;
}
.superadmin-banner::before {
content: "";
position: absolute; inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,0.05) 8px, rgba(255,255,255,0.05) 16px);
}
.superadmin-banner > * { position: relative; }
.superadmin-banner .stats { margin-left: auto; display: flex; gap: 18px; font-weight: 500; opacity: 0.9; }
.superadmin-banner .stats strong { font-weight: 700; }
[data-theme="dark"] .superadmin-banner { background: linear-gradient(90deg, #92400e, #78350f); }
.badge-super {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
display: inline-flex; align-items: center; gap: 4px;
text-transform: uppercase;
}
.sidebar.super .brand-mark .logo {
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow: 0 10px 24px -8px rgba(245, 158, 11, 0.55);
}
.sidebar.super .sidebar-user .avatar {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.btn-super {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border: 0;
}
.btn-super:hover { background: linear-gradient(135deg, #d97706, #b45309); color: white; }
/* =========================================================
Panel de accesibilidad
========================================================= */
.a11y-fab {
position: fixed;
right: 20px; bottom: 84px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--cyan-600);
color: white;
box-shadow: 0 10px 24px -6px rgba(8, 145, 178, 0.6);
display: grid; place-items: center;
z-index: 95;
cursor: pointer;
transition: all .15s;
}
.a11y-fab:hover { background: var(--cyan-700); transform: translateY(-2px); }
.a11y-fab:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 3px; }
.a11y-panel {
position: fixed;
right: 20px; bottom: 140px;
width: 320px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 18px;
z-index: 96;
animation: pop .15s ease-out;
}
.a11y-panel h4 {
margin: 0 0 14px;
font-size: 15px;
color: var(--navy-900);
display: flex; align-items: center; gap: 8px;
}
.a11y-section { margin-bottom: 14px; }
.a11y-section label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
display: block;
margin-bottom: 6px;
}
.a11y-row { display: flex; gap: 6px; }
.a11y-btn {
flex: 1;
padding: 8px 10px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-main);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .15s;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.a11y-btn:hover { border-color: var(--cyan-400); }
.a11y-btn.active { background: var(--cyan-600); color: white; border-color: var(--cyan-600); }
.a11y-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0;
font-size: 13px;
}
.a11y-toggle .sw {
position: relative;
width: 32px; height: 18px;
background: var(--bg-soft);
border-radius: 999px;
cursor: pointer;
transition: background .15s;
}
.a11y-toggle .sw::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,.15);
transition: left .15s;
}
.a11y-toggle.on .sw { background: var(--cyan-600); }
.a11y-toggle.on .sw::after { left: 16px; }
/* Tamaños de fuente accesibles */
[data-a11y-font="lg"] { font-size: 16px; }
[data-a11y-font="xl"] { font-size: 18px; }
[data-a11y-font="xxl"] { font-size: 20px; }
/* Alto contraste */
[data-a11y-contrast="high"] {
--bg-base: #ffffff;
--bg-card: #ffffff;
--bg-soft: #f5f5f5;
--text-main: #000000;
--text-secondary: #1a1a1a;
--border: #000000;
--border-strong: #000000;
--cyan-600: #006080;
--cyan-700: #004060;
--navy-900: #000000;
}
[data-a11y-contrast="high"] .badge { border: 1px solid currentColor; }
[data-a11y-contrast="high"] .btn-primary { background: #000; color: #fff; border: 2px solid #000; }
[data-a11y-contrast="high"][data-theme="dark"] {
--bg-base: #000000;
--bg-card: #000000;
--bg-soft: #1a1a1a;
--text-main: #ffffff;
--text-secondary: #f5f5f5;
--border: #ffffff;
--cyan-600: #00e0ff;
--navy-900: #ffffff;
}
/* Subrayar enlaces y botones de acción */
[data-a11y-underline="on"] a,
[data-a11y-underline="on"] .btn-primary,
[data-a11y-underline="on"] .btn-secondary,
[data-a11y-underline="on"] .nav-item { text-decoration: underline; text-underline-offset: 3px; }
/* Reducir movimiento */
[data-a11y-motion="reduce"] *,
[data-a11y-motion="reduce"] *::before,
[data-a11y-motion="reduce"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Mayor área de clic */
[data-a11y-target="lg"] .btn { padding: 14px 22px; min-height: 44px; }
[data-a11y-target="lg"] .btn-sm { padding: 10px 16px; min-height: 38px; }
[data-a11y-target="lg"] .icon-btn { min-width: 44px; min-height: 44px; }
[data-a11y-target="lg"] .nav-item { padding: 14px 12px; min-height: 44px; }
[data-a11y-target="lg"] table.data tbody td { padding: 16px 14px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* =========================================================
Kanban / Tareas
========================================================= */
.kanban {
display: grid;
grid-template-columns: repeat(4, minmax(250px, 1fr));
gap: 14px;
align-items: flex-start;
}
.kan-col {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px;
min-height: 200px;
display: flex; flex-direction: column;
gap: 10px;
}
.kan-col.drop-target {
border-color: var(--cyan-500);
background: var(--cyan-50);
}
.kan-col-hd {
display: flex; align-items: center; gap: 8px;
padding: 0 4px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.kan-col-hd .dot-status {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.kan-col[data-state="pendiente"] .dot-status { background: #94a3b8; }
.kan-col[data-state="en_curso"] .dot-status { background: #06b6d4; }
.kan-col[data-state="revision"] .dot-status { background: #f59e0b; }
.kan-col[data-state="hecho"] .dot-status { background: #10b981; }
.kan-col-hd .name { font-weight: 700; font-size: 12px; color: var(--navy-900); text-transform: uppercase; letter-spacing: 0.05em; flex: 1; }
.kan-col-hd .count {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
}
.kan-col-hd .add {
width: 24px; height: 24px;
border-radius: 6px;
display: grid; place-items: center;
color: var(--text-muted);
transition: all .15s;
}
.kan-col-hd .add:hover { background: var(--cyan-100); color: var(--cyan-700); }
.task-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
cursor: grab;
transition: all .15s;
position: relative;
}
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.5; transform: rotate(2deg); }
.task-card:hover { border-color: var(--cyan-400); box-shadow: var(--shadow); transform: translateY(-1px); }
.task-card.prio-urgente { border-left: 3px solid var(--danger); }
.task-card.prio-alta { border-left: 3px solid var(--warning); }
.task-card.prio-media { border-left: 3px solid var(--info); }
.task-card.prio-baja { border-left: 3px solid var(--border-strong); }
.task-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.task-card .tag {
font-size: 10px; font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
color: white;
letter-spacing: 0.02em;
}
.task-card .ttl {
font-weight: 600;
color: var(--navy-900);
font-size: 13.5px;
line-height: 1.35;
margin-bottom: 8px;
}
.task-card .meta-row {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px;
}
.task-card .due {
font-size: 11px;
color: var(--text-muted);
display: flex; align-items: center; gap: 4px;
}
.task-card .due.overdue { color: var(--danger); font-weight: 600; }
.task-card .due.soon { color: var(--warning); font-weight: 600; }
.task-card .avatars { display: flex; }
.task-card .avatars > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-card); }
.task-card .avatars > *:first-child { margin-left: 0; }
.task-card .progress { margin-top: 8px; height: 4px; }
/* Filtros y header de tareas */
.task-filters {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.task-filters .user-filter {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.task-filters .user-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 4px;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
cursor: pointer;
transition: all .15s;
}
.task-filters .user-chip:hover { border-color: var(--cyan-400); }
.task-filters .user-chip.active {
background: var(--cyan-600);
border-color: var(--cyan-600);
color: white;
}
.task-filters .user-chip.active .avatar-mini { box-shadow: 0 0 0 2px var(--cyan-600); }
.task-filters .avatar-mini {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan-400), var(--navy-700));
color: white;
display: grid; place-items: center;
font-weight: 700;
font-size: 10px;
}
/* Toggle vista Kanban/Calendario/Lista */
.view-toggle {
display: inline-flex;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 3px;
}
.view-toggle button {
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
border-radius: 7px;
display: inline-flex; align-items: center; gap: 6px;
transition: all .15s;
}
.view-toggle button.active {
background: var(--bg-card);
color: var(--cyan-700);
box-shadow: var(--shadow-sm);
}
/* =========================================================
Calendario completo (mensual)
========================================================= */
.cal-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cal-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
}
.cal-hd h3 {
margin: 0;
font-size: 17px;
color: var(--navy-900);
letter-spacing: -0.01em;
text-transform: capitalize;
}
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--bg-soft);
color: var(--navy-800);
display: grid; place-items: center;
transition: all .15s;
}
.cal-nav button:hover { background: var(--cyan-100); color: var(--cyan-700); }
.cal-nav .today-btn { width: auto; padding: 0 14px; font-size: 12px; font-weight: 600; }
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.cal-grid .day-header {
padding: 10px;
background: var(--bg-soft);
text-align: center;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--border);
}
.cal-cell {
min-height: 110px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 6px;
background: var(--bg-card);
position: relative;
cursor: pointer;
transition: background .15s;
}
.cal-cell:hover { background: var(--bg-soft); }
.cal-cell.other-month { background: var(--bg-base); }
.cal-cell.other-month .day-num { color: var(--text-muted); }
.cal-cell.today { background: linear-gradient(180deg, var(--cyan-50), var(--bg-card)); }
.cal-cell.weekend { background: rgba(0,0,0,0.015); }
.cal-cell.today.weekend { background: linear-gradient(180deg, var(--cyan-50), var(--bg-card)); }
.cal-cell .day-num {
font-size: 13px;
font-weight: 600;
color: var(--navy-900);
margin-bottom: 4px;
}
.cal-cell.today .day-num {
background: var(--cyan-600);
color: white;
width: 24px; height: 24px;
border-radius: 50%;
display: inline-grid; place-items: center;
font-size: 12px;
}
.cal-cell .events { display: flex; flex-direction: column; gap: 3px; }
.cal-event {
display: flex; align-items: center; gap: 4px;
font-size: 10.5px;
padding: 3px 6px;
background: var(--cyan-100);
color: var(--cyan-800);
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
border-left: 2px solid var(--cyan-600);
}
.cal-event.urgente { background: var(--danger-bg); color: #991b1b; border-color: var(--danger); }
.cal-event.alta { background: var(--warning-bg); color: #92400e; border-color: var(--warning); }
.cal-event.media { background: var(--info-bg); color: #1e40af; border-color: var(--info); }
.cal-event.baja { background: var(--bg-soft); color: var(--text-secondary); border-color: var(--border-strong); }
.cal-event.done { opacity: 0.5; text-decoration: line-through; }
.cal-event.reunion { background: #0b2545; color: #fff; border-color: #0b2545; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.cal-event.reunion svg { stroke: #fff; }
.cal-event:hover { transform: translateX(2px); }
.cal-cell .more-btn {
font-size: 10px;
color: var(--text-muted);
font-weight: 600;
margin-top: 2px;
cursor: pointer;
}
.cal-cell .more-btn:hover { color: var(--cyan-700); }
[data-theme="dark"] .cal-cell { background: var(--bg-card); }
[data-theme="dark"] .cal-cell.other-month { background: var(--bg-base); opacity: 0.6; }
[data-theme="dark"] .cal-cell.today { background: linear-gradient(180deg, rgba(8,145,178,0.15), var(--bg-card)); }
@media (max-width: 1024px) {
.kanban { grid-template-columns: repeat(2, 1fr); }
.cal-cell { min-height: 80px; padding: 4px; }
.cal-cell .day-num { font-size: 11.5px; }
.cal-event { font-size: 9.5px; padding: 2px 4px; }
}
@media (max-width: 640px) {
.kanban { grid-template-columns: 1fr; }
.kan-col { min-height: auto; }
.cal-grid .day-header { padding: 6px 2px; font-size: 9px; }
.cal-cell { min-height: 60px; }
.cal-event { font-size: 8.5px; }
.task-filters { padding: 10px; gap: 6px; }
.task-filters .user-chip { padding: 3px 8px 3px 3px; font-size: 11px; }
.task-filters .user-chip span:not(.avatar-mini) { display: none; }
}
/* =========================================================
Subtareas (checklist)
========================================================= */
.subtask-list { display: flex; flex-direction: column; gap: 2px; }
.subtask-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 13.5px;
transition: background .12s;
}
.subtask-item:hover { background: var(--bg-soft); }
.subtask-item input { display: none; }
.subtask-item .box {
width: 20px; height: 20px;
border: 2px solid var(--border-strong);
border-radius: 6px;
display: grid; place-items: center;
color: transparent;
flex-shrink: 0;
transition: all .12s;
}
.subtask-item input:checked + .box {
background: var(--success);
border-color: var(--success);
color: white;
}
.subtask-item.done .txt { text-decoration: line-through; color: var(--text-muted); }
/* =========================================================
Dependencias
========================================================= */
.dep-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
cursor: pointer;
transition: border-color .12s;
}
.dep-item:hover { border-color: var(--cyan-400); }
.dep-item.blocking { border-left: 3px solid var(--warning); }
/* Selector de dependencias en formulario */
.dep-selector {
border: 1px solid var(--border);
border-radius: 8px;
max-height: 160px;
overflow-y: auto;
padding: 4px;
}
.dep-option {
display: flex; align-items: center; gap: 8px;
padding: 7px 9px;
border-radius: 6px;
cursor: pointer;
font-size: 12.5px;
}
.dep-option:hover { background: var(--bg-soft); }
.dep-option input { accent-color: var(--cyan-600); }
/* Subtareas en formulario */
.subtask-input-row { display: flex; gap: 6px; margin-bottom: 6px; }
.subtask-input-row input { flex: 1; }
.subtask-chip {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
background: var(--bg-soft);
border-radius: 6px;
font-size: 12.5px;
margin-bottom: 4px;
}
.subtask-chip button { margin-left: auto; color: var(--danger); }
/* =========================================================
Vista AÑO del calendario
========================================================= */
.year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 16px;
}
.ymonth {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
cursor: pointer;
transition: border-color .12s, box-shadow .12s;
}
.ymonth:hover { border-color: var(--cyan-400); box-shadow: var(--shadow-sm); }
.ymonth-hd {
font-weight: 700;
font-size: 13px;
color: var(--navy-900);
margin-bottom: 8px;
text-align: center;
}
.ygrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.ydaycell {
aspect-ratio: 1;
display: grid; place-items: center;
font-size: 9px;
border-radius: 3px;
color: var(--text-secondary);
cursor: pointer;
}
.ydaycell.hd { font-weight: 700; color: var(--text-muted); cursor: default; font-size: 8px; }
.ydaycell.off { visibility: hidden; }
.ydaycell[data-lvl="1"] { background: var(--cyan-100); color: var(--cyan-800); }
.ydaycell[data-lvl="2"] { background: var(--cyan-300); color: var(--navy-900); }
.ydaycell[data-lvl="3"] { background: var(--cyan-600); color: white; font-weight: 700; }
.ydaycell.today { box-shadow: 0 0 0 2px var(--navy-900); font-weight: 700; }
.ydaycell:not(.hd):not(.off):hover { box-shadow: 0 0 0 1px var(--cyan-500); }
[data-theme="dark"] .ydaycell[data-lvl="1"] { background: #134e5a; color: var(--cyan-300); }
[data-theme="dark"] .ydaycell[data-lvl="2"] { background: #0e7490; color: white; }
@media (max-width: 1024px) {
.year-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.year-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
}
@media (max-width: 480px) {
.year-grid { grid-template-columns: 1fr; }
}
/* =========================================================
Hoja de firmas de asistencia (documento institucional)
========================================================= */
.asistencia-doc {
--doc-navy: #0b2545;
--doc-green: #16a34a;
--doc-green-soft: #dcfce7;
background: #ffffff;
color: var(--doc-navy);
max-width: 920px;
margin: 0 auto;
padding: 28px 32px 36px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
font-family: var(--font-sans);
}
.asistencia-doc .ad-header {
border: 2px solid var(--doc-navy);
border-radius: 14px;
padding: 14px 18px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
}
.asistencia-doc .ad-logos { display: flex; align-items: center; gap: 12px; }
.asistencia-doc .ad-logo-canarias,
.asistencia-doc .ad-logo-dpto { width: 58px; height: 58px; flex-shrink: 0; }
.asistencia-doc .ad-center { text-align: center; }
.asistencia-doc .ad-center .ad-code { font-weight: 800; font-size: 16px; color: var(--doc-navy); letter-spacing: 0.01em; }
.asistencia-doc .ad-center .ad-addr { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.asistencia-doc .ad-center .ad-divider { height: 1px; background: var(--border-strong); margin: 8px auto; width: 70%; }
.asistencia-doc .ad-center .ad-meeting { font-weight: 700; font-size: 13px; }
.asistencia-doc .ad-center .ad-meeting .ad-curso { color: var(--doc-green); }
.asistencia-doc .ad-conserjeria { display: flex; align-items: center; gap: 10px; max-width: 220px; }
.asistencia-doc .ad-conserjeria .ad-cons-text { font-size: 10.5px; font-weight: 600; color: var(--doc-navy); line-height: 1.3; }
.asistencia-doc .ad-crown { width: 46px; height: 56px; flex-shrink: 0; }
.asistencia-doc .ad-chevron {
width: 0; height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 12px solid var(--doc-green);
margin: 0 auto 4px;
}
.asistencia-doc .ad-title-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin: 18px 0 24px; flex-wrap: wrap;
}
.asistencia-doc .ad-title {
display: flex; align-items: center; gap: 12px;
font-size: 28px; font-weight: 800; color: var(--doc-navy);
letter-spacing: -0.01em; text-transform: uppercase;
}
.asistencia-doc .ad-title::before {
content: ""; width: 6px; height: 30px; background: var(--doc-green); border-radius: 3px;
}
.asistencia-doc .ad-date {
display: inline-flex; align-items: center; gap: 10px;
background: var(--doc-green-soft);
border-radius: 12px;
padding: 10px 18px;
font-weight: 700; font-size: 15px; color: var(--doc-navy);
}
.asistencia-doc .ad-date .ad-date-val { color: var(--doc-green); }
.asistencia-doc .ad-date svg { color: var(--doc-green); }
.asistencia-doc .ad-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.asistencia-doc .ad-cell {
border: 1.5px solid var(--border-strong);
border-radius: 12px;
min-height: 200px;
display: flex; flex-direction: column;
overflow: hidden;
background: #fff;
}
.asistencia-doc .ad-cell-hd {
display: flex; align-items: stretch; gap: 0;
border-bottom: 1px solid var(--border);
}
.asistencia-doc .ad-num {
background: var(--doc-navy); color: #fff;
font-weight: 800; font-size: 15px;
display: grid; place-items: center;
width: 46px; flex-shrink: 0;
position: relative;
clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
padding-right: 8px;
}
.asistencia-doc .ad-num::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--doc-green);
}
.asistencia-doc .ad-name {
flex: 1; display: flex; align-items: center;
padding: 8px 12px; font-weight: 700; font-size: 12.5px; color: var(--doc-navy);
text-transform: uppercase; line-height: 1.25;
}
.asistencia-doc .ad-sign {
flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
padding: 14px 16px 16px; transition: background .12s;
}
.asistencia-doc .ad-sign .ad-signed {
flex: 1; display: flex; align-items: center; justify-content: center;
color: var(--doc-navy);
}
.asistencia-doc .ad-firma-img { max-width: 100%; max-height: 80px; object-fit: contain; }
.asistencia-doc .ad-sign .ad-signline { border-top: 1px solid var(--border-strong); padding-top: 5px; text-align: center; font-size: 10px; letter-spacing: 0.15em; color: var(--text-muted); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 4px; }
.asistencia-doc .ad-sign.is-signed .ad-signline { color: var(--doc-green); font-weight: 700; }
/* Casilla firmable (del usuario actual, pendiente) */
.asistencia-doc .ad-sign.firmable { cursor: pointer; }
.asistencia-doc .ad-sign.firmable:hover { background: var(--doc-green-soft); }
.asistencia-doc .ad-firmar-prompt {
color: var(--doc-green); font-weight: 700; font-size: 13px;
display: flex; align-items: center; gap: 6px;
border: 1.5px dashed var(--doc-green); border-radius: 8px;
padding: 12px; width: 100%; justify-content: center;
}
.asistencia-doc .ad-cell-mine { border-color: var(--doc-green); box-shadow: 0 0 0 2px var(--doc-green-soft); }
.asistencia-doc .ad-yo {
display: inline-block; margin-left: 6px; padding: 1px 6px;
background: var(--doc-green); color: #fff; border-radius: 4px;
font-size: 8px; font-weight: 800; vertical-align: middle; letter-spacing: .05em;
}
/* Casilla bloqueada (firmada o de otro usuario): sin interacción */
.asistencia-doc .ad-sign.locked,
.asistencia-doc .ad-sign.locked-other { cursor: default; }
.asistencia-doc .ad-sign.locked-other:hover { background: transparent; }
/* Pad de firma manuscrita */
.firma-pad {
width: 100%;
height: 180px;
border: 2px dashed var(--border-strong);
border-radius: 10px;
background:
repeating-linear-gradient(transparent, transparent 35px, rgba(11,37,69,0.06) 35px, rgba(11,37,69,0.06) 36px);
cursor: crosshair;
touch-action: none;
display: block;
}
.asistencia-doc .ad-footer {
display: flex; align-items: center; gap: 20px;
margin-top: 28px; padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 11px; color: var(--text-secondary);
}
.asistencia-doc .ad-footer .ad-foot-block { display: flex; align-items: center; gap: 10px; }
.asistencia-doc .ad-footer .ad-foot-block strong { color: var(--doc-navy); display: block; font-size: 12px; }
.asistencia-doc .ad-footer .ad-foot-sep { width: 1px; align-self: stretch; background: var(--border); }
.asistencia-doc .ad-footer .ad-pin { color: var(--doc-green); flex-shrink: 0; }
[data-theme="dark"] .asistencia-doc { background: #f5fbff; }
@media (max-width: 768px) {
.asistencia-doc { padding: 18px 14px 24px; }
.asistencia-doc .ad-header { grid-template-columns: 1fr; text-align: center; gap: 10px; }
.asistencia-doc .ad-logos, .asistencia-doc .ad-conserjeria { justify-content: center; max-width: none; }
.asistencia-doc .ad-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.asistencia-doc .ad-title { font-size: 20px; }
.asistencia-doc .ad-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
.asistencia-doc .ad-footer .ad-foot-sep { display: none; }
}
@media (max-width: 480px) {
.asistencia-doc .ad-grid { grid-template-columns: 1fr; }
}
/* Impresión: solo el documento */
@media print {
body * { visibility: hidden; }
.asistencia-doc, .asistencia-doc * { visibility: visible; }
.asistencia-doc { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; margin: 0; }
.no-print { display: none !important; }
}
/* =========================================================
Gantt (cronograma de tareas)
========================================================= */
.gantt-wrap { display: flex; max-height: 540px; }
.g-left {
flex: 0 0 220px;
border-right: 2px solid var(--border-strong);
background: var(--bg-card);
z-index: 2;
overflow: hidden;
}
.g-left-hd {
height: 48px; display: flex; align-items: center;
padding: 0 14px; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
background: var(--bg-soft); border-bottom: 1px solid var(--border);
position: sticky; top: 0;
}
.g-label {
display: flex; align-items: center; gap: 8px;
padding: 0 14px; border-bottom: 1px solid var(--border);
font-size: 12.5px; color: var(--navy-900); cursor: pointer;
overflow: hidden;
}
.g-label:hover { background: var(--bg-soft); }
.g-label-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.g-label-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.g-right { flex: 1; overflow-x: auto; overflow-y: hidden; }
.g-timeline { position: relative; }
.g-months { display: flex; height: 24px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.g-month {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: var(--navy-800);
border-right: 1px solid var(--border-strong); text-transform: capitalize;
}
.g-days { display: flex; height: 24px; border-bottom: 1px solid var(--border); }
.g-day {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
font-size: 9px; color: var(--text-muted);
border-right: 1px solid var(--border);
}
.g-day.wk { background: rgba(11,37,69,0.04); }
.g-day.today { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.g-body { position: relative; }
.g-row { position: relative; border-bottom: 1px solid var(--border); }
.g-bar {
position: absolute; top: 7px; height: 24px;
border-radius: 6px; cursor: pointer;
display: flex; align-items: center;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform .12s, box-shadow .12s;
}
.g-bar { cursor: grab; }
.g-bar:hover { transform: translateY(-1px); box-shadow: var(--shadow); z-index: 3; }
.g-bar.dragging { cursor: grabbing; transform: none; box-shadow: var(--shadow-lg, var(--shadow)); z-index: 5; opacity: .92; transition: none; }
.g-handle {
position: absolute; top: 0; bottom: 0; width: 9px; z-index: 4;
cursor: ew-resize; background: transparent;
}
.g-handle::after {
content: ''; position: absolute; top: 50%; transform: translateY(-50%);
left: 3px; width: 3px; height: 12px; border-radius: 2px;
background: rgba(255,255,255,0.75); opacity: 0; transition: opacity .12s;
}
.g-handle-l { left: 0; }
.g-handle-r { right: 0; }
.g-handle-r::after { left: auto; right: 3px; }
.g-bar:hover .g-handle::after { opacity: 1; }
/* Barra de herramientas del Gantt (zoom) */
.g-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
flex-wrap: wrap;
}
.g-zoom { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.g-zoom #gZoomPct { min-width: 38px; text-align: center; }
.g-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.32); }
.g-bar-label {
position: relative; z-index: 1;
padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.g-bar.g-prio-urgente { outline: 2px solid var(--danger); outline-offset: -2px; }
.g-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 2; }
[data-theme="dark"] .g-day.wk { background: rgba(255,255,255,0.03); }
@media (max-width: 768px) {
.g-left { flex: 0 0 130px; }
.g-label-txt { font-size: 11px; }
}
/* =========================================================
Editor enriquecido (WYSIWYG)
========================================================= */
.rich-editor { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.re-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
padding: 6px 8px; background: var(--bg-soft);
border-bottom: 1px solid var(--border);
}
.re-btn {
min-width: 28px; height: 28px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: 6px;
background: transparent; color: var(--navy-800);
font-size: 13px; cursor: pointer; position: relative;
}
.re-btn:hover { background: var(--bg-card); border-color: var(--border); }
.re-color input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.re-select {
height: 28px; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg-card); font-size: 12px; padding: 0 6px; color: var(--navy-800); cursor: pointer;
}
.re-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.re-area {
min-height: 180px; max-height: 420px; overflow-y: auto;
padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--text-main);
outline: none;
}
.re-area:focus { box-shadow: inset 0 0 0 2px var(--cyan-200); }
.re-area p { margin: 0 0 10px; }
.re-area table { border-collapse: collapse; margin: 10px 0; width: auto; }
.re-area table td, .re-area table th { border: 1px solid var(--border-strong); padding: 6px 10px; min-width: 60px; }
.re-area table th { background: var(--bg-soft); font-weight: 700; }
.re-area img { max-width: 100%; height: auto; border-radius: 4px; margin: 6px 0; }
[data-theme="dark"] .re-area { background: var(--bg-card); }
/* Modo solo lectura (secretario / dirección): oculta acciones de escritura */
body.modo-lectura .section-hd .actions .btn-primary,
body.modo-lectura .section-hd .actions .btn-danger,
body.modo-lectura .bottom-nav .fab { display: none !important; }
body.modo-lectura::after {
content: "Acceso de solo lectura";
position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
background: var(--navy-900); color: #fff; font-size: 12px; font-weight: 600;
padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(15,40,80,.25);
z-index: 50; pointer-events: none; opacity: .9;
}
/* Valoración de empresas FEOE (estrellas 1-10) */
.fe-star-wrap { display: inline-flex; align-items: center; gap: 1px; }
.fe-star { cursor: pointer; color: var(--border-strong); line-height: 0; display: inline-flex; transition: transform .08s; }
.fe-star svg { fill: none; stroke: currentColor; }
.fe-star.on { color: #f59e0b; }
.fe-star.on svg { fill: #f59e0b; stroke: #f59e0b; }
.fe-star:hover { transform: scale(1.18); }
.fe-star-val { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--navy-900); min-width: 34px; }
.fe-val-row { padding: 4px 0; border-bottom: 1px dashed var(--border); }
/* Gestor de correo (composer) */
.email-composer .em-field { margin-bottom: 12px; }
.email-composer .em-field > label { display:block; font-size:12px; font-weight:600; color: var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.email-composer .em-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.email-composer .re-area { min-height: 220px; }
.em-attach-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.em-attach { display:flex; align-items:center; gap:8px; padding:6px 10px; background: var(--bg-soft); border:1px solid var(--border); border-radius:8px; font-size:13px; }
.em-attach-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--navy-900); font-weight:500; }
.em-attach-del { margin-left:auto; background:none; border:none; cursor:pointer; color: var(--text-muted); display:inline-flex; padding:2px; border-radius:4px; }
.em-attach-del:hover { color: var(--danger); background: var(--bg-card); }
@media (max-width: 560px) { .email-composer .em-grid { grid-template-columns:1fr; } }
/* Vista previa de acta (modal documento) */
.acta-preview-doc {
background: #fff; color: #111; max-width: 760px; margin: 0 auto;
padding: 40px 48px; font-family: 'Times New Roman', Georgia, serif; line-height: 1.6;
}
.acta-preview-doc .ap-hd { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #0b2545; padding-bottom:10px; margin-bottom:18px; font-family: var(--font-sans); }
.acta-preview-doc h2 { text-align:center; font-size:16px; font-family: var(--font-sans); color:#0b2545; }
.acta-preview-doc img { max-width: 100%; }
.acta-preview-doc table { border-collapse: collapse; margin: 10px 0; }
.acta-preview-doc td, .acta-preview-doc th { border: 1px solid #999; padding: 6px 10px; }
/* =========================================================
Documento F1 · Propuesta de compra (réplica oficial A4)
========================================================= */
.f1-doc {
background: #fff; color: #000;
width: 210mm; max-width: 100%;
margin: 0 auto; padding: 12mm 14mm;
font-family: 'Calibri','Liberation Sans','Segoe UI',sans-serif;
font-size: 11pt; line-height: 1.3;
box-shadow: var(--shadow);
}
.f1-doc * { box-sizing: border-box; }
.f1-head {
display: grid; grid-template-columns: 170px 1fr 110px;
border: 1.5px solid #000; align-items: stretch;
}
.f1-head .f1-logos { border-right: 1px solid #000; padding: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.f1-head .f1-logos img { height: 38px; width: auto; max-width: 50px; object-fit: contain; }
.f1-head .f1-proc { border-right: 1px solid #000; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; }
.f1-head .f1-proc .l1 { font-size: 9.5pt; font-weight: 700; }
.f1-head .f1-proc .l2 { font-size: 10.5pt; font-weight: 700; text-align: center; margin: 4px 0; }
.f1-head .f1-meta { padding: 6px 8px; font-size: 8.5pt; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.f1-table { width: 100%; border-collapse: collapse; margin-top: -1.5px; }
.f1-table td, .f1-table th { border: 1.5px solid #000; padding: 4px 7px; vertical-align: top; font-size: 10.5pt; }
.f1-label { font-weight: 700; background: #f0f0f0; }
.f1-section { font-weight: 700; background: #d9d9d9; text-transform: uppercase; font-size: 10pt; }
.f1-check { font-family: 'Segoe UI Symbol', sans-serif; margin-right: 4px; }
.f1-doc .f1-list { margin: 2px 0 2px 4px; }
.f1-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.f1-sign > div { border: 1.5px solid #000; padding: 8px 10px; min-height: 70px; font-size: 10pt; }
.f1-foot { margin-top: 6px; font-size: 8pt; text-align: center; color: #333; border-top: 1px solid #999; padding-top: 4px; }
.f1-x { font-weight: 700; }
@media print {
body * { visibility: hidden; }
.f1-doc, .f1-doc * { visibility: visible; }
.f1-doc { position: absolute; left:0; top:0; box-shadow: none; margin: 0; width: 100%; }
.no-print { display: none !important; }
}
@media (max-width: 768px) {
.f1-doc { padding: 6mm; font-size: 10pt; }
.f1-head { grid-template-columns: 110px 1fr 76px; }
}
/* Theme toggle */
.theme-toggle {
width: 38px; height: 38px;
border-radius: var(--radius);
display: grid; place-items: center;
background: var(--bg-soft);
color: var(--navy-800);
transition: all .15s;
}
.theme-toggle:hover { background: var(--cyan-100); color: var(--cyan-700); }
/* Utilidades */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.text-xs { font-size: 11px; } .text-sm { font-size: 12.5px; } .text-md { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 19px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-navy { color: var(--navy-900); }
.text-cyan { color: var(--cyan-700); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.font-bold { font-weight: 700; } .font-semibold { font-weight: 600; }
.w-full { width: 100%; }
.text-right { text-align: right; } .text-center { text-align: center; }
.hidden { display: none !important; }