:root {
    /* Paleta Flow SX "Infinity Flow" - azul/morado sobre navy oscuro */
    --color-primario: #0F50CE;         /* azul - acción primaria, links, botones */
    --color-primario-oscuro: #0C3FA3;  /* hover/active */
    --color-primario-claro: #E9EFFC;   /* fondos suaves de estado activo/seleccionado */
    --color-acento: #6C2BCD;           /* morado - gradientes, acentos de marca */
    --color-navy: #2F289A;             /* navy oscuro - fondo del sidebar */
    --color-navy-claro: #3C348F;       /* hover dentro del sidebar (más claro que el fondo) */
    --color-fondo: #F7F7F9;            /* gris cálido, no blanco puro */
    --color-texto: #2A2A38;            /* gris oscuro azulado, no negro puro */
    --color-texto-suave: #767686;
    --color-borde: #E6E6EC;
    --color-exito: #0F50CE;            /* usamos el azul de marca para éxito/completado */
    --color-peligro: #D6473D;          /* variante algo más sobria del coral, para uso frecuente */
    --color-alerta: #FA5C51;           /* coral - notificaciones, urgente, atención */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* ---------- LOGIN ---------- */
.login-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(135deg, #0F50CE, #6C2BCD);
}
.login-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    text-align: center;
}
.login-logo-img { width: 150px; height: auto; object-fit: contain; margin-bottom: 8px; }
.login-box h1 { margin: 0; color: var(--color-primario); font-weight: 200; }
.intake-logo-img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 8px; }
.subtitulo { color: var(--color-texto-suave); margin-bottom: 24px; }
.login-box form { display: flex; flex-direction: column; text-align: left; }
.login-box label { font-size: 13px; margin-top: 12px; font-weight: 600; }
.login-box input {
    padding: 10px; margin-top: 4px; border: 1px solid var(--color-borde);
    border-radius: 6px; font-size: 14px;
}
.login-box button {
    margin-top: 20px; padding: 12px; background: var(--color-primario);
    color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.login-box button:hover { background: var(--color-primario-oscuro); }

/* ---------- LAYOUT: SIDEBAR + APP SHELL ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px; flex-shrink: 0; background: var(--color-navy); color: white;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; /* si el menú ya no cabe completo, se puede hacer scroll dentro del sidebar en vez de que la parte de abajo (usuario, "Salir") quede fuera de la pantalla */
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.sidebar-logo {
    display: flex; align-items: center; gap: 8px; padding: 14px 18px; text-decoration: none;
    color: white; font-size: 17px;
}
.sidebar-logo-texto { font-weight: 200; letter-spacing: 0.3px; }
.sidebar-logo-img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.sidebar-nav { flex: 1; padding: 4px 10px; display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px;
    text-decoration: none; color: #D7D5F0; font-size: 13px; font-weight: 500; transition: background 0.15s;
}
.sidebar-nav a:hover { background: var(--color-navy-claro); color: white; }
.sidebar-nav a.nav-activo {
    background: linear-gradient(135deg, var(--color-primario), var(--color-acento)); color: white;
}
.sidebar-icono { width: 17px; height: 17px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-icono svg { width: 15px; height: 15px; }

.sidebar-nav-separador {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255,255,255,0.4);
    padding: 10px 10px 3px; margin-top: 4px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
}
.sidebar-nav-separador svg { transition: transform 0.15s; }
.sidebar-nav-grupo-cerrado .sidebar-nav-separador svg { transform: rotate(-90deg); }
.sidebar-nav-grupo-cerrado .sidebar-nav-grupo-items { display: none; }

.sidebar-usuario {
    display: flex; align-items: center; gap: 10px; padding: 16px; border-top: 1px solid rgba(255,255,255,0.12);
}
.sidebar-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--color-acento); color: white;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.sidebar-usuario-info { display: flex; flex-direction: column; min-width: 0; }
.sidebar-usuario-nombre { font-size: 13px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-salir { font-size: 12px; color: #B9B6E8; text-decoration: none; }
.sidebar-salir:hover { color: white; }

.app-main { flex: 1; min-width: 0; }

/* ---------- CONTENEDORES ---------- */
.contenedor { max-width: 1200px; margin: 0 auto; padding: 24px; }
.contenedor-angosto { max-width: 600px; }
.encabezado-seccion {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px;
}

/* ---------- BOTONES ---------- */
.boton {
    display: inline-block; padding: 10px 18px; border-radius: 6px; text-decoration: none;
    font-size: 14px; font-weight: 600; border: none; cursor: pointer;
}
.boton-primario { background: var(--color-primario); color: white; }
.boton-primario:hover { background: var(--color-primario-oscuro); }
.boton-secundario { background: white; color: var(--color-texto); border: 1px solid var(--color-borde); }

/* ---------- ALERTAS ---------- */
.alerta { padding: 12px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.alerta-error { background: #FBEAEA; color: var(--color-peligro); }

/* ---------- FORMULARIOS ---------- */
.formulario { display: flex; flex-direction: column; background: white; padding: 24px; border-radius: 10px; }
.formulario label { font-size: 13px; font-weight: 600; margin-top: 14px; }
.formulario input, .formulario select, .formulario textarea {
    padding: 10px; margin-top: 4px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 14px;
}
.fila-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .boton { margin-top: 20px; margin-right: 10px; }

/* ---------- TARJETAS DE PROYECTO ---------- */
.tarjetas-proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta-proyecto {
    background: white; border-radius: 10px; padding: 16px; text-decoration: none; color: var(--color-texto);
    border-left: 4px solid var(--color-primario); box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.tarjeta-proyecto:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.tarjeta-header { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-texto-suave); }
.prioridad { text-transform: uppercase; font-weight: 700; }
.prioridad-urgente { color: var(--color-peligro); }
.prioridad-alta { color: var(--color-alerta); }
.barra-progreso { background: var(--color-borde); border-radius: 4px; height: 6px; margin: 10px 0 4px; }
.barra-progreso-relleno { background: var(--color-exito); height: 6px; border-radius: 4px; }
.porcentaje-texto { font-size: 12px; color: var(--color-texto-suave); }
.tarjeta-footer { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; }
.estado-badge { background: var(--color-primario-claro); color: var(--color-primario); padding: 2px 8px; border-radius: 10px; }

/* ---------- KANBAN ---------- */
.tablero-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-top: 20px; }
.columna-kanban { background: #EDEDEE; border-radius: 10px; padding: 10px; min-height: 400px; }
.columna-kanban h3 { font-size: 13px; text-transform: uppercase; color: var(--color-texto-suave); }
.tarjeta-tarea {
    background: white; border-radius: 8px; padding: 10px; margin-bottom: 8px; cursor: grab; position: relative;
    border-left: 3px solid var(--color-borde); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.tarjeta-tarea:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.14); transform: translateY(-1px); }
.tarjeta-tarea:active { cursor: grabbing; }
.prioridad-borde-urgente { border-left-color: var(--color-peligro); }
.prioridad-borde-alta { border-left-color: var(--color-alerta); }

/* El título ya NUNCA agranda la tarjeta ni "abre" nada por accidente: se
   corta con puntos suspensivos a partir de 3 líneas. El texto completo
   sigue guardándose y editándose normal en el panel de detalle. */
.titulo-tarea {
    font-size: 13px; margin: 0 0 8px; padding-right: 18px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; word-break: break-word;
}
.tarjeta-tarea-footer { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; font-size: 11px; color: var(--color-texto-suave); }
.tarjeta-fecha-creacion { opacity: 0.75; }

/* Menú rápido (⋮) de cada tarjeta */
.tarjeta-menu-boton {
    position: absolute; top: 6px; right: 4px; background: none; border: none; cursor: pointer;
    color: var(--color-texto-suave); padding: 4px; border-radius: 4px; opacity: 0.55;
}
.tarjeta-menu-boton:hover { background: var(--color-fondo); opacity: 1; }
.tarjeta-menu-desplegable {
    position: absolute; top: 26px; right: 4px; background: white; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 50; min-width: 180px; overflow: hidden;
}
.tarjeta-menu-desplegable button {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 9px 14px; font-size: 12px; color: var(--color-texto);
}
.tarjeta-menu-desplegable button:hover { background: var(--color-fondo); }
.tarjeta-menu-eliminar { color: var(--color-peligro) !important; }

/* ---------- MODAL ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 700;
    display: flex; align-items: center; justify-content: center;
    animation: flowsx-fundido-entrada 0.15s ease;
}
.modal-contenido {
    background: white; padding: 24px; border-radius: 10px; width: 360px;
    animation: flowsx-aparecer-suave 0.18s ease;
}
.modal-contenido form { display: flex; flex-direction: column; }
.modal-contenido label { font-size: 13px; font-weight: 600; margin-top: 10px; }
.modal-contenido input, .modal-contenido select {
    padding: 8px; margin-top: 4px; border: 1px solid var(--color-borde); border-radius: 6px;
}
.modal-botones { margin-top: 16px; display: flex; gap: 8px; }

@keyframes flowsx-fundido-entrada { from { opacity: 0; } to { opacity: 1; } }
@keyframes flowsx-aparecer-suave { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.sin-datos { color: var(--color-texto-suave); }
.texto-suave { color: var(--color-texto-suave); font-size: 12px; }

/* ---------- TABLAS ---------- */
.tabla-datos { width: 100%; background: white; border-radius: 10px; border-collapse: collapse; overflow: hidden; }
.tabla-datos th {
    text-align: left; font-size: 12px; text-transform: uppercase; color: var(--color-texto-suave);
    padding: 12px 16px; border-bottom: 1px solid var(--color-borde);
}
.tabla-datos td { padding: 12px 16px; border-bottom: 1px solid var(--color-borde); font-size: 14px; }
.tabla-datos tr:last-child td { border-bottom: none; }
.tabla-datos a { color: var(--color-primario); text-decoration: none; font-weight: 600; }
.estado-badge-inactivo { background: #F0F0F0; color: var(--color-texto-suave); }

/* ---------- CHECKBOX LABEL ---------- */
.label-checkbox { display: flex; align-items: center; gap: 8px; flex-direction: row; margin-top: 16px; font-weight: 600; }
.label-checkbox input { width: auto; margin: 0; }

/* ---------- MODAL DE DETALLE DE TAREA ---------- */
.modal-ancho { width: 480px; max-height: 85vh; overflow-y: auto; }
.modal-detalle-header { display: flex; justify-content: space-between; align-items: center; }
.boton-cerrar { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-texto-suave); line-height: 1; }
.detalle-descripcion { font-size: 14px; margin: 8px 0; }
.modal-ancho h4 { font-size: 13px; text-transform: uppercase; color: var(--color-texto-suave); margin: 20px 0 8px; }
.comentario-item, .archivo-item {
    background: var(--color-fondo); border-radius: 8px; padding: 10px; margin-bottom: 8px; font-size: 13px;
}
.comentario-item p { margin: 4px 0 0; }
.archivo-item { display: flex; justify-content: space-between; align-items: center; }
.archivo-item a { color: var(--color-primario); text-decoration: none; font-weight: 600; }
#form-comentario, #form-subir-archivo { display: flex; gap: 8px; margin-top: 8px; }
#form-comentario textarea {
    flex: 1; padding: 8px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 13px; resize: vertical;
}
#form-subir-archivo input[type="file"] { flex: 1; font-size: 12px; }

/* ---------- CHAT ---------- */
.chat-layout {
    display: grid; grid-template-columns: 220px 1fr; height: calc(100vh - 62px); /* descuenta la barra superior de notificaciones */
}
.chat-sidebar {
    background: white; border-right: 1px solid var(--color-borde); padding: 16px 0; overflow-y: auto;
}
.chat-sidebar h3 { font-size: 12px; text-transform: uppercase; color: var(--color-texto-suave); padding: 0 16px; margin-bottom: 8px; }
.lista-canales { list-style: none; padding: 0; margin: 0 0 16px; }
.lista-canales a {
    display: block; padding: 8px 16px; text-decoration: none; color: var(--color-texto); font-size: 14px;
}
.lista-canales a:hover { background: var(--color-fondo); }
.lista-canales a.canal-activo { background: var(--color-primario-claro); color: var(--color-primario); font-weight: 600; }

.chat-principal { display: flex; flex-direction: column; height: 100%; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.chat-mensaje-item { max-width: 520px; }
.chat-mensaje-cabecera { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.chat-mensaje-cabecera strong { font-size: 13px; }
.chat-texto-mensaje { margin: 2px 0 0; font-size: 14px; background: white; padding: 8px 12px; border-radius: 8px; display: inline-block; }
.chat-imagen-adjunta { max-width: 280px; border-radius: 8px; display: block; margin-top: 4px; }
.chat-archivo-adjunto {
    display: inline-flex; align-items: center; gap: 6px; background: white; padding: 8px 12px;
    border-radius: 8px; text-decoration: none; color: var(--color-primario); font-size: 13px; font-weight: 600; margin-top: 4px;
}

.chat-form {
    display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: white; border-top: 1px solid var(--color-borde);
}
.chat-form input[type="text"] {
    flex: 1; padding: 10px 14px; border: 1px solid var(--color-borde); border-radius: 20px; font-size: 14px;
}
.chat-boton-adjunto { cursor: pointer; padding: 6px; display: inline-flex; align-items: center; color: var(--color-texto-suave); }
.chat-form .boton { border-radius: 20px; }
.chat-archivo-preview {
    display: none; padding: 4px 24px 8px; font-size: 12px; color: var(--color-texto-suave); background: white;
}

/* ---------- WIDGET DE CHAT FLOTANTE (compacto, siempre visible) ---------- */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 500; }

.chat-widget-boton {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--color-primario), var(--color-acento));
    color: white; box-shadow: 0 4px 16px rgba(15,80,206,0.4);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.chat-widget-badge {
    position: absolute; top: -4px; right: -4px; background: var(--color-alerta); color: white;
    font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid white;
}

.chat-widget-panel {
    position: absolute; bottom: 68px; right: 0; width: 340px; height: 460px;
    background: white; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    flex-direction: column; overflow: hidden;
}
.chat-widget-header {
    background: var(--color-navy); color: white; padding: 12px 16px; font-weight: 700; font-size: 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.chat-widget-header a, .chat-widget-cerrar {
    color: white; text-decoration: none; background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; margin-left: 10px;
}
.chat-widget-header #chat-widget-titulo-activo {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.chat-widget-toggle-lista {
    background: rgba(255,255,255,0.12); border: none; color: white; cursor: pointer; flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.chat-widget-toggle-lista-abierta { transform: rotate(180deg); }
.chat-widget-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-widget-canales { max-height: 220px; overflow-y: auto; border-bottom: 1px solid var(--color-borde); flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.chat-widget-categoria {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-texto-suave);
    font-weight: 700; padding: 8px 14px 4px; margin: 0; background: var(--color-fondo);
}
.chat-widget-canal-item {
    padding: 8px 14px; cursor: pointer; position: relative; border-bottom: 1px solid var(--color-fondo);
}
.chat-widget-canal-item:hover { background: var(--color-fondo); }
.chat-widget-canal-item.canal-widget-activo { background: var(--color-primario-claro); }
.chat-widget-canal-nombre { font-size: 13px; font-weight: 600; }
.chat-widget-canal-preview { font-size: 11px; color: var(--color-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.chat-widget-canal-badge {
    position: absolute; top: 8px; right: 12px; background: var(--color-alerta); color: white;
    font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.chat-widget-mensajes { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 12px; }
.chat-widget-mensaje { margin-bottom: 8px; }
.chat-widget-mensaje strong { color: var(--color-primario); }
.chat-widget-mensaje p { margin: 2px 0 0; }
.chat-widget-imagen { max-width: 160px; border-radius: 6px; display: block; margin-top: 4px; }
.chat-widget-archivo-link { color: var(--color-primario); font-weight: 600; text-decoration: none; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }

.chat-widget-form { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--color-borde); }
.chat-widget-form input[type="text"] {
    flex: 1; padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: 16px; font-size: 12px;
}
.chat-widget-form button {
    background: var(--color-primario); color: white; border: none; border-radius: 50%;
    width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-widget-adjunto { cursor: pointer; display: inline-flex; align-items: center; padding: 4px; color: var(--color-texto-suave); }

@media (max-width: 480px) {
    .chat-widget-panel { width: calc(100vw - 32px); right: -8px; }
}

/* ---------- EQUIPO DEL PROYECTO ---------- */
.equipo-proyecto { margin-bottom: 20px; }
.equipo-proyecto h3 { font-size: 12px; text-transform: uppercase; color: var(--color-texto-suave); margin-bottom: 8px; }
.lista-miembros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.miembro-chip {
    display: flex; align-items: center; gap: 6px; background: white; padding: 6px 10px 6px 6px;
    border-radius: 20px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.miembro-avatar {
    width: 22px; height: 22px; border-radius: 50%; background: var(--color-acento); color: white;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.miembro-quitar {
    background: none; border: none; cursor: pointer; color: var(--color-texto-suave); padding: 2px;
    display: inline-flex; align-items: center; border-radius: 50%;
}
.miembro-quitar:hover { color: var(--color-peligro); background: var(--color-fondo); }
.miembro-agregar-boton {
    background: none; border: 1px dashed var(--color-borde); color: var(--color-primario); cursor: pointer;
    padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
}
.miembro-agregar-boton:hover { background: var(--color-primario-claro); }

/* ---------- MÓDULO DE CORREO ---------- */
.alerta-exito { background: #E8F5E9; color: #1B7A2E; padding: 12px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.tarjeta-conexion { background: white; border-radius: 10px; padding: 20px; margin-top: 20px; }
.tarjeta-conexion h3 { margin-top: 0; font-size: 16px; }
.tarjeta-conexion .formulario { padding: 0; margin-top: 12px; }
.lista-correos { margin-top: 16px; }
.correo-item {
    background: white; border-radius: 10px; padding: 14px 18px; margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.boton-pequeno { padding: 6px 12px; font-size: 12px; }
code { background: var(--color-fondo); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.fila-correo { display: flex; gap: 8px; margin-top: 4px; }
.fila-correo input[type="text"] { flex: 1; }
.fila-correo select { width: auto; padding: 10px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 14px; }

/* ---------- BARRA SUPERIOR (contiene la campana, nunca se monta sobre el contenido) ---------- */
.app-topbar {
    display: flex; justify-content: flex-end; align-items: center; padding: 10px 24px;
    background: var(--color-fondo); position: sticky; top: 0; z-index: 600;
}

/* ---------- CENTRO DE NOTIFICACIONES ---------- */
.notif-widget { position: relative; }

.notif-boton {
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: white; color: var(--color-texto); box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.notif-badge {
    position: absolute; top: -2px; right: -2px; background: var(--color-alerta); color: white;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid white;
}

.notif-panel {
    position: absolute; top: 50px; right: 0; width: 340px; max-height: 460px;
    background: white; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
    display: flex; flex-direction: column;
}
.notif-panel-header {
    padding: 12px 16px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--color-borde);
    display: flex; justify-content: space-between; align-items: center;
}
.notif-marcar-todas {
    background: none; border: none; color: var(--color-primario); font-size: 11px; cursor: pointer; font-weight: 600; padding: 0;
}
.notif-lista { overflow-y: auto; }
.notif-item {
    display: block; padding: 12px 16px; border-bottom: 1px solid var(--color-fondo); text-decoration: none;
    color: var(--color-texto); cursor: pointer;
}
.notif-item:hover { background: var(--color-fondo); }
.notif-item-no-leida { background: var(--color-primario-claro); }
.notif-item-tipo { font-size: 10px; text-transform: uppercase; color: var(--color-primario); font-weight: 700; }
.notif-item-titulo { font-size: 13px; font-weight: 600; margin: 2px 0; }
.notif-item-mensaje { font-size: 12px; color: var(--color-texto-suave); margin: 0 0 4px; }
.notif-item-fecha { font-size: 11px; color: var(--color-texto-suave); }

@media (max-width: 480px) {
    .notif-panel { width: calc(100vw - 32px); right: -8px; }
}

/* ---------- HOME / MI DÍA ---------- */
.home-encabezado { margin-bottom: 24px; }
.home-encabezado h1 { margin-bottom: 2px; }
.home-encabezado p { text-transform: capitalize; margin: 0; }

.home-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }

.home-seccion { margin-bottom: 28px; }
.home-seccion-titulo { font-size: 15px; margin-bottom: 10px; }
.home-titulo-vencidas { color: var(--color-peligro); }

.home-lista-tareas { display: flex; flex-direction: column; gap: 6px; }
.home-lista-vacia { padding: 14px; background: white; border-radius: 8px; }

.home-tarea-fila {
    background: white; border-radius: 8px; padding: 10px 14px; display: flex; align-items: center;
    gap: 12px; cursor: pointer; border-left: 3px solid var(--color-borde);
}
.home-tarea-fila:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.08); }
.home-tarea-titulo { flex: 1; font-size: 14px; font-weight: 500; }
.home-tarea-proyecto { font-size: 12px; color: var(--color-texto-suave); }
.home-tarea-fecha { font-size: 12px; color: var(--color-texto-suave); flex-shrink: 0; }

.home-widget { background: white; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.home-widget h3 { margin: 0 0 12px; font-size: 14px; }

.home-hito-item, .home-proyecto-item {
    display: block; text-decoration: none; color: var(--color-texto); padding: 10px 0;
    border-bottom: 1px solid var(--color-fondo);
}
.home-hito-item:last-child, .home-proyecto-item:last-child { border-bottom: none; }
.home-hito-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.home-hito-fecha { color: var(--color-texto-suave); font-size: 12px; }

.home-proyecto-nombre { font-size: 13px; font-weight: 600; }
.home-proyecto-cliente { font-size: 11px; color: var(--color-texto-suave); margin-bottom: 6px; }
.home-proyecto-badge { font-size: 11px; color: var(--color-primario); }

@media (max-width: 900px) {
    .home-layout { grid-template-columns: 1fr; }
}

/* ---------- CREACIÓN ÁGIL INLINE ---------- */
.creacion-inline-input {
    width: 100%; border: none; background: transparent; padding: 8px 6px; font-size: 13px;
    color: var(--color-texto-suave); margin-top: 4px;
}
.creacion-inline-input:focus { outline: none; background: white; border-radius: 6px; color: var(--color-texto); }

/* ---------- TASK DRAWER (modal centrado) ---------- */
.task-drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 800;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: flowsx-fundido-entrada 0.15s ease;
}
.task-drawer {
    width: 560px; max-width: 100%; max-height: 88vh; background: white; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; animation: aparecer-modal-drawer 0.15s ease-out;
}
@keyframes aparecer-modal-drawer {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.task-drawer-header {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid var(--color-borde); flex-shrink: 0;
}
.task-drawer-header a { color: var(--color-primario); text-decoration: none; font-weight: 600; }
.task-drawer-cuerpo { flex: 1; overflow-y: auto; padding: 20px; }

.drawer-campo-titulo {
    width: 100%; border: none; font-size: 20px; font-weight: 700; padding: 6px 0; margin-bottom: 16px;
    color: var(--color-texto);
}
.drawer-campo-titulo:focus { outline: none; background: var(--color-fondo); border-radius: 6px; padding: 6px 8px; }

.drawer-campos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.drawer-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--color-texto-suave); margin-bottom: 5px; }
.task-drawer-cuerpo select, .task-drawer-cuerpo input, .task-drawer-cuerpo textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 13px; margin-bottom: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease; background: white;
}
.task-drawer-cuerpo select:focus, .task-drawer-cuerpo input:focus, .task-drawer-cuerpo textarea:focus {
    outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-claro);
}
.task-drawer-cuerpo h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--color-texto-suave); margin: 22px 0 10px; letter-spacing: 0.3px; }
.drawer-guardado-indicador { font-size: 11px; color: var(--color-primario); font-weight: 600; }

/* Editor enriquecido de la descripción */
.editor-enriquecido-contenedor { position: relative; }
.editor-enriquecido-barra { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.editor-enriquecido-barra button {
    background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 6px; cursor: pointer;
    font-size: 12px; padding: 5px 10px; color: var(--color-texto); transition: background 0.15s ease;
}
.editor-enriquecido-barra button:hover { background: var(--color-primario-claro); border-color: var(--color-primario); }
.editor-enriquecido-cuerpo {
    min-height: 90px; border: 1px solid var(--color-borde); border-radius: 8px; padding: 10px 12px;
    font-size: 13px; margin-bottom: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.editor-enriquecido-cuerpo:focus {
    outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-claro);
}
.editor-enriquecido-cuerpo:empty::before { content: attr(data-placeholder); color: var(--color-texto-suave); }
.editor-enriquecido-cuerpo code {
    background: var(--color-fondo); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 12px;
}
.editor-enriquecido-cuerpo ul, .editor-enriquecido-cuerpo ol { padding-left: 20px; margin: 6px 0; }
.editor-enriquecido-cuerpo a { color: var(--color-primario); }

#drawer-form-comentario, #drawer-form-archivo { display: flex; gap: 8px; margin-top: 8px; }
#drawer-form-comentario textarea { flex: 1; margin-bottom: 0; }

@media (max-width: 700px) {
    .task-drawer { width: 100%; max-height: 92vh; }
    .drawer-campos-grid { grid-template-columns: 1fr; }
}

/* ---------- BOTÓN FLOTANTE DE CREACIÓN RÁPIDA ---------- */
.quick-create-widget { position: fixed; bottom: 24px; right: 92px; z-index: 500; }
.quick-create-boton {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--color-navy); color: white; box-shadow: 0 4px 16px rgba(47,40,154,0.4);
    display: flex; align-items: center; justify-content: center;
}
.quick-create-panel {
    position: absolute; bottom: 68px; right: 0; width: 300px; background: white; border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
}

@media (max-width: 480px) {
    .quick-create-widget { right: 80px; bottom: 16px; }
    .quick-create-panel { width: calc(100vw - 32px); right: -40px; }
}

/* ---------- RESPONSIVE GENERAL: sidebar y layout en pantallas angostas ---------- */
@media (max-width: 768px) {
    .app-shell { flex-direction: column; }

    .sidebar {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 400;
        flex-direction: row; align-items: center; padding: 6px 10px; overflow-x: auto;
    }
    .sidebar-logo { padding: 6px 10px; flex-shrink: 0; }
    .sidebar-logo-texto { display: none; } /* deja solo el ícono para ahorrar espacio */
    .sidebar-nav { flex-direction: row; flex: 0 0 auto; padding: 0; gap: 2px; overflow-x: auto; }
    .sidebar-nav a { flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
    .sidebar-usuario { border-top: none; border-left: 1px solid rgba(255,255,255,0.12); padding: 6px 10px; flex-shrink: 0; }
    .sidebar-usuario-info { display: none; } /* solo el avatar visible, ahorra espacio */

    .contenedor { padding: 16px; }
    .tablero-kanban { grid-auto-flow: unset; } /* ya es flex+scroll por defecto, sin ajuste extra necesario */
    .columna-kanban { scroll-snap-align: start; }

    .app-topbar { padding: 8px 12px; }
    .chat-widget { bottom: 12px; right: 12px; }
    .quick-create-widget { bottom: 12px; right: 76px; }
}

/* ---------- PESTAÑAS DE VISTA (Tablero/Lista/Calendario) ---------- */
.vista-tabs { display: flex; gap: 4px; margin: 16px 0; border-bottom: 1px solid var(--color-borde); }
.vista-tab {
    background: none; border: none; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    color: var(--color-texto-suave); border-bottom: 2px solid transparent;
}
.vista-tab:hover { color: var(--color-texto); }
.vista-tab-activa { color: var(--color-primario); border-bottom-color: var(--color-primario); }

/* ---------- SECCIONES EDITABLES DEL KANBAN ---------- */
.columna-kanban-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.seccion-nombre-editable {
    font-size: 13px; text-transform: uppercase; color: var(--color-texto-suave); margin: 0;
    padding: 2px 4px; border-radius: 4px; flex: 1; outline: none;
}
.seccion-nombre-editable:focus { background: white; color: var(--color-texto); box-shadow: 0 0 0 2px var(--color-primario-claro); }
.seccion-eliminar { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); padding: 2px; opacity: 0.5; transition: opacity 0.15s; }
.columna-kanban:hover .seccion-eliminar { opacity: 1; }
.seccion-eliminar:hover { color: var(--color-peligro); }

.columna-agregar { min-width: 200px; flex-shrink: 0; }
.boton-agregar-seccion {
    background: none; border: 1px dashed var(--color-borde); color: var(--color-texto-suave); cursor: pointer;
    padding: 10px 16px; border-radius: 8px; font-size: 13px; width: 100%;
}
.boton-agregar-seccion:hover { background: white; color: var(--color-primario); }
#input-nueva-seccion { width: 100%; padding: 10px; border: 1px solid var(--color-primario); border-radius: 8px; font-size: 13px; }

.tarjeta-tarea-completada { opacity: 0.5; }
.tarjeta-tarea-completada .titulo-tarea { text-decoration: line-through; }

.tablero-kanban .columna-kanban { width: 280px; min-width: 280px; max-width: 280px; flex-shrink: 0; }

/* ---------- VISTA LISTA ---------- */
.fila-tarea-completada td { opacity: 0.5; text-decoration: line-through; }
.fila-tarea-completada input[type="checkbox"] { opacity: 1; } /* el checkbox se mantiene visible */

/* ---------- VISTA CALENDARIO ---------- */
.calendario-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.calendario-header h3 { margin: 0; text-transform: capitalize; min-width: 160px; text-align: center; }
.calendario-dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--color-texto-suave); margin-bottom: 6px; }
.calendario-celdas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario-celda { background: white; border-radius: 8px; min-height: 90px; padding: 6px; font-size: 11px; }
.calendario-celda-vacia { background: transparent; }
.calendario-celda-hoy { border: 2px solid var(--color-primario); }
.calendario-numero-dia { font-weight: 700; font-size: 12px; }
.calendario-tarea {
    background: var(--color-primario-claro); border-left: 3px solid var(--color-primario); border-radius: 4px;
    padding: 3px 6px; margin-top: 4px; font-size: 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 768px) {
    .calendario-celda { min-height: 60px; font-size: 10px; }
    .calendario-header h3 { min-width: auto; font-size: 14px; }
}

/* ---------- TASK DRAWER: título + completado, etiquetas, dependencias ---------- */
.drawer-titulo-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.drawer-titulo-fila input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.drawer-campo-titulo { margin-bottom: 0 !important; }
.drawer-titulo-completado { text-decoration: line-through; color: var(--color-texto-suave); }

.drawer-etiquetas-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.etiqueta-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600;
}
.etiqueta-chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: 13px; padding: 0; line-height: 1; }
#drawer-agregar-etiqueta, #drawer-agregar-dependencia { width: auto; margin-bottom: 0; font-size: 12px; padding: 4px 8px; }

