/* ═══════════════════════════════════════════
   VARIABLES Y RESET
═══════════════════════════════════════════ */
:root {
    --amber-50:  #FAEEDA;
    --amber-100: #FAC775;
    --amber-400: #EF9F27;
    --amber-600: #BA7517;
    --amber-800: #854F0B;
    --amber-900: #633806;

    --gray-50:  #F1EFE8;
    --gray-100: #D3D1C7;
    --gray-400: #888780;
    --gray-600: #5F5E5A;
    --gray-900: #2C2C2A;

    --red-50:  #FCEBEB;
    --red-400: #E24B4A;
    --red-600: #A32D2D;
    --red-100: #F7C1C1;

    --bg:        #F5F2EB;
    --bg-card:   #FFFFFF;
    --bg-muted:  #F1EFE8;
    --border:    rgba(0,0,0,0.1);
    --border-md: rgba(0,0,0,0.18);
    --text:      #2C2C2A;
    --text-muted:#5F5E5A;
    --text-hint: #888780;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);

    --topbar-h:  52px;
    --tagsbar-h: 40px;
    --detail-w:  300px;
}

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

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════════ */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════ */
button { cursor: pointer; font-family: inherit; font-size: 13px; }

.btn-primary {
    background: var(--amber-600);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: background 0.15s;
}
.btn-primary:hover { background: var(--amber-800); }

.btn-secondary {
    background: var(--bg-muted);
    color: var(--text-muted);
    border: 1px solid var(--border-md);
    padding: 7px 14px;
    border-radius: var(--radius-md);
    transition: background 0.15s;
}
.btn-secondary:hover { background: var(--gray-100); }

.btn-action {
    flex: 1;
    padding: 7px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-md);
    background: var(--bg-muted);
    color: var(--text);
    font-size: 12px;
    transition: background 0.15s;
}
.btn-action:hover { background: var(--gray-100); }
.btn-action.danger { color: var(--red-600); border-color: var(--red-100); background: var(--red-50); }
.btn-action.danger:hover { background: var(--red-100); }

/* ═══════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════ */
#topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.app-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--amber-800);
    letter-spacing: 0.3px;
}

.topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

#buscador {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-md);
    background: var(--bg-muted);
    color: var(--text);
    width: 200px;
    outline: none;
    transition: border-color 0.15s;
}
#buscador:focus { border-color: var(--amber-400); }

/* ═══════════════════════════════════════════
   BARRA DE ETIQUETAS
═══════════════════════════════════════════ */
#tags-bar {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    height: var(--tagsbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
    z-index: 99;
    overflow-x: auto;
}
#tags-bar::-webkit-scrollbar { display: none; }

.tags-label {
    font-size: 11px;
    color: var(--text-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

#tags-lista {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tag {
    font-size: 11px;
    padding: 3px 11px;
    border-radius: 20px;
    border: 1px solid var(--etq-bd, var(--border-md));
    background: var(--etq-bg, var(--bg-muted));
    color: var(--etq-tx, var(--text-muted));
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    user-select: none;
}
.tag:hover { border-color: var(--etq-bd, var(--amber-400)); color: var(--etq-tx, var(--amber-800)); }
.tag.active { background: var(--etq-bg, var(--amber-50)); border-color: var(--etq-bd, var(--amber-400)); color: var(--etq-tx, var(--amber-800)); font-weight: 500; }

/* ═══════════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════════ */
#main-body {
    position: fixed;
    top: calc(var(--topbar-h) + var(--tagsbar-h));
    left: 0; right: 0; bottom: 0;
    display: flex;
    overflow: hidden;
}

#left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ═══════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════ */
#timeline-panel {
    flex-shrink: 0;
    height: 45%;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

#timeline-container {
    width: 100%;
    height: 100%;
}

/* Estilos de vis-timeline */
.vis-timeline { border: none !important; background: var(--bg-card) !important; }
.vis-panel.vis-center { border: none !important; }
.vis-panel.vis-left { border: none !important; }
.vis-time-axis .vis-text { color: var(--text-hint) !important; font-size: 11px !important; font-family: inherit !important; }
.vis-time-axis .vis-grid.vis-minor { border-color: var(--border) !important; }
.vis-time-axis .vis-grid.vis-major { border-color: var(--border-md) !important; }

