/* IA Tecno Aula — hoja de estilos compartida por las páginas de acceso */

:root{
  --brand:#163C46; --brand-2:#1F4F5C; --accent:#D6A24A; --accent-dark:#B9832E;
  --paper:#F5F7F4; --surface:#FFFFFF; --ink:#1B211F; --muted:#5B6764;
  --border:#E1E6E2; --danger:#B3402F; --danger-tint:#FBEAE7;
  --success:#3E8F5C; --success-tint:#E4F1E8;
}
*{box-sizing:border-box;}

/* ---- Puntero del mouse siempre visible, en toda la plataforma: negro con borde blanco sobre
   fondos claros (la gran mayoría de la página), y blanco con borde negro sobre los pocos fondos
   oscuros que tenemos (la barra lateral, el telón detrás de una ventana emergente, y las burbujas
   de chat que uno mismo envía). Es un cursor dibujado a mano (mismo triángulo del puntero de
   siempre), no el del sistema operativo — así se ve igual de bien sin importar qué tan visible
   sea el cursor nativo de cada computador. auto al final es el respaldo por si el navegador no
   pudiera cargar la imagen. */
html{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 1.5 L2 18.5 L6.2 14.7 L9.3 21.8 L12.6 20.3 L9.4 13.3 L15.5 13.1 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}
.sidebar,
.leccion-modal-overlay,
.chat-burbuja-propia .chat-burbuja-texto{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 1.5 L2 18.5 L6.2 14.7 L9.3 21.8 L12.6 20.3 L9.4 13.3 L15.5 13.1 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}
/* Dentro de la ventana emergente (fondo blanco) el cursor vuelve a negro, aunque el telón
   oscuro que está detrás siga con el cursor blanco. */
.leccion-modal-overlay .leccion-modal{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 1.5 L2 18.5 L6.2 14.7 L9.3 21.8 L12.6 20.3 L9.4 13.3 L15.5 13.1 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-2);text-decoration:none;}
a:hover{text-decoration:underline;}

.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  position:relative;z-index:1;
}
.auth-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  max-width:420px;width:100%;padding:38px 34px;
  box-shadow:0 1px 2px rgba(27,33,31,.05),0 12px 32px -16px rgba(27,33,31,.18);
}