.dependencia-item {
    display: flex; justify-content: space-between; align-items: center; background: var(--color-fondo);
    padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12px;
}
.dependencia-completada { opacity: 0.5; text-decoration: line-through; }
.dependencia-item button { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); }

/* ---------- HITOS DEL PROYECTO ---------- */
.hitos-proyecto, .campos-personalizados-proyecto { background: white; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.hitos-proyecto h3, .campos-personalizados-proyecto h3 { margin: 0 0 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.hito-item, .campo-personalizado-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--color-fondo);
}
.hito-item input[type="checkbox"] { margin: 0; width: auto; }
.hito-nombre { flex: 1; }
.hito-completado .hito-nombre { text-decoration: line-through; color: var(--color-texto-suave); }
.hito-eliminar, .campo-personalizado-item button {
    background: none; border: none; cursor: pointer; color: var(--color-texto-suave); font-size: 14px;
}
.fila-hito-form, .fila-campo-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fila-hito-form input, .fila-campo-form input, .fila-campo-form select {
    padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 12px;
}
.fila-hito-form input[type="text"], .fila-campo-form input[type="text"] { flex: 1; min-width: 140px; }

.boton-toggle-campos {
    background: none; border: none; color: var(--color-primario); font-size: 11px; cursor: pointer; font-weight: 600;
}
.campo-personalizado-item { justify-content: space-between; }

