/**
 * CEO Agenda - Stylesheet
 * Mission Control Theme
 */

:root {
    /* ── Superficies ──────────────────────────────────────────────────────
       Fondo casi negro con sesgo frío mínimo. Cada nivel se separa lo justo
       para distinguirse sin que haga falta un borde fuerte. */
    --color-bg-primary: #0a0c10;   /* lienzo */
    --color-bg-secondary: #12151b; /* cabecera y navegación */
    --color-bg-tertiary: #1e232c;  /* controles y superficies elevadas */
    --color-bg-card: #171b22;      /* tarjetas: contraste suficiente con el lienzo */

    /* ── Acento ───────────────────────────────────────────────────────────
       El mismo cian de siempre. Lo que cambia no es el tono sino dónde
       aparece: antes estaba en textos, bordes, íconos y títulos; ahora marca
       el foco y la acción principal, y nada más. */
    --color-accent-primary: #00d4ff;
    --color-accent-secondary: #0099cc;
    --color-accent-tertiary: #00f2ff;

    /* ── Semánticos ───────────────────────────────────────────────────────
       Menos saturados que los originales: sobre fondo casi negro, un color
       puro vibra y cansa. */
    --color-success: #46c48a;
    --color-warning: #f5a524;
    --color-danger: #f0576a;
    --color-info: #4a90e2;

    /* ── Texto ────────────────────────────────────────────────────────────
       La corrección de fondo del rediseño. Antes los tres niveles eran
       cian (#e0f7ff, #80deea, #4dd0e1), así que la jerarquía no se leía y
       dos elementos distintos parecían el mismo. Ahora son grises con un
       sesgo frío apenas perceptible, que conviven con el cian sin
       competir. */
    --color-text-primary: #e6e9ef;
    --color-text-secondary: #a8b0bd;
    --color-text-muted: #6b7480;
    --color-text-faint: #454c57;

    /* Borde hairline: 1px que se intuye, no que se ve. El #006064 anterior
       era turquesa saturado y dibujaba una reja sobre toda la interfaz. */
    --color-border: #2a313b;
    /* Ancho de la columna de contenido. Las barras de cabecera y pestañas
       ocupan todo el ancho, pero su contenido se alinea con esta columna. */
    --ancho-columna: 1600px;

    --color-border-fuerte: #39424f;

    --color-neutro: #8892a6;

    /* ── Organizaciones ───────────────────────────────────────────────────
       Elegidos por Raúl. Son los ÚNICOS colores que identifican algo en las
       listas: el tipo de actividad no compite por color, se distingue por su
       sección. Así el color responde siempre a la misma pregunta — de quién
       es esto. */
    /* SIN USO desde la migración 009: estos cinco valores se copiaron a la
       columna agenda_organizaciones.color y ahora el dato manda. Se dejan
       escritos porque son el origen de lo que hay en la base — si algún día hay
       que reconstruirla, salieron de aquí. No los referencia ninguna regla.
         fpo #4a90e2 · isg #3fd1b5 · rga #dfa63a · poi #9b6ce6 · personal #cf5c52 */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    --gradient-secondary: linear-gradient(135deg, #46c48a 0%, #4a90e2 100%);
    --gradient-critical: linear-gradient(135deg, #f0576a 0%, #f5a524 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.18);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* App Container */
/* Sin tope de ancho: la cabecera y la barra de pestañas tienen que llegar de
   borde a borde. Con el tope puesto se cortaban a 1400px y dejaban una banda
   de otro color a los lados que hacia parecer la pagina a medio cargar.
   Lo que si se limita es el contenido, mas abajo: una linea de texto de dos
   mil pixeles no se lee, se recorre. */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* El fondo llega de borde a borde y el contenido se alinea con el de los
       paneles: el logo y las tarjetas empiezan en la misma vertical. Un
       max-width aqui limitaria tambien el fondo, que es lo contrario de lo
       que hace falta; el padding calculado hace de margen sin recortar la
       barra. En pantallas estrechas gana el spacing-xl y no pasa nada. */
    padding: 0.5rem max(var(--spacing-xl), calc((100% - var(--ancho-columna)) / 2 + var(--spacing-xl)));
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

/* El logotipo trae la marca dentro de la imagen, asi que su alto define el de
   la cabecera entera. */
/*
   El archivo del logo viene RECORTADO a su contenido, sin el margen
   transparente que traia el anterior. Por eso la altura de aqui bajo de 144 a
   72: antes se le daba altura al lienzo y la marca ocupaba menos de la mitad;
   ahora la altura es la de la marca. En pantalla se ve igual de alta que antes
   -- lo que cambia es que ya no se paga margen vacio en cada carga.

   Y es una marca apaisada, de 4:1. Con la altura vieja se iria a casi 600px de
   ancho y se comeria la cabecera.
*/
.logo-marca {
    height: 72px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.logo {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-glow);
}

.brand-text h1 {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tagline {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.date-display {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.btn-icon {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--color-accent-primary);
    color: white;
    transform: translateY(-2px);
}

/* Navigation Tabs */
.tabs-nav {
    display: flex;
    gap: var(--spacing-xs);
    /* Mismo truco que la cabecera: barra completa, contenido alineado. */
    padding: var(--spacing-sm) max(var(--spacing-xl), calc((100% - var(--ancho-columna)) / 2 + var(--spacing-xl)));
    flex-wrap: nowrap;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.tab-btn.active {
    background: var(--color-accent-primary);
    border-color: transparent;
    color: #062a33;
    font-weight: 600;
    box-shadow: none;
}

.tab-btn .badge {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tab-btn.active .badge {
    background: rgba(6, 42, 51, 0.18);
    color: #062a33;
}

/* Main Content */
.main-content {
    flex: 1;
    width: 100%;
    max-width: var(--ancho-columna);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-xl);
    overflow-y: auto;
}

/* Panels */
.panel {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-header {
    margin-bottom: var(--spacing-lg);
}

.panel-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.panel-header h2 i {
    color: var(--color-accent-primary);
}

/*
   Titulo del objetivo, renombrable desde su propia cabecera.

   El lapiz esta atenuado y se enciende al pasar por encima del titulo, no
   escondido del todo: escondido, nadie descubre que se puede renombrar, que es
   justo el problema que esto viene a resolver. En pantalla tactil no hay hover,
   asi que la opacidad de partida tiene que dejarlo visible igualmente.
*/
.objetivo-titulo-editable .titulo-lapiz {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    opacity: 0.45;
    flex-shrink: 0;
}

.objetivo-titulo-editable:hover .titulo-lapiz {
    opacity: 1;
}

.titulo-edicion {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.titulo-edicion input {
    flex: 1;
    min-width: 0;
    font-size: 1.3rem;
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-accent-primary);
    border-radius: var(--radius-md);
}

.titulo-edicion .btn-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.panel-desc {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

/* Progress Bar */
.progress-bar {
    margin-top: var(--spacing-md);
    height: 8px;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width var(--transition-slow);
}

.progress-text {
    position: absolute;
    right: 0;
    top: -20px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Input Sections */
.input-section {
    margin-bottom: var(--spacing-lg);
}

.input-group {
    display: flex;
    gap: var(--spacing-sm);
    background: var(--color-bg-secondary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.input-group input,
.input-group select {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all var(--transition-fast);
}

.input-group input {
    flex: 1;
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.input-group input::placeholder {
    color: var(--color-text-muted);
}

.input-group select {
    min-width: 150px;
    cursor: pointer;
}

/* Buttons */
.btn-primary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--color-border);
}

.btn-critical {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-critical);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-critical:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Filters */
.filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

/* Filtro de Daily Focus (pendientes / todas) */
.daily-filter {
    align-items: center;
    margin-top: calc(var(--spacing-xl) * -1 + var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

.daily-filter-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

/*
   El mismo par de botones en el Repositorio. Clase aparte y no `.daily-filter`
   porque aquella lleva un margen superior negativo calibrado para caer justo
   bajo el selector de dias; aqui arriba hay un formulario y tiraria del bloque.
*/
.repo-filter {
    align-items: center;
    margin-bottom: var(--spacing-md);
}

/* Day Selector */
.day-selector {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow-x: auto;
}

.day-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-width: 60px;
}

.day-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

.day-btn.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--color-bg-primary);
    font-weight: 600;
}

/* Selector Sections */
/* ══════════════════════════════════════════════════════════════════════════
   SELECTOR EN LINEA DEL FOCO DIARIO
   ══════════════════════════════════════════════════════════════════════════

   El hueco de cada seccion ES el boton. No hay ventana flotante: la caja que
   ya esta en pantalla cambia de contenido. Por eso aqui no hay z-index, ni
   overlay, ni bloqueo de scroll -- las tres cosas que trae un modal y las tres
   que fallan por su cuenta. */

.hueco-elegir {
    width: 100%;
    padding: var(--spacing-lg);
    background: transparent;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-style: italic;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.hueco-elegir:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
    background: rgba(0, 212, 255, 0.05);
}

.critical-section .hueco-elegir:hover {
    border-color: var(--color-danger);
    background: rgba(255, 23, 68, 0.08);
}

.btn-anadir-otra {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-fast);
}

.btn-anadir-otra:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

/* Cambiar la crítica: a la derecha, discreto y SIEMPRE visible. Los botones de
   dentro de la fila (.task-actions) solo salen al pasar el raton por encima, y
   en el movil eso no existe. */
.pista-cambiar {
    margin-top: var(--spacing-sm);
    display: flex;
    justify-content: flex-end;
}

.btn-cambiar-critica {
    background: transparent;
    border: none;
    padding: var(--spacing-xs) 0;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: color var(--transition-fast);
}

.btn-cambiar-critica:hover {
    color: var(--color-danger);
}

.subseccion-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.subseccion-contador {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.subseccion-contador.al-tope {
    color: var(--color-warning, var(--color-accent-primary));
}

.selector-linea {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.selector-linea-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* El tope de altura es lo que impide que la lista domine la pantalla: da igual
   que el Top 10 tenga diez tareas, la caja siempre ocupa lo mismo. */
.selector-linea-lista {
    max-height: 230px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.selector-linea-vacio {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* En la caja de la critica el rojo aparece SOLO en la fila que señalas: ahi
   dice "esta seria la critica si pulsas". En las diez a la vez no decia nada,
   porque ninguna lo es todavia. */
#selectorCritica .selector-task:hover {
    border-color: var(--color-danger);
    background: rgba(255, 23, 68, 0.08);
}

/* ── Reuniones del Foco diario ──────────────────────────────────────────────

   La hora, debajo del texto. Sin ella la lista del dia no dice lo unico que
   hace falta para saber que toca ahora. */
.meeting-hora {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Marcar una reunion como hecha se notaba solo porque el boton cambiaba de
   icono a una flecha de deshacer: no se veia un estado, se veia otro boton. El
   check se queda, y lo que cambia es que se enciende en verde. */
.task-btn.marca-hecha.activa {
    background: var(--color-success);
    color: #fff;
}

.task-btn.marca-hecha.activa:hover {
    background: var(--color-success);
    filter: brightness(1.15);
}

.meeting-item.hecha .meeting-text {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.meeting-item.hecha {
    opacity: 0.75;
}

/* ── Boton de accion CON rotulo ─────────────────────────────────────────────

   .task-btn mide 36x36 fijos: es para un icono y nada mas. Metiendole texto
   --"Repositorio"-- el rotulo se sale por los lados. Este crece con lo que
   lleva dentro. */
.btn-accion-rotulo {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
    padding: 6px 12px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-accion-rotulo:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

/* En Pendientes las acciones NO se esconden hasta el hover. Es una bandeja que
   se vacia: la accion es el motivo de la pantalla, no un extra. Y en el movil
   no hay hover, asi que escondidas no existen. */
.task-actions.siempre-visibles {
    display: flex;
}

.selector-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* El titulo del selector es tambien su interruptor: <summary> plegable */
.selector-section > summary {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-accent-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.selector-section > summary::-webkit-details-marker { display: none; }

/* Una flecha propia, que gira al abrir: el marcador nativo no se puede estilar */
.selector-section > summary::after {
    content: '';
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transition-fast);
}

.selector-section[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.selector-section > summary:hover { color: var(--color-text-primary); }

.selector-section[open] > summary { margin-bottom: var(--spacing-sm); }

.selector-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

.backlog-selector,
.top10-selector {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.selector-task {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.selector-task:hover {
    border-color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.05);
}

.selector-task.selected {
    border-color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.1);
}

.selector-task.critical {
    border-color: var(--color-danger);
    background: rgba(255, 23, 68, 0.1);
}

.selector-task.critical:hover {
    border-color: var(--color-danger);
    background: rgba(255, 23, 68, 0.15);
}

.selector-task-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.selector-task.selected .selector-task-checkbox {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

.selector-task.critical .selector-task-checkbox {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.selector-task-content {
    flex: 1;
}

.selector-task-text {
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.selector-task-project {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.selector-task-actions {
    display: flex;
    gap: var(--spacing-xs);
}

/* Meetings Section */
.meetings-section {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 153, 204, 0.05) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.meetings-section h3 {
    color: var(--color-accent-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.subsection-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

.meetings-list {
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.meeting-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent-primary);
}

.meeting-icon {
    width: 36px;
    height: 36px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-primary);
    flex-shrink: 0;
}

.meeting-content {
    flex: 1;
}

.meeting-text {
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.meeting-day {
    font-size: 0.75rem;
    color: var(--color-accent-primary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meeting-actions {
    display: flex;
    gap: var(--spacing-xs);
}

/* Meeting in Daily Focus Selector */
.meeting-selector-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 212, 255, 0.05);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.meeting-selector-item:hover {
    border-color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.1);
}

.meeting-selector-item.added {
    border-color: var(--color-success);
    background: rgba(0, 230, 118, 0.1);
}

.selector-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.selector-btn.add {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

.selector-btn.add:hover {
    background: var(--color-accent-tertiary);
}

.selector-btn.critical {
    background: var(--color-danger);
    color: white;
}

.selector-btn.critical:hover {
    background: #ff4567;
}

.empty-critical {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Meetings Subsection in Daily Focus */
.meetings-subsection {
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.meetings-subsection h3 {
    color: var(--color-accent-primary);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    background: var(--color-bg-tertiary);
}

.filter-btn.active {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: white;
}

/* Task Lists */
.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.task-list.compact {
    max-height: 300px;
    overflow-y: auto;
}

.task-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 9px 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.task-item:hover {
    border-color: var(--color-accent-primary);
    transform: translateX(4px);
}

.task-item.completed {
    opacity: 0.6;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.task-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.task-checkbox:hover {
    border-color: var(--color-accent-primary);
}

.task-checkbox.checked {
    background: var(--color-success);
    border-color: var(--color-success);
}

.task-checkbox.checked i {
    color: white;
    font-size: 0.75rem;
}

.task-content {
    flex: 1;
    min-width: 0;
}

.task-text {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    word-break: break-word;
}

.task-meta {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: 4px;
}

.task-project {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
    color: var(--color-text-muted);
}

.task-actions {
    display: none;
    gap: var(--spacing-xs);
}

.task-item.selected .task-actions,
.task-item:hover .task-actions {
    display: flex;
}

.task-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.task-btn:hover {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(1.1);
}

.task-btn.delete:hover {
    background: var(--color-danger);
    color: white;
}

.task-btn.move-top10 {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    color: var(--color-bg-primary);
    font-weight: bold;
}

.task-btn.move-top10:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
}

.task-item.selected {
    border-color: var(--color-accent-primary);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 153, 204, 0.05));
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.task-btn.promote {
    color: var(--color-warning);
}

.task-btn.promote:hover {
    background: var(--color-warning);
    color: white;
}

/* Critical Section */
.critical-section {
    background: rgba(240, 87, 106, 0.11);
    border: 1px solid rgba(240, 87, 106, 0.34);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.critical-section h3 {
    font-size: 1.25rem;
    color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.critical-subtitle {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
}

.critical-input {
    background: rgba(255, 255, 255, 0.05);
}

.critical-task-display {
    padding: 0;
}

.critical-task-display .task-item {
    background: transparent;
    border: none;
    padding: 0;
}

/* Subsections */
.subsection {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.subsection h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
}

/* Gratitude Section */
.gratitude-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.gratitude-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.gratitude-number {
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.gratitude-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-fast);
}

.gratitude-input-wrap:focus-within {
    border-color: var(--color-accent-primary);
}

.gratitude-input-wrap i {
    color: var(--color-accent-primary);
    font-size: 1.1rem;
}

.gratitude-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 1rem;
    outline: none;
}

.gratitude-input::placeholder {
    color: var(--color-text-muted);
}

/* Cierre Summary */
.cierre-summary {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.cierre-summary h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    border: 1px solid var(--color-border);
}

.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent-primary);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.btn-save-cierre {
    width: 100%;
    padding: var(--spacing-lg);
    background: var(--gradient-secondary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-save-cierre:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn var(--transition-normal);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-danger);
    color: white;
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: 60vh;
}

.project-input-group {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.project-input-group input {
    flex: 1;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    outline: none;
}

.project-input-group input:focus {
    border-color: var(--color-accent-primary);
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* El punto de color queda pegado al nombre sin esto. */
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.project-name {
    font-weight: 500;
}

.project-delete {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.project-delete:hover {
    background: var(--color-danger);
    color: white;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 2000;
}

.toast {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    animation: toastSlideIn var(--transition-normal);
    min-width: 300px;
}

.toast.success {
    border-left: 4px solid var(--color-success);
}

.toast.error {
    border-left: 4px solid var(--color-danger);
}

.toast.info {
    border-left: 4px solid var(--color-info);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-icon {
    font-size: 1.25rem;
}

.toast.success .toast-icon {
    color: var(--color-success);
}

.toast.error .toast-icon {
    color: var(--color-danger);
}

.toast.info .toast-icon {
    color: var(--color-info);
}

.toast-message {
    flex: 1;
    font-size: 0.9rem;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
}

.toast-close:hover {
    color: var(--color-text-primary);
}

/* Empty State */
.empty-state {
    text-align: left;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-faint);
}

/* El icono gigante centrado desaparece: era lo que mas ocupaba en una
   pantalla que la mayoria de los dias esta medio vacia. */
.empty-state i:not(.fa-spin) { display: none; }

/* El indicador de espera NO es un estado vacio, aunque comparta el hueco.
   Cuando se oculto el icono decorativo se oculto tambien el girador, asi que
   una llamada al LLM de un minuto se veia como una pantalla quieta con un
   texto gris. */
.cargando-llm {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    color: var(--color-text-secondary);
}

.cargando-llm i {
    font-size: 1.1rem;
    color: var(--color-accent-primary);
}

.cargando-llm small {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

.empty-state p {
    font-size: 0.85rem;
}

/* Responsive */
/* Rotulo alterno para la barra de pestañas: en pantalla ancha manda el largo */
.rotulo-corto { display: none; }

/* ============================================
   MOVIL
   La app se usa a diario desde el telefono, asi que esto no es un extra.
   ============================================ */
@media (max-width: 768px) {
    /* Marca a la izquierda y acciones a la derecha, en una sola linea.
       Apilarlas gastaba un tercio de la pantalla en la cabecera. */
    .header {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .header-brand { gap: var(--spacing-sm); min-width: 0; flex: 0 1 auto; }

    /* El logotipo manda sobre el alto de la cabecera: a 144px se comia media
       pantalla y se montaba encima de las acciones */
    /* Aqui .logo-marca ya es el ave sola (ver el <picture> del index), que es
       casi cuadrada: 40 de alto son 50 de ancho y dejan la cabecera libre para
       la fecha y los botones. */
    .logo-marca { height: 40px; }

    .header-actions { gap: 6px; min-width: 0; flex-shrink: 0; }

    /* La fecha larga no cabe: una linea, y lo que sobre se recorta */
    .date-display {
        padding: 5px 8px;
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .btn-icon { width: 32px; height: 32px; flex-shrink: 0; }

    .tabs-nav {
        padding: var(--spacing-sm) var(--spacing-md);
        scrollbar-width: none;
    }

    .tabs-nav::-webkit-scrollbar { display: none; }

    /* Los rotulos se quedan: cinco iconos sin texto no se distinguen entre si.
       Se acorta el mas largo y la barra se desplaza de lado si hace falta. */
    .rotulo-largo { display: none; }
    .rotulo-corto { display: inline; }

    .tab-btn {
        padding: 6px 10px;
        font-size: 0.78rem;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .main-content { padding: var(--spacing-md); }

    .panel-header h2 { font-size: 1.15rem; }

    /* Los siete dias caben si dejan de pelear por el ancho */
    .day-selector {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        padding: var(--spacing-sm);
        overflow: visible;
    }

    .day-btn {
        min-width: 0;
        padding: 8px 2px;
        font-size: 0.72rem;
    }

    /* El campo ocupa su linea; proyecto y boton comparten la de abajo */
    .input-group {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .input-group > input[type="text"] { flex: 1 0 100%; }
    .input-group > select { flex: 1 1 auto; min-width: 0; }
    .input-group > button { flex: 0 0 auto; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* El agradecimiento se mantiene en una linea: apilarlo partia el campo
       del icono y se leia como dos controles distintos */
    .gratitude-item { gap: var(--spacing-sm); }

    .gratitude-number {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .gratitude-input-wrap {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .gratitude-input-wrap input { min-width: 0; }

    /* Las acciones de cada tarea se van debajo del texto en vez de estrujarlo */
    .task-item {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .task-actions { margin-left: auto; }

    .selector-task { flex-wrap: wrap; row-gap: 8px; }
    .selector-task-actions { margin-left: auto; }

    .btn-primary.ancho-total,
    .cierre-guardar { font-size: 0.9rem; }
}

/* La actividad clave del día: fila entera teñida, no solo un borde.
   Es la única cosa roja de la pantalla, y por eso se encuentra sin buscarla.
   Las importantes y las rápidas no llevan color propio: se distinguen por la
   sección en la que están, lo que deja los cinco colores libres para las
   organizaciones. */
.task-item.es-clave {
    background: transparent;
    border: 1px solid rgba(240, 87, 106, 0.34);
    padding: 9px 12px;
}

.task-item.es-clave .task-checkbox { border-color: var(--color-danger); }

/* ============================================
   ORGANIZACIONES
   ============================================
   El chip de proyecto pasa a rectángulo relleno con el color de su
   organización. Es el único color que identifica algo en una lista, así que
   siempre responde a la misma pregunta: de quién es esto. */

.task-project {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* El nombre llega del dato, así que la asignación se hace por atributo: no
   hace falta que el JS sepa de colores.
   
   Y el selector NO nombra ningún componente. Una organización se ve igual
   esté donde esté -- en una tarea, en un objetivo o en lo que venga después.
   Atarlo a .task-project obligaba a duplicar la tabla por cada sitio nuevo, y
   fue exactamente lo que pasó con los objetivos: mismo dato, otro color. */
/*
   EL COLOR AHORA ES UN DATO, no una regla escrita por adelantado.

   Aqui habia cinco reglas clavadas -- una por organizacion, cada una con su
   fondo y su color de texto elegido a ojo:

       [data-org="ISG"] { background: var(--org-isg); color: #06201a; }

   Eso funcionaba mientras el catalogo fuera fijo, y tenia dos consecuencias:
   una organizacion nueva nacia SIN COLOR, y cambiar uno exigia tocar este
   archivo y desplegar.

   Desde la migracion 009 el color vive en agenda_organizaciones.color y llega
   en variables CSS puestas en linea por UI.chipOrg(). El del texto lo calcula
   Organizaciones.textoSobre(), que elige entre claro y oscuro el que mas
   contraste da -- y para los cinco colores originales elige lo mismo que habia
   escrito a mano aqui.

   Los valores de reserva cubren dos casos reales: el almacen JSON, que no
   devuelve organizaciones, y una etiqueta pintada antes de que carguen los
   datos. Mejor gris apagado que invisible.
*/
[data-org] {
    background: var(--org-fondo, var(--color-bg-tertiary));
    color:      var(--org-texto, var(--color-text-muted));
}

/* ============================================
   UTILIDADES
   ============================================
   Pocas y con nombre de intención, no de valor: `sep-12` dice "separación
   estándar", no "12 píxeles para siempre". Si la escala cambia, cambia aquí. */

.sep-8  { margin-top: 8px; }
.sep-10 { margin-top: 10px; }
.sep-12 { margin-top: 12px; }
.sep-abajo { margin-bottom: var(--spacing-lg); }
.sin-margen { margin: 0; }
.crece { flex: 1; }

.sub-acento { color: var(--color-accent-primary); margin: var(--spacing-md) 0 var(--spacing-sm); }
.sub-acento.amplio { margin-top: var(--spacing-lg); }

.marca-asignada { color: var(--color-success); font-size: 0.8rem; }
.meta-origen { color: var(--color-text-muted); font-size: 0.75rem; margin-left: 8px; }
.btn-compacto { font-size: 0.75rem; padding: 4px 8px; gap: 4px; }

/* ============================================
   CIERRE DEL DÍA
   ============================================
   Extraído de los estilos en línea que vivían dentro de app.js. Mismos
   valores: este bloque no cambia nada de aspecto, solo saca el estilo de la
   lógica para que los tokens puedan alcanzarlo. */

.cierre-dia {
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
}

.cierre-dia-cabecera { padding: 0; margin-bottom: var(--spacing-lg); }

.etiqueta-hoy {
    background: var(--color-accent-primary);
    color: #000;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    vertical-align: middle;
}

.puntaje {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}

.puntaje-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.puntaje-leyenda { font-size: 0.8rem; color: var(--color-text-muted); }

/* Iconos de la leyenda: el color dice de qué tipo habla cada uno */
.tipo-critica    { color: #ff6b35; }
.tipo-importante { color: var(--color-accent-primary); }
.tipo-rapida     { color: var(--color-text-muted); }

.puntaje-pct { font-weight: 700; font-size: 1rem; }
.puntaje-pct.nivel-alto  { color: var(--color-success); }
.puntaje-pct.nivel-medio { color: var(--color-accent-primary); }
.puntaje-pct.nivel-bajo  { color: var(--color-warning); }

.puntaje-barra {
    height: 10px;
    background: var(--color-bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
}

.puntaje-relleno {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));
    border-radius: 5px;
    transition: width 0.4s;
}

.puntaje-detalle {
    text-align: right;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.lista-resumen { margin-top: 12px; }

.lista-resumen-tit { font-size: 0.85rem; margin-bottom: 6px; }
.lista-resumen-tit.ok        { color: var(--color-success); }
.lista-resumen-tit.pendiente { color: var(--color-warning); }

.lista-resumen-item {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    padding: 2px 0 2px 12px;
}

.cierre-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.cierre-guardado { color: var(--color-success); font-size: 0.8rem; }

/* ============================================
   CIERRE SEMANAL  (vista del almacén JSON)
   ============================================
   Extraído de app.js sin cambiar un solo valor. Con Supabase esta vista la
   reemplaza el Balance Semanal, pero mientras el almacén sea JSON sigue
   siendo la que se ve. */

.cs-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-lg);
}

.cs-selector-etiqueta { color: var(--color-text-secondary); font-size: 0.9rem; white-space: nowrap; }

.cs-select {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 10px;
    flex: 1;
}

.cs-resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.cs-tarjeta { text-align: center; padding: 20px; border-radius: 12px; }
.cs-tarjeta.acento { background: linear-gradient(135deg, rgba(0,212,255,0.1) 0%, rgba(0,153,204,0.1) 100%); }
.cs-tarjeta.exito  { background: linear-gradient(135deg, rgba(0,230,118,0.1) 0%, rgba(0,176,255,0.1) 100%); }

.cs-cifra { font-size: 42px; font-weight: bold; color: var(--color-accent-primary); }
.cs-cifra.nivel-alto  { color: var(--color-success); }
.cs-cifra.nivel-medio { color: var(--color-accent-primary); }
.cs-cifra.nivel-bajo  { color: var(--color-warning); }

.cs-tarjeta-pie { color: var(--color-text-secondary); font-size: 0.85rem; }

.cs-leyenda {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.cs-stats { margin-bottom: 20px; }
.cs-titulo { margin-bottom: 10px; color: var(--color-text-primary); }

.cs-dias { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cs-dia  { display: flex; align-items: center; gap: 10px; }
.cs-dia-nombre { width: 72px; font-size: 13px; color: var(--color-text-secondary); }
.cs-dia-barras { flex: 1; }

.cs-barra { background: var(--color-bg-tertiary); overflow: hidden; }
.cs-barra.tareas { height: 6px; border-radius: 3px; margin-bottom: 3px; }
.cs-barra.puntos { height: 4px; border-radius: 2px; }

.cs-barra-relleno { height: 100%; }
.cs-barra-relleno.tareas { background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary)); }
.cs-barra-relleno.puntos { background: linear-gradient(90deg, var(--color-success), var(--color-info)); }

.cs-dia-cuenta { width: 44px; text-align: right; font-size: 13px; color: var(--color-text-primary); }
.cs-dia-puntos { width: 50px; text-align: right; font-size: 11px; color: var(--color-text-muted); }

.cs-leyenda-barras { font-size: 0.75rem; color: var(--color-text-muted); padding-left: 82px; }

.cs-muestra {
    display: inline-block;
    width: 10px; height: 4px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.cs-muestra.tareas { background: var(--color-accent-primary); }
.cs-muestra.puntos { background: var(--color-success); }

.cs-reflexion-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.cs-textarea {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
    resize: vertical;
}

.cs-boton { align-self: flex-start; }
.cs-solo-lectura { color: var(--color-text-muted); font-style: italic; margin-top: 8px; }

.cs-log { margin-top: 20px; }

.cs-log-titulo {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cs-reflexion {
    background: var(--color-bg-card);
    border-left: 3px solid var(--color-accent-primary);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 10px;
}

.cs-reflexion-texto { margin: 0 0 6px; color: var(--color-text-primary); font-size: 0.9rem; }
.cs-reflexion-fecha { color: var(--color-text-muted); font-size: 0.75rem; }
.cs-vacio { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 12px; }

/* ============================================
   BALANCE SEMANAL
   ============================================ */

.balance-cifras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.balance-cifra {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.balance-cifra-valor { display: block; font-size: 1.6rem; font-weight: 700; color: var(--color-accent-primary); }
.balance-cifra-valor small { font-size: 0.9rem; font-weight: 400; color: var(--color-text-muted); }

.balance-cifra-nombre {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.balance-bloque {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.balance-bloque h4 { margin-bottom: var(--spacing-md); font-size: 0.95rem; }
.balance-bloque h4 small { color: var(--color-text-muted); font-weight: 400; }
.balance-bloque p { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 8px; }

.balance-aclaracion { font-size: 0.76rem !important; color: var(--color-text-muted) !important; font-style: italic; }

/* La lectura de la IA. Borde de acento porque es lo que se viene a leer. */
.balance-bloque.narrativa { border-left: 3px solid var(--color-accent-primary); }
.balance-bloque.sin-narrativa { border-left: 3px solid var(--color-warning); }

.balance-senales { margin: var(--spacing-md) 0 0; padding-left: 18px; }
.balance-senales li { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 4px; }

/* La pregunta abierta cierra la narrativa e invita a escribir abajo */
.balance-pregunta {
    margin-top: var(--spacing-md) !important;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary) !important;
    font-size: 0.95rem !important;
}

/* --- Reparto de puntos --- */

.balance-sesgo-fila {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.balance-sesgo-nombre { width: 90px; color: var(--color-text-secondary); }
.balance-sesgo-barra { flex: 1; height: 8px; background: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden; }
.balance-sesgo-relleno { height: 100%; background: var(--color-accent-primary); transition: width var(--transition-slow); }

/* Color semantico por tipo, en linea con la jerarquia 9/3/1 */
.balance-sesgo-relleno.tipo-critica    { background: var(--color-danger); }
.balance-sesgo-relleno.tipo-importante { background: var(--color-accent-primary); }
.balance-sesgo-relleno.tipo-rapida     { background: var(--color-text-muted); }

.balance-sesgo-pct { width: 40px; text-align: right; font-weight: 600; }
.balance-sesgo-detalle { width: 86px; text-align: right; color: var(--color-text-muted); font-size: 0.78rem; }

/* --- Por dia --- */

.balance-dias { display: flex; gap: var(--spacing-sm); align-items: flex-end; height: 90px; }
.balance-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }

.balance-dia-barra {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.balance-dia-barra div { width: 100%; background: var(--gradient-primary); border-radius: var(--radius-sm); }
.balance-dia span { font-size: 0.7rem; color: var(--color-text-muted); }

/* --- Evolucion del cumplimiento (grafica de lineas) --- */

.balance-grafica-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.balance-grafica-cabecera h4 { margin-bottom: 0; }
.balance-grafica { width: 100%; height: auto; display: block; }

.balance-rejilla { stroke: var(--color-border); stroke-width: 0.5; }
.balance-eje   { fill: var(--color-neutro); font-size: 7px; text-anchor: end; }
.balance-eje-x { fill: var(--color-neutro); font-size: 7px; text-anchor: middle; }

.balance-grafica polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Mismo codigo de color que el reparto de puntos, para que las dos lecturas
   se reconozcan entre si sin tener que consultar la leyenda dos veces. */
.linea-general    { stroke: var(--color-accent-primary); stroke-dasharray: 4 3; stroke-width: 1.5; }
.linea-critica    { stroke: var(--color-danger); }
.linea-importante { stroke: var(--color-warning); }
.linea-rapida     { stroke: var(--color-neutro); }

.punto-general    { fill: var(--color-accent-primary); }
.punto-critica    { fill: var(--color-danger); }
.punto-importante { fill: var(--color-warning); }
.punto-rapida     { fill: var(--color-neutro); }

.balance-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.balance-leyenda-item { display: flex; align-items: center; gap: 5px; }
.balance-leyenda-item strong { color: var(--color-text-primary); }

/* Los puntos de la leyenda son <i>, no SVG: necesitan background, no fill.
   Con `fill` se pintaban invisibles y la leyenda quedaba sin su codigo de
   color, que es lo unico que permite leer la grafica. */
.balance-leyenda-item i {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.balance-leyenda-item i.punto-general    { background: var(--color-accent-primary); }
.balance-leyenda-item i.punto-critica    { background: var(--color-danger); }
.balance-leyenda-item i.punto-importante { background: var(--color-warning); }
.balance-leyenda-item i.punto-rapida     { background: var(--color-neutro); }

/* --- Reflexion --- */

.balance-bloque.reflexion { border-left: 3px solid var(--color-success); }
.balance-reflexion-texto { color: var(--color-text-primary) !important; font-size: 0.95rem !important; white-space: pre-wrap; }

@media (max-width: 768px) {
    .balance-cifras { grid-template-columns: repeat(2, 1fr); }
    .balance-sesgo-nombre { width: 70px; }
    .balance-sesgo-detalle { display: none; }
}

/* ============================================
   OBJETIVOS 1%
   ============================================ */

.objetivo-fila {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.objetivo-fila:hover {
    border-color: var(--color-accent-primary);
    transform: translateY(-1px);
}

.objetivo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.objetivo-titulo { font-weight: 600; }

.objetivo-org {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.objetivo-barra {
    height: 6px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.objetivo-barra.grande { height: 10px; border-radius: 5px; }

.objetivo-barra-relleno {
    height: 100%;
    background: var(--gradient-primary);
    transition: width var(--transition-slow);
}

.objetivo-pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.objetivo-pct { color: var(--color-accent-primary); font-weight: 600; }

/* Sin pasos promovidos el porcentaje no significa nada: se avisa */
.objetivo-cobertura.alerta { color: var(--color-warning); }

/* --- Detalle --- */

.objetivo-resumen {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.objetivo-resumen-pct {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-accent-primary);
    line-height: 1;
    text-align: center;
}

.objetivo-resumen-pct small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.objetivo-resumen-datos { flex: 1; }
.objetivo-resumen-datos p { font-size: 0.85rem; margin-top: 8px; }

.objetivo-aclaracion { color: var(--color-text-muted); font-size: 0.78rem !important; }

/* --- Bloques de la fase de acuerdo --- */

.objetivo-bloque {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.objetivo-bloque h4 { margin-bottom: 8px; font-size: 0.95rem; }
.objetivo-bloque ul { margin: 0; padding-left: 18px; }
.objetivo-bloque li { font-size: 0.88rem; margin-bottom: 4px; color: var(--color-text-secondary); }

/* El color dice de que tipo es cada bloque, sin repetir el acento por decoracion */
.objetivo-bloque.observaciones { border-left-color: var(--color-warning); }
.objetivo-bloque.supuestos     { border-left-color: var(--color-info); }
.objetivo-bloque.smart         { border-left-color: var(--color-accent-primary); }
.objetivo-bloque.manual        { border-left-color: var(--color-danger); }

.objetivo-bruto-eco {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.objetivo-textarea,
.objetivo-input {
    width: 100%;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    resize: vertical;
}

.objetivo-textarea:focus,
.objetivo-input:focus { border-color: var(--color-accent-primary); }

.objetivo-form { max-width: 720px; }

/* --- Preguntas --- */

.objetivo-pregunta { margin-bottom: var(--spacing-md); }
.objetivo-pregunta-texto { font-size: 0.92rem; margin-bottom: 2px; }

.objetivo-pregunta-porque {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    font-style: italic;
}

.objetivo-opcion {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.objetivo-opcion:hover { background: var(--color-bg-tertiary); }
.objetivo-opcion small { color: var(--color-text-muted); }

.objetivo-validar { margin: var(--spacing-md) 0 var(--spacing-xl); }

/* --- Pasos --- */

.objetivo-etapa { margin-bottom: var(--spacing-lg); }

.objetivo-etapa h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
}

.objetivo-paso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px var(--spacing-md);
    margin-bottom: 6px;
}

.objetivo-paso.en_backlog { border-left: 3px solid var(--color-info); }
.objetivo-paso.hecha      { border-left-color: var(--color-success); }
.objetivo-paso.descartada { opacity: 0.45; }
.objetivo-paso.hecha .objetivo-paso-titulo { text-decoration: line-through; }

.objetivo-paso-texto { flex: 1; }
.objetivo-paso-titulo { font-size: 0.9rem; }
.objetivo-paso-texto small { display: block; color: var(--color-text-muted); font-size: 0.78rem; margin-top: 2px; }

.objetivo-paso-acciones { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.objetivo-promover { font-size: 0.78rem; padding: 5px 10px; }

.objetivo-etiqueta {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--color-bg-tertiary);
}

.objetivo-etiqueta.hecha { color: var(--color-success); }

.objetivo-eliminar { margin-top: var(--spacing-xl); font-size: 0.8rem; }

@media (max-width: 768px) {
    .objetivo-resumen { flex-direction: column; align-items: flex-start; }
    .objetivo-paso    { flex-direction: column; align-items: flex-start; }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Animations */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
    }

    to {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
    }
}
/* ============================================
   PANTALLA DE ENTRADA
   ============================================
   Cubre todo mientras no hay sesion. Sin animacion de apertura: aparece antes
   de que se pinte nada, y una transicion ahi solo retrasaria el cursor. */

.pantalla-entrada {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: var(--color-bg-primary);
}

.pantalla-entrada[hidden] { display: none; }

/* La agenda no se pinta detras: sin sesion no hay datos que enseñar, y verla
   asomar un instante antes de taparla es peor que no verla. */
body.sin-sesion .app-container { visibility: hidden; }

.entrada-caja {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/*
   HACE FALTA, no es defensivo.

   El atributo `hidden` de HTML funciona porque el navegador trae
   `[hidden] { display: none }` en su hoja de estilos base -- y CUALQUIER regla
   del autor que fije `display` la gana, porque la del navegador tiene la
   especificidad mas baja que existe. Con `display: flex` arriba, poner
   `hidden` en una de estas cajas no la oculta.

   Sin esto, los tres formularios de la puerta (entrar, pedir el enlace, fijar
   la contrasena nueva) se pintaban los tres a la vez, uno al lado del otro.

   Es el mismo fallo que ya estaba resuelto para .pantalla-entrada unas lineas
   mas arriba. Quien anada otra caja con `display` y la oculte con `hidden`, va
   a necesitar su propia regla igual que estas dos.
*/
.entrada-caja[hidden] { display: none; }

.entrada-logo {
    height: 52px;
    width: auto;
    max-width: 100%;
    align-self: center;
    object-fit: contain;
}

.entrada-desc {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
}

.entrada-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.entrada-campo > span {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

.entrada-campo input {
    width: 100%;
    padding: 9px 12px;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.entrada-campo input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
}

/* Reserva su alto siempre: sin esto la caja da un salto al aparecer el error */
.entrada-aviso {
    min-height: 1.1rem;
    font-size: 0.8rem;
    text-align: center;
    color: transparent;
}

.entrada-aviso.error { color: var(--color-danger); }

#entradaBtn { width: 100%; justify-content: center; }

/* Las iniciales de quien esta dentro, y el modo de salir */
.usuario-chip {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-accent-primary);
}

.usuario-chip[hidden] { display: none; }

/* Campos de hora de las reuniones. Estrechos a proposito: un `time` con el
   ancho por defecto se come el espacio del texto de la reunión, que es lo que
   de verdad hay que leer. */
.campo-hora {
    flex: 0 0 auto;
    width: 7.5rem;
    min-width: 0;
    color-scheme: dark;
}

@media (max-width: 768px) {
    .campo-hora { flex: 1 1 45%; width: auto; }
}

/* ── Preferencias (dentro del modal del engranaje) ───────────────────────── */
/*
   Separadas del listado de proyectos por una linea, no por un modal aparte:
   son dos cosas distintas que comparten el mismo boton de la cabecera.
*/
.preferencias {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.preferencias-titulo {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md);
}

.preferencia {
    display: block;
}

.preferencia-nombre {
    display: block;
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 2px;
}

.preferencia-ayuda {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.preferencia select {
    width: 100%;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    outline: none;
}

.preferencia select:focus {
    border-color: var(--color-border-fuerte);
}

.preferencia select:disabled {
    opacity: 0.5;
}

/* ── Enlaces de la pantalla de entrada ───────────────────────────────────── */
/*
   Botones y no <a>: no llevan a ninguna URL, cambian de formulario en la misma
   pantalla. Un <a href="#"> ahi ensucia el historial y en teclado se comporta
   distinto de lo que parece.
*/
.entrada-enlace {
    background: none;
    border: none;
    padding: var(--spacing-sm) 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.entrada-enlace:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* El aviso informativo (no de error) del correo de recuperacion. */
.entrada-aviso.info {
    color: var(--color-text-secondary);
}

/* ── Trabajo del LLM corriendo en el servidor ────────────────────────────── */
/*
   Distinto de .cargando-llm, y la diferencia es de fondo: aquel SUSTITUYE al
   contenido porque la pantalla esta esperando; este va ENCIMA porque no espera
   nada. El trabajo corre en el servidor y la agenda se puede seguir usando.

   Por eso tambien tiene fondo y borde: es un aviso que convive con el
   contenido, no un estado de la pantalla.
*/
.trabajo-en-curso {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.trabajo-en-curso i {
    font-size: 1.1rem;
    color: var(--color-accent-primary);
}

.trabajo-en-curso small {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

/*
   La misma banda cuando el trabajo ya termino y el resultado espera porque el
   usuario esta escribiendo. Verde en vez de azul: es un estado distinto, no un
   giro mas del mismo. El boton empuja a la derecha con margin-left auto para
   que el texto se lea primero.
*/
.trabajo-en-curso.listo {
    border-left-color: var(--color-success);
}

.trabajo-en-curso.listo > i {
    color: var(--color-success);
}

.trabajo-acciones {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
    flex-shrink: 0;
}

.trabajo-acciones .btn-icon {
    width: 34px;
    height: 34px;
}

/* ── Edicion de reunion en sitio ─────────────────────────────────────────── */
/*
   Se edita donde esta y no en un modal: la reunion ya se ve con su dia y su
   hora, y sacarla a otra ventana obliga a volver a leer lo mismo en otro sitio.
*/
.meeting-item.editando {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent-primary);
}

.edicion-texto {
    width: 100%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    color: var(--color-text-primary);
    outline: none;
    margin-bottom: var(--spacing-sm);
}

.edicion-campos {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.edicion-campos select,
.edicion-campos input[type="time"] {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text-primary);
    outline: none;
}

.edicion-texto:focus,
.edicion-campos select:focus,
.edicion-campos input:focus {
    border-color: var(--color-accent-primary);
}

/* ── Estado de Google Calendar ───────────────────────────────────────────── */
.gcal-conectado {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.gcal-conectado i {
    color: var(--color-success, #4ade80);
}

/*
   El aviso de sincronizacion rota. Se ve, y a proposito: una sincronizacion que
   deja de funcionar en silencio es peor que no tenerla, porque uno sigue
   creyendo que sus reuniones estan en el calendario.
*/
.gcal-problema {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    border-left: 3px solid var(--color-danger, #f87171);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/*
   El aviso de que Google todavia no nos ha verificado. Ambar, no rojo: no es un
   error, es un paso incomodo que hay que atravesar. En rojo la gente cancela,
   que es justo lo que este aviso existe para evitar.
*/
.gcal-beta {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.gcal-beta i {
    color: var(--color-warning);
    margin-top: 2px;
}

.gcal-beta strong {
    display: block;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.gcal-beta p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Nota explicativa dentro de un modal. Para decir por que algo no esta, que es
   mas util que dejar el hueco sin explicacion. */
.nota-modal {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-border-fuerte);
    border-radius: var(--radius-sm);
}

/* ── Organizaciones: punto de color y paleta ──────────────────────────────── */
/*
   El punto usa la misma variable --org-fondo que las etiquetas, puesta en línea
   por el render. Así hay UN solo camino por el que el color llega al CSS.
*/
.org-punto {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--org-fondo, var(--color-bg-tertiary));
    cursor: pointer;
    padding: 0;
}

.org-punto:hover {
    border-color: var(--color-text-primary);
}

.paleta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

/* La que se despliega bajo una organización al pulsar su punto. */
.paleta-fila {
    padding: var(--spacing-sm) var(--spacing-md);
    margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.paleta-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--org-fondo);
    cursor: pointer;
    padding: 0;
}

.paleta-color:hover { transform: scale(1.15); }

/* El elegido lleva un anillo, no un check: un check encima cambia el color que
   se está intentando juzgar. */
.paleta-color.elegido {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 2px var(--color-bg-card);
}

.project-item .project-name { flex: 1; }

/* "Esta reunión está en tu Google Calendar". Discreto a propósito: es una
   confirmación, no una alerta — quien no la busque no debería tropezarse con
   ella. */
.marca-gcal {
    color: var(--color-accent-primary);
    opacity: 0.65;
    font-size: 0.85em;
    margin-left: 2px;
}