/* ---- login.php: tarjeta de dos columnas — marca de la institución + formulario ---- */
.auth-card-dos{
  max-width:840px;padding:0;display:flex;overflow:hidden;
}
.auth-marca{
  flex:1 1 320px;min-width:280px;padding:40px 34px;color:#fff;
  background:linear-gradient(160deg, var(--brand-2), #0E262C);
  display:flex;flex-direction:column;justify-content:space-between;position:relative;
}
.auth-marca .lockup{margin-bottom:14px;}
.brand-name-clara{color:#fff;}
.auth-marca-eslogan{font-size:14.5px;color:rgba(255,255,255,.82);margin:0 0 20px;max-width:32ch;}
.auth-marca-datos{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(255,255,255,.75);margin-bottom:20px;}
.auth-marca-pie{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.6;}
.auth-ingreso{flex:1 1 360px;min-width:300px;padding:40px 36px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;}
@media (max-width:680px){
  .auth-card-dos{flex-direction:column;max-width:420px;}
  .auth-marca{padding:28px 26px;}
  .auth-ingreso{padding:30px 26px;}
}

/* ---- Pantalla de institución suspendida (dentro de .auth-ingreso) ---- */
.suspension-caja{text-align:center;}
.suspension-ico{font-size:38px;margin-bottom:10px;}
.suspension-acciones{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.btn-fantasma{
  background:transparent;color:var(--ink);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:9px;font-weight:600;font-size:14.5px;
}
.btn-fantasma:hover{background:var(--paper);text-decoration:none;}
.lockup{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.brand-name{font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;}
.brand-name .ia{color:var(--accent);}
.lockup-logo{width:30px;height:30px;border-radius:8px;object-fit:contain;flex-shrink:0;}

/* ---- Fondo decorativo para las pantallas de acceso (login y creación inicial) ---- */
body.pagina-acceso{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(214,162,74,.40), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(31,79,92,.65), transparent 48%),
    radial-gradient(circle at 80% 88%, rgba(214,162,74,.30), transparent 40%),
    radial-gradient(circle at 8% 88%, rgba(31,79,92,.55), transparent 45%),
    linear-gradient(135deg, #0E262C 0%, #163C46 45%, #1F4F5C 100%);
}
body.pagina-acceso .auth-wrap{
  position:relative;overflow:hidden;
}
body.pagina-acceso .auth-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
}
body.pagina-acceso .auth-card{
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 30px 70px -24px rgba(0,0,0,.6);
}

/* ---- Circuito, nodos y glifos de código flotando detrás de la tarjeta ---- */
.fx-tec{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.fx-circuito{position:absolute;inset:0;width:100%;height:100%;opacity:.32;}
.fx-circuito .trazo{
  fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:5 9;animation:fx-flujo 16s linear infinite;
}
.fx-circuito .trazo.t2{stroke:#8FB8C0;animation-duration:20s;animation-direction:reverse;}
.fx-circuito .chip{fill:rgba(255,255,255,.03);stroke:#8FB8C0;stroke-width:1.4;}
.fx-circuito .nodo{fill:var(--accent);animation:fx-pulso 3.2s ease-in-out infinite;}
.fx-circuito .nodo.t2{fill:#8FB8C0;animation-delay:1.1s;}
.fx-circuito .nodo:nth-of-type(3n){animation-delay:.6s;}
.fx-circuito .nodo:nth-of-type(4n){animation-delay:1.8s;}
@keyframes fx-flujo{to{stroke-dashoffset:-140;}}
@keyframes fx-pulso{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:1;transform:scale(1.7);}}

.fx-glifo{
  position:absolute;font-family:'IBM Plex Mono',monospace;color:var(--accent);
  opacity:.22;font-weight:600;letter-spacing:.04em;animation:fx-flotar 7s ease-in-out infinite;
  user-select:none;
}
.fx-glifo.claro{color:#CFE3E7;}
.fx-glifo.g1{top:9%;left:7%;font-size:26px;animation-delay:0s;}
.fx-glifo.g2{top:20%;right:10%;font-size:19px;animation-delay:1.2s;}
.fx-glifo.g3{bottom:16%;left:9%;font-size:30px;animation-delay:.6s;}
.fx-glifo.g4{bottom:24%;right:8%;font-size:20px;animation-delay:1.8s;}
.fx-glifo.g5{top:48%;left:4%;font-size:16px;animation-delay:2.4s;}
.fx-glifo.g6{top:42%;right:5%;font-size:22px;animation-delay:.9s;}
@keyframes fx-flotar{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

@media (max-width:760px){
  .fx-glifo{display:none;}
  .fx-circuito{opacity:.2;}
}

h1.auth-title{font-family:'Spectral',Georgia,serif;font-weight:600;font-size:22px;margin:0 0 6px;}
p.auth-sub{color:var(--muted);font-size:14px;margin:0 0 24px;}

.campo{margin-bottom:16px;}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink);
}
.campo textarea{resize:vertical;min-height:92px;line-height:1.5;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--brand-2);outline-offset:1px;}
.fila-doble{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Campo con icono a la izquierda, dentro del input */
.campo-icono{position:relative;}
.campo-icono svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--muted);pointer-events:none;
}
.campo-icono input,.campo-icono select,.campo-icono textarea{padding-left:36px;}
/* Variante para textarea: el icono queda arriba, no centrado, porque el campo es alto */
.campo-icono.arriba svg{top:14px;transform:none;}

/* ---- Migas de pan (breadcrumb) para navegar curso → contenido ---- */
.migas{font-size:13px;color:var(--muted);margin:-6px 0 18px;}
.migas a{color:var(--brand-2);}

/* ---- Bloque de un módulo dentro de "Contenido del curso" ---- */
.modulo-bloque{border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:16px;background:var(--paper);}
.modulo-bloque h3{font-family:'Spectral',serif;font-weight:600;font-size:16.5px;margin:0 0 2px;}
.modulo-bloque .modulo-orden{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-dark);margin:0 0 12px;
}
.leccion-fila{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:8px;font-size:13.5px;
}
.leccion-fila svg{width:15px;height:15px;stroke:var(--muted);flex-shrink:0;}
.leccion-fila .leccion-num{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:11.5px;}
.leccion-fila-abrir{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:none;
  cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0;
}
.leccion-fila-abrir:hover span:not(.pildora-mini){color:var(--accent-dark);}
.form-leccion{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}
.form-leccion summary{cursor:pointer;}
.form-leccion summary.resumen-agregar-leccion{
  display:inline-block;list-style:none;width:auto;
}
.form-leccion summary.resumen-agregar-leccion::-webkit-details-marker{display:none;}
.form-leccion summary.resumen-agregar-leccion::marker{content:"";}
.form-leccion[open] summary.resumen-agregar-leccion{margin-bottom:14px;}
.form-leccion .form-inline{margin-top:12px;}

.btn{
  width:100%;padding:12px 16px;border-radius:8px;font-weight:700;font-size:14.5px;
  border:none;cursor:pointer;background:var(--accent);color:#20140A;
  font-family:inherit;transition:background .15s ease;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.btn:hover{background:var(--accent-dark);}
.btn svg{width:17px;height:17px;stroke:currentColor;flex-shrink:0;}

.aviso{
  padding:11px 14px;border-radius:8px;font-size:13.5px;margin-bottom:18px;
}
.aviso-error{background:var(--danger-tint);color:var(--danger);}
.aviso-exito{background:var(--success-tint);color:var(--success);}

.auth-footer{text-align:center;font-size:13.5px;color:var(--muted);margin-top:20px;}

.badge-rol{
  display:inline-flex;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:var(--success-tint);color:var(--success);
}

/* ---- Panel de administración (ancho, no es el auth-card angosto) ---- */
.admin-wrap{max-width:880px;margin:0 auto;padding:36px 24px 80px;}
.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.admin-top .lockup{margin-bottom:0;}
.admin-top .saludo{font-family:'Spectral',serif;font-weight:600;font-size:22px;margin:0;}
.admin-top .rol-nota{font-size:13px;color:var(--muted);margin-top:2px;}

.tarjetas-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.tarjeta-resumen{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;
}
.tr-etiqueta{font-size:12.5px;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.03em;}
.tr-valor{font-family:'Spectral',serif;font-weight:600;font-size:24px;margin:0;color:var(--brand);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.section-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:26px 26px 24px;margin-bottom:24px;
}
.section-card h2{font-family:'Spectral',serif;font-weight:600;font-size:19px;margin:0 0 4px;}
.section-card .section-sub{font-size:13.5px;color:var(--muted);margin:0 0 18px;}

.form-inline{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;}
.form-inline .campo{margin-bottom:0;}
.form-inline .campo-full{grid-column:1 / -1;}
.btn-inline{
  padding:11px 18px;border-radius:8px;font-weight:700;font-size:13.5px;border:none;
  background:var(--accent);color:#20140A;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
}
.btn-inline:hover{background:var(--accent-dark);}
.btn-inline svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}
/* Botones btn-inline pequeños (dentro de filas de tabla, etc.): icono un poco más chico. */
.btn-inline[style*="padding:3px"] svg,.btn-inline[style*="padding:4px"] svg,.btn-inline[style*="padding:5px"] svg{width:13px;height:13px;}

table.tabla-simple{width:100%;border-collapse:collapse;margin-top:6px;font-size:13.5px;}
table.tabla-simple th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);
}
table.tabla-simple td{padding:10px 10px;border-bottom:1px solid var(--border);}
table.tabla-simple tr:last-child td{border-bottom:none;}
.vacio-nota{color:var(--muted);font-size:13.5px;font-style:italic;padding:8px 0;}

.btn-ver-asistencia{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;border:1px solid var(--border);background:var(--panel,#fff);color:var(--brand-2);
  cursor:pointer;padding:0;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn-ver-asistencia svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}
.btn-ver-asistencia:hover{background:var(--accent);border-color:var(--accent);color:#20140A;}

/* Paleta de colores vivos para elegir el tema de una institución (reemplaza la lista desplegable). */
.paleta-colores{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.paleta-color{position:relative;display:block;width:32px;height:32px;cursor:pointer;flex-shrink:0;}
.paleta-color input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;}
.paleta-color-muestra{display:block;width:100%;height:100%;border-radius:6px;background:var(--c);border:1px solid rgba(0,0,0,.16);box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .12s ease,box-shadow .12s ease;}
.paleta-color:hover .paleta-color-muestra{transform:scale(1.12);box-shadow:0 2px 6px rgba(0,0,0,.22);z-index:1;position:relative;}
.paleta-color input:checked ~ .paleta-color-muestra{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--c),0 2px 5px rgba(0,0,0,.22);}
.paleta-color input:focus-visible ~ .paleta-color-muestra{outline:2px solid var(--brand-2);outline-offset:2px;}
.paleta-color-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .1s ease;}
.paleta-color-check svg{width:16px;height:16px;stroke:#fff;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));}
.paleta-color input:checked ~ .paleta-color-check{opacity:1;}

/* ---- Estructura general con barra lateral (panel de administración, y más adelante profesor/estudiante) ---- */
.app{display:flex;min-height:100vh;}

.sidebar{
  width:264px;flex-shrink:0;background:var(--brand);color:#E9F1EE;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sb-header{display:flex;align-items:center;gap:12px;padding:22px 18px 18px;border-bottom:1px solid rgba(233,241,238,.12);}
.sb-header .brand-name{font-size:13.5px;letter-spacing:.04em;}
.sb-header .brand-slogan{font-family:'Spectral',serif;font-style:italic;font-size:12px;color:rgba(233,241,238,.6);margin-top:2px;}

.sb-scroll{flex:1;overflow-y:auto;padding:16px 12px;}
.sb-group-label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(233,241,238,.4);padding:6px 10px 8px;margin-top:4px;
}
.sb-group-label:first-child{margin-top:0;}
nav.sb-nav{display:flex;flex-direction:column;gap:2px;}
.sb-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:rgba(233,241,238,.85);cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.sb-item svg{width:17px;height:17px;stroke:currentColor;flex-shrink:0;}
.sb-item:hover{background:rgba(233,241,238,.07);color:#fff;text-decoration:none;}
.sb-item.activo{background:var(--accent);color:#20140A;font-weight:700;}
.sb-item.activo svg{stroke:#20140A;}
.sb-admin-note{font-size:11px;color:rgba(233,241,238,.42);padding:8px 11px 2px;font-style:italic;}
.admin-badge{
  font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(214,162,74,.18);color:var(--accent);padding:2px 7px;border-radius:999px;margin-left:auto;
}

.sb-footer{padding:14px 18px 18px;border-top:1px solid rgba(233,241,238,.12);font-size:11px;line-height:1.7;color:rgba(233,241,238,.55);}
.sb-footer .fdate{font-family:'IBM Plex Mono',monospace;color:rgba(233,241,238,.72);font-variant-numeric:tabular-nums;margin-top:3px;}

.main-area{flex:1;min-width:0;padding:30px clamp(18px,3vw,40px) 60px;}

@media (max-width:860px){
  .app{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;justify-content:space-between;padding:12px 16px;}
  .sb-header{border:none;padding:0;}
  .sb-scroll,.sb-footer{display:none;}
}

/* ---- Miniaturas de portada (curso) en tablas ---- */
.miniatura{width:46px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block;}
.miniatura-vacia{
  width:46px;height:34px;border-radius:6px;border:1px dashed var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.miniatura-vacia svg{width:16px;height:16px;stroke:var(--muted);}

/* ---- Nota de ayuda bajo un campo de archivo ---- */
.campo .nota-archivo{font-size:12px;color:var(--muted);margin-top:5px;}
.campo input[type="file"]{
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:13.5px;background:#fff;color:var(--ink);
}

/* ---- Botón "Generar contenido con IA" (marcador visual — el motor real llega en la Fase 5) ---- */
.btn-ia{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:9px 14px;border-radius:8px;
  border:1px dashed var(--accent-dark);background:rgba(214,162,74,.08);color:var(--accent-dark);
  font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s ease;
}
.btn-ia:hover{background:rgba(214,162,74,.16);}
.btn-ia svg{width:15px;height:15px;stroke:var(--accent-dark);flex-shrink:0;}
.ia-nota{font-size:12.5px;color:var(--muted);margin-top:8px;font-style:italic;}

/* ---- Etiquetas pequeñas: video / PDF / número de imágenes en cada lección ---- */
.pildora-mini{
  display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--brand-2);background:rgba(31,79,92,.08);
  padding:2px 8px;border-radius:999px;margin-left:6px;
}

/* ---- Galería sencilla de imágenes dentro de una lección ---- */
.galeria-mini{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;}
.galeria-mini img{width:64px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}

/* ---- Video incrustado (YouTube / Vimeo) dentro de una lección ---- */
.video-embed{position:relative;width:100%;max-width:420px;aspect-ratio:16/9;margin:8px 0 4px;border-radius:8px;overflow:hidden;background:#000;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}

/* ---- Editor de texto enriquecido (Quill) para el contenido de una lección ---- */
.form-leccion-form .campo{margin-bottom:18px;}
.editor-barra-extra{display:flex;justify-content:flex-end;margin-bottom:6px;}
.btn-editor-extra{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px 8px 0 0;
  border:1px solid var(--border);border-bottom:none;background:var(--surface);color:var(--brand-2);
  font-weight:600;font-size:12.5px;font-family:inherit;cursor:pointer;
}
.btn-editor-extra:hover{background:var(--paper);}
.btn-editor-extra svg{width:14px;height:14px;stroke:var(--brand-2);}
.editor-lienzo{background:#fff;}
.editor-lienzo .ql-toolbar.ql-snow{border-radius:0 8px 0 0;border-color:var(--border);background:var(--paper);}
.editor-lienzo .ql-container.ql-snow{border-color:var(--border);border-radius:0 0 8px 8px;font-family:inherit;font-size:14.5px;min-height:180px;}
.editor-lienzo .ql-editor{min-height:180px;caret-color:#000;}
.editor-lienzo .ql-editor img{max-width:100%;height:auto;}
/* Forzamos el color del cursor de texto (caret) a negro sólido: en Windows/Chrome a veces el
   cursor "parpadeante" se pinta con una mezcla que lo deja invisible sobre fondo blanco si no
   se le fija un color explícito. Lo mismo con la selección: fondo del color de acento de la
   plataforma y texto oscuro, para que siempre se note claramente qué quedó seleccionado. */
.editor-lienzo .ql-editor::selection,
.editor-lienzo .ql-editor *::selection{background:var(--accent);color:#1B211F;}
.editor-lienzo .ql-editor::-moz-selection,
.editor-lienzo .ql-editor *::-moz-selection{background:var(--accent);color:#1B211F;}

/* ---- Contenido ya guardado de una lección (lo que escribió el editor) ---- */
.contenido-leccion{font-size:14.5px;line-height:1.65;color:var(--ink);}
.contenido-leccion p{margin:0 0 12px;}
.contenido-leccion img{max-width:100%;height:auto;border-radius:8px;}
.contenido-leccion iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border:none;border-radius:8px;}
.contenido-leccion a{color:var(--brand-2);text-decoration:underline;}
.contenido-leccion h1,.contenido-leccion h2,.contenido-leccion h3{font-family:'Spectral',serif;color:var(--brand);margin:16px 0 8px;}
.contenido-leccion blockquote{border-left:3px solid var(--accent);margin:0 0 12px;padding:2px 0 2px 14px;color:var(--muted);font-style:italic;}

/* ---- Foto de perfil, arriba de la insignia de rol en cada pantalla protegida ---- */
.admin-top-foto{display:flex;flex-direction:column;align-items:center;gap:6px;}
.foto-perfil{display:flex;flex-direction:column;align-items:center;gap:5px;}
.foto-perfil-img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);}
.foto-perfil-vacia{
  width:52px;height:52px;border-radius:50%;border:2px dashed var(--border);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.foto-perfil-vacia svg{width:20px;height:20px;stroke:var(--muted);}
.foto-perfil-btn{
  border:none;background:none;color:var(--brand-2);font-size:11.5px;font-weight:600;
  font-family:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px;
}
.foto-perfil-btn:hover{text-decoration:underline;}
.foto-perfil-btn svg{width:12px;height:12px;stroke:var(--brand-2);flex-shrink:0;}

/* ---- Lista de estudiantes matriculados, dentro de una tarjeta de curso del profesor ---- */
.lista-estudiantes-curso{margin:12px 0 0;padding:10px 12px;background:var(--paper);border-radius:8px;width:100%;}
.titulo-mini{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.lista-estudiantes-curso ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.lista-estudiantes-curso li{font-size:13px;color:var(--ink);}
.lista-estudiantes-curso li .correo-mini{color:var(--muted);font-size:11.5px;}

/* ---- Botones de estado (asistencia) dentro de una fila de tabla ---- */
.radios-estado{display:flex;gap:14px;flex-wrap:wrap;}
.radios-estado label{display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;color:var(--ink);}

/* ---- Select / texto dentro de tablas (asistencia y tareas) ---- */
table.tabla-simple select,
table.tabla-simple input[type="text"],
table.tabla-simple input[type="date"]{
  font-family:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border);
  border-radius:6px;background:var(--surface);color:var(--ink);
}
table.tabla-simple input[type="text"]{width:100%;min-width:140px;}

/* ---- Tarjeta de tareas y asistencia dentro del panel del profesor ---- */
.acciones-curso{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.acciones-curso a{
  font-size:12.5px;font-weight:600;color:var(--brand-2);background:rgba(31,79,92,.08);
  padding:5px 12px;border-radius:999px;text-decoration:none;
}
.acciones-curso a:hover{background:rgba(31,79,92,.16);text-decoration:none;}

/* ---- Cursos del panel de administración: cuadrícula de iconos + panel de detalle ---- */
.cursos-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;margin:2px 0 22px;
}
.curso-icono{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px 13px;
  border:1.5px solid var(--border);border-radius:14px;background:var(--surface);cursor:pointer;
  font-family:'Manrope',sans-serif;text-align:center;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.curso-icono:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,60,70,.12);}
.curso-icono.activo{border-color:var(--brand-2);background:rgba(31,79,92,.06);box-shadow:0 6px 16px rgba(22,60,70,.16);}
.curso-icono img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--border);}
.curso-icono-letra{
  width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:'Spectral',serif;font-weight:700;font-size:26px;color:#fff;flex-shrink:0;
}
.curso-icono-nombre{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;}

.curso-detalle{
  border:1.5px solid var(--brand-2);border-radius:14px;background:var(--paper);margin-bottom:22px;
  overflow:hidden;animation:curso-detalle-aparece .18s ease;
}
@keyframes curso-detalle-aparece{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.curso-detalle-header{
  display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border-bottom:1px solid var(--border);
}
.curso-detalle-header img{width:52px;height:52px;object-fit:cover;border-radius:10px;flex-shrink:0;border:1px solid var(--border);}
.curso-detalle-header .curso-icono-letra{width:52px;height:52px;font-size:20px;}
.curso-detalle-titulo{flex:1;min-width:0;}
.curso-detalle-titulo h2{margin:0 0 2px;font-size:18px;}
.curso-detalle-cerrar{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--paper);
  cursor:pointer;font-size:15px;color:var(--brand-2);line-height:1;flex-shrink:0;
}
.curso-detalle-cerrar:hover{border-color:var(--accent);}
.curso-detalle-cuerpo{padding:16px 18px;}
.curso-detalle-acciones{display:flex;flex-wrap:wrap;gap:10px;}
.curso-detalle-acciones a{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--brand-2);
  background:var(--surface);border:1px solid var(--border);padding:9px 14px;border-radius:10px;text-decoration:none;
}
.curso-detalle-acciones a svg{width:15px;height:15px;stroke:var(--brand-2);flex-shrink:0;}
.curso-detalle-acciones a:hover{border-color:var(--accent);background:rgba(214,162,74,.1);text-decoration:none;}
.curso-detalle-acciones a.destacado{background:var(--brand-2);color:#fff;border-color:var(--brand-2);}
.curso-detalle-acciones a.destacado svg{stroke:#fff;}
.curso-detalle-acciones a.destacado:hover{background:var(--brand);border-color:var(--brand);}

/* ---- Pastillas de estado: asistencia y entregas de tareas ---- */
.pildora-mini.estado-presente,.pildora-mini.estado-entregada{color:var(--success);background:var(--success-tint);}
.pildora-mini.estado-ausente{color:var(--danger);background:var(--danger-tint);}
.pildora-mini.estado-tarde{color:var(--accent-dark);background:rgba(214,162,74,.16);}
.pildora-mini.estado-pendiente{color:var(--muted);background:var(--border);}
.pildora-mini.estado-revisada{color:var(--brand-2);background:rgba(31,79,92,.1);}

/* ---- Lista de tareas de un curso, en la vista del estudiante/profesor ---- */
.lista-tareas-curso{margin-top:10px;display:flex;flex-direction:column;gap:10px;}
.tarea-fila{
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--paper);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.tarea-fila .tarea-info strong{font-size:14px;}
.tarea-fila .tarea-fecha{font-size:12px;color:var(--muted);margin-top:2px;}
.tarea-fila form{margin:0;}

/* ---- Presentar examen: barra de progreso y tarjetas de opción clicables ---- */
.examen-progreso-barra{
  height:8px;border-radius:999px;background:var(--border);overflow:hidden;margin-bottom:22px;
}
.examen-progreso-barra > div{
  height:100%;background:var(--accent);border-radius:999px;transition:width .25s ease;
}
.examen-progreso-texto{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.examen-pregunta-card{scroll-margin-top:20px;}

/* ---- Estadísticas por curso: barras horizontales comparando estudiantes ---- */
.stat-barra-fila{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.stat-barra-nombre{width:190px;flex-shrink:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-barra-pista{flex:1;height:15px;border-radius:999px;background:var(--paper);border:1px solid var(--border);overflow:hidden;}
.stat-barra-relleno{height:100%;border-radius:999px;background:var(--accent);transition:width .3s ease;}
.stat-barra-relleno.stat-rojo{background:var(--danger);}
.stat-barra-relleno.stat-verde{background:var(--success);}
.stat-barra-valor{width:120px;flex-shrink:0;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);}

/* ---- Boletín de notas por materia: nota final coloreada según la escala del curso ---- */
.nota-final-aprobada{color:var(--success);font-weight:700;}
.nota-final-reprobada{color:var(--danger);font-weight:700;}

/* ---- Bitácora: línea de tiempo simple ---- */
.bitacora-linea{border-left:2px solid var(--border);margin:4px 0 4px 6px;padding:0;list-style:none;}
.bitacora-item{position:relative;padding:0 0 16px 20px;font-size:13.5px;}
.bitacora-item::before{content:'';position:absolute;left:-6px;top:4px;width:9px;height:9px;border-radius:999px;background:var(--accent);}
.bitacora-item .bitacora-fecha{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:2px;}
.examen-media{margin:12px 0 16px;}
.examen-media img{max-width:100%;max-height:280px;object-fit:contain;border:1px solid var(--border);border-radius:10px;display:block;}
.examen-media .video-embed{max-width:420px;}
.opciones-examen{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.opcion-card{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid var(--border);
  border-radius:12px;cursor:pointer;background:var(--surface);transition:border-color .15s ease,background .15s ease;
  font-size:14px;color:var(--ink);
}
.opcion-card:hover{border-color:var(--accent);}
.opcion-card input{width:18px;height:18px;flex-shrink:0;accent-color:var(--brand-2);}
.opcion-card:has(input:checked){border-color:var(--brand-2);background:rgba(31,79,92,.07);font-weight:600;}

/* ---- Preguntas de examen con imágenes: elegir la imagen correcta, o arrastrarla ---- */
.opciones-imagen-grid{display:flex;flex-wrap:wrap;gap:10px;}
.opcion-imagen-item{
  position:relative;width:120px;border:1.5px solid var(--border);border-radius:10px;padding:6px;
  background:var(--surface);text-align:center;
}
.opcion-imagen-item img{width:100%;height:80px;object-fit:contain;border-radius:6px;display:block;}
.opcion-imagen-item.correcta{border-color:var(--success);background:rgba(46,125,80,.08);}
.opcion-imagen-item .pildora-mini{margin-top:6px;display:inline-block;}

.opciones-examen-imagen{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
.opcion-card-imagen{
  position:relative;width:150px;border:1.5px solid var(--border);border-radius:12px;padding:8px;
  cursor:pointer;background:var(--surface);transition:border-color .15s ease,background .15s ease;
}
.opcion-card-imagen:hover{border-color:var(--accent);}
.opcion-card-imagen input{position:absolute;top:8px;left:8px;width:18px;height:18px;accent-color:var(--brand-2);}
.opcion-card-imagen img{width:100%;height:100px;object-fit:contain;border-radius:6px;display:block;}
.opcion-card-imagen:has(input:checked){border-color:var(--brand-2);background:rgba(31,79,92,.07);}

.arrastrar-imagen-widget{margin-top:14px;}
.arrastrar-imagen-tabla{width:100%;border-collapse:collapse;}
.arrastrar-imagen-tabla th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 0 10px;
}
.arrastrar-imagen-tabla th:first-child{width:120px;}
.arrastrar-imagen-tabla td{border-top:1px solid var(--border);padding:12px 0;vertical-align:middle;}
.arrastrar-imagen-celda-zona{width:120px;}
.arrastrar-imagen-celda-item{display:flex;align-items:center;gap:12px;}
.arrastrar-imagen-flecha{font-size:20px;color:var(--accent-dark);flex-shrink:0;}

.arrastrar-imagen-zona{
  position:relative;width:100px;height:100px;border:2px dashed var(--accent);border-radius:10px;
  background:rgba(214,162,74,.08);display:flex;align-items:center;justify-content:center;
}
.arrastrar-imagen-zona:empty::before{
  content:attr(data-num);position:absolute;top:-8px;left:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--accent-dark);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.arrastrar-imagen-zona:empty::after{
  content:'Suelta aquí';color:var(--accent-dark);font-size:10.5px;text-align:center;padding:0 6px;
}
.arrastrar-imagen-zona .arrastrar-imagen-item{width:100%;height:100%;margin:0;box-sizing:border-box;}
.arrastrar-imagen-zona .arrastrar-imagen-item img{height:100%;}

.arrastrar-imagen-item{
  position:relative;width:120px;border:1.5px solid var(--border);border-radius:10px;padding:6px;
  background:var(--surface);cursor:grab;user-select:none;transition:opacity .15s ease,border-color .15s ease;
}
.arrastrar-imagen-item:hover{border-color:var(--accent);}
.arrastrar-imagen-item.arrastrando{opacity:.4;}
.arrastrar-imagen-item img{width:100%;height:70px;object-fit:contain;border-radius:6px;display:block;pointer-events:none;}

/* ---- Recorrido guiado del estudiante: módulos con candado, lecciones y su ventana emergente ---- */
.curso-modulos-lista{display:flex;flex-direction:column;gap:12px;}
.modulo-tarjeta{border:1.5px solid var(--border);border-radius:12px;padding:16px 18px;background:var(--surface);}
.modulo-tarjeta.modulo-bloqueado{background:var(--paper);opacity:.7;}
.modulo-tarjeta.modulo-disponible{border-color:var(--accent);}
.modulo-tarjeta.modulo-aprobado{border-color:var(--success);}
.modulo-tarjeta-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:'Spectral',serif;font-weight:600;font-size:16px;color:var(--brand);cursor:pointer;list-style:none;
}
.modulo-tarjeta-header::-webkit-details-marker{display:none;}
.modulo-tarjeta details[open] > .modulo-tarjeta-header{margin-bottom:14px;}
.leccion-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.leccion-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--paper);cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;font-size:13.5px;color:var(--ink);
  width:100%;transition:border-color .15s ease,background .15s ease;
}
.leccion-item:hover{border-color:var(--accent);}
.leccion-item .leccion-check{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--border);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-family:'IBM Plex Mono',monospace;
}
.leccion-item.completada{background:var(--success-tint);border-color:var(--success);}
.leccion-item.completada .leccion-check{background:var(--success);color:#fff;}
.leccion-item.completada span:last-child{color:#1c5c37;font-weight:600;}
.leccion-item.bloqueada{background:var(--paper);border-color:var(--border);color:var(--muted);cursor:not-allowed;opacity:.65;}
.leccion-item.bloqueada:hover{border-color:var(--border);}
.leccion-item.bloqueada .leccion-check{background:var(--border);color:var(--muted);}
.modulo-examen-final{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:14px 16px;border-radius:10px;background:rgba(214,162,74,.12);
}

/* ---- Ventana emergente (modal) de una lección: normal / maximizada / cerrar ---- */
.leccion-modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(27,33,31,.55);z-index:1000;
  align-items:center;justify-content:center;padding:24px;
}
.leccion-modal-overlay.activo{display:flex;}
.leccion-modal{
  background:var(--surface);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:min(720px,100%);max-height:min(640px,90vh);display:flex;flex-direction:column;overflow:hidden;
  transition:width .2s ease,height .2s ease,max-width .2s ease,max-height .2s ease;
}
.leccion-modal.modal-maximizado{width:96vw;max-width:96vw;max-height:94vh;}
.leccion-modal-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--border);font-family:'Spectral',serif;font-size:16px;color:var(--brand);flex-shrink:0;
}
.leccion-modal-controles{display:flex;gap:6px;}
.leccion-modal-controles button,.leccion-modal-controles a{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--paper);
  cursor:pointer;font-size:14px;color:var(--brand-2);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
.leccion-modal-controles button:hover,.leccion-modal-controles a:hover{border-color:var(--accent);}
.leccion-modal-controles a svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;}
.leccion-modal-cuerpo{padding:18px 22px;overflow-y:auto;flex:1;}
.leccion-modal-pie{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;
  border-top:1px solid var(--border);flex-shrink:0;background:var(--paper);
}
.leccion-modal-pie form{margin:0;}

/* ---- Chat interno: burbuja de mensajes sin leer en la barra lateral ---- */
.sb-chat-badge{
  margin-left:auto;background:var(--danger);color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5;flex-shrink:0;
}
.chat-tab .sb-chat-badge{margin-left:6px;}

/* ---- Chat interno: pestañas Salón general / Mensajes privados ---- */
.chat-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.chat-tab{
  padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:none;
  cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;
}
.chat-tab.activo{color:var(--brand-2);border-bottom-color:var(--accent);}

/* ---- Chat interno: lista de contactos + panel de conversación ---- */
.chat-layout{display:flex;gap:20px;align-items:flex-start;}
.chat-contactos{width:260px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;max-height:560px;overflow-y:auto;}
.chat-contacto{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;}
.chat-contacto:hover{background:var(--paper);}
.chat-contacto.activo{background:rgba(214,162,74,.14);}
.chat-contacto-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--paper);border:1px solid var(--border);}
.chat-contacto-avatar-vacia{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;
}
.chat-contacto-info{flex:1;min-width:0;}
.chat-contacto-nombre{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-contacto-rol{font-size:11px;color:var(--muted);text-transform:capitalize;}

.chat-panel{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;height:560px;}
.chat-mensajes{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;}
.chat-burbuja{max-width:72%;}
.chat-burbuja-propia{align-self:flex-end;}
.chat-burbuja-meta{font-size:11px;color:var(--muted);margin-bottom:3px;}
.chat-burbuja-propia .chat-burbuja-meta{text-align:right;}
.chat-burbuja-texto{
  background:var(--paper);border:1px solid var(--border);border-radius:12px 12px 12px 3px;
  padding:9px 13px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;
}
.chat-burbuja-propia .chat-burbuja-texto{
  background:var(--brand-2);color:#fff;border-color:var(--brand-2);border-radius:12px 12px 3px 12px;
}
.chat-form{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border);}
.chat-form textarea{flex:1;resize:none;height:42px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px;}
.chat-form button{flex-shrink:0;align-self:flex-end;}
.chat-vacio-nota{margin:auto;color:var(--muted);font-size:13.5px;text-align:center;padding:20px;}

@media (max-width:760px){
  .chat-layout{flex-direction:column;}
  .chat-contactos{width:100%;max-height:220px;}
  .chat-panel{height:440px;width:100%;}
}