/* ---------- MODAL GENÉRICO (reemplaza alert/confirm/prompt) ---------- */
#ui-modal-overlay { z-index: 900; } /* por encima del task-drawer (800), por si se abre uno dentro del otro */
#ui-modal-titulo { margin-top: 0; }
#ui-modal-cuerpo-extra label:first-child { margin-top: 0; }

.selector-colores-etiqueta { display: flex; gap: 10px; margin-top: 6px; }
.color-swatch-label { cursor: pointer; }
.color-swatch {
    display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; transition: transform 0.1s;
}
.color-swatch-label input:checked + .color-swatch { border-color: var(--color-texto); transform: scale(1.15); }

/* ---------- WORKLOAD (carga del equipo) ---------- */
.workload-persona { background: white; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.workload-persona-header {
    display: grid; grid-template-columns: 160px 1fr 140px; gap: 16px; align-items: center;
    padding: 12px 16px; cursor: pointer;
}
.workload-persona-header:hover { background: var(--color-fondo); }
.workload-persona-info { display: flex; flex-direction: column; }
.workload-barra-contenedor { background: var(--color-fondo); border-radius: 4px; height: 8px; overflow: hidden; }
.workload-barra { height: 8px; border-radius: 4px; }
.workload-barra-normal { background: var(--color-primario); }
.workload-barra-alerta { background: var(--color-alerta); }
.workload-barra-sobrecarga { background: var(--color-peligro); }
.workload-numeros { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; gap: 2px; }
.workload-badge-vencidas { color: var(--color-peligro); font-weight: 600; }
.workload-detalle { padding: 0 16px 12px; border-top: 1px solid var(--color-fondo); }
.workload-tarea-item {
    display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid var(--color-fondo);
}
.workload-tarea-item:hover { color: var(--color-primario); }

@media (max-width: 700px) {
    .workload-persona-header { grid-template-columns: 1fr; gap: 6px; }
    .workload-numeros { align-items: flex-start; flex-direction: row; gap: 10px; }
}

/* ---------- REGISTRO DE TIEMPO ---------- */
.tiempo-item {
    display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--color-fondo);
}
#drawer-form-tiempo { display: flex; gap: 8px; margin-top: 8px; }
#drawer-form-tiempo input[type="text"] { flex: 1; }