.vis-item {
    font-size: 11px !important;
    font-family: inherit !important;
    border-width: 1.5px !important;
    cursor: pointer !important;
}
/* Puntos: pastilla redondeada → momento puntual */
.vis-item.vis-point { border-radius: 20px !important; }
/* Rangos: rectángulo → duración con inicio y fin */
.vis-item.vis-range { border-radius: 4px !important; }
.vis-item.vis-selected {
    box-shadow: 0 0 0 3px var(--amber-50) !important;
}
.vis-item.tipo-exacta,
.vis-item.tipo-dia    { background: var(--amber-600) !important; border-color: var(--amber-800) !important; color: #fff !important; }
.vis-item.tipo-mes    { background: #BA7517cc !important; border-color: var(--amber-800) !important; color: #fff !important; }
.vis-item.tipo-anio   { background: var(--amber-400) !important; border-color: var(--amber-600) !important; color: var(--amber-900) !important; }
.vis-item.tipo-subjetivo { background: var(--gray-100) !important; border-color: var(--gray-400) !important; color: var(--gray-600) !important; border-style: dashed !important; }

/* Si el momento tiene etiqueta, usar su color */
.vis-item[class*=" etq-"] { background: var(--etq-bd) !important; border-color: var(--etq-tx) !important; color: #fff !important; }
.vis-item.tipo-subjetivo[class*=" etq-"] { background: var(--etq-bg) !important; border-color: var(--etq-bd) !important; color: var(--etq-tx) !important; border-style: dashed !important; }

.vis-item.vis-range .vis-item-overflow { overflow: visible !important; }

/* ═══════════════════════════════════════════
   LISTA DE MOMENTOS
═══════════════════════════════════════════ */
#list-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

#list-panel::-webkit-scrollbar { width: 4px; }
#list-panel::-webkit-scrollbar-thumb { background: var(--gray-100); border-radius: 4px; }

.momento-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 7px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.momento-card:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); }
.momento-card.selected { border-color: var(--amber-400); background: #FAEEDA18; }

.mc-fecha {
    font-size: 10px;
    color: var(--amber-600);
    font-weight: 500;
    min-width: 56px;
    padding-top: 2px;
    line-height: 1.4;
    flex-shrink: 0;
}
.mc-fecha.subjetivo { color: var(--text-hint); font-style: italic; }

.mc-body { flex: 1; min-width: 0; }

.mc-titulo {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc-tags {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.mc-tag {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--etq-bg, var(--amber-50));
    color: var(--etq-tx, var(--amber-800));
    border: 1px solid var(--etq-bd, var(--amber-400));
}

.mc-adjuntos {
    font-size: 10px;
    color: var(--text-hint);
    white-space: nowrap;
    padding-top: 3px;
    flex-shrink: 0;
}

.estado-vacio {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-hint);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ═══════════════════════════════════════════
   PANEL LATERAL DETALLE
═══════════════════════════════════════════ */
#detail-panel {
    width: var(--detail-w);
    flex-shrink: 0;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#detail-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

#detail-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-hint);
    padding: 4px;
    border-radius: var(--radius-sm);
}
#detail-close:hover { background: var(--bg-muted); }

#detail-fecha {
    font-size: 11px;
    color: var(--amber-600);
    font-weight: 500;
    margin-bottom: 5px;
}

#detail-titulo {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 7px;
    line-height: 1.3;
    padding-right: 24px;
}

#detail-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.detail-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--etq-bg, var(--amber-50));
    color: var(--etq-tx, var(--amber-800));
    border: 1px solid var(--etq-bd, var(--amber-400));
}

#detail-ubicacion {
    font-size: 11px;
    color: var(--text-hint);
    margin-bottom: 5px;
}

#detail-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

#detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
#detail-body::-webkit-scrollbar { width: 4px; }
#detail-body::-webkit-scrollbar-thumb { background: var(--gray-100); border-radius: 4px; }

.detail-section-title {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-hint);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    margin-top: 14px;
}
.detail-section-title:first-child { margin-top: 0; }

.adjuntos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
}

.adjunto-img-thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-muted);
    position: relative;
}
.adjunto-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s;
}
.adjunto-img-thumb:hover img { opacity: 0.85; }

.adjunto-img-desc {
    font-size: 9px;
    color: var(--text-hint);
    margin-top: 3px;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adjunto-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 5px;
    cursor: pointer;
    transition: border-color 0.15s;
    text-decoration: none;
    color: inherit;
}
.adjunto-doc-item:hover { border-color: var(--amber-400); }

