/*
* Miss Paula — Portal de Familias
* Estilos base — mobile-first
* Ubicación: PORTAL_PATH/assets/portal.css
* Fuentes: Nunito + Nunito Sans (Google Fonts — incluir en el )
*
*
*
*
*/
/* ── VARIABLES ──────────────────────────────────────────────────── */
:root {
/* Colores de la marca (extraídos del logo Miss Paula) */
--mp-rojo: #e53935;
--mp-amarillo: #f9a825;
--mp-verde: #2e7d32;
--mp-azul: #1565c0;
--mp-magenta: #ad1457;
/* UI */
--mp-fondo: #1a1a2e; /* Azul noche — fondo exterior */
--mp-card: #ffffff;
--mp-text: #1a1a2e;
--mp-text-sub: #757575;
--mp-text-hint: #9e9e9e;
--mp-border: #e0e0e0;
--mp-input-bg: #fafafa;
--mp-error: #e53935;
--mp-ok: #2e7d32;
/* Tipografía */
--font-display: 'Nunito', sans-serif;
--font-body: 'Nunito Sans', sans-serif;
/* Layout */
--mp-radius-card: 24px;
--mp-radius: 12px;
--mp-radius-sm: 8px;
}
/* ── RESET MÍNIMO ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: var(--font-body);
color: var(--mp-text);
background: var(--mp-fondo);
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
/* Soporte para notch/punch-hole (iOS/Android) */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--mp-azul); text-decoration: none; }
a:hover { opacity: 0.8; }
img { max-width: 100%; height: auto; display: block; }
/* ── FONDO CON BURBUJAS DE COLOR ────────────────────────────────── */
/*
* Añadir en el de cada página:
*
*
*
*
*/
.mp-bg-bubbles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.mp-bg-bubbles span {
position: absolute;
border-radius: 50%;
opacity: 0.12;
}
.mp-bg-bubbles span:nth-child(1) { width:90px; height:90px; background:var(--mp-rojo); top:5%; left:-20px; }
.mp-bg-bubbles span:nth-child(2) { width:60px; height:60px; background:var(--mp-amarillo); top:10%; right:-10px; }
.mp-bg-bubbles span:nth-child(3) { width:50px; height:50px; background:var(--mp-verde); top:55%; left:-10px; }
.mp-bg-bubbles span:nth-child(4) { width:75px; height:75px; background:var(--mp-azul); top:60%; right:-15px; }
.mp-bg-bubbles span:nth-child(5) { width:100px;height:100px;background:var(--mp-magenta); bottom:0; left:50%; transform:translateX(-50%); }
.mp-bg-bubbles span:nth-child(6) { width:40px; height:40px; background:var(--mp-amarillo); bottom:8%;right:10%; }
/* ── CARD BASE ──────────────────────────────────────────────────── */
.mp-card {
background: var(--mp-card);
border-radius: var(--mp-radius-card);
padding: 36px 28px 32px;
width: 100%;
position: relative;
z-index: 1;
}
/* ── LOGO / CABECERA ────────────────────────────────────────────── */
.mp-logo-wrap { text-align: center; margin-bottom: 4px; }
/* Si se usa el PNG real */
.mp-logo-img { max-height: 60px; width: auto; margin: 0 auto; }
/* Nombre de la academia en texto multicolor (fallback sin PNG) */
.mp-logo-text {
font-family: var(--font-display);
font-weight: 900;
font-size: 2rem;
letter-spacing: -1px;
line-height: 1;
}
.mp-logo-text .c1 { color: var(--mp-rojo); }
.mp-logo-text .c2 { color: var(--mp-azul); }
.mp-logo-text .c3 { color: var(--mp-amarillo); }
.mp-logo-text .c4 { color: var(--mp-verde); }
.mp-logo-text .c5 { color: var(--mp-magenta); }
.mp-logo-est {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--mp-text-hint);
text-align: center;
margin-bottom: 4px;
}
/* ── SEPARADOR MULTICOLOR ───────────────────────────────────────── */
.mp-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 20px;
}
.mp-divider-line {
flex: 1;
height: 2px;
border-radius: 2px;
background: linear-gradient(
90deg,
var(--mp-rojo) 0%,
var(--mp-amarillo) 25%,
var(--mp-verde) 50%,
var(--mp-azul) 75%,
var(--mp-magenta) 100%
);
opacity: 0.35;
}
.mp-seccion-titulo {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--mp-text);
white-space: nowrap;
}
/* ── TIPOGRAFÍA GENERAL ─────────────────────────────────────────── */
.mp-subtitulo {
text-align: center;
font-size: 0.9rem;
color: var(--mp-text-sub);
margin-bottom: 22px;
}
.mp-label {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #424242;
margin-bottom: 8px;
}
/* ── INPUTS ──────────────────────────────────────────────────────── */
.mp-input {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
font-family: var(--font-body);
font-size: 1rem;
color: var(--mp-text);
background: var(--mp-input-bg);
outline: none;
transition: border-color 0.2s, background 0.2s;
appearance: none;
-webkit-appearance: none;
}
.mp-input:focus {
border-color: var(--mp-magenta);
background: #fff;
}
.mp-input.error {
border-color: var(--mp-error);
background: #fff5f5;
}
.mp-campo { margin-bottom: 16px; }
/* ── PASSWORD TOGGLE ─────────────────────────────────────────────── */
.mp-password-wrapper {
position: relative;
display: flex;
align-items: center;
}
.mp-password-wrapper .mp-input {
padding-right: 48px;
}
.mp-password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 8px;
cursor: pointer;
color: var(--mp-text-light);
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.mp-password-toggle:hover {
color: var(--mp-magenta);
}
.mp-password-toggle:focus {
outline: 2px solid var(--mp-magenta);
outline-offset: 2px;
border-radius: 4px;
}
.mp-icon-eye {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── BOTONES ─────────────────────────────────────────────────────── */
.mp-btn-principal {
display: block;
width: 100%;
padding: 15px 20px;
border: none;
border-radius: var(--mp-radius);
font-family: var(--font-display);
font-weight: 800;
font-size: 1rem;
color: #fff;
background: linear-gradient(135deg, var(--mp-magenta) 0%, var(--mp-rojo) 60%, var(--mp-amarillo) 100%);
cursor: pointer;
letter-spacing: 0.2px;
transition: opacity 0.2s, transform 0.15s;
text-align: center;
text-decoration: none;
margin-top: 4px;
}
.mp-btn-principal:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }
.mp-btn-principal:active { transform: translateY(0); opacity: 1; }
.mp-btn-principal:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.mp-btn-secundario {
display: inline-block;
padding: 10px 20px;
background: transparent;
color: var(--mp-azul);
border: 2px solid var(--mp-azul);
border-radius: var(--mp-radius);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.92rem;
cursor: pointer;
transition: background 0.2s, color 0.2s;
text-align: center;
text-decoration: none;
margin-top: 12px;
}
.mp-btn-secundario:hover {
background: var(--mp-azul);
color: #fff;
}
/* ── LINK DE AYUDA ───────────────────────────────────────────────── */
.mp-link-ayuda {
text-align: center;
margin-top: 22px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
}
.mp-link-ayuda a {
color: var(--mp-azul);
border-bottom: 2px dashed var(--mp-azul);
padding-bottom: 1px;
}
/* ── BARRA DECORATIVA MULTICOLOR (pie de card) ───────────────────── */
.mp-colortags {
display: flex;
gap: 6px;
margin-top: 24px;
}
.mp-colortag {
height: 4px;
border-radius: 4px;
flex: 1;
}
/* ── MENSAJES DE FEEDBACK ────────────────────────────────────────── */
.mp-error-msg {
background: #fff5f5;
border: 1.5px solid #f5c2c2;
color: var(--mp-error);
border-radius: var(--mp-radius-sm);
padding: 12px 14px;
font-size: 0.9rem;
margin-top: 12px;
display: none;
}
.mp-confirmacion {
text-align: center;
padding: 12px 0;
display: none;
}
.mp-confirmacion-icono {
font-size: 2.8rem;
margin-bottom: 14px;
}
.mp-confirmacion p { margin-bottom: 8px; font-size: 0.95rem; }
.mp-confirmacion p strong { color: var(--mp-magenta); }
.mp-confirmacion .mp-nota { font-size: 0.82rem; color: var(--mp-text-hint); }
.mp-confirmacion .mp-nota-contacto {
font-size: 0.82rem;
color: var(--mp-text-sub);
margin-top: 14px;
padding: 12px 14px;
background: #f5f5f5;
border-radius: var(--mp-radius-sm);
line-height: 1.5;
}
.mp-confirmacion .mp-nota-contacto a { color: var(--mp-azul); font-weight: 600; }
/* ── LAYOUT PÁGINAS ──────────────────────────────────────────────── */
/* Login */
.pagina-login {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.pagina-login .mp-card { max-width: 400px; }
.mp-link-recuperar {
text-align: center;
margin: 16px 0;
}
.mp-link-recuperar a {
color: var(--mp-azul);
font-size: 14px;
text-decoration: none;
transition: color 0.2s;
}
.mp-link-recuperar a:hover {
color: var(--mp-magenta);
text-decoration: underline;
}
/* Verificando */
.pagina-verificando {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.pagina-verificando .mp-card {
max-width: 360px;
text-align: center;
}
/* Selector de alumno */
.pagina-selector {
min-height: 100vh;
}
.pagina-selector .mp-card {
max-width: 480px;
margin: 0 auto;
}
/* Pantalla principal alumno */
.pagina-alumno {
min-height: 100vh;
}
.pagina-alumno .mp-card {
max-width: 480px;
margin: 0 auto;
}
/* ── CABECERA DE PANTALLA INTERNA ────────────────────────────────── */
.mp-header-interno {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.mp-nombre-alumno {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.15rem;
color: var(--mp-text);
}
.mp-btn-cambiar {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.78rem;
color: var(--mp-azul);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
padding: 0;
}
/* ── TARJETAS DE ALUMNO (selector) ───────────────────────────────── */
.mp-tarjetas { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.mp-tarjeta-alumno {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: #fff;
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
cursor: pointer;
text-decoration: none;
color: var(--mp-text);
transition: border-color 0.2s, box-shadow 0.2s;
}
.mp-tarjeta-alumno:hover {
border-color: var(--mp-magenta);
box-shadow: 0 2px 12px rgba(173,20,87,0.1);
}
.mp-tarjeta-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 1.3rem;
color: #fff;
flex-shrink: 0;
}
/* Colores rotativos para los avatares */
.mp-tarjeta-avatar.color-0 { background: var(--mp-rojo); }
.mp-tarjeta-avatar.color-1 { background: var(--mp-azul); }
.mp-tarjeta-avatar.color-2 { background: var(--mp-verde); }
.mp-tarjeta-avatar.color-3 { background: var(--mp-magenta); }
.mp-tarjeta-avatar.color-4 { background: var(--mp-amarillo); color: #1a1a2e; }
.mp-tarjeta-nombre { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.mp-tarjeta-relacion { font-size: 0.82rem; color: var(--mp-text-sub); }
/* ── MENÚ DE SECCIONES (pantalla alumno) ─────────────────────────── */
.mp-menu-secciones {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 8px;
}
.mp-seccion-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 18px 16px;
background: #fff;
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
text-decoration: none;
color: var(--mp-text);
transition: border-color 0.2s, transform 0.15s;
cursor: pointer;
}
.mp-seccion-card:hover {
transform: translateY(-2px);
}
.mp-seccion-card.rojo { border-top: 4px solid var(--mp-rojo); }
.mp-seccion-card.azul { border-top: 4px solid var(--mp-azul); }
.mp-seccion-card.verde { border-top: 4px solid var(--mp-verde); }
.mp-seccion-card.magenta { border-top: 4px solid var(--mp-magenta); }
.mp-seccion-card.amarillo{ border-top: 4px solid var(--mp-amarillo); }
.mp-seccion-icono {
font-size: 1.6rem;
line-height: 1;
}
.mp-seccion-nombre {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.95rem;
}
.mp-seccion-desc {
font-size: 0.78rem;
color: var(--mp-text-sub);
line-height: 1.3;
}
/* ── SPINNER ─────────────────────────────────────────────────────── */
.mp-spinner {
width: 44px;
height: 44px;
border: 4px solid var(--mp-border);
border-top-color: var(--mp-magenta);
border-radius: 50%;
animation: mp-girar 0.8s linear infinite;
margin: 0 auto 16px;
}
@keyframes mp-girar { to { transform: rotate(360deg); } }
/* ── BADGE DE ESTADO (recibos) ───────────────────────────────────── */
.mp-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mp-badge.pendiente { background: #fff8e1; color: #b45309; }
.mp-badge.pagado { background: #f0fdf4; color: #15803d; }
.mp-badge.devuelto { background: #fff0f0; color: #b91c1c; }
.mp-badge.remesado { background: #eff6ff; color: #1d4ed8; }
/* ── MODO OFFLINE (PWA) ──────────────────────────────────────────── */
body.offline-mode::before {
content: "📡 Sin conexión a internet";
display: block;
position: sticky;
top: 0;
z-index: 10000;
background: var(--mp-error);
color: #fff;
text-align: center;
padding: 10px 16px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* ── RESPONSIVE DESKTOP ──────────────────────────────────────────── */
@media (min-width: 600px) {
.mp-tarjetas {
flex-direction: row;
flex-wrap: wrap;
}
.mp-tarjeta-alumno {
flex-direction: column;
text-align: center;
justify-content: center;
width: calc(50% - 7px);
}
.mp-menu-secciones {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── LOGIN PAGES ────────────────────────────────────────────────── */
.portal-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--mp-fondo) 0%, #16213e 100%);
z-index: -1;
}
.portal-container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.portal-header {
text-align: center;
margin-bottom: 32px;
}
.portal-header h1 {
font-family: var(--font-display);
color: white;
font-size: 1.8rem;
font-weight: 800;
margin-top: 16px;
}
.portal-card {
background: white;
border-radius: var(--mp-radius-card);
padding: 40px;
max-width: 480px;
width: 100%;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
color: var(--mp-text);
margin-bottom: 8px;
font-size: 0.9rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
font-size: 1rem;
font-family: var(--font-body);
background: var(--mp-input-bg);
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--mp-magenta);
background: white;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.9rem;
color: var(--mp-text-sub);
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.form-actions {
margin-top: 24px;
}
.btn-primary,
.btn-secondary {
display: inline-block;
padding: 14px 28px;
border: none;
border-radius: var(--mp-radius);
font-size: 1rem;
font-weight: 600;
font-family: var(--font-display);
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
text-align: center;
width: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--mp-magenta) 0%, var(--mp-rojo) 60%, var(--mp-amarillo) 100%);
color: white;
box-shadow: 0 4px 12px rgba(173, 20, 87, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(173, 20, 87, 0.4);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-secondary {
background: white;
color: var(--mp-azul);
border: 2px solid var(--mp-azul);
}
.btn-secondary:hover {
background: var(--mp-azul);
color: white;
}
.mensaje {
padding: 12px 16px;
border-radius: var(--mp-radius-sm);
font-size: 0.9rem;
line-height: 1.5;
}
.mensaje.success {
background: #e8f5e9;
color: var(--mp-verde);
border-left: 4px solid var(--mp-verde);
}
.mensaje.error {
background: #ffebee;
color: var(--mp-rojo);
border-left: 4px solid var(--mp-rojo);
}
.mensaje.warning {
background: #fff8e1;
color: #f57c00;
border-left: 4px solid #f57c00;
}
/* ────────────────────────────────────────────────────────────────────
MENSAJES DE LOGIN
──────────────────────────────────────────────────────────────────── */
.mp-mensaje-aviso {
background: #fff8e1;
border: 1.5px solid #f9a825;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
font-size: 0.88rem;
color: #92400e;
}
.mp-mensaje-error {
background: #ffebee;
border: 1.5px solid #e53935;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
font-size: 0.88rem;
color: #c62828;
}
.mp-divider-texto {
font-size: 0.85rem;
color: var(--mp-text-hint);
}
.mp-btn-secundario-block {
display: block;
text-align: center;
}
.mp-texto-ayuda {
text-align: center;
margin-bottom: 16px;
font-size: 0.9rem;
color: var(--mp-text-sub);
line-height: 1.5;
}
.icon-inline {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
}
/* ────────────────────────────────────────────────────────────────────
SOLICITAR ACCESO
──────────────────────────────────────────────────────────────────── */
.mp-form-group {
margin-bottom: 20px;
}
.mp-form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--mp-text);
font-size: 0.9rem;
}
.mp-form-help {
display: block;
margin-top: 6px;
font-size: 0.85rem;
color: var(--mp-text-hint);
}
.mp-radio-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin-top: 8px;
}
.mp-radio-label {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: white;
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
}
.mp-radio-label:hover {
border-color: var(--mp-magenta);
background: rgba(173, 20, 87, 0.02);
}
.mp-radio-label input[type="radio"] {
width: 16px;
height: 16px;
min-width: 16px;
accent-color: var(--mp-magenta);
cursor: pointer;
}
.mp-checkbox-label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: 0.9rem;
color: var(--mp-text-sub);
}
.mp-checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--mp-magenta);
}
.mp-info-box {
background: #e3f2fd;
border-left: 4px solid var(--mp-azul);
padding: 16px 20px;
border-radius: var(--mp-radius);
margin-bottom: 24px;
}
.mp-info-box h3 {
margin: 0 0 8px 0;
color: var(--mp-azul);
font-size: 1.1rem;
font-weight: 700;
}
.mp-info-box p {
margin: 0;
color: var(--mp-text-sub);
line-height: 1.6;
font-size: 0.9rem;
}
.mp-form-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.mp-selector-alumnos {
display: none;
margin-top: 20px;
}
.mp-selector-alumnos.visible {
display: block;
}
.mp-selector-roles {
margin-top: 20px;
padding: 20px;
background: var(--mp-bg-light);
border-radius: var(--mp-radius-card);
border: 1px solid var(--mp-border);
}
.mp-selector-roles #opcionesRoles {
margin-top: 12px;
}
.mp-selector-roles .mp-radio-label {
margin-bottom: 12px;
}
.mp-alumno-card {
background: white;
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius-card);
padding: 16px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.mp-alumno-card:hover {
border-color: var(--mp-magenta);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(173, 20, 87, 0.15);
}
.mp-alumno-card.selected {
border-color: var(--mp-magenta);
background: linear-gradient(135deg, rgba(173, 20, 87, 0.05) 0%, rgba(211, 47, 47, 0.05) 100%);
}
.mp-alumno-card h4 {
margin: 0 0 4px 0;
color: var(--mp-text);
font-weight: 600;
}
.mp-alumno-card p {
margin: 0;
color: var(--mp-text-sub);
font-size: 0.875rem;
}
.mp-mensaje-hidden {
display: none;
}
.mp-mensaje {
padding: 14px 16px;
border-radius: var(--mp-radius-sm);
margin-top: 24px;
line-height: 1.5;
}
.mp-mensaje-exito {
background: #e8f5e9;
border-left: 4px solid var(--mp-verde);
color: #2e7d32;
}
.mp-mensaje-error {
background: #ffebee;
border-left: 4px solid var(--mp-rojo);
color: #c62828;
}
/* Legacy - mantener compatibilidad */
.mp-mensaje.success {
background: #e8f5e9;
border-left: 4px solid var(--mp-verde);
color: #2e7d32;
padding: 14px 16px;
border-radius: var(--mp-radius-sm);
}
.mp-mensaje.error {
background: #ffebee;
border-left: 4px solid var(--mp-rojo);
color: #c62828;
padding: 14px 16px;
border-radius: var(--mp-radius-sm);
}
/* Utilidades */
.mp-texto-centrado {
text-align: center;
}
/* ── PANTALLA DE BIENVENIDA (PRÓXIMAMENTE) ────────────────────────── */
/* Mobile-first: estilos base para móvil */
.pagina-bienvenida {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.pagina-bienvenida .mp-card {
max-width: 560px;
padding: 28px 20px 24px;
}
.mensaje-bienvenida {
text-align: center;
margin: 20px 0 24px;
}
.titulo-principal {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 800;
color: var(--mp-magenta);
margin: 0 0 20px 0;
line-height: 1.25;
}
.fecha-apertura {
background: linear-gradient(135deg, rgba(173, 20, 87, 0.08) 0%, rgba(21, 101, 192, 0.08) 100%);
border-radius: var(--mp-radius);
padding: 20px 16px;
margin: 0;
}
.icono-calendario {
display: inline-block;
width: 28px;
height: 28px;
color: var(--mp-magenta);
margin-bottom: 8px;
}
.texto-fecha {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--mp-text);
margin: 0;
}
.fecha-destacada {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 800;
color: var(--mp-magenta);
display: block;
margin: 6px 0;
}
.info-adicional {
background: var(--mp-input-bg);
border-radius: var(--mp-radius);
padding: 16px;
margin: 20px 0;
}
.info-adicional h3 {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--mp-text);
margin: 0 0 12px 0;
}
.lista-acciones {
list-style: none;
padding: 0;
margin: 0;
}
.lista-acciones li {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--mp-text);
}
.lista-acciones li:last-child {
margin-bottom: 0;
}
.lista-acciones svg {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
color: var(--mp-azul);
}
.lista-acciones a {
color: var(--mp-azul);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.lista-acciones a:hover {
text-decoration: underline;
}
.texto-pie {
text-align: center;
font-size: 1rem;
color: var(--mp-text);
margin: 20px 0 24px 0;
}
/* Desktop: ajustes para pantallas grandes */
@media (min-width: 600px) {
.pagina-bienvenida {
padding: 28px 16px;
}
.pagina-bienvenida .mp-card {
padding: 36px 28px 32px;
}
.titulo-principal {
font-size: 1.75rem;
margin-bottom: 24px;
}
.fecha-apertura {
padding: 24px 20px;
}
.icono-calendario {
width: 32px;
height: 32px;
margin-bottom: 12px;
}
.texto-fecha {
font-size: 1rem;
}
.fecha-destacada {
font-size: 1.5rem;
margin: 8px 0;
}
.info-adicional {
padding: 20px;
margin: 24px 0;
}
.info-adicional h3 {
font-size: 1.125rem;
margin-bottom: 16px;
}
.lista-acciones li {
gap: 12px;
margin-bottom: 12px;
font-size: 0.9375rem;
}
.lista-acciones svg {
width: 20px;
height: 20px;
}
.texto-pie {
font-size: 1.125rem;
margin: 24px 0 32px 0;
}
}
/* Colortags con clases específicas (sin inline styles) */
.mp-colortag-rojo {
background: var(--mp-rojo);
}
.mp-colortag-amarillo {
background: var(--mp-amarillo);
}
.mp-colortag-verde {
background: var(--mp-verde);
}
.mp-colortag-azul {
background: var(--mp-azul);
}
.mp-colortag-magenta {
background: var(--mp-magenta);
}
/* Recibos — compartido entre alumno/index.php y recibos.php (familia) */
.recibo-item {
display: flex; align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--mp-card);
border: 1.5px solid var(--mp-border);
border-radius: var(--mp-radius);
margin-bottom: 10px;
gap: 12px;
}
.recibo-info { flex: 1; min-width: 0; }
.recibo-concepto {
font-family: var(--font-display);
font-weight: 700; font-size: .9rem;
color: var(--mp-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recibo-fecha {
font-size: .78rem; color: var(--mp-text-hint); margin-top: 2px;
}
.recibo-importe {
font-family: var(--font-display);
font-weight: 900; font-size: 1rem;
color: var(--mp-text); white-space: nowrap;
}
.recibo-estado {
display: inline-block;
padding: 3px 10px; border-radius: 20px;
font-family: var(--font-display); font-weight: 700;
font-size: .72rem; text-transform: uppercase;
letter-spacing: .5px; white-space: nowrap;
}
.estado-pendiente { background:#fff8e1; color:#92400e; }
.estado-remesado { background:#eff6ff; color:#1d4ed8; }
.estado-pagado { background:#f0fdf4; color:#15803d; }
.estado-devuelto { background:#fff0f0; color:#b91c1c; }
.estado-cancelado { background:#f5f5f5; color:#6b7280; }
.recibos-resumen {
display: grid; grid-template-columns: repeat(2,1fr);
gap: 10px; margin-bottom: 18px;
}
.resumen-card {
background: #f9f9f9; border-radius: var(--mp-radius-sm);
padding: 12px 14px; text-align: center;
}
.resumen-label {
font-size: .75rem; color: var(--mp-text-hint);
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 4px;
}
.resumen-valor {
font-family: var(--font-display);
font-weight: 900; font-size: 1.15rem;
color: var(--mp-text);
}
.resumen-valor.pendiente { color: var(--mp-rojo); }
.resumen-valor.ok { color: var(--mp-verde); }
/* Nota informativa sobre generación de recibos */
.recibos-info-nota {
background: #fffbea;
border-left: 3px solid var(--mp-amarillo);
padding: 12px 14px;
margin-bottom: 18px;
border-radius: var(--mp-radius-sm);
font-size: .85rem;
line-height: 1.5;
color: #7c6c2f;
}
/* Recibos agrupados por hijo (recibos.php, vista de familia) */
.recibos-grupo-titulo {
font-family: var(--font-display);
font-weight: 800; font-size: .92rem;
color: var(--mp-text);
margin: 18px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--mp-border);
}
.recibos-grupo-titulo:first-child { margin-top: 0; }
/* selector.php — utilidades para eliminar estilos inline (Premisa 4) */
.mp-oculto { display: none; }
.mp-zona-estado {
text-align: center;
padding: 24px 0;
}
.mp-zona-estado .mp-spinner {
margin: 0 auto 12px;
}
.mp-texto-estado {
color: var(--mp-text-sub);
font-size: .9rem;
}
.mp-texto-error {
margin-bottom: 16px;
color: var(--mp-text-sub);
}
.mp-btn-secundario-sm {
font-size: .85rem;
}
.mp-bloque-tutor {
text-align: center;
margin-top: 20px;
}
.mp-bloque-salir {
text-align: center;
margin-top: 16px;
}
.mp-btn-salir-sesion {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-display);
font-size: .8rem;
color: var(--mp-text-hint);
text-decoration: underline;
}
/* ── VISTA DE NOTICIAS (NEWSLETTERS) ──────────────────────────────── */
/* Botón volver en header */
.mp-btn-volver {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 700;
font-size: .88rem;
color: var(--mp-azul);
text-decoration: none;
padding: 8px 0;
transition: opacity .2s;
}
.mp-btn-volver:hover {
opacity: 0.7;
}
/* Grid de newsletters (mobile-first) */
.nl-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 16px;
}
/* Card de newsletter */
.nl-card {
background: var(--mp-card);
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
overflow: hidden;
text-decoration: none;
color: var(--mp-text);
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
display: flex;
flex-direction: column;
}
.nl-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-color: var(--mp-magenta);
}
/* Header del card con color personalizado del newsletter */
.nl-card-header {
padding: 14px 16px 12px;
font-family: var(--font-display);
/* Color de fondo y texto se aplican inline desde PHP según color_acento del newsletter */
}
.nl-card-numero {
font-size: 0.75rem;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
.nl-card-titulo {
font-weight: 800;
font-size: 1rem;
margin-top: 2px;
line-height: 1.3;
}
.nl-card-mes {
font-size: 0.82rem;
opacity: 0.85;
margin-top: 4px;
}
/* Body del card */
.nl-card-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.nl-card-sub {
font-size: 0.82rem;
color: var(--mp-text-sub);
line-height: 1.4;
margin-bottom: 12px;
flex: 1;
}
.nl-card-action {
margin-top: auto;
}
.nl-card-btn {
display: inline-block;
padding: 8px 14px;
background: var(--mp-rojo);
color: #fff;
border-radius: var(--mp-radius-sm);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.82rem;
}
/* Estado vacío */
.nl-empty {
text-align: center;
padding: 60px 20px;
color: var(--mp-text-sub);
}
.nl-empty-icono {
font-size: 3rem;
margin-bottom: 12px;
}
.nl-empty-texto {
font-size: 0.9rem;
}
/* ── VISTA INDIVIDUAL DE NEWSLETTER ─────────────────────────────── */
/* Header PWA fijo arriba */
.nl-pwa-header {
position: sticky;
top: 0;
background: var(--mp-fondo);
padding: 12px 16px;
z-index: 100;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nl-pwa-btn-volver {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.88rem;
color: #fff;
text-decoration: none;
padding: 8px 12px;
background: rgba(173, 20, 87, 0.2);
border-radius: var(--mp-radius-sm);
transition: background 0.2s;
}
.nl-pwa-btn-volver:hover {
background: rgba(173, 20, 87, 0.3);
opacity: 1;
}
/* Wrapper del contenido del newsletter */
.nl-content-wrapper {
max-width: 100%;
overflow-x: auto;
}
/* Footer PWA */
.nl-pwa-footer {
text-align: center;
padding: 24px 16px;
background: var(--mp-fondo);
}
/* ============================================
RECIBOS - Vistas de carga y zonas
============================================ */
.mp-card-recibos {
max-width: 480px;
margin: 0 auto;
}
.recibos-zona-cargando {
text-align: center;
padding: 24px 0;
}
.recibos-zona-cargando .mp-spinner {
margin: 0 auto 12px;
}
.recibos-zona-cargando p {
color: var(--mp-text-sub);
font-size: 0.9rem;
}
.recibos-zona-error {
display: none;
text-align: center;
padding: 24px 0;
}
.recibos-zona-error p {
color: var(--mp-text-sub);
}
/* Cuadro azul para responsable financiero */
.recibos-responsable {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-color: #2196f3;
}
.recibos-responsable-nombre {
font-weight: 600;
color: #1976d2;
}
/* Mensaje de lista vacía */
.recibos-lista-vacia {
text-align: center;
color: var(--mp-text-hint);
padding: 20px 0;
}
/* Columna de acciones de recibo */
.recibo-acciones {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
/* Responsive: Desktop */
@media (min-width: 600px) {
.nl-grid {
grid-template-columns: repeat(2, 1fr);
}
.nl-pwa-header {
padding: 16px 24px;
}
}
/* ============================================
GAMES HUB - Selector de juegos
============================================ */
.pagina-games {
min-height: 100vh;
}
.pagina-games .mp-card {
max-width: 480px;
margin: 0 auto;
}
.games-header {
text-align: center;
margin-bottom: 24px;
}
.games-icono {
width: 80px;
height: 80px;
margin: 0 auto 16px;
display: block;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(173, 20, 87, .2);
}
.games-titulo {
font-family: var(--font-display);
font-weight: 900;
font-size: 2rem;
color: var(--mp-text);
margin: 0 0 8px 0;
}
.games-subtitulo {
font-size: .95rem;
color: var(--mp-text-sub);
margin: 0;
}
.games-grid {
display: grid;
gap: 16px;
margin-bottom: 24px;
}
.games-card {
background: var(--mp-card);
border-radius: var(--mp-radius);
padding: 24px;
border: 2px solid var(--mp-border);
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
color: inherit;
display: block;
}
.games-card:hover {
border-color: var(--mp-magenta);
box-shadow: 0 4px 16px rgba(173, 20, 87, .15);
transform: translateY(-2px);
}
.games-card-soon {
opacity: 0.5;
cursor: not-allowed;
}
.games-card-soon:hover {
border-color: var(--mp-border);
box-shadow: none;
transform: none;
}
.games-card-icono {
font-size: 3rem;
margin-bottom: 12px;
line-height: 1;
}
.games-card h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
margin: 0 0 8px 0;
color: var(--mp-text);
}
.games-card p {
margin: 0;
color: var(--mp-text-sub);
font-size: .9rem;
line-height: 1.4;
}
.games-card-soon p {
font-style: italic;
}
.games-volver {
text-align: center;
margin-top: 20px;
}
.games-volver a {
color: var(--mp-azul);
font-weight: 700;
text-decoration: none;
font-size: .95rem;
}
.games-volver a:hover {
text-decoration: underline;
}
/* ── Responsive: Desktop ────────────────────────────────────────── */
@media (min-width: 600px) {
.games-grid {
grid-template-columns: repeat(2, 1fr);
}
.games-icono {
width: 96px;
height: 96px;
}
}
/* ── VISTA DE ASISTENCIAS ───────────────────────────────────────── */
.pagina-asistencias {}
.asistencias-alumno-info {
text-align: center;
margin-bottom: 20px;
}
.asistencias-alumno-nombre {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1rem;
color: var(--mp-text);
margin-bottom: 4px;
}
.asistencias-curso-info {
font-size: .85rem;
color: var(--mp-text-sub);
}
/* Header de alumno (reutilizado) */
.alumno-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 6px;
}
.alumno-avatar {
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 900; font-size: 1.1rem;
color: #fff; flex-shrink: 0;
background: var(--mp-magenta);
}
.alumno-nombre {
font-family: var(--font-display);
font-weight: 900; font-size: 1.1rem;
color: var(--mp-text);
}
.btn-volver {
font-family: var(--font-display); font-weight: 700;
font-size: .78rem; color: var(--mp-azul);
background: none; border: none; cursor: pointer;
text-decoration: underline; padding: 0;
margin-left: auto;
}
/* Configuración de avisos */
.avisos-config {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.aviso-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px;
background: #f8f8f8;
border-radius: var(--mp-radius-sm);
gap: 12px;
}
.aviso-info {
flex: 1;
}
.aviso-titulo {
font-family: var(--font-display);
font-weight: 700;
font-size: .88rem;
color: var(--mp-text);
}
.aviso-desc {
font-size: .78rem;
color: var(--mp-text-sub);
margin-top: 2px;
}
/* Toggle switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
flex-shrink: 0;
cursor: pointer;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
position: absolute;
inset: 0;
border-radius: 26px;
background: #ccc;
transition: background .2s;
}
.toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* Stats de asistencias */
.asistencias-stats {
margin: 20px 0;
}
.stat-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px;
background: linear-gradient(135deg, var(--mp-azul) 0%, var(--mp-magenta) 100%);
border-radius: var(--mp-radius);
color: #fff;
}
.stat-icono {
font-size: 2.5rem;
line-height: 1;
}
.stat-info {
flex: 1;
}
.stat-valor {
font-family: var(--font-display);
font-weight: 900;
font-size: 2rem;
line-height: 1;
color: #fff;
}
.stat-valor-verde { color: #fff !important; }
.stat-valor-amarillo { color: #fff !important; }
.stat-valor-rojo { color: #fff !important; }
.stat-valor-gris { color: rgba(255,255,255,0.7) !important; }
.stat-label {
font-family: var(--font-display);
font-weight: 700;
font-size: .85rem;
opacity: 0.9;
margin-top: 4px;
}
/* Últimas sesiones */
.ultimas-sesiones {
margin-top: 20px;
}
.subseccion-titulo {
font-family: var(--font-display);
font-weight: 800;
font-size: .95rem;
color: var(--mp-text);
margin-bottom: 12px;
}
.sesiones-lista {
display: flex;
flex-direction: column;
gap: 10px;
}
.sesion-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px;
background: var(--mp-card);
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius-sm);
}
.sesion-fecha {
font-family: var(--font-display);
font-weight: 700;
font-size: .88rem;
color: var(--mp-text);
text-transform: capitalize;
}
.sesion-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.badge {
font-family: var(--font-display);
font-weight: 700;
font-size: .72rem;
padding: 4px 10px;
border-radius: 12px;
white-space: nowrap;
}
.badge-presente {
background: #e8f5e9;
color: var(--mp-verde);
}
.badge-ausente {
background: #ffebee;
color: var(--mp-rojo);
}
.badge-tarea-ok {
background: #e8f5e9;
color: var(--mp-verde);
}
.badge-tarea-falta {
background: #fff3e0;
color: #ef6c00;
}
/* ── VISTA DE CONFIGURACIÓN DE AVISOS ─────────────────────────────── */
.pagina-configuracion-avisos {}
.mp-texto-info {
margin-top: 20px;
padding: 14px;
background: #e3f2fd;
border-left: 3px solid var(--mp-azul);
border-radius: var(--mp-radius-sm);
font-size: .85rem;
color: var(--mp-text);
}
.mp-texto-info p {
margin: 0;
line-height: 1.5;
}
.mp-texto-info strong {
font-family: var(--font-display);
font-weight: 700;
}
/* ── MENSAJES A ADMINISTRACIÓN ─────────────────────────────────── */
/* Información de contacto */
.mp-info-contacto {
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
border-left: 4px solid var(--mp-azul);
border-radius: var(--mp-radius-sm);
padding: 16px;
margin-bottom: 24px;
}
.mp-info-contacto p {
margin: 0 0 8px 0;
color: var(--mp-text);
font-size: 0.875rem;
line-height: 1.5;
}
.mp-info-contacto p:last-child {
margin-bottom: 0;
}
.mp-link {
color: var(--mp-azul);
text-decoration: none;
font-weight: 600;
}
.mp-link:hover {
text-decoration: underline;
}
/* Hilo de mensajes */
.mensajes-zona-cargando {
text-align: center;
padding: 40px 20px;
}
.mensajes-zona-cargando p {
margin-top: 12px;
color: var(--mp-text-sub);
}
.mensajes-hilo {
max-height: 400px;
overflow-y: auto;
padding: 12px;
margin-bottom: 20px;
background: var(--mp-input-bg);
border-radius: var(--mp-radius-sm);
border: 1px solid var(--mp-border);
}
.mensajes-vacio {
text-align: center;
padding: 40px 20px;
color: var(--mp-text-sub);
}
.mensajes-vacio p {
margin: 8px 0;
}
/* Mensaje individual */
.mensaje {
margin-bottom: 16px;
padding: 12px 14px;
border-radius: var(--mp-radius-sm);
max-width: 80%;
}
/* Estilos de mensajes movidos más abajo (línea ~2155) para evitar duplicación */
/* Formulario de envío */
.mensajes-form {
margin-top: 20px;
}
.mp-textarea {
width: 100%;
font-family: var(--font-body);
font-size: 0.9375rem;
padding: 12px;
border: 1.5px solid var(--mp-border);
border-radius: var(--mp-radius-sm);
background: var(--mp-input-bg);
color: var(--mp-text);
transition: all 0.2s;
resize: vertical;
min-height: 100px;
}
.mp-textarea:focus {
outline: none;
border-color: var(--mp-magenta);
background: #ffffff;
}
.mp-campo-ayuda {
font-size: 0.75rem;
color: var(--mp-text-hint);
margin-top: 4px;
}
/* ══════════════════════════════════════════════════════════════════════════
MENSAJES - Vista dedicada
══════════════════════════════════════════════════════════════════════════ */
.mensajes-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
border-bottom: 2px solid var(--mp-border);
padding-bottom: 0;
}
.mensajes-tab {
flex: 1;
padding: 12px 16px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
font-family: var(--font-display);
font-weight: 700;
font-size: .9rem;
color: var(--mp-text-sub);
cursor: pointer;
transition: all .2s;
}
.mensajes-tab.activa {
color: var(--mp-azul);
border-bottom-color: var(--mp-azul);
}
.mensajes-tab-content {
margin-top: 20px;
}
.mensajes-zona-cargando {
text-align: center;
padding: 40px 20px;
color: var(--mp-text-sub);
}
.mensajes-zona-cargando .mp-spinner {
margin: 0 auto 16px;
}
.mp-card-lista {
padding: 16px;
background: var(--mp-card);
border: 1.5px solid var(--mp-border);
border-radius: var(--mp-radius);
margin-bottom: 12px;
cursor: pointer;
transition: border-color .2s, transform .1s;
}
.mp-card-lista:hover {
border-color: var(--mp-azul);
transform: translateY(-2px);
}
.mp-destinatario-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--mp-card);
border: 2px solid var(--mp-border);
border-radius: var(--mp-radius);
cursor: pointer;
transition: border-color .2s;
}
.mp-destinatario-card:has(input:checked) {
border-color: var(--mp-magenta);
background: rgba(173, 20, 87, 0.05);
}
.mp-destinatario-card input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--mp-magenta);
flex-shrink: 0;
}
.mp-avatar-circulo {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mp-azul), var(--mp-magenta));
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
font-size: .85rem;
color: #fff;
flex-shrink: 0;
}
.mp-destinatario-card span {
font-family: var(--font-display);
font-weight: 700;
font-size: .9rem;
flex: 1;
}
.mp-destinatario-card small {
font-size: .72rem;
color: var(--mp-text-sub);
}
.mensajes-hilo {
max-height: 400px;
overflow-y: auto;
padding: 16px;
background: #f8f9fa;
border-radius: var(--mp-radius);
margin-bottom: 20px;
}
.mensaje-mio,
.mensaje-centro {
margin-bottom: 16px;
display: flex;
flex-direction: column;
}
.mensaje-mio {
align-items: flex-end;
}
.mensaje-centro {
align-items: flex-start;
}
.mensaje-cuerpo {
max-width: 85%;
padding: 12px 16px;
border-radius: 12px;
font-size: .9rem;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
}
.mensaje-mio .mensaje-cuerpo {
background: var(--mp-magenta);
color: #fff;
border-bottom-right-radius: 4px;
}
.mensaje-centro .mensaje-cuerpo {
background: #fff;
color: var(--mp-text);
border: 1px solid var(--mp-border);
border-bottom-left-radius: 4px;
}
.mensaje-meta {
font-size: .7rem;
color: var(--mp-text-sub);
margin-top: 4px;
padding: 0 4px;
}
.mensaje-mio .mensaje-meta {
color: rgba(255, 255, 255, 0.8);
}
.mp-badge {
display: inline-block;
padding: 2px 8px;
background: var(--mp-rojo);
color: #fff;
font-size: .75rem;
font-weight: 700;
border-radius: 12px;
margin-left: 8px;
}
/* Header de alumno en vista de mensajes */
.mp-header-alumno {
padding: 12px 0;
text-align: center;
}
.mp-nombre-alumno {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1rem;
color: var(--mp-text);
}
.mp-grupo-alumno {
font-size: .85rem;
color: var(--mp-text-sub);
margin-top: 4px;
}