/* ---------- APROBACIONES ---------- */
.drawer-checkbox-linea { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 10px 0; }
.drawer-checkbox-linea input { width: auto; margin: 0; }
.aprobacion-caja { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.aprobacion-pendiente { background: #FFF6E5; }
.aprobacion-aprobada { background: #E8F5E9; }
.aprobacion-rechazada { background: #FBEAEA; }
.aprobacion-botones { display: flex; gap: 6px; }

/* ---------- MENCIONES @usuario ---------- */
.mencion-lista-flotante {
    position: absolute; bottom: 100%; left: 0; background: white; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 950; min-width: 180px; overflow: hidden; margin-bottom: 4px;
}
.mencion-opcion { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.mencion-opcion-activa, .mencion-opcion:hover { background: var(--color-primario-claro); color: var(--color-primario); }

/* ---------- CHAT: sidebar con categorías ---------- */
.chat-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.chat-nuevo-boton {
    background: var(--color-primario-claro); border: none; color: var(--color-primario); cursor: pointer;
    width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.chat-sidebar-categoria { font-size: 11px; text-transform: uppercase; color: var(--color-texto-suave); padding: 12px 16px 4px; margin: 0; }

/* ---------- CHAT: toolbar (fijados + buscador) ---------- */
.chat-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--color-borde); background: white; }
.chat-buscador { display: flex; gap: 6px; }
.chat-buscador input { padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 12px; }
.chat-buscador button { background: none; border: none; color: var(--color-primario); cursor: pointer; font-size: 12px; font-weight: 600; }
.chat-fijados-panel { background: #FFF9E8; padding: 10px 24px; font-size: 12px; max-height: 160px; overflow-y: auto; }
.chat-fijado-item { padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* ---------- CHAT: acciones de mensaje, reacciones ---------- */
.chat-mensaje-acciones { margin-left: auto; display: flex; gap: 6px; opacity: 0.55; transition: opacity 0.1s; }
.chat-mensaje-item:hover .chat-mensaje-acciones { opacity: 1; }
.chat-mensaje-acciones button {
    background: white; border: 1px solid var(--color-borde); border-radius: 4px; cursor: pointer;
    font-size: 10px; padding: 2px 6px; color: var(--color-texto-suave);
}
.chat-mensaje-acciones button:hover { color: var(--color-primario); border-color: var(--color-primario); }

.chat-reacciones-fila { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.chat-reaccion-chip {
    background: var(--color-primario-claro); border: 1px solid var(--color-primario); border-radius: 12px;
    padding: 1px 8px; font-size: 11px; cursor: pointer; color: var(--color-primario);
}
.selector-reaccion {
    display: none; gap: 6px; background: white; border: 1px solid var(--color-borde); border-radius: 8px;
    padding: 6px 8px; margin-top: 4px; width: fit-content; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.selector-reaccion span { cursor: pointer; font-size: 16px; }
.selector-reaccion span:hover { transform: scale(1.2); }

.chat-hilo-boton {
    background: none; border: none; color: var(--color-primario); font-size: 11px; font-weight: 600;
    cursor: pointer; margin-top: 4px; padding: 0;
}

/* ---------- CHAT: modal nuevo (DM/grupo/canal) ---------- */
.chat-nuevo-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--color-borde); }
.chat-nuevo-tab {
    background: none; border: none; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--color-texto-suave); border-bottom: 2px solid transparent;
}
.chat-nuevo-tab-activa { color: var(--color-primario); border-bottom-color: var(--color-primario); }
.chat-lista-checkboxes { max-height: 160px; overflow-y: auto; border: 1px solid var(--color-borde); border-radius: 6px; padding: 8px; }
.chat-lista-checkboxes label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; padding: 4px 0; }
.chat-lista-checkboxes input { width: auto; margin: 0; }

/* ---------- ESTADO ACTIVO/INACTIVO Y BUSCADOR DE CONTACTOS ---------- */
.punto-estado { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.punto-estado-activo { background: #10B981; }
.punto-estado-inactivo { background: #C4C4CC; }

.chat-lista-contactos { max-height: 200px; overflow-y: auto; border: 1px solid var(--color-borde); border-radius: 6px; margin-top: 6px; }
.chat-contacto-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid var(--color-fondo);
}
.chat-contacto-item:last-child { border-bottom: none; }
.chat-contacto-item:hover { background: var(--color-fondo); }
.chat-contacto-seleccionado { background: var(--color-primario-claro); }
.chat-contacto-item input[type="checkbox"] { width: auto; margin: 0; }
.chat-contacto-item .texto-suave { margin-left: auto; font-size: 11px; }

.chat-widget-nuevo {
    background: none; border: none; color: white; cursor: pointer; display: inline-flex; align-items: center; margin-left: 10px;
}

/* ---------- VISTA TIMELINE / GANTT ---------- */
.gantt-contenedor { background: white; border-radius: 10px; padding: 16px; }
.gantt-scroll { overflow-x: auto; }
.gantt-fila { display: flex; align-items: center; border-bottom: 1px solid var(--color-fondo); min-height: 36px; }
.gantt-encabezado { position: sticky; top: 0; background: white; z-index: 2; border-bottom: 2px solid var(--color-borde); }
.gantt-etiqueta-tarea {
    width: 200px; flex-shrink: 0; font-size: 12px; padding-right: 10px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; position: sticky; left: 0; background: white; z-index: 1;
}
.gantt-barras-area { position: relative; height: 26px; }
.gantt-dia { display: inline-block; text-align: center; font-size: 10px; color: var(--color-texto-suave); flex-shrink: 0; }
.gantt-barra {
    position: absolute; height: 20px; top: 3px; border-radius: 5px; background: var(--color-primario);
    border-left: 4px solid var(--color-primario-oscuro); cursor: pointer; opacity: 0.85;
}
.gantt-barra:hover { opacity: 1; }
.gantt-barra-completada { background: var(--color-texto-suave); border-left-color: #999; }
.gantt-dependencias-lista { margin-top: 16px; font-size: 12px; color: var(--color-texto-suave); }
.gantt-dependencias-lista ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- COPILOTO IA ---------- */
.ia-conversacion {
    background: white; border-radius: 10px; padding: 20px; min-height: 400px; max-height: 60vh;
    overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;
}
.ia-mensaje { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.ia-mensaje p { margin: 0; }
.ia-mensaje ul { margin: 8px 0 0; padding-left: 18px; }
.ia-mensaje-usuario { align-self: flex-end; background: var(--color-primario); color: white; }
.ia-mensaje-bot { align-self: flex-start; background: var(--color-fondo); color: var(--color-texto); }
.ia-form { display: flex; gap: 10px; }
.ia-form input { flex: 1; padding: 12px 16px; border: 1px solid var(--color-borde); border-radius: 24px; font-size: 14px; }
.ia-form button { border-radius: 24px; }

/* ---------- COPILOTO IA (barra superior + modal) ---------- */
.copiloto-topbar-boton {
    display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--color-borde);
    border-radius: 20px; padding: 8px 16px; color: var(--color-texto-suave); font-size: 13px; cursor: pointer;
    margin-right: auto; /* empuja la campana a la derecha */
}
.copiloto-topbar-boton:hover { border-color: var(--color-acento); color: var(--color-acento); }

.copiloto-modal { width: 560px; }
.copiloto-conversacion { border-radius: 0; box-shadow: none; padding: 20px; min-height: 320px; max-height: 50vh; margin-bottom: 0; }

@media (max-width: 700px) {
    .copiloto-topbar-boton span { display: none; }
    .copiloto-modal { width: 100%; }
}

/* ---------- PENDIENTES PERSONALES: estilos base ---------- */
.punto-categoria { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- BANDEJA DE CORREO ---------- */
.correo-item-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.correo-item-botones { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.correo-bandeja { margin-top: 10px; border-top: 1px solid var(--color-fondo); padding-top: 10px; max-height: 300px; overflow-y: auto; }
.correo-mensaje-fila {
    display: grid; grid-template-columns: 140px 1fr 100px; gap: 10px; padding: 6px 0; font-size: 12px;
    border-bottom: 1px solid var(--color-fondo); align-items: center;
}
.correo-mensaje-remitente { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-mensaje-asunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-mensaje-no-leido .correo-mensaje-asunto { font-weight: 700; color: var(--color-texto); }
@media (max-width: 600px) {
    .correo-mensaje-fila { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- COPILOTO IA: overlay morado translúcido (se ve el fondo) ---------- */
#copiloto-modal-overlay {
    background: rgba(108, 43, 205, 0.28);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---------- BRANDING "BY STUDENT XPERIENCE" ---------- */
.sidebar-marca { text-align: center; font-size: 9px; line-height: 1.4; color: rgba(255,255,255,0.4); padding: 8px 14px 14px; letter-spacing: 0.2px; }
.marca-login-flotante { color: rgba(255,255,255,0.75); font-size: 12px; margin-top: 16px; text-align: center; }
.marca-copiloto-modal { text-align: center; font-size: 10px; color: var(--color-texto-suave); padding: 0 0 12px; }

/* ---------- BADGE DE NAV EN SIDEBAR (ej. correo no leído) ---------- */
.sidebar-badge {
    background: var(--color-alerta); color: white; font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center;
    justify-content: center; padding: 0 5px; margin-left: auto;
}

/* ---------- PENDIENTES: grupos por categoría con drag & drop ---------- */
.grupo-pendientes { margin-bottom: 18px; }
.grupo-pendientes-header {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase;
    padding: 6px 0 6px 10px; border-left: 4px solid var(--color-primario); margin-bottom: 8px;
}
.grupo-pendientes-lista { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.grupo-vacio { padding: 10px; border: 1px dashed var(--color-borde); border-radius: 8px; text-align: center; font-size: 12px; }

.pendiente-item {
    display: flex; align-items: flex-start; gap: 8px; background: white; padding: 10px 14px; border-radius: 8px; cursor: grab;
}
.pendiente-item:active { cursor: grabbing; }
.pendiente-drag-handle { color: var(--color-borde); font-size: 14px; line-height: 1; margin-top: 2px; letter-spacing: -2px; flex-shrink: 0; }
.pendiente-item input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.pendiente-cuerpo { flex: 1; min-width: 0; }
.pendiente-titulo-texto { font-size: 14px; outline: none; display: inline-block; }
.pendiente-completado .pendiente-titulo-texto { text-decoration: line-through; color: var(--color-texto-suave); }
.pendiente-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.pendiente-prioridad-select {
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; border: none; cursor: pointer;
}
.pendiente-prioridad-alta { background: #FBEAEA; color: var(--color-peligro); }
.pendiente-prioridad-media { background: #FFF6E5; color: #B8860B; }
.pendiente-prioridad-baja { background: #EAF6EC; color: #1B7A2E; }
.pendiente-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.pendiente-acciones button {
    background: none; border: 1px solid var(--color-borde); border-radius: 6px; padding: 3px 8px; font-size: 11px;
    cursor: pointer; color: var(--color-texto-suave);
}
.pendiente-acciones button:hover { border-color: var(--color-primario); color: var(--color-primario); }
.pendiente-form-rapido { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; background: white; padding: 12px; border-radius: 10px; }
.pendiente-form-rapido input[type="text"] { flex: 1; min-width: 160px; border: none; font-size: 14px; padding: 6px; }
.pendiente-form-rapido input[type="text"]:focus { outline: none; }
.pendiente-form-rapido select, .pendiente-form-rapido input[type="date"] { border: 1px solid var(--color-borde); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.categoria-eliminar { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); opacity: 0.5; margin-left: auto; }
.categoria-eliminar:hover { color: var(--color-peligro); opacity: 1; }

/* ---------- CLIENTE DE CORREO ---------- */
.correo-vacio-cta { background: white; border-radius: 12px; padding: 48px 32px; text-align: center; }
.correo-vacio-cta svg { color: var(--color-primario); margin-bottom: 12px; }
.correo-vacio-cta h2 { margin: 0 0 8px; }
.correo-vacio-cta p { max-width: 380px; margin: 0 auto 20px; }

.correo-app-layout { display: grid; grid-template-columns: 220px 1fr; height: calc(100vh - 62px); }

.correo-sidebar { background: white; border-right: 1px solid var(--color-borde); padding: 16px 12px; display: flex; flex-direction: column; }
.correo-redactar-boton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 24px; margin-bottom: 14px; }
.correo-selector-cuenta { width: 100%; padding: 6px 8px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 12px; margin-bottom: 14px; }
.correo-cuenta-unica { font-size: 12px; color: var(--color-texto-suave); padding: 0 4px; margin: 0 0 14px; word-break: break-all; }

.correo-carpetas-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.correo-carpeta-item {
    display: flex; align-items: center; gap: 10px; background: none; border: none; text-align: left; cursor: pointer;
    padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--color-texto); width: 100%;
}
.correo-carpeta-item:hover { background: var(--color-fondo); }
.correo-carpeta-item-activa { background: var(--color-primario-claro); color: var(--color-primario); font-weight: 600; }

.correo-sidebar-footer { border-top: 1px solid var(--color-fondo); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.correo-sidebar-link {
    display: flex; align-items: center; gap: 10px; background: none; border: none; text-align: left; cursor: pointer;
    padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--color-texto-suave); width: 100%;
}
.correo-sidebar-link:hover { background: var(--color-fondo); color: var(--color-texto); }

.correo-contenido { padding: 20px 28px; overflow-y: auto; }
.correo-lista-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.correo-lista-header h2 { margin: 0; font-size: 20px; }
.correo-refrescar { background: white; border: 1px solid var(--color-borde); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; color: var(--color-texto-suave); display: flex; align-items: center; justify-content: center; }
.correo-refrescar:hover { color: var(--color-primario); border-color: var(--color-primario); }

.correo-lista-mensajes-v2 { background: white; border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.correo-columnas-header {
    display: grid; grid-template-columns: 18px 34px 200px 1fr 90px 30px; align-items: center; gap: 14px;
    padding: 8px 16px; background: white; border-radius: 10px 10px 0 0; border-bottom: 2px solid var(--color-borde);
}
.correo-col-avatar { grid-column: span 2; }
.correo-col-checkbox { width: 18px; }
.correo-col-orden {
    background: none; border: none; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--color-texto-suave); cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 4px 0;
}
.correo-col-orden:hover { color: var(--color-primario); }
.correo-col-orden-activa { color: var(--color-primario); }
.correo-col-orden-fecha { justify-content: flex-end; text-align: right; }
.correo-col-flecha { font-size: 10px; }

.correo-fila-v2 {
    display: grid; grid-template-columns: 18px 34px 200px 1fr 90px 30px; align-items: center; gap: 14px;
    padding: 11px 16px; border-bottom: 1px solid var(--color-fondo); cursor: pointer; font-size: 13px; position: relative;
}
.correo-fila-v2:hover { background: #F7F8FC; box-shadow: inset 0 0 0 1px var(--color-borde); }
.correo-fila-v2:last-child { border-bottom: none; }
.correo-fila-leida { background: #FBFBFD; }
.correo-fila-seleccionada { background: var(--color-primario-claro) !important; }

.correo-punto-no-leido { width: 8px; height: 8px; border-radius: 50%; justify-self: center; }
.correo-fila-no-leida .correo-punto-no-leido { background: var(--color-primario); }
.correo-fila-leida .correo-punto-no-leido { background: transparent; }

.correo-avatar-inicial {
    width: 32px; height: 32px; border-radius: 50%; color: white;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.correo-fila-remitente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-texto-suave); font-weight: 500; }
.correo-fila-asunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-texto-suave); }
.correo-fila-no-leida .correo-fila-remitente, .correo-fila-no-leida .correo-fila-asunto { color: var(--color-texto); font-weight: 700; }
.correo-fila-fecha { text-align: right; white-space: nowrap; font-size: 12px; color: var(--color-texto-suave); }
.correo-fila-no-leida .correo-fila-fecha { color: var(--color-primario); font-weight: 700; }

/* Checkbox bonito por fila (a la derecha, como pediste) */
.correo-checkbox-bonito { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.correo-checkbox-bonito input { display: none; }
.correo-checkbox-visual {
    width: 18px; height: 18px; border: 2px solid var(--color-borde); border-radius: 5px; display: inline-block;
    position: relative; transition: all 0.15s; background: white;
}
.correo-checkbox-bonito input:checked + .correo-checkbox-visual {
    background: var(--color-primario); border-color: var(--color-primario);
}
.correo-checkbox-bonito input:checked + .correo-checkbox-visual::after {
    content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
    border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.correo-checkbox-visual:hover { border-color: var(--color-primario); }

/* Barra de acciones masivas (aparece al seleccionar 1 o más correos) */
.correo-barra-seleccion {
    display: flex; align-items: center; gap: 10px; background: var(--color-navy); color: white;
    padding: 10px 16px; border-radius: 10px 10px 0 0; font-size: 13px; margin-top: -1px;
}
.correo-barra-seleccion span { font-weight: 600; margin-right: 8px; }
.correo-barra-seleccion button {
    background: rgba(255,255,255,0.12); border: none; color: white; padding: 6px 12px; border-radius: 6px;
    font-size: 12px; cursor: pointer; font-weight: 600;
}
.correo-barra-seleccion button:hover { background: rgba(255,255,255,0.22); }
.correo-barra-seleccion .correo-boton-eliminar { background: var(--color-peligro); }
.correo-barra-seleccion .correo-boton-eliminar:hover { background: #B93A31; }
.correo-cancelar-seleccion { margin-left: auto; background: none !important; text-decoration: underline; }
.correo-barra-seleccion .correo-mover-contenedor { position: relative; }

.correo-volver { background: none; border: none; color: var(--color-primario); font-weight: 600; font-size: 13px; cursor: pointer; margin-bottom: 14px; padding: 0; }
.correo-cuerpo-mensaje-v2 { background: white; border-radius: 10px; padding: 24px; font-size: 14px; line-height: 1.7; }

@media (max-width: 900px) {
    .correo-app-layout { grid-template-columns: 1fr; height: auto; }
    .correo-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .correo-carpetas-nav { flex-direction: row; flex-wrap: wrap; }
    .correo-columnas-header { display: none; }
    .correo-fila-v2 { grid-template-columns: 12px 30px 1fr 24px; grid-template-areas: "punto avatar remitente check" ". . asunto check" ". . fecha check"; row-gap: 2px; }
    .correo-punto-no-leido { grid-area: punto; }
    .correo-avatar-inicial { grid-area: avatar; }
    .correo-checkbox-bonito { grid-area: check; }
    .correo-fila-remitente { grid-area: remitente; }
    .correo-fila-asunto { grid-area: asunto; }
    .correo-fila-fecha { grid-area: fecha; text-align: left; }
}

/* ---------- COMPOSER: vista inline que sustituye la bandeja (NO flota, NO es modal) ---------- */
#correo-vista-componer { flex-direction: column; height: 100%; }
.composer-inline-header {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-borde);
}
.composer-inline-header span { font-weight: 700; font-size: 16px; }

.composer-form-inline {
    background: white; border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.composer-campo { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-fondo); padding-bottom: 8px; margin-bottom: 8px; }
.composer-campo label { font-size: 12px; color: var(--color-texto-suave); width: 44px; flex-shrink: 0; }
.composer-campo input, .composer-campo select { border: none; flex: 1; font-size: 13px; padding: 4px 0; width: 100%; }
.composer-campo input:focus, .composer-campo select:focus { outline: none; }
.composer-campo-relativo { position: relative; }
.composer-cuerpo-inline { border: none; font-size: 14px; padding: 12px 0; flex: 1; min-height: 240px; font-family: inherit; overflow-y: auto; }
.composer-cuerpo-inline:focus { outline: none; }
.composer-cuerpo-inline:empty::before { content: attr(data-placeholder); color: var(--color-texto-suave); }

.composer-footer {
    display: flex; align-items: center; justify-content: flex-start; padding-top: 14px;
    border-top: 1px solid var(--color-borde); flex-shrink: 0;
}
.composer-enviar-boton { display: flex; align-items: center; gap: 8px; border-radius: 20px; padding: 9px 20px; }

.composer-cc-toggle { background: none; border: none; color: var(--color-texto-suave); font-size: 12px; cursor: pointer; flex-shrink: 0; }
.composer-cc-toggle:hover { color: var(--color-primario); }
.composer-chips-contenedor { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; cursor: text; }
.composer-chip {
    background: var(--color-primario-claro); color: var(--color-primario); font-size: 12px; font-weight: 600;
    padding: 3px 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.composer-chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: 13px; padding: 0; line-height: 1; }
.composer-chips-contenedor input { border: none; flex: 1; min-width: 120px; font-size: 13px; padding: 4px 0; }
.composer-chips-contenedor input:focus { outline: none; }

/* Dropdown de sugerencias de contactos: SIEMPRE debajo del campo, nunca lo tapa */
.composer-sugerencias-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 900; max-height: 160px; overflow-y: auto; margin-top: 4px;
}

.composer-adjuntos-lista { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.composer-adjunto-chip {
    background: var(--color-fondo); border-radius: 6px; padding: 4px 8px; font-size: 12px;
    display: inline-flex; align-items: center; gap: 6px;
}
.composer-adjunto-chip button { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); font-size: 13px; }

.composer-footer-iconos { display: flex; gap: 4px; margin-left: 16px; }
.composer-icono-boton {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; color: var(--color-texto-suave);
}
.composer-icono-boton:hover { background: var(--color-fondo); color: var(--color-primario); }

/* ---------- BANDEJA: badges de estado (leído/no leído/borrador) ---------- */
.correo-badge-borrador {
    background: var(--color-alerta); color: white; font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 4px; margin-right: 6px; text-transform: uppercase;
}

/* ---------- DETALLE: toolbar de acciones (responder, mover, eliminar, etc.) ---------- */
.correo-detalle-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.correo-detalle-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.correo-detalle-acciones button {
    display: flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--color-borde);
    border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--color-texto);
}
.correo-detalle-acciones button:hover { border-color: var(--color-primario); color: var(--color-primario); }
.correo-boton-eliminar:hover { border-color: var(--color-peligro) !important; color: var(--color-peligro) !important; }
.correo-mover-contenedor, .correo-etiquetar-contenedor { position: relative; }
.correo-mover-menu {
    position: absolute; top: 100%; left: 0; margin-top: 4px; background: white; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 160px; z-index: 20; overflow: hidden;
}
.correo-mover-opcion { padding: 8px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; }
.correo-mover-opcion:hover { background: var(--color-fondo); }
.correo-etiquetas-fila { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.correo-detalle-remitente-info { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.correo-avatar-grande { width: 44px; height: 44px; font-size: 16px; }
.correo-detalle-asunto { margin: 0 0 16px; font-size: 20px; }
.correo-adjuntos-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-fondo); }
.correo-adjunto-chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--color-fondo); padding: 8px 12px;
    border-radius: 8px; font-size: 12px; text-decoration: none; color: var(--color-texto);
}
.correo-adjunto-chip:hover { background: var(--color-primario-claro); color: var(--color-primario); }

/* ---------- PENDIENTES: layout de ancho completo tipo Recordatorios de macOS ---------- */
.pendientes-app-layout { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 62px); }

.pendientes-app-sidebar { background: white; border-right: 1px solid var(--color-borde); padding: 16px 12px; overflow-y: auto; }
.pendientes-resumen-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px;
    font-weight: 600; cursor: pointer; margin-bottom: 2px;
}
.pendientes-resumen-item:hover { background: var(--color-fondo); }
.pendientes-resumen-activo { background: var(--color-primario-claro); }
.pendientes-resumen-icono {
    width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pendientes-icono-todos { background: #4A4A55; }
.pendientes-icono-hoy { background: var(--color-primario); }
.pendientes-icono-vencidos { background: var(--color-peligro); }
.pendientes-icono-completados { background: #1B7A2E; }
.pendientes-resumen-contador { margin-left: auto; color: var(--color-texto-suave); font-weight: 700; font-size: 12px; }
.pendientes-sidebar-titulo { font-size: 11px; text-transform: uppercase; color: var(--color-texto-suave); padding: 16px 10px 6px; margin: 0; }

.pendientes-app-principal { padding: 24px 32px; overflow-y: auto; }
.pendientes-app-principal h1 { margin-top: 0; }

@media (max-width: 800px) {
    .pendientes-app-layout { grid-template-columns: 1fr; height: auto; }
    .pendientes-app-sidebar { display: flex; flex-wrap: wrap; gap: 4px; }
    .pendientes-resumen-item { flex: 1 1 45%; }
}

/* ---------- HOME DE PROYECTOS: estadísticas, filtros, badges de urgencia ---------- */
.proyectos-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.proyectos-stat-card { background: white; border-radius: 10px; padding: 16px; text-align: center; border-left: 4px solid var(--color-borde); }
.proyectos-stat-numero { display: block; font-size: 26px; font-weight: 800; color: var(--color-texto); }
.proyectos-stat-label { font-size: 12px; color: var(--color-texto-suave); }
.proyectos-stat-alerta { border-left-color: var(--color-peligro); }
.proyectos-stat-alerta .proyectos-stat-numero { color: var(--color-peligro); }
.proyectos-stat-primario { border-left-color: var(--color-primario); }
.proyectos-stat-primario .proyectos-stat-numero { color: var(--color-primario); }

.proyectos-filtros { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.proyectos-filtros input[type="text"] { flex: 1; min-width: 200px; padding: 9px 14px; border: 1px solid var(--color-borde); border-radius: 20px; font-size: 13px; }
.proyectos-filtros select { padding: 9px 12px; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 13px; }
.proyectos-filtro-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-texto-suave); white-space: nowrap; }
.proyectos-filtro-checkbox input { width: auto; margin: 0; }

.tarjeta-badges-accion { display: flex; gap: 6px; margin-top: 8px; }
.badge-vencidas { background: #FBEAEA; color: var(--color-peligro); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.badge-mis-tareas { background: var(--color-primario-claro); color: var(--color-primario); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }

.proyectos-vacio-cta { grid-column: 1 / -1; background: white; border-radius: 12px; padding: 48px 32px; text-align: center; }
.proyectos-vacio-cta h3 { margin-top: 0; }

@media (max-width: 800px) {
    .proyectos-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- DETALLE DE PROYECTO: resumen ejecutivo ---------- */
.proyecto-resumen-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.proyecto-resumen-titulo h1 { margin: 4px 0; }

.proyecto-resumen-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.proyecto-stat { background: white; border-radius: 10px; padding: 12px 14px; text-align: center; }
.proyecto-stat-numero { display: block; font-size: 20px; font-weight: 800; color: var(--color-texto); }
.proyecto-stat-texto { font-size: 13px; font-weight: 700; }
.proyecto-stat-label { font-size: 11px; color: var(--color-texto-suave); }
.proyecto-stat-alerta .proyecto-stat-numero { color: var(--color-peligro); }

.proyecto-alerta-vencidas {
    background: #FBEAEA; color: #7A2E27; border-radius: 8px; padding: 10px 16px; font-size: 13px; margin-bottom: 20px;
}
.proyecto-alerta-vencidas a { color: var(--color-peligro); font-weight: 600; text-decoration: underline; }

@media (max-width: 900px) {
    .proyecto-resumen-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- CONFIGURACIÓN AVANZADA (colapsable, al final de la página) ---------- */
.proyecto-config-avanzada { margin-top: 32px; border-top: 1px solid var(--color-borde); padding-top: 16px; }
.proyecto-config-avanzada-toggle {
    display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
    color: var(--color-texto-suave); font-size: 13px; font-weight: 600; padding: 8px 0;
}
.proyecto-config-avanzada-toggle:hover { color: var(--color-primario); }
.proyecto-config-avanzada-flecha { transition: transform 0.15s; margin-left: 4px; }
.proyecto-config-avanzada-abierta .proyecto-config-avanzada-flecha { transform: rotate(180deg); }

/* ---------- COPILOTO IA: rediseño estilo chat con header de contacto ---------- */
.copiloto-header-v2 {
    display: flex; align-items: center; gap: 10px; padding: 14px 20px;
    background: linear-gradient(135deg, var(--color-navy), var(--color-acento));
    color: white; border-radius: 14px 14px 0 0;
}
.copiloto-avatar-v2 {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.copiloto-header-textos { display: flex; flex-direction: column; flex: 1; }
.copiloto-header-textos strong { font-size: 14px; }
.copiloto-estado-linea { font-size: 11px; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 5px; }
.copiloto-punto-verde { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; display: inline-block; }
.copiloto-header-v2 .boton-cerrar { color: white; }

.copiloto-conversacion { background: var(--color-fondo); display: flex; flex-direction: column; gap: 12px; border-radius: 0; padding: 18px 16px; margin-bottom: 0; }

.ia-mensaje-usuario-v2 {
    align-self: flex-end; max-width: 78%; background: var(--color-primario); color: white;
    padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: 14px;
}
.ia-mensaje-usuario-v2 p { margin: 0; }

.ia-mensaje-bot-v2 {
    align-self: flex-start; max-width: 85%; background: white; border-radius: 14px 14px 14px 4px;
    padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--color-borde);
}
.ia-mensaje-bot-etiqueta {
    display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--color-acento); margin-bottom: 4px; letter-spacing: 0.3px;
}
.ia-mensaje-bot-cuerpo { font-size: 14px; color: var(--color-texto); }
.ia-mensaje-bot-cuerpo p { margin: 0 0 8px; }
.ia-mensaje-bot-cuerpo p:last-child { margin-bottom: 0; }
.ia-mensaje-bot-cuerpo ul { margin: 4px 0 10px; padding-left: 18px; }
.ia-mensaje-bot-cuerpo li { margin-bottom: 4px; }
.ia-mensaje-bot-cuerpo strong { color: var(--color-primario); font-weight: 700; }
.copiloto-md-titulo { font-weight: 700; margin: 10px 0 4px !important; font-size: 13px; }
.copiloto-md-titulo:first-child { margin-top: 0 !important; }

.copiloto-form-v2 {
    display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--color-borde); background: white;
}
.copiloto-form-v2 input {
    flex: 1; padding: 11px 16px; border: 1px solid var(--color-borde); border-radius: 24px; font-size: 14px; background: var(--color-fondo);
}
.copiloto-form-v2 input:focus { outline: none; border-color: var(--color-primario); }
.copiloto-enviar-v2 {
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primario), var(--color-acento)); color: white;
    display: flex; align-items: center; justify-content: center;
}
.copiloto-enviar-v2:hover { opacity: 0.9; }

/* ---------- BASE DE CONOCIMIENTO DEL COPILOTO (por proyecto) ---------- */
.notas-copiloto-proyecto { background: white; border-radius: 10px; padding: 18px 20px; margin: 24px 0; border-left: 4px solid var(--color-acento); }
.notas-copiloto-proyecto h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-acento); }
.notas-copiloto-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; cursor: pointer; padding: 0; text-align: left;
}
.notas-copiloto-ver-detalle { font-size: 12px; color: var(--color-acento); font-weight: 600; white-space: nowrap; }
.nota-copiloto-item { background: var(--color-fondo); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.nota-copiloto-item p { margin: 0 0 4px; font-size: 13px; }
.nota-copiloto-meta { display: flex; justify-content: space-between; align-items: center; }
.nota-copiloto-meta button { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); font-size: 14px; }
.nota-copiloto-meta button:hover { color: var(--color-peligro); }

/* ---------- COPILOTO: animación de "pensando" (puntos rebotando) ---------- */
.copiloto-pensando { display: flex; gap: 4px; padding: 4px 2px; }
.copiloto-pensando span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--color-acento);
    animation: copiloto-rebote 1.2s infinite ease-in-out;
}
.copiloto-pensando span:nth-child(2) { animation-delay: 0.15s; }
.copiloto-pensando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes copiloto-rebote {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- COPILOTO: sugerencias clicables + transparencia de fuentes ---------- */
.copiloto-sugerencias { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.copiloto-sugerencias button {
    text-align: left; background: var(--color-primario-claro); border: none; color: var(--color-primario);
    padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.copiloto-sugerencias button:hover { background: var(--color-primario); color: white; }
.copiloto-mensaje-progreso { margin-top: 6px; font-size: 11px; }
.copiloto-fuentes-usadas {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-borde);
    font-size: 11px; color: var(--color-texto-suave);
}
.copiloto-aviso-reducido { margin-top: 6px; font-size: 11px; color: #B8860B; }
.copiloto-boton-reintentar {
    margin-top: 8px; background: var(--color-primario-claro); color: var(--color-primario); border: none;
    padding: 6px 14px; border-radius: 16px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.copiloto-boton-reintentar:hover { background: var(--color-primario); color: white; }

/* ---------- PWA: botones de instalar / activar notificaciones ---------- */
.sidebar-pwa-botones { padding: 0 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-pwa-boton {
    display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: none;
    color: rgba(255,255,255,0.85); padding: 8px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; width: 100%;
}
.sidebar-pwa-boton:hover { background: rgba(255,255,255,0.16); color: white; }

/* App de escritorio de Mac: deja espacio arriba para los botones nativos de cerrar/minimizar/maximizar */
.flowsx-app-escritorio-mac .sidebar { padding-top: 26px; }
.flowsx-app-escritorio-mac .topbar, .flowsx-app-escritorio-mac .correo-header { padding-top: 26px; }

.login-recordar-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; margin-top: 14px; color: var(--color-texto-suave); }
.login-recordar-label input { width: auto; margin: 0; }

/* ---------- RESUMEN COMPACTO DEL PROYECTO (colapsable) ---------- */
.proyecto-resumen-compacto {
    display: flex; justify-content: space-between; align-items: center; background: white;
    border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; cursor: pointer; gap: 10px; flex-wrap: wrap;
}
.proyecto-resumen-compacto-izq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.proyecto-resumen-compacto-dato { color: var(--color-texto-suave); }
.proyecto-resumen-compacto-alerta { color: var(--color-peligro); font-weight: 700; }
.proyecto-resumen-toggle { background: none; border: none; color: var(--color-primario); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ---------- FILTROS DEL TABLERO ---------- */
.tablero-filtros { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.tablero-buscador-tarjetas {
    flex: 1; min-width: 180px; max-width: 320px; display: flex; align-items: center; gap: 6px;
    background: white; border: 1px solid var(--color-borde); border-radius: 20px; padding: 6px 14px; color: var(--color-texto-suave);
}
.tablero-buscador-tarjetas input { flex: 1; border: none; background: none; font-size: 13px; padding: 0; color: var(--color-texto); }
.tablero-buscador-tarjetas input:focus { outline: none; }
.filtro-mis-tarjetas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-texto-suave); white-space: nowrap; }
.filtro-mis-tarjetas input { width: auto; margin: 0; }

.filtro-desplegable-contenedor { position: relative; }
.filtro-desplegable-boton {
    display: flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--color-borde);
    border-radius: 8px; padding: 7px 12px; font-size: 12px; color: var(--color-texto); cursor: pointer;
}
.filtro-desplegable-boton:hover { border-color: var(--color-primario); }
.filtro-contador-bolita {
    display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
    background: var(--color-primario); color: white; border-radius: 8px; font-size: 10px; font-weight: 700; padding: 0 4px;
}
.filtro-desplegable-menu {
    position: absolute; top: calc(100% + 4px); left: 0; background: white; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 60; min-width: 200px; max-height: 260px; overflow-y: auto; padding: 6px;
}
.filtro-desplegable-opcion {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.filtro-desplegable-opcion:hover { background: var(--color-fondo); }
.filtro-desplegable-opcion input { width: auto; margin: 0; }

.filtro-desplegable-menu-buscable input[type="text"] {
    width: 100%; border: none; border-bottom: 1px solid var(--color-borde); padding: 8px; font-size: 13px; margin-bottom: 4px;
}
.filtro-desplegable-menu-buscable input[type="text"]:focus { outline: none; border-color: var(--color-primario); }
.dependencia-opcion { white-space: normal; }

/* ---------- TARJETA: reordenar, etiquetas de color, subtareas ---------- */
.tarjeta-tarea { border-left-width: 4px; }
.tarjeta-siendo-arrastrada { opacity: 0.4; }
.tarjeta-reordenar {
    position: absolute; top: 4px; left: 4px; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.15s;
}
.tarjeta-tarea:hover .tarjeta-reordenar { opacity: 0.7; }
.tarjeta-reordenar button { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); padding: 0; line-height: 0.7; }
.tarjeta-reordenar button:hover { color: var(--color-primario); }
.titulo-tarea { padding-left: 14px; }

.tarjeta-etiquetas-puntos { display: flex; gap: 4px; margin-bottom: 6px; padding-left: 14px; }
.etiqueta-punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.tarjeta-subtareas-contador { display: flex; align-items: center; gap: 3px; color: var(--color-texto-suave); }

/* ---------- SUBTAREAS (checklist dentro del panel de detalle) ---------- */
.subtarea-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; }
.subtarea-item input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.subtarea-titulo-editable {
    flex: 1; border: none; background: none; font-size: 13px; padding: 4px 6px; border-radius: 5px;
    color: var(--color-texto); min-width: 0;
}
.subtarea-titulo-editable:hover, .subtarea-titulo-editable:focus { background: var(--color-fondo); outline: none; }
.subtarea-fecha { border: 1px solid transparent; background: none; font-size: 11px; color: var(--color-texto-suave); border-radius: 5px; padding: 3px 4px; width: 108px; }
.subtarea-fecha:hover, .subtarea-fecha:focus { border-color: var(--color-borde); outline: none; }
.subtarea-texto-completada { text-decoration: line-through; color: var(--color-texto-suave); }
.subtarea-reordenar { display: flex; flex-direction: column; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.subtarea-item:hover .subtarea-reordenar { opacity: 0.6; }
.subtarea-reordenar button { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); padding: 0; line-height: 0.7; }
.subtarea-reordenar button:hover:not(:disabled) { color: var(--color-primario); }
.subtarea-reordenar button:disabled { opacity: 0.3; cursor: not-allowed; }
.subtarea-eliminar { background: none; border: none; color: var(--color-texto-suave); cursor: pointer; font-size: 15px; opacity: 0; flex-shrink: 0; }
.subtarea-item:hover .subtarea-eliminar { opacity: 1; }
.subtarea-eliminar:hover { color: var(--color-peligro); }

/* ---------- MIS PENDIENTES: tarjetas de proyecto asignadas a mí ---------- */
.pendientes-seccion-asignadas-titulo { margin-top: 28px; }
.pendientes-tarjetas-asignadas { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-asignada-item {
    display: flex; align-items: center; gap: 10px; background: white; border-radius: 8px; padding: 10px 14px;
    border-left: 4px solid var(--color-borde); text-decoration: none; color: var(--color-texto); font-size: 13px;
}
.tarjeta-asignada-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.tarjeta-asignada-proyecto { color: var(--color-texto-suave); font-size: 11px; white-space: nowrap; }
.tarjeta-asignada-titulo { flex: 1; font-weight: 500; }
.tarjeta-asignada-fecha { font-size: 12px; color: var(--color-texto-suave); white-space: nowrap; }
.tarjeta-asignada-vencida { color: var(--color-peligro); font-weight: 700; }

/* ---------- CORREO: buscador y paginador ---------- */
.correo-lista-header { display: flex; align-items: center; gap: 12px; }
.correo-buscador {
    flex: 1; display: flex; align-items: center; gap: 6px; background: var(--color-fondo);
    border-radius: 20px; padding: 6px 14px; color: var(--color-texto-suave);
}
.correo-buscador input {
    flex: 1; border: none; background: none; font-size: 13px; padding: 2px 0; color: var(--color-texto);
}
.correo-buscador input:focus { outline: none; }
.correo-buscador-limpiar { background: none; border: none; color: var(--color-texto-suave); font-size: 15px; cursor: pointer; padding: 0 2px; }
.correo-buscador-limpiar:hover { color: var(--color-peligro); }

.correo-paginador {
    display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0;
    font-size: 12px; color: var(--color-texto-suave);
}
.correo-paginador button {
    background: white; border: 1px solid var(--color-borde); border-radius: 6px; padding: 6px 12px;
    font-size: 12px; cursor: pointer; color: var(--color-texto);
}
.correo-paginador button:hover:not(:disabled) { border-color: var(--color-primario); color: var(--color-primario); }
.correo-paginador button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- COMENTARIOS: editor con emoticones, imagen pegada, "ver más" ---------- */
.comentario-editor-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; position: relative; }
.comentario-editor-barra > button { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px; border-radius: 5px; }
.comentario-editor-barra > button:hover { background: var(--color-fondo); }
.comentario-editor-cuerpo {
    min-height: 46px; border: 1px solid var(--color-borde); border-radius: 8px; padding: 8px 10px;
    font-size: 13px; margin-bottom: 8px;
}
.comentario-editor-cuerpo:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-claro); }
.comentario-editor-cuerpo:empty::before { content: attr(data-placeholder); color: var(--color-texto-suave); }
.comentario-imagen-pegada { max-width: 100%; border-radius: 6px; margin: 4px 0; display: block; }

.emoji-menu { display: none; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 6px; top: calc(100% + 4px); left: 0; }
.emoji-opcion { background: none; border: none; font-size: 17px; cursor: pointer; padding: 4px; border-radius: 5px; }
.emoji-opcion:hover { background: var(--color-fondo); }

.comentario-item { padding: 8px 0; border-bottom: 1px solid var(--color-fondo); }
.comentario-contenido { font-size: 13px; margin: 3px 0; }
.comentario-contenido.comentario-colapsado { max-height: 90px; overflow: hidden; position: relative; }
.comentario-contenido.comentario-colapsado::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px;
    background: linear-gradient(transparent, white);
}
.comentario-contenido img { max-width: 100%; border-radius: 6px; }
.comentario-ver-mas { font-size: 12px; color: var(--color-primario); font-weight: 600; text-decoration: none; }
.comentario-ver-mas:hover { text-decoration: underline; }