.adjunto-doc-icono {
    font-size: 18px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.adjunto-doc-info { flex: 1; overflow: hidden; }
.adjunto-doc-nombre {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adjunto-doc-descripcion {
    font-size: 10px;
    color: var(--text-hint);
}

.sin-adjuntos {
    text-align: center;
    padding: 24px;
    color: var(--text-hint);
    font-size: 12px;
}

#detail-actions {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   MODAL CREAR / EDITAR
═══════════════════════════════════════════ */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

#modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

#modal-header h2 { font-size: 16px; font-weight: 500; }

#modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-hint);
    padding: 4px;
    border-radius: var(--radius-sm);
}
#modal-close:hover { background: var(--bg-muted); }

#modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
#modal-body::-webkit-scrollbar { width: 4px; }
#modal-body::-webkit-scrollbar-thumb { background: var(--gray-100); border-radius: 4px; }

#modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Formulario */
.form-grupo {
    margin-bottom: 14px;
}

.form-grupo label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.opcional { font-weight: 400; color: var(--text-hint); }

.form-grupo input[type="text"],
.form-grupo input[type="date"],
.form-grupo input[type="datetime-local"],
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--border-md);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus { border-color: var(--amber-400); background: #fff; }

.form-grupo textarea { resize: vertical; min-height: 70px; }

.form-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-hint {
    display: block;
    font-size: 11px;
    color: var(--text-hint);
    margin-top: 4px;
}

.form-mes-anio {
    display: flex;
    gap: 6px;
}
.form-mes-anio select { flex: 2; }
.form-mes-anio input  { flex: 1; min-width: 0; }

/* Etiquetas en formulario */
#form-etiquetas-disponibles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.form-etiqueta {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-md);
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.form-etiqueta.seleccionada {
    background: var(--etq-bg, var(--amber-50));
    border-color: var(--etq-bd, var(--amber-400));
    color: var(--etq-tx, var(--amber-800));
    font-weight: 500;
}

.etiqueta-nueva-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.etiqueta-nueva-fila {
    display: flex;
    gap: 6px;
}
.etiqueta-nueva-fila input {
    flex: 1;
    font-family: inherit;
    font-size: 12px;
    padding: 5px 9px;
    border: 1px solid var(--border-md);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text);
    outline: none;
}
.etiqueta-nueva-fila input:focus { border-color: var(--amber-400); }

/* Picker de color para etiquetas */
#etiqueta-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--etq-bg, var(--bg-muted));
    border: 2px solid var(--etq-bd, var(--border-md));
    transition: transform 0.1s;
}
.color-dot:hover { transform: scale(1.25); }
.color-dot.is-selected {
    outline: 2px solid var(--etq-bd, var(--amber-400));
    outline-offset: 2px;
}

/* Paleta de 18 colores para etiquetas */
.etq-ambar     { --etq-bg: hsl(43,90%,92%); --etq-bd: hsl(43,80%,52%); --etq-tx: hsl(43,80%,25%); }
.etq-naranja   { --etq-bg: hsl(22,90%,92%); --etq-bd: hsl(22,75%,55%); --etq-tx: hsl(22,75%,28%); }
.etq-terracota { --etq-bg: hsl(10,70%,92%); --etq-bd: hsl(10,60%,55%); --etq-tx: hsl(10,65%,28%); }
.etq-rojo      { --etq-bg: hsl(355,70%,93%); --etq-bd: hsl(355,65%,55%); --etq-tx: hsl(355,70%,28%); }
.etq-rosa      { --etq-bg: hsl(340,70%,93%); --etq-bd: hsl(340,60%,58%); --etq-tx: hsl(340,65%,30%); }
.etq-fucsia    { --etq-bg: hsl(320,65%,93%); --etq-bd: hsl(320,55%,58%); --etq-tx: hsl(320,65%,28%); }
.etq-malva     { --etq-bg: hsl(300,50%,93%); --etq-bd: hsl(300,45%,58%); --etq-tx: hsl(300,55%,28%); }
.etq-lavanda   { --etq-bg: hsl(275,60%,93%); --etq-bd: hsl(275,50%,60%); --etq-tx: hsl(275,60%,28%); }
.etq-indigo    { --etq-bg: hsl(255,65%,93%); --etq-bd: hsl(255,55%,58%); --etq-tx: hsl(255,65%,28%); }
.etq-pizarra   { --etq-bg: hsl(220,45%,93%); --etq-bd: hsl(220,40%,55%); --etq-tx: hsl(220,50%,25%); }
.etq-cielo     { --etq-bg: hsl(200,70%,92%); --etq-bd: hsl(200,60%,50%); --etq-tx: hsl(200,70%,25%); }
.etq-aguamarina{ --etq-bg: hsl(185,65%,91%); --etq-bd: hsl(185,55%,45%); --etq-tx: hsl(185,65%,23%); }
.etq-verdazul  { --etq-bg: hsl(170,60%,91%); --etq-bd: hsl(170,50%,42%); --etq-tx: hsl(170,60%,22%); }
.etq-menta     { --etq-bg: hsl(150,60%,91%); --etq-bd: hsl(150,50%,45%); --etq-tx: hsl(150,60%,22%); }
.etq-salvia    { --etq-bg: hsl(130,45%,91%); --etq-bd: hsl(130,40%,48%); --etq-tx: hsl(130,50%,22%); }
.etq-oliva     { --etq-bg: hsl(80,50%,90%);  --etq-bd: hsl(80,45%,42%);  --etq-tx: hsl(80,55%,20%);  }
.etq-lima      { --etq-bg: hsl(65,75%,90%);  --etq-bd: hsl(65,65%,45%);  --etq-tx: hsl(65,70%,22%);  }
.etq-arena     { --etq-bg: hsl(50,60%,91%);  --etq-bd: hsl(50,50%,52%);  --etq-tx: hsl(50,60%,25%);  }

/* ═══════════════════════════════════════════
   MODAL ADJUNTO
═══════════════════════════════════════════ */
#modal-adjunto-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#modal-adjunto {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

#modal-adjunto-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#modal-adjunto-header h2 { font-size: 15px; font-weight: 500; }

#modal-adjunto-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-hint);
    padding: 4px;
    border-radius: var(--radius-sm);
}
#modal-adjunto-close:hover { background: var(--bg-muted); }

#modal-adjunto-body { padding: 20px; }

#modal-adjunto-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.progreso-barra {
    height: 4px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
#progreso-fill {
    height: 100%;
    background: var(--amber-600);
    width: 0%;
    transition: width 0.3s;
}
#progreso-texto { font-size: 12px; color: var(--text-hint); }

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    cursor: pointer;
}

#lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#lightbox-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    opacity: 0.8;
}
#lightbox-close:hover { opacity: 1; }

#lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-md);
    object-fit: contain;
}

#lightbox-desc {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    text-align: center;
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICACIONES
═══════════════════════════════════════════ */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #fff;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.2s ease;
    max-width: 300px;
}
.toast.ok      { background: #3B6D11; }
.toast.error   { background: var(--red-600); }
.toast.info    { background: var(--amber-800); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   IMPORTANCIA
═══════════════════════════════════════════ */

/* Filtro en barra de etiquetas */
.filtro-importancia-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

#filtro-importancia {
    font-family: inherit;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid var(--border-md);
    background: var(--bg-muted);
    color: var(--text-muted);
    outline: none;
    cursor: pointer;
}
#filtro-importancia:focus { border-color: var(--amber-400); }

/* Borde lateral en tarjeta según importancia */
.momento-card.imp-1 { border-left: 3px solid var(--amber-600); }
.momento-card.imp-2 { border-left: 3px solid var(--amber-400); }

/* Badge de importancia (en detalle y tarjetas) */
.importancia-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.importancia-badge.imp-1 { background: var(--amber-600); color: #fff; border: 1px solid var(--amber-800); }
.importancia-badge.imp-2 { background: var(--amber-50);  color: var(--amber-800); border: 1px solid var(--amber-400); }
.importancia-badge.imp-3 { background: var(--bg-muted);  color: var(--text-muted); border: 1px solid var(--border-md); }
.importancia-badge.imp-4 { background: var(--bg-muted);  color: var(--text-hint);  border: 1px solid var(--border); }
.importancia-badge.imp-5 { background: var(--bg-muted);  color: var(--text-hint);  border: 1px solid var(--border); }

/* ═══════════════════════════════════════════
   USUARIO EN TOPBAR
═══════════════════════════════════════════ */
#usuario-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

#usuario-nombre {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#btn-logout {
    padding: 5px 10px;
    font-size: 12px;
}

/* Cuando no hay sesión, ocultar búsqueda y btn-nuevo */
.topbar-actions.sin-sesion #buscador,
.topbar-actions.sin-sesion #btn-nuevo,
.topbar-actions.sin-sesion #usuario-info {
    display: none !important;
}

/* ═══════════════════════════════════════════
   OVERLAY DE AUTENTICACIÓN
═══════════════════════════════════════════ */
#auth-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#auth-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 380px;
}

.auth-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--amber-800);
    text-align: center;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: 13px;
    color: var(--text-hint);
    text-align: center;
    margin-bottom: 24px;
}

#auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 8px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover { color: var(--text); }

.auth-tab.active {
    color: var(--amber-800);
    border-bottom-color: var(--amber-600);
    font-weight: 500;
}

.auth-form .form-grupo {
    margin-bottom: 14px;
}

.auth-submit {
    width: 100%;
    padding: 9px;
    font-size: 14px;
    margin-top: 4px;
}

.auth-submit:disabled { opacity: 0.65; cursor: default; }

.auth-error {
    background: var(--red-50);
    color: var(--red-600);
    border: 1px solid var(--red-100);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 10px;
}