/* ============================================================
   PALETA DEL VISOR DE PROYECTO  ·  paso 1 del modo dia (12-09-2026)
   ------------------------------------------------------------
   31 variables "alt": valores que NO coinciden con el canonico de su
   familia en atrezzo-base.css y que se conservan EXACTOS para que este
   paso no mueva un pixel. Cada una es una decision pendiente.

   NO incluye:
     - el modal de anotacion (zona 6): sus variables iran declaradas en
       #annotationModal, no en :root, para que el tema claro no pueda
       alcanzarlas. Si una regla del visor comparte valor con una del
       modal, NO se han unificado: son dos paletas distintas a proposito.
     - las declaraciones con !important (zona 7), que se han saltado
       enteras y siguen con su literal.
   ============================================================ */
:root {
    /* El fondo del visor y el de su cabecera en movil: dos grises que no son
       ni --bg-color ni --surface-color. Salen del paso 2 (parte A), al quitar
       los !important que los tenian congelados. */
    --pv-fondo-color: #1a1a1a;
    /* El color del glifo del punto de estado. Variable PROPIA y no
       --text-color porque el punto se lee sobre su color de estado, que no
       sigue al tema: si siguiera al tema, el tema tendria que arrastrarlo. */
    --pv-punto-texto-color: #ffffff;
    /* Texto sobre los botones de fondo SOLIDO cuyo fondo no sigue al tema
       (los verdes y rojos Bootstrap del panel de filtro). Misma razon que la
       de arriba: si el fondo no sigue al tema, el texto tampoco puede. */
    --pv-boton-solido-texto-color: #e8eaed;
    --pv-cabecera-movil-color: rgba(30, 30, 30, 0.98);
    --pv-negro-60-color: rgba(0, 0, 0, 0.6);
    --pv-blanco-10-color: rgba(255,255,255,0.1);
    --pv-separador-color: #262626;
    --pv-progreso-2-color: #8bc34a;
    --pv-aviso-color: #ffb74d;
    --pv-blanco-05-color: rgba(255,255,255,0.05);
    --pv-borde-2-color: #3a3a3a;
    --pv-filtro-fondo-1-color: #2d3548;
    --pv-filtro-fondo-2-color: #1e2530;
    --pv-filtro-borde-color: #3d4558;
    --pv-negro-30-color: rgba(0,0,0,0.3);
    --pv-filtro-texto-color: #e8eaed;
    --pv-blanco-20-color: rgba(255,255,255,0.2);
    --pv-filtro-todos-color: #28a745;
    --pv-filtro-ninguno-color: #dc3545;
    --pv-texto-5-color: #aaaaaa;
    --pv-borde-3-color: #444444;
    --pv-degradado-1-color: #667eea;
    --pv-superficie-2-color: #151515;
    --pv-negro-45-color: rgba(0,0,0,0.45);
    --pv-entrada-color: #0f0f0f;
    /* Subido de #6a6a6a (3,54) a #8a8a8a (5,55) en el paso 5B: estaba peor
       que su equivalente claro. Cambio visible en oscuro, a favor. */
    --pv-texto-placeholder-color: #8a8a8a;
    --pv-boton-color: #242424;
    --pv-texto-boton-color: #cfcfcf;
    --pv-boton-hover-color: #303030;
    --pv-boton-inerte-color: #1c1c1c;
    --pv-limpiar-color: #2a2020;
    --pv-limpiar-borde-color: #4a3030;
    --pv-limpiar-texto-color: #e0b4b4;
    --pv-ok-claro-color: #81c784;
    --pv-roto-claro-color: #ef9a9a;
    --pv-informar-color: #6f42c1;
    /* Cuadro "ya informado" de INFORMAR. Vive EN LINEA dentro de la cabecera
       del visor, asi que sigue al tema; el menu y el dialogo, que FLOTAN, se
       quedan oscuros a proposito (ver informar-chequeo.js). */
    --inf-estado-fondo-color: rgba(255, 255, 255, 0.08);
    --inf-estado-borde-color: rgba(255, 255, 255, 0.18);
    --inf-estado-texto-color: #dddddd;
    --inf-neutro-color: #b0bec5;
}
/* ================================ */
/* PROJECT MANAGEMENT STYLES */
/* ================================ */

/* Main Tabs Navigation
   PASO K1 (20-09-2026): la barra de pestanas es la continuacion de la
   cabecera, asi que comparte su negro (--cab-fondo) y sus colores, que se
   declaran en atrezzo-base.css. La activa va en NARANJA --cab-activa, no en
   --accent-color: ese azul lo usan 29 reglas de cuatro hojas y tres modulos
   de busqueda avanzada, y cambiarlo tenirira media aplicacion.
   Los emoji de las pestanas se quedan: cambiarlos a SVG mueve el ancho en
   movil, donde ya van justas, y eso va en el PASO E. */
.main-tabs {
    display: flex;
    gap: 0;
    background: var(--cab-fondo, #17150F);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 2rem;
}

.tab-button {
    padding: 1rem 2rem;
    background: transparent;
    border: none;
    color: var(--cab-inactiva, #C9C3B6);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    border-bottom: 3px solid transparent;
}

.tab-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.tab-button.active {
    color: var(--cab-activa, #E8501C);
    border-bottom-color: var(--cab-activa, #E8501C);
    font-weight: 600;
}

/* Nombre largo en escritorio, corto en movil (19-09-2026). El corto lleva
   icono Y texto, nunca el icono solo. El cambio esta en el @media de 768px. */
.tab-corto { display: none; }

/* BUSCAR MATERIAL ALQUILADO: las dos opciones dentro de la pestaña (buscar-material.js). */
.buscar-modos {
    display: flex;
    gap: 8px;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
}
.buscar-modo {
    flex: 1 1 220px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 10px;
    /* Sin colores de respaldo (PASO E-1): los tres tokens existen siempre, y
       un respaldo ESCRITO A MANO es oscuro, asi que si algun dia faltara uno
       pintaria un boton negro en medio del tema claro sin avisar. */
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
    touch-action: manipulation;
}
.buscar-modo.activo {
    background: var(--accent-color);
    border-color: var(--accent-color);
    /* Blanco sobre el acento en los dos temas. En claro el acento es #0b57d0
       y da 6.39:1. En OSCURO el acento es #4a9eff y se queda en 2.75:1, que
       no llega: viene de antes de este paso y se anota, no se arregla aqui,
       porque tocar el acento oscuro cambia 29 reglas de cuatro hojas. */
    color: #fff;
    font-weight: 700;
}
.buscar-panel[hidden] { display: none !important; }

/* Tab Contents */
.tabs-container {
    flex: 1;
    overflow-y: auto;
}

.tab-content {
    display: none;
    padding: 2rem;
    animation: fadeIn 0.3s;
}

.tab-content.active {
    display: block;
}

/* ======================== */
/* PROJECT BROWSER */
/* ======================== */

.project-browser {
    max-width: 1400px;
    margin: 0 auto;
}

.project-search-section {
    margin-bottom: 2rem;
}

.project-search-section h2 {
    margin-bottom: 1rem;
    color: var(--text-color);
}

.search-box {
    position: relative;
    max-width: 600px;
}

.search-box input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.suggestions-dropdown.show {
    display: block;
}

.suggestion-item {
    padding: 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.suggestion-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.suggestion-meta span {
    margin-right: 1rem;
}

/* Project Stats */
.project-stats {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Projects List */
.projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.project-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.project-card-header {
    margin-bottom: 1rem;
}

.project-card-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.project-card-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.project-card-meta span {
    display: block;
    margin-bottom: 0.25rem;
}

.project-card-stats {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.project-card-progress {
    margin-top: 1rem;
}

.progress-mini {
    height: 4px;
    background: var(--pv-blanco-10-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-mini-fill {
    height: 100%;
    background: var(--success-color, var(--success-color));
    transition: width 0.3s;
}

/* ======================== */
/* PROJECT VIEWER */
/* ======================== */

.project-viewer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* El !important se retiro en el paso 2 del modo dia: no habia competidor
       -- las unicas reglas que pintan el fondo del visor son estas tres, con
       el mismo valor. Sin el, el tema claro solo tiene que redefinir la
       variable. #1a1a1a no es --bg-color (#0a0a0a) ni --surface-color
       (#1e1e1e): es un tercer gris propio del visor. */
    background: var(--pv-fondo-color);
    /* EL VISOR DECLARA SU COLOR DE TEXTO. No es decoracion: sin esta linea,
       todo lo que hay dentro y no se pinta su propio color hereda el
       computado de body { color: var(--text-color) }, que se resolvio en
       :root con #ffffff. Redefinir --text-color aqui NO cambia un color ya
       heredado, solo las reglas que leen la variable dentro -- por eso con
       el tema claro las cabeceras de entrega de PELICULAS quedaban blancas
       sobre blanco. En oscuro resuelve #ffffff, exactamente lo que heredaban:
       cero pixeles. Y vacuna a los elementos que vengan. */
    color: var(--text-color);
    overflow-y: auto !important;
    z-index: 1000 !important;
}

/* ============================================================
   CABECERA COMPACTA DEL VISOR   (tanda 3, 12-09-2026)
   Media ~280 px en tablet y dejaba dos filas de fotos a la vista.
   Ahora son tres zonas: identidad (52) + progreso a sangre (6) +
   acciones (52) = ~110 px, y caben 4-5 filas de fotos.
   SIGUE llamandose .project-header y viviendo dentro de .project-viewer:
   es lo que observa el ResizeObserver de project-image-search.js para
   calcular --pis-sticky-top del buscador. Cambia el alto, no la identidad.
   ============================================================ */
.project-header {
    display: block;                 /* tres zonas apiladas, no una fila */
    margin-bottom: 10px;
    padding: 0;
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;               /* para que el progreso a sangre respete el radio */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px var(--shadow-color);
}

/* --- Zona 1: identidad --- */
.ph-identidad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 4px;
}
.ph-volver {
    flex: 0 0 auto;
    width: 44px; height: 44px;      /* objetivo tactil, aunque el icono sea pequeño */
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ph-volver:hover { background: var(--surface-2-color); }

/* El boton del tema claro/oscuro, al otro extremo de la fila de identidad.
   32x32 a proposito: el alto de la fila lo marca .ph-volver con sus 44, asi
   que este NO cambia la altura de la cabecera en ningun punto de ruptura
   (ni en 768 ni en 480) y el ResizeObserver de project-image-search.js no
   tiene que recalcular --pis-sticky-top. Lo unico que se lleva son 42 px
   (32 + gap) del ancho que le quedaba al titulo para su ellipsis.
   Vive en la zona 1 y no en la 3 porque la fila de acciones ya va justa. */
.ph-tema {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 15px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ph-tema:hover { background: var(--surface-2-color); }

/* El titulo y los metadatos NO tenian ni una regla en ninguna hoja: el CSS
   apuntaba a .project-info / .project-meta, que en esta vista no existen
   (siguen vivos en las tarjetas de la LISTA, por eso no se tocan alli). */
.project-header-info { flex: 1 1 auto; min-width: 0; }
.project-header-info h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-metadata {
    display: flex; gap: 8px;
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-metadata span:empty { display: none; }

/* El contador, a la derecha y grande: se lee con la tablet en la mesa. */
.ph-contador {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.15;
}

/* --- Zona 2: barra de progreso a sangre --- */
.project-stats-bar {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.project-info h2 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.project-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* --- Zona 3: acciones en UNA fila densa ---
   Antes: flex:1 1 45% + min-width 180px + max-width 48% => filas de dos y
   una cabecera de tres pisos. Ahora ninguna medida obliga a envolver. */
.project-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--pv-separador-color);
    flex-wrap: nowrap;
    overflow-x: auto;              /* si un dia no caben, se desplazan */
    scrollbar-width: none;
}
.project-actions::-webkit-scrollbar { display: none; }

/* .acc gana a .btn (0-1-0) por especificidad, sin !important. */
.project-actions .acc,
.project-actions .inf-btn {
    flex: 0 0 auto;
    height: 40px;
    min-width: 0;
    max-width: none;
    padding: 0 12px;
    border-radius: 10px;
    border-width: 1px;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 6px;
    white-space: nowrap;
}
.project-actions .acc-ic { font-size: 1rem; line-height: 1; }
/* INFORMAR y su cuadro de estado, a la derecha. */
.project-actions .inf-wrap { margin-left: auto; flex: 0 0 auto; }
.project-actions .inf-estado { flex: 0 0 auto; }

/* Progress Section */
.progress-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--surface-color);
    border-radius: 8px;
    border: 2px solid var(--border-color);
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), var(--pv-progreso-2-color));
    transition: width 0.3s;
}

/* ============================================================
   BARRA DE PROGRESO DEL VISOR  (12-09-2026)
   El HTML usa .project-stats-bar / .progress-info / .progress-bar-container
   desde un renombrado que nunca llego al CSS: las reglas de arriba
   (.progress-section / .progress-stats / .progress-bar) no alcanzan a nadie
   en esta vista. Consecuencia medible: .progress-fill tiene height:100% y su
   padre no tenia altura declarada, asi que el 100% se resolvia contra auto y
   LA BARRA MEDIA 0 px. Nunca se ha visto.
   ============================================================ */
/* Las dos cifras viven ahora en la fila de identidad (.ph-contador), no en
   una caja propia: .progress-info se retiro del HTML en la tanda 3. */
#reviewProgress {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}
#statusBreakdown {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
#statusBreakdown.con-incidencias {
    color: var(--pv-aviso-color);
    font-weight: 600;
}
/* A sangre: sin radio ni margen, pegada al borde de la cabecera. */
.progress-bar-container {
    height: 6px;
    /* Se quedo literal en el paso 1 porque esta regla es de la tanda 3, que
       vino despues. Mismo valor, misma variable que el resto. */
    background: var(--pv-blanco-10-color);
    border-radius: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    #reviewProgress { font-size: 0.92rem; }
    #statusBreakdown { font-size: 0.66rem; }
}

/* Warehouse Container */
.warehouse-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.warehouse-section {
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.warehouse-header {
    padding: 1rem 1.5rem;
    background: var(--pv-blanco-05-color);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.warehouse-header h3 {
    margin: 0;
    color: var(--text-color);
}

.warehouse-count {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* REJILLA: 4 columnas en tablet vertical (tanda 4).
   Con 200px de minimo y 1,5rem de padding salian 3 columnas a 820px y la
   foto perdia superficie contra el hueco. Con 150px y padding de 10px salen
   4 columnas de ~170px a 820 y de ~158px a 768. */
.warehouse-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 10px;
}

/* ======================== */
/* IMAGE ITEM WITH Z-INDEX FIX */
/* ======================== */

.image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    border: 3px solid transparent;
}

.image-item:hover {
    transform: scale(1.05);
}

.image-item.status-ok {
    border-color: var(--success-color);
}

.image-item.status-roto {
    border-color: var(--error-color);
}

.image-item.status-falta {
    border-color: var(--warning-color);
}

/* 'detalle' no tenia regla: sus 83 imagenes se quedaban con el borde
   transparente mientras el badge decia "undefined DETALLE". */
.image-item.status-detalle {
    border-color: var(--detail-color);
}

.image-item.status-pendiente {
    border-color: var(--pv-borde-2-color);
}

/* Imagen base - z-index más bajo */
.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Canvas overlay - z-index medio */

.canvas-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background-size: cover !important; /* ✅ Cambiado de contain a cover */
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 1 !important;
}

/* Canvas overlay como IMG - NUEVA VERSIÓN */


.canvas-overlay-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ✅ Mismo que imagen base */
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
}


/* Status badge - z-index más alto para estar siempre visible */
/* ESTADO DE LA MINIATURA: punto en la esquina, no una franja con la palabra.
   La franja (⏳ PENDIENTE) se comia un tercio del ancho de la foto, que es
   justo lo que el encargado necesita ver. El color va en el punto Y en el
   borde de la miniatura, asi que el estado se sigue leyendo de lejos sin
   tapar nada. El simbolo lo escribe puntoEstado() en el JS. */
.image-status-badge {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--pv-punto-texto-color);
    background: var(--overlay-color);
    z-index: 10 !important;
    box-shadow: 0 1px 4px var(--pv-negro-60-color);
}

.image-status-badge.ok      { background: var(--success-color); }
.image-status-badge.roto    { background: var(--error-color); }
.image-status-badge.falta   { background: var(--warning-color); color: var(--text-on-warning-color); }
.image-status-badge.detalle { background: var(--detail-color); color: var(--text-on-detail-color); }
/* Pendiente no pinta nada: la ausencia de punto ES el estado, y asi la
   mayoria de las miniaturas quedan limpias. */
.image-status-badge.pendiente { display: none !important; }

/* ============================================================
   MODAL DE ANOTACION  ·  zona 6 del modo dia (12-09-2026)
   ------------------------------------------------------------
   EL MODAL NO CAMBIA DE TEMA. NUNCA.

   Motivo: su lienzo enseña FOTOGRAFIAS, y los marcadores de Fabric
   (#00ff00, #ff0000, #ffa500, #00bcd4, en annotation-canvas.js) estan
   calculados para verse sobre una foto cualquiera. Un tema claro que los
   invierta rompe el trabajo del encargado, no la estetica.

   COMO SE BLINDA, tres cierres:
     1. Estas variables se declaran AQUI, en #annotationModal. Una variable
        declarada en el propio elemento gana a la heredada, asi que aunque
        alguien mueva el modal dentro de .project-viewer, el tema no lo
        alcanza.
     2. El selector de anulacion de mas abajo, que las repite bajo
        html.tema-claro por si un dia se añade una variable nueva y se
        olvida ponerla aqui.
     3. Una comprobacion en el arnes (arnes_tema.py): ninguna regla del tema
        claro puede alcanzar un selector del modal.

   Los valores son EXACTAMENTE los de hoy: este bloque no cambia un pixel.
   ============================================================ */
#annotationModal {
    /* ----------------------------------------------------------------
       PALETA DEL MARCO  .  paso 5A-1 del modo dia (13-09-2026)
       Las 26 de abajo son el MARCO: cabecera, pie, paneles, notas, scroll.
       Salen de 52 literales que estaban repartidos por el fichero, con su
       valor EXACTO. A partir del paso 5A-3 el marco sigue al tema claro.

       EL LIENZO NO ESTA AQUI y no debe estarlo: .annotation-canvas-container,
       #annotationCanvas y los controles de zoom conservan sus literales
       (#141922, #2d3548, cian) porque son el fondo neutro sobre el que se ve
       la FOTOGRAFIA. Regla de una linea que explica el lienzo, los chips de
       marcador y los botones de zoom a la vez:
         DONDE HAY COLOR DE MARCADOR, EL FONDO SE QUEDA OSCURO.
       ---------------------------------------------------------------- */

    /* Superficies y bordes. Ojo a los pares de doble funcion: ver cabecera
       del parche. Un borde y un fondo que hoy valen lo mismo NO comparten
       variable, porque en claro dejan de valer lo mismo. */
    --an-fondo-color: #0a0e14;
    --an-superficie-color: #141922;
    --an-superficie-2-color: #1e2530;
    --an-superficie-3-color: #2d3548;     /* FONDO. Mismo valor que el borde */
    --an-superficie-4-color: #3d4558;     /* FONDO. Idem */
    --an-borde-color: #2d3548;            /* BORDE. Mismo valor que el fondo */
    --an-borde-2-color: #3d4558;          /* BORDE. Idem */
    --an-borde-3-color: #4d5568;

    /* Tinta */
    --an-texto-color: #e8eaed;
    --an-texto-2-color: #9aa0a6;
    /* Subido de #5c6470 (3,23) a #848b99 (5,65) en el paso 5B, por lo mismo
       que el del visor. El texto real del textarea esta en 16,05: la
       jerarquia entre sugerido y escrito se mantiene de sobra. */
    --an-placeholder-color: #848b99;
    /* Vacuna: el modal tampoco declaraba 'color', asi que todo lo que no se
       pinte el suyo hereda de body. Hoy no muerde -- no queda texto suelto
       sin color propio -- pero con el marco claro dejaria armada la misma
       trampa que tenia el visor. El valor es el que se HEREDA hoy (#ffffff),
       no --an-texto-color (#e8eaed): asi son cero pixeles. */
    --an-texto-base-color: #ffffff;

    /* Acentos. NO siguen al tema: son colores de accion, como los de estado
       del visor. El verde del boton de guardar, el cian del foco. */
    --an-texto-sobre-ok-color: #0a0e14;   /* TEXTO. Mismo valor que el fondo */
    --an-ok-1-color: #00ff88;
    --an-ok-2-color: #00cc70;
    --an-ok-1-hover-color: #00ff99;
    --an-ok-2-hover-color: #00dd80;
    --an-foco-color: #00d4ff;
    --an-foco-halo-color: rgba(0, 212, 255, .14);

    /* Sombras. Las dos "-muerta-" pertenecen a declaraciones que ya estan
       pisadas por sus copias de mas abajo (ver inventario de limpieza); se
       parametrizan igual para que en esta rodaja no quede ni un literal. */
    --an-sombra-color: rgba(0, 0, 0, 0.8);
    --an-sombra-pie-color: rgba(0, 0, 0, 0.5);
    --an-sombra-pie-2-color: rgba(0, 0, 0, 0.6);
    --an-sombra-lienzo-color: rgba(0, 0, 0, 0.4);

    /* ---- 5B: herramientas, panel de marcadores y deslizadores ---------
       Acentos. NO siguen al tema: el cian es el color de "esto responde al
       dedo" (foco, hover, pulgar del deslizador) y vale igual sobre claro
       que sobre oscuro. */
    --an-acento-color: #00d4ff;
    --an-acento-2-color: #0099cc;
    --an-texto-sobre-acento-color: #0a0e14;
    --an-acento-sombra-20-color: rgba(0, 212, 255, 0.2);
    --an-acento-sombra-40-color: rgba(0, 212, 255, 0.4);
    --an-acento-sombra-60-color: rgba(0, 212, 255, 0.6);

    /* ...pero cuando el cian es TEXTO si tiene que seguir al tema: sobre el
       panel claro un #00d4ff da 1,63 de contraste y no se ve. */
    --an-acento-texto-color: #00d4ff;

    /* Mas marco (siguen al tema) */
    --an-borde-inerte-color: #39414f;
    --an-texto-inerte-color: #6b7280;
    --an-sombra-3-color: rgba(0, 0, 0, 0.3);
    --an-halo-color: rgba(255, 255, 255, .18);

    /* ---- LOS CHIPS DE MARCADOR -----------------------------------------
       NINGUNA DE ESTAS SE REDEFINE EN TEMA CLARO, y el arnes lo comprueba
       por el prefijo. Son la aplicacion literal del criterio del fichero:
       los chips ensenan los cuatro colores de marcador, y esos colores
       estan calculados para verse sobre oscuro. Un chip claro con un punto
       #00ff00 encima no se lee.
       Varias valen HOY lo mismo que su hermana del marco (#1e2530, #2d3548,
       #e8eaed, #9aa0a6, #141922): es justamente por eso que necesitan
       variable propia -- en claro dejan de valer lo mismo. */
    --an-mk-fondo-color: #1e2530;
    --an-mk-borde-color: #2d3548;
    --an-mk-texto-color: #e8eaed;
    --an-mk-nm-color: #9aa0a6;
    --an-mk-halo-color: rgba(255, 255, 255, .16);
    --an-mk-ct-fondo-color: #2d3548;
    --an-mk-ct-borde-color: #141922;
    --an-mk-ct-activa-fondo-color: #e8eaed;
    --an-mk-ct-activa-texto-color: #0a0e14;
    --an-mk-ok-color: #00ff00;
    --an-mk-roto-color: #ff0000;
    --an-mk-falta-color: #ffa500;
    --an-mk-detalle-color: #00bcd4;
    --an-mk-ok-fondo-color: #0d2a0d;
    --an-mk-roto-fondo-color: #2a0d0d;
    --an-mk-falta-fondo-color: #2a1e0d;
    --an-mk-detalle-fondo-color: #0d2226;

    --an-ok-sombra-muerta-color: rgba(0, 255, 136, 0.3);
    --an-ok-sombra-color: rgba(0, 255, 136, 0.4);
    --an-ok-sombra-hover-muerta-color: rgba(0, 255, 136, 0.5);
    --an-ok-sombra-hover-color: rgba(0, 255, 136, 0.6);

    --bg-color: #0a0a0a;
    --surface-color: #1e1e1e;
    --surface-2-color: #2a2a2a;
    --surface-hover-color: rgba(255, 255, 255, 0.07);
    --border-color: #333;
    --border-soft-color: rgba(255, 255, 255, 0.14);
    --text-color: #ffffff;
    --text-secondary: #888;
    --text-muted-color: #555555;
    --shadow-color: rgba(0, 0, 0, 0.35);
    --overlay-color: rgba(0, 0, 0, 0.55);
    --accent-color: #4a9eff;
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ff9800;
    --detail-color: #00bcd4;
    --info-color: #2196f3;
    --text-on-warning-color: #1a1a1a;
    --text-on-detail-color: #00323a;
}

/* ============================================================
   EL MARCO DEL MODAL EN TEMA CLARO  .  paso 5A-3 (13-09-2026)
   ------------------------------------------------------------
   Desde esta tanda el MARCO del modal si sigue al tema: cabecera, pie,
   paneles de la fila de controles, notas, scroll y el borde del lienzo.

   NO cambian, y no es olvido:
     - El FONDO del lienzo (#141922, literal en .annotation-canvas-container).
     - Los controles de zoom, que flotan ENCIMA del lienzo.
     - Los chips de marcador (.an-mk), que quedan oscuros sobre panel claro:
       es lo que hace legibles los cuatro colores de marcador.
     - El verde del boton de guardar y el cian del foco: son colores de
       accion, como los de estado del visor.
   ============================================================ */
html.tema-claro #annotationModal {
    /* Superficies. El fondo del modal es blanco y el panel gris claro: la
       misma relacion que en oscuro, invertida. */
    --an-fondo-color: #ffffff;
    --an-superficie-color: #f4f6f8;
    --an-superficie-2-color: #eef2f6;
    --an-superficie-3-color: #d5dae0;
    --an-superficie-4-color: #c3cad4;

    /* Bordes. Aqui se ve para que servia separarlos de las superficies:
       en oscuro valian lo mismo y en claro NO, porque un borde tiene que
       marcarse un poco mas que el relleno que rodea. */
    --an-borde-color: #ccd2d9;
    --an-borde-2-color: #c3cad4;
    --an-borde-3-color: #b3bcc8;

    /* Tinta */
    --an-texto-color: #1f2430;
    --an-texto-2-color: #5a6470;
    --an-placeholder-color: #646b75;
    --an-texto-base-color: #1f2430;

    /* Sombras: en claro una sombra negra al 80% es una mancha. */
    --an-sombra-color: rgba(16, 24, 40, 0.18);
    --an-sombra-pie-color: rgba(16, 24, 40, 0.10);
    --an-sombra-pie-2-color: rgba(16, 24, 40, 0.12);
    --an-sombra-lienzo-color: rgba(16, 24, 40, 0.14);

    /* ---- 5B ------------------------------------------------------------
       Solo cinco. Las demas de 5B, o son del chip (--an-mk-*, que no sigue
       al tema por decision y el arnes lo vigila) o son acento (el cian de
       "esto responde al dedo", que vale igual sobre claro que sobre
       oscuro). */
    --an-acento-texto-color: #0e7490;     /* el cian, cuando es TEXTO: 4,95 */
    --an-borde-inerte-color: #c3cad4;
    --an-texto-inerte-color: #767e89;
    --an-sombra-3-color: rgba(16, 24, 40, 0.10);
    --an-halo-color: rgba(16, 24, 40, 0.14);
}

/* Cierre 2: aunque el modal acabe DENTRO del visor, esto sigue valiendo.
   Estas 19 son las variables GENERICAS (--text-color, --surface-color...):
   el modal no lee ninguna, pero si algun dia una regla suya la leyera, no
   puede heredar la del visor. Las del marco son las de arriba. */
html.tema-claro #annotationModal {
    --bg-color: #0a0a0a;
    --surface-color: #1e1e1e;
    --surface-2-color: #2a2a2a;
    --surface-hover-color: rgba(255, 255, 255, 0.07);
    --border-color: #333;
    --border-soft-color: rgba(255, 255, 255, 0.14);
    --text-color: #ffffff;
    --text-secondary: #888;
    --text-muted-color: #555555;
    --shadow-color: rgba(0, 0, 0, 0.35);
    --overlay-color: rgba(0, 0, 0, 0.55);
    --accent-color: #4a9eff;
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ff9800;
    --detail-color: #00bcd4;
    --info-color: #2196f3;
    --text-on-warning-color: #1a1a1a;
    --text-on-detail-color: #00323a;
}

/* ============================================= */
/* ANNOTATION MODAL - TEMA OSCURO NETFLIX/SPOTIFY */
/* ============================================= */

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

/* Modal Content - Tema Oscuro Elegante */
#annotationModal .modal-content {
    background: var(--an-fondo-color);
    /* La vacuna, ver --an-texto-base-color. */
    color: var(--an-texto-base-color);
    border: 2px solid var(--an-borde-color);
    border-radius: 16px;
    max-width: 95vw;
    max-height: 95vh;
    width: 1400px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--an-sombra-color);
}

/* Modal Header */
#annotationModal .modal-header {
    background: linear-gradient(135deg, var(--an-superficie-color) 0%, var(--an-superficie-2-color) 100%);
    border-bottom: 2px solid var(--an-borde-color);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#annotationModal .modal-header h3 {
    color: var(--an-texto-color);
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

#annotationModal .modal-header h3::before {
    content: '🖼️';
    font-size: 1.5rem;
}

#annotationModal .modal-close {
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--an-texto-2-color);
    transition: all 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

#annotationModal .modal-close:hover {
    color: var(--an-texto-color);
    background: var(--an-superficie-3-color);
}

/* Modal Body */
#annotationModal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.5rem;
    background: var(--an-fondo-color);
}

/* Canvas Container - IMAGEN GRANDE */
/* EL LIENZO. Su FONDO se queda literal y oscuro en los dos temas: es el
   fondo neutro sobre el que se ve la FOTOGRAFIA, y los marcadores de Fabric
   (#00ff00, #ff0000, #ffa500, #00bcd4) estan calculados para verse encima.
   Regla de una linea que explica el lienzo, los chips de marcador y los
   botones de zoom a la vez:
       DONDE HAY COLOR DE MARCADOR, EL FONDO SE QUEDA OSCURO.

   El BORDE y la SOMBRA no son lienzo, son marco, y si siguen al tema. Es lo
   que evita que con el marco claro el lienzo parezca un agujero: un borde
   claro lo encierra y lo convierte en una ventana. El arnes (arnes_tema.py)
   comprueba que 'background' sigue siendo literal aqui. */
.annotation-canvas-container {
    position: relative;
    width: 100%;
    height: 600px;
    background: #141922;
    border: 2px solid var(--an-borde-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px var(--an-sombra-lienzo-color);
}

#annotationCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    cursor: grab;
    object-fit: contain;
}

#annotationCanvas:active {
    cursor: grabbing;
}

/* Zoom Controls - Esquina Superior Derecha */
.zoom-controls {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.zoom-btn {
    width: 44px;
    height: 44px;
    background: rgba(0, 212, 255, 0.9);
    border: 2px solid #00d4ff;
    border-radius: 10px;
    color: #0a0e14;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.zoom-btn:hover {
    background: #00d4ff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
}

.zoom-btn:active {
    transform: scale(0.95);
}

/* Zoom Info - Esquina Superior Izquierda */
.zoom-info {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(20, 25, 34, 0.95);
    border: 2px solid #2d3548;
    border-radius: 10px;
    padding: 10px 16px;
    color: #00d4ff;
    font-size: 15px;
    font-weight: 700;
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Annotation Controls - Panel Inferior */
.annotation-controls {
    background: linear-gradient(135deg, var(--an-superficie-2-color) 0%, var(--an-superficie-3-color) 100%);
    padding: 18px;
    border-radius: 12px;
    border: 2px solid var(--an-borde-2-color);
    margin-bottom: 15px;
    box-shadow: 0 4px 12px var(--an-sombra-3-color);
}

/* Drawing Tools */
.drawing-tools {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.tool-btn {
    padding: 11px 18px;
    background: var(--an-superficie-3-color);
    border: 2px solid var(--an-borde-2-color);
    border-radius: 8px;
    color: var(--an-texto-color);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-btn:hover {
    background: var(--an-superficie-4-color);
    border-color: var(--an-acento-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--an-acento-sombra-20-color);
}

.tool-btn.active {
    background: linear-gradient(135deg, var(--an-acento-color) 0%, var(--an-acento-2-color) 100%);
    border-color: var(--an-acento-color);
    color: var(--an-texto-sobre-acento-color);
    font-weight: 700;
    box-shadow: 0 4px 16px var(--an-acento-sombra-40-color);
}

#drawColor {
    width: 54px;
    height: 44px;
    border: 2px solid var(--an-borde-2-color);
    border-radius: 8px;
    cursor: pointer;
    background: var(--an-superficie-3-color);
    transition: all 0.2s;
}

#drawColor:hover {
    border-color: var(--an-acento-color);
    transform: scale(1.05);
}

#drawWidth {
    width: 140px;
    height: 8px;
    background: var(--an-superficie-3-color);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    appearance: none;
}

#drawWidth::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--an-acento-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px var(--an-acento-sombra-40-color);
}

#drawWidth::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px var(--an-acento-sombra-60-color);
}

#drawWidth::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--an-acento-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

/* Status Buttons - Colores Vibrantes */
.status-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.status-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.status-btn:active {
    transform: translateY(-1px);
}

.btn-ok {
    background: linear-gradient(135deg, #00ff88 0%, #00cc70 100%);
    color: #0a0e14;
}

.btn-ok:hover {
    background: linear-gradient(135deg, #00ff99 0%, #00dd80 100%);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
}

.btn-broken {
    background: linear-gradient(135deg, #ff4757 0%, #e63946 100%);
    color: #fff;
}

.btn-broken:hover {
    background: linear-gradient(135deg, #ff5766 0%, #f64050 100%);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

.btn-missing {
    background: linear-gradient(135deg, #ffd93d 0%, #f9ca24 100%);
    color: #0a0e14;
}

.btn-missing:hover {
    background: linear-gradient(135deg, #ffe04d 0%, #fad534 100%);
    box-shadow: 0 6px 20px rgba(255, 217, 61, 0.4);
}

.btn-pending {
    background: linear-gradient(135deg, #888 0%, #666 100%);
    color: #fff;
}

.btn-pending:hover {
    background: linear-gradient(135deg, #999 0%, #777 100%);
    box-shadow: 0 6px 20px rgba(136, 136, 136, 0.4);
}

/* Annotation Notes */
.annotation-notes {
    margin-bottom: 15px;
}

.annotation-notes label {
    display: block;
    margin-bottom: 10px;
    color: #e8eaed;
    font-weight: 600;
    font-size: 15px;
}

.annotation-notes textarea {
    width: 100%;
    padding: 14px;
    background: #1e2530;
    border: 2px solid #2d3548;
    border-radius: 10px;
    color: #e8eaed;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 90px;
    transition: all 0.2s;
}

.annotation-notes textarea:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.3);
    background: #242936;
}

.annotation-notes textarea::placeholder {
    color: #6b7280;
    font-style: italic;
}

/* Modal Footer */
#annotationModal .modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 2px solid var(--an-borde-color);
    background: linear-gradient(135deg, var(--an-superficie-color) 0%, var(--an-superficie-2-color) 100%);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

#annotationModal .modal-footer .btn {
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#annotationModal .modal-footer .btn-success {
    background: linear-gradient(135deg, var(--an-ok-1-color) 0%, var(--an-ok-2-color) 100%);
    color: var(--an-texto-sobre-ok-color);
    border: 2px solid var(--an-ok-1-color);
    box-shadow: 0 4px 12px var(--an-ok-sombra-muerta-color);
}

#annotationModal .modal-footer .btn-success:hover {
    background: linear-gradient(135deg, var(--an-ok-1-hover-color) 0%, var(--an-ok-2-hover-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--an-ok-sombra-hover-muerta-color);
}

#annotationModal .modal-footer .btn-secondary {
    background: var(--an-superficie-3-color);
    color: var(--an-texto-color);
    border: 2px solid var(--an-borde-2-color);
}

#annotationModal .modal-footer .btn-secondary:hover {
    background: var(--an-superficie-4-color);
    border-color: var(--an-borde-3-color);
    transform: translateY(-2px);
}

/* ======================== */
/* TOAST NOTIFICATIONS */
/* ======================== */

.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    padding: 1rem 1.5rem;
    background: var(--surface-color);
    /* EXPLICITO a proposito: sin esto el color venia heredado de body y la
       redefinicion de html.tema-claro .toast no la leia nadie -- el tema
       claro dejaba el toast blanco sobre blanco. En oscuro computa
       #ffffff, que es justo lo que heredaba. */
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s;
    min-width: 300px;
}

.toast.success {
    border-color: #4caf50;
}

.toast.error {
    border-color: #f44336;
}

.toast.info {
    border-color: #2196f3;
}

/* ======================== */
/* ANIMATIONS */
/* ======================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ================================ */
/* RESPONSIVE - MOBILE OPTIMIZADO */
/* ================================ */

@media (max-width: 768px) {
    /* ============================= */
    /* MODAL ANNOTATION - PRIORIDAD */
    /* ============================= */
    
    /* Modal a pantalla completa */
    #annotationModal .modal-content {
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Canvas MÁS GRANDE - 50% de la pantalla */
    .annotation-canvas-container {
        height: 50vh !important;
        margin-bottom: 10px !important;
    }

    /* Header compacto */
    #annotationModal .modal-header {
        padding: 0.75rem 1rem !important;
    }

    #annotationModal .modal-header h3 {
        font-size: 1rem !important;
    }

    #annotationModal .modal-header h3::before {
        font-size: 1.2rem !important;
    }

    /* Zoom controls */
    .zoom-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .zoom-info {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    /* Controles de dibujo compactos */
    .annotation-controls {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .drawing-tools {
        gap: 8px !important;
    }

    .tool-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    #drawColor {
        width: 40px !important;
        height: 36px !important;
    }

    #drawWidth {
        width: 100px !important;
    }

    /* Botones estado en GRID 2x2 */
    .status-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .status-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        justify-content: center;
        width: 100%;
    }

    /* Notas compactas */
    .annotation-notes {
        margin-bottom: 10px !important;
    }

    .annotation-notes label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .annotation-notes textarea {
        min-height: 60px !important;
        font-size: 13px !important;
        padding: 10px !important;
    }

    /* Footer compacto */
    #annotationModal .modal-footer {
        padding: 0.75rem 1rem !important;
        gap: 8px !important;
    }

    #annotationModal .modal-footer .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* Body scrollable */
    #annotationModal .modal-body {
        padding: 1rem !important;
        overflow-y: auto;
    }

    /* ============================= */
    /* RESTO DE ESTILOS MOBILE */
    /* ============================= */

    /* El flex-direction:column de la cabecera se retiro en la tanda 3: la
       cabecera ya no es una fila flex, son tres zonas apiladas. */
    .ph-identidad { padding: 4px 8px 4px 2px; }

    .project-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .warehouse-images {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .projects-list {
        grid-template-columns: 1fr;
    }

    /* Las pestañas no caben en un movil (son 7 desde Pedidos, 19-09-2026) y
       body tiene overflow-x:hidden: las que sobraban quedaban RECORTADAS e
       inalcanzables, y la ultima era justo Pedidos. Ahora la barra se desplaza
       dentro de si misma con el dedo; la pagina no se mueve en horizontal. */
    .main-tabs {
        padding: 0 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .tab-button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .tab-largo { display: none; }
    .tab-corto { display: inline; }

    .buscar-modo { flex-basis: 140px; font-size: 0.95rem; }

    .project-viewer {
        background: var(--pv-fondo-color);   /* !important retirado, ver arriba */
        width: 100vw !important;
        height: 100vh !important;
    }

    body.project-viewer-active {
        position: fixed !important;
        width: 100% !important;
    }

    body.project-viewer-active #projectBrowser {
        visibility: hidden !important;
    }
}

/* Para móviles MUY pequeños */
@media (max-width: 480px) {
    .annotation-canvas-container {
        height: 45vh !important;
    }

    .tool-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .status-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    #annotationModal .modal-header h3 {
        font-size: 0.9rem !important;
    }
}

/* ======================== */
/* BÚSQUEDA MEJORADA */
/* ======================== */

#projectSuggestions mark {
    background-color: var(--primary-color, #2563eb);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

#projectSuggestions .suggestion-item.empty {
    color: #888;
    font-style: italic;
    cursor: default;
    text-align: center;
}

#projectSuggestions .suggestion-item.empty:hover {
    background-color: transparent;
}

#projectSuggestions .suggestion-meta span {
    margin-right: 12px;
}

/* BOTONES DE TIPO DE PROYECTO */
.project-type-toggle {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.type-btn {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

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

/* SECCIONES DE MESES */
.month-section {
    margin-bottom: 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.month-header {
    padding: 16px 20px;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.month-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.month-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
}

.month-count, .project-group-count {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
}

.collapse-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.month-content {
}

.month-content.collapsed {
    display: none;
}

/* GRUPOS DE PELÍCULAS */
.project-group-section {
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.project-group-header {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-group-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.project-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
}

.project-group-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-group-content.collapsed {
    display: none;
}

/* ======================== */
/* ESTILOS PARA PELÍCULAS */
/* ======================== */

.entrega-section {
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-color);
}

.entrega-header {
    padding: 15px 20px;
    /* Era var(--background-color), que no existe en ninguna hoja: la
       declaracion era invalida y el fondo quedaba transparente. Se escribe
       lo que de verdad pasa. Cero pixeles. */
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.2s;
}

.entrega-header:hover {
    /* Era var(--hover-color), tambien inexistente: este hover NO HA
       FUNCIONADO NUNCA, en ningun tema. Se le da el valor que le tocaba.
       Este si es un cambio visible en el tema oscuro, y es a favor: la
       cabecera de entrega es clicable y ahora lo parece. */
    background: var(--surface-2-color);
}

.entrega-header h3 {
    margin: 0;
    font-size: 1.1rem;
    flex: 1;
}

.entrega-meta {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.entrega-count {
    background: var(--primary-color);
    color: var(--text-color);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s;
    width: 20px;
    text-align: center;
}

.entrega-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.entrega-content {
    padding: 20px;
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.entrega-header.collapsed + .entrega-content {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
}

.entrega-header:not(.collapsed) + .entrega-content {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1;
    padding: 20px;
}

/* ✅ FIX: Asegurar que los headers sean clickeables */
.month-header,
.entrega-header {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.month-header *,
.entrega-header * {
    pointer-events: none !important;
}


.image-warehouse-label {
    position: absolute;
    bottom: 30px;
    left: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Project Viewer como overlay completo */
body.project-viewer-active {
    overflow: hidden;
}

#projects-tab {
    position: relative;
}

body.project-viewer-active #projectBrowser {
    display: none !important;
}

/* Estilos para películas */
.pelicula-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin: 10px;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-open-pelicula {
    background: white;
    color: #667eea;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.entregas-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.entrega-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.btn-ver-entrega {
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* Estilos para secciones colapsables */
.projects-container {
    width: 100%;
}


/* ============================================
   PANEL DE ESTADOS MÚLTIPLES v4.0 - FASE 1
   Agregar AL FINAL del archivo project-management.css
   ============================================ */

.marker-states-panel {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #0f3460;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: fadeInPanel 0.3s ease-in-out;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.marker-states-header {
    color: #e94560;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.marker-states-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.marker-btn {
    background: linear-gradient(135deg, #2a2a3e 0%, #1f1f2e 100%);
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.marker-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.marker-btn:hover::before {
    width: 300px;
    height: 300px;
}

.marker-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.marker-btn:active {
    transform: translateY(0);
}

/* Estilos específicos por tipo */
.marker-btn-ok {
    border-color: #00ff00;
}

.marker-btn-ok:hover {
    background: linear-gradient(135deg, #004400 0%, #002200 100%);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.marker-btn-ok.active {
    background: linear-gradient(135deg, #00ff00 0%, #00cc00 100%);
    border-color: #00ff00;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.5);
    transform: scale(1.05);
}

.marker-btn-roto {
    border-color: #ff0000;
}

.marker-btn-roto:hover {
    background: linear-gradient(135deg, #440000 0%, #220000 100%);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

.marker-btn-roto.active {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    border-color: #ff0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);
    transform: scale(1.05);
}

.marker-btn-falta {
    border-color: #ffa500;
}

.marker-btn-falta:hover {
    background: linear-gradient(135deg, #443300 0%, #221a00 100%);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.3);
}

.marker-btn-falta.active {
    background: linear-gradient(135deg, #ffa500 0%, #cc8400 100%);
    border-color: #ffa500;
    box-shadow: 0 0 25px rgba(255, 165, 0, 0.5);
    transform: scale(1.05);
}

.marker-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.marker-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.marker-count {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    min-width: 32px;
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.marker-btn.active .marker-count {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.marker-instructions {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
}

.marker-instructions small {
    color: #e94560;
    font-size: 12px;
    font-weight: 500;
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .marker-states-buttons {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .marker-btn {
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 16px;
    }
    
    .marker-icon {
        font-size: 24px;
    }
    
    .marker-label {
        flex: 1;
        text-align: left;
        margin-left: 12px;
        font-size: 14px;
    }
    
    .marker-count {
        font-size: 16px;
        min-width: 36px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .marker-states-buttons {
        gap: 10px;
    }
    
    .marker-btn {
        padding: 10px 6px;
    }
    
    .marker-icon {
        font-size: 24px;
    }
    
    .marker-label {
        font-size: 12px;
    }
}



/* ============================================
   OCULTAR BOTONES ANTIGUOS
   ============================================ */
.status-buttons {
    display: none !important;
}

/* ============================================
   SELECTOR DE TAMAÑO DE MARCADORES
   ============================================ */
.marker-size-selector {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(233, 69, 96, 0.3);
}

.size-options {
    display: flex;
    gap: 8px;
}

.size-btn {
    flex: 1;
    padding: 8px 12px;
    background: linear-gradient(135deg, #2a2a3e 0%, #1f1f2e 100%);
    border: 2px solid #0f3460;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.size-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.size-btn.active {
    background: linear-gradient(135deg, #e94560 0%, #c93552 100%);
    border-color: #e94560;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .size-options {
        flex-direction: column;
    }
}

/* ============================================
   MEJORAS INCREMENTALES v1.1 - 10 OCT 2025
   AGREGAR AL FINAL DEL ARCHIVO CSS
   Estas reglas SOBRESCRIBEN las anteriores sin romper
   ============================================ */

/* ===== 1. MODAL MÁS GRANDE ===== */
#annotationModal .modal-content {
    max-width: 98vw !important;
    max-height: 98vh !important;
    width: 1600px !important; /* Aumentado de 1400px */
}

/* ===== 2. CANVAS MÁS GRANDE (PROTAGONISTA) ===== */
.annotation-canvas-container {
    height: 65vh !important; /* Aumentado de 600px */
    min-height: 500px !important;
}

/* ===== 3. HEADER MÁS COMPACTO ===== */
#annotationModal .modal-header {
    padding: 0.75rem 1.25rem !important;
}

#annotationModal .modal-header h3 {
    font-size: 1.1rem !important;
}

#annotationModal .modal-header h3::before {
    font-size: 1.3rem !important;
}

.modal-close {
    font-size: 1.5rem !important;
    width: 36px !important;
    height: 36px !important;
}

/* ===== 4. CONTROLES FLOTANTES MÁS PEQUEÑOS ===== */
.zoom-controls {
    top: 10px !important;
    right: 10px !important;
    gap: 8px !important;
}

.zoom-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
}

.zoom-info {
    top: 10px !important;
    left: 10px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
}

/* ===== 5. TOOLBAR MÁS COMPACTA ===== */
.annotation-controls {
    padding: 14px !important;
    margin-bottom: 12px !important;
}

.drawing-tools {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.tool-btn {
    padding: 9px 16px !important;
    font-size: 13px !important;
}

#drawColor {
    width: 48px !important;
    height: 40px !important;
}

#drawWidth {
    width: 120px !important;
}

/* ===== 6. PANEL MARCADORES HORIZONTAL COMPACTO ===== */
.marker-states-panel {
    padding: 12px 16px !important;
    margin: 12px 0 !important;
}

.marker-states-header {
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

.marker-states-buttons {
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.marker-btn {
    padding: 10px 16px !important;
    min-height: 60px !important;
}

.marker-icon {
    font-size: 24px !important;
}

.marker-label {
    font-size: 12px !important;
}

.marker-count {
    font-size: 16px !important;
    padding: 3px 8px !important;
    min-width: 28px !important;
}

.marker-instructions {
    padding: 6px 10px !important;
}

.marker-instructions small {
    font-size: 11px !important;
}

/* ===== 7. SELECTOR TAMAÑO COMPACTO ===== */
.marker-size-selector {
    margin-top: 12px !important;
    padding-top: 12px !important;
}

.size-options {
    gap: 6px !important;
}

.size-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
}

/* ===== 8. NOTAS COMPACTAS ===== */
.annotation-notes {
    margin-bottom: 12px !important;
}

.annotation-notes label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

.annotation-notes textarea {
    min-height: 70px !important;
    max-height: 100px !important;
    padding: 12px !important;
    font-size: 13px !important;
}

/* ===== 9. FOOTER COMPACTO ===== */
#annotationModal .modal-footer {
    padding: 1rem 1.25rem !important;
    gap: 10px !important;
}

#annotationModal .modal-footer .btn {
    padding: 10px 24px !important;
    font-size: 14px !important;
}

/* ===== 10. BODY CON SCROLL OPTIMIZADO ===== */
#annotationModal .modal-body {
    padding: 1.25rem !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #2d3548 #0a0e14 !important;
}

#annotationModal .modal-body::-webkit-scrollbar {
    width: 8px !important;
}

/* !important retirados en el paso 5A-2: el unico competidor son los
   ::-webkit-scrollbar-* globales de atrezzo-base.css, que son (0,0,0).
   Este selector es (1,1,0) y gana solo. */
#annotationModal .modal-body::-webkit-scrollbar-track {
    background: var(--an-fondo-color);
}

#annotationModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--an-superficie-3-color);
    border-radius: 4px !important;
}

#annotationModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--an-superficie-4-color);
}

/* ============================================
   RESPONSIVE MÓVIL - FIX CRÍTICO S24 ULTRA
   ============================================ */

@media (max-width: 768px) {
    /* Modal fullscreen */
    #annotationModal .modal-content {
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    /* ⚡ FIX CRÍTICO: Canvas SIEMPRE visible */
    .annotation-canvas-container {
        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;
        margin-bottom: 8px !important;
        flex-shrink: 0 !important;
    }

    /* Canvas responsivo */
    #annotationCanvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Header mini */
    #annotationModal .modal-header {
        padding: 0.5rem 1rem !important;
    }

    #annotationModal .modal-header h3 {
        font-size: 0.95rem !important;
    }

    #annotationModal .modal-header h3::before {
        font-size: 1.1rem !important;
    }

    .modal-close {
        font-size: 1.4rem !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Zoom controls mini */
    .zoom-controls {
        top: 6px !important;
        right: 6px !important;
        gap: 5px !important;
    }

    .zoom-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }

    .zoom-info {
        top: 6px !important;
        left: 6px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* Toolbar ultra compacta */
    .annotation-controls {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    .drawing-tools {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .tool-btn {
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    #drawColor {
        width: 36px !important;
        height: 34px !important;
    }

    #drawWidth {
        width: 90px !important;
    }

    /* Panel marcadores VERTICAL en móvil */
    .marker-states-panel {
        padding: 10px 12px !important;
        margin: 8px 0 !important;
    }

    .marker-states-header {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .marker-states-buttons {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .marker-btn {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        min-height: auto !important;
    }

    .marker-icon {
        font-size: 22px !important;
    }

    .marker-label {
        flex: 1 !important;
        text-align: left !important;
        margin-left: 10px !important;
        font-size: 13px !important;
    }

    .marker-count {
        font-size: 18px !important;
        padding: 4px 12px !important;
        min-width: 32px !important;
    }

    .marker-instructions {
        padding: 5px 8px !important;
    }

    .marker-instructions small {
        font-size: 10px !important;
    }

    /* Selector tamaño vertical */
    .marker-size-selector {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    .size-options {
        flex-direction: row !important;
        gap: 5px !important;
    }

    .size-btn {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    /* Notas mini */
    .annotation-notes {
        margin-bottom: 8px !important;
    }

    .annotation-notes label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .annotation-notes textarea {
        min-height: 50px !important;
        max-height: 80px !important;
        padding: 10px !important;
        font-size: 12px !important;
    }

    /* Footer compacto */
    #annotationModal .modal-footer {
        padding: 0.65rem 1rem !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    #annotationModal .modal-footer .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
    }

    /* Body scrollable independiente */
    #annotationModal .modal-body {
        padding: 0.75rem !important;
        overflow-y: auto !important;
        height: calc(50vh - 100px) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Permitir scroll vertical */
    #annotationModal .modal-body > * {
        flex-shrink: 0 !important;
    }
}

/* Móviles muy pequeños */
@media (max-width: 480px) {
    .annotation-canvas-container {
        height: 45vh !important;
        min-height: 45vh !important;
        max-height: 45vh !important;
    }

    .zoom-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .zoom-info {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .tool-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .marker-btn {
        padding: 10px 12px !important;
    }

    .marker-icon {
        font-size: 20px !important;
    }

    .marker-label {
        font-size: 12px !important;
    }

    .marker-count {
        font-size: 16px !important;
    }

    #annotationModal .modal-footer .btn {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    #annotationModal .modal-content {
        width: 95vw !important;
    }

    .annotation-canvas-container {
        height: 55vh !important;
    }

    .marker-states-buttons {
        gap: 8px !important;
    }

    .marker-btn {
        padding: 10px 12px !important;
    }

    .tool-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   ANIMACIONES SUAVES
   ============================================ */

.annotation-canvas-container,
.annotation-controls,
.marker-states-panel,
.annotation-notes {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   OPTIMIZACIONES DE RENDIMIENTO
   ============================================ */

#annotationCanvas {
    will-change: transform !important;
}

.zoom-btn,
.marker-btn,
.tool-btn {
    will-change: transform, box-shadow !important;
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

/* !important retirados en el paso 5B-2. No habia competidor: atrezzo-base.css
   no declara 'outline' en ninguna parte, y la hoja del navegador la gana
   cualquier regla de autor sin necesidad de forzarla. La prueba esta dos
   pantallas mas abajo: .an-tool:focus hace exactamente lo mismo SIN
   !important y funciona.

   OJO: de los cuatro selectores, .marker-btn y .size-btn estan MUERTOS --
   pertenecen al panel de marcadores viejo, que ya no genera nadie (ver
   annotation-canvas.js:378 y el inventario de limpieza). Se dejan aqui
   porque borrarlos es de la tanda C, no de esta. */
.zoom-btn:focus,
.marker-btn:focus,
.tool-btn:focus,
.size-btn:focus {
    outline: 2px solid var(--an-acento-color);
    outline-offset: 2px;
}

/* ============================================
   FIN DE MEJORAS INCREMENTALES
   ============================================ */


/* ============================================
   FIX FOOTER STICKY - Botones siempre visibles
   AGREGAR AL FINAL del archivo CSS
   10 OCT 2025
   ============================================ */

/* ===== ESTRUCTURA MODAL CON FOOTER FIJO ===== */

/* Modal content como flexbox vertical */
#annotationModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
}

/* Header fijo arriba */
#annotationModal .modal-header {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
}

/* Body con scroll, pero footer visible */
#annotationModal .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

/* Footer PEGADO al fondo (sticky) */
#annotationModal .modal-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 200 !important;
    /* !important retirados: mismo selector que la regla base y despues en el
       fichero, asi que gana igual. */
    background: linear-gradient(135deg, var(--an-superficie-color) 0%, var(--an-superficie-2-color) 100%);
    box-shadow: 0 -4px 12px var(--an-sombra-pie-color);
}

/* ============================================
   RESPONSIVE MÓVIL Y TABLET
   ============================================ */

@media (max-width: 1024px) {
    /* Asegurar que footer siempre esté visible */
    #annotationModal .modal-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 300 !important;
        border-radius: 0 !important;
    }
    
    /* Body debe dejar espacio para footer */
    #annotationModal .modal-body {
        padding-bottom: 70px !important; /* Espacio para footer */
    }
    
    /* Canvas mantiene su altura */
    .annotation-canvas-container {
        flex-shrink: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Footer fijo en móvil */
    #annotationModal .modal-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0.75rem 1rem !important;
        /* !important retirados: su competidor es la copia "sticky" de mas
           arriba, misma especificidad y antes en el fichero. */
        background: linear-gradient(135deg, var(--an-superficie-color) 0%, var(--an-superficie-2-color) 100%);
        border-top: 2px solid var(--an-borde-color);
        box-shadow: 0 -4px 16px var(--an-sombra-pie-2-color);
    }
    
    /* Botones en 2 columnas */
    #annotationModal .modal-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    #annotationModal .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Body con padding para footer */
    #annotationModal .modal-body {
        padding-bottom: 65px !important;
        height: calc(100vh - 140px) !important; /* Header + Footer */
    }
    
    /* Canvas con altura fija */
    .annotation-canvas-container {
        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    #annotationModal .modal-footer {
        padding: 0.6rem 0.8rem !important;
    }
    
    #annotationModal .modal-footer .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    #annotationModal .modal-body {
        padding-bottom: 60px !important;
    }
}

/* ============================================
   ASEGURAR QUE BOTONES TENGAN CONTRASTE
   ============================================ */

#annotationModal .modal-footer .btn-success {
    /* !important retirados: mismo selector que la copia de mas arriba y
       despues en el fichero. .btn-success de atrezzo-base es (0,1,0) y
       pierde igual contra este (1,2,0). */
    background: linear-gradient(135deg, var(--an-ok-1-color) 0%, var(--an-ok-2-color) 100%);
    color: var(--an-texto-sobre-ok-color);
    border: 2px solid var(--an-ok-1-color);
    box-shadow: 0 4px 12px var(--an-ok-sombra-color);
    font-weight: 700 !important;
}

#annotationModal .modal-footer .btn-secondary {
    background: var(--an-superficie-3-color);
    color: var(--an-texto-color);
    border: 2px solid var(--an-borde-2-color);
    font-weight: 600 !important;
}

/* Hover en botones */
#annotationModal .modal-footer .btn-success:hover {
    background: linear-gradient(135deg, var(--an-ok-1-hover-color) 0%, var(--an-ok-2-hover-color) 100%);
    box-shadow: 0 6px 20px var(--an-ok-sombra-hover-color);
}

#annotationModal .modal-footer .btn-secondary:hover {
    background: var(--an-superficie-4-color);
    border-color: var(--an-borde-3-color);
}

/* ============================================
   FIN DE FIX FOOTER STICKY
   ============================================ */



/* ============================================
   HEADER PROYECTO COMPACTO EN MÓVIL
   Más espacio para imágenes de la galería
   10 OCT 2025
   ============================================ */

/* ===== SOLO MÓVIL - Header minimalista ===== */

@media (max-width: 768px) {
    
    /* ===== HEADER DEL PROYECTO ===== */
    .project-header {
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        /* !important retirado: su unico competidor es la regla base, que va
           antes en el fichero y tiene la misma especificidad. */
        background: var(--pv-cabecera-movil-color);
        /* backdrop-filter retirado en la tanda 3: creaba bloque contenedor
           para los descendientes fixed y era la mitad del problema del menu
           de INFORMAR. El fondo ya es opaco al 98%. */
    }
    
    /* ===== INFO DEL PROYECTO - Compacta ===== */
    .project-info h2 {
        font-size: 14px !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        /* Limitar a 2 líneas */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* ===== META INFO (fechas, tipo) - Mini ===== */
    .project-meta {
        flex-direction: row !important;
        gap: 8px !important;
        font-size: 11px !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
    
    .project-meta span {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 2px 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 4px !important;
    }
    
    /* ===== BOTONES - Mini y en línea =====
       Las reglas viejas (flex:1 + span{display:none} + ::before) se
       retiraron en la tanda 3: el span{display:none} estaba muerto porque
       los botones no tenian spans, y ahora SI los tienen -- habria borrado
       icono y etiqueta a la vez, dejando botones vacios. El modo solo-icono
       se hace con .acc-et, que es la etiqueta y nada mas. */
    .project-actions { padding: 6px; gap: 5px; }
    .project-actions .acc,
    .project-actions .inf-btn { height: 38px; padding: 0 10px; font-size: 0.75rem; }
    
    /* ===== SECCIÓN DE PROGRESO - Compacta ===== */
    .progress-section {
        padding: 6px 10px !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
    }
    
    .progress-stats {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    
    .progress-bar {
        height: 6px !important;
        border-radius: 3px !important;
    }
    
    /* ===== WAREHOUSE HEADERS - Más pequeños ===== */
    .warehouse-header {
        padding: 8px 12px !important;
    }
    
    .warehouse-header h3 {
        font-size: 13px !important;
        margin: 0 !important;
    }
    
    .warehouse-count {
        font-size: 11px !important;
    }
    
    /* ===== GALERÍA DE IMÁGENES - Más grande ===== */
    .warehouse-images {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    /* ===== IMAGEN ITEM - Optimizada ===== */
    .image-item {
        border-width: 2px !important;
    }
    
    .image-status-badge {
        top: 4px !important;
        right: 4px !important;
        min-width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
    }
    
    .image-warehouse-label {
        bottom: 4px !important;
        left: 4px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }
}

/* ===== MÓVIL MUY PEQUEÑO - Aún más compacto ===== */

@media (max-width: 480px) {
    
    .ph-identidad { padding: 3px 6px 3px 2px; }
    
    .project-info h2 {
        font-size: 13px !important;
        -webkit-line-clamp: 1 !important; /* Solo 1 línea */
    }
    
    .project-meta {
        font-size: 10px !important;
        gap: 6px !important;
    }
    
    .project-actions .acc,
    .project-actions .inf-btn { padding: 0 9px; }
    
    .warehouse-images {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 6px !important;
        padding: 8px !important;
    }
}

/* ===== ALTERNATIVA: Header Colapsable (OPCIONAL) ===== */

/* Si quieres que el header se pueda ocultar/mostrar con un tap */

@media (max-width: 768px) {
    
    /* Header con animación de colapso */
    .project-header.minimized {
        padding: 4px 12px !important;
        transition: all 0.3s ease !important;
    }
    
    .project-header.minimized .project-info h2 {
        font-size: 12px !important;
        -webkit-line-clamp: 1 !important;
    }
    
    .project-header.minimized .project-meta,
    .project-header.minimized .project-actions {
        display: none !important;
    }
    
    /* Agregar indicador de que se puede expandir */
    .project-header.minimized::after {
        content: '▼' !important;
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--text-secondary) !important;
        font-size: 10px !important;
    }
    
    .project-header::after {
        content: '▲' !important;
        position: absolute !important;
        right: 12px !important;
        top: 8px !important;
        color: var(--text-secondary) !important;
        font-size: 10px !important;
        transition: transform 0.3s ease !important;
    }
}

/* ===== FIN DE HEADER COMPACTO MÓVIL ===== */


/* ============================================
   MODAL FOTOS DE ROTURA - 10 OCT 2025
   ============================================ */

.fotos-rotura-modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.fotos-rotura-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

.fotos-rotura-modal-content {
    background: linear-gradient(135deg, #0a0e14 0%, #141922 100%);
    border: 2px solid #2d3548;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.fotos-rotura-header {
    background: linear-gradient(135deg, #141922 0%, #1e2530 100%);
    border-bottom: 2px solid #2d3548;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
}

.fotos-rotura-header h3 {
    color: #e8eaed;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.fotos-rotura-close {
    cursor: pointer;
    font-size: 1.8rem;
    color: #9aa0a6;
    transition: all 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.fotos-rotura-close:hover {
    color: #e8eaed;
    background: #2d3548;
    transform: rotate(90deg);
}

.fotos-rotura-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: #0a0e14;
}

.fotos-rotura-info {
    background: rgba(30, 37, 48, 0.5);
    border: 1px solid #2d3548;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.fotos-rotura-info p {
    margin: 0.5rem 0;
    color: #e8eaed;
    font-size: 0.95rem;
}

.fotos-rotura-info strong {
    color: #00d4ff;
}

#fotosRoturaStats {
    font-weight: 600;
}

.fotos-rotura-instructions {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.fotos-rotura-instructions p {
    margin: 0;
    color: #00d4ff;
    font-size: 0.9rem;
}

.fotos-rotura-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn-fotos-rotura {
    width: 100%;
    padding: 1.5rem 1rem;
    border: 2px solid;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    background: none;
}

.btn-fotos-rotura .icon {
    font-size: 2.5rem;
}

.btn-fotos-upload {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
}

.btn-fotos-upload:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.btn-fotos-camera {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border-color: #00d4ff;
    color: #0a0e14;
}

.btn-fotos-camera:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

.fotos-rotura-preview {
    margin-top: 1.5rem;
}

.fotos-rotura-preview h4 {
    color: #e8eaed;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.fotos-rotura-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.fotos-rotura-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #2d3548;
    transition: all 0.3s;
}

.fotos-rotura-thumb:hover {
    border-color: #00d4ff;
    transform: scale(1.05);
}

.fotos-rotura-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fotos-rotura-progress {
    margin-top: 1rem;
}

.progress-text {
    color: #00d4ff;
    font-size: 0.85rem;
    text-align: center;
    margin: 0.5rem 0 0 0;
}

.fotos-rotura-footer {
    padding: 1rem 1.5rem;
    border-top: 2px solid #2d3548;
    background: linear-gradient(135deg, #141922 0%, #1e2530 100%);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    border-radius: 0 0 14px 14px;
}

.btn-photos {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    border: 2px solid #f59e0b !important;
}

.btn-photos:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .fotos-rotura-modal-content {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }
    
    .fotos-rotura-options {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   BOTONES DESHACER/REHACER - Canvas
   ============================================ */

.canvas-tool-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #555 !important;
}

.canvas-tool-btn.disabled:hover {
    background: #555 !important;
    transform: none !important;
}




/* ============================================
   BOTONES DESHACER/REHACER - Canvas
   ============================================ */

.canvas-tool-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #555 !important;
}

.canvas-tool-btn.disabled:hover {
    background: #555 !important;
    transform: none !important;
}



/* ============================================
   NOTAS EDITABLES - DISEÑO PROFESIONAL Y RESPONSIVE
   18 OCT 2025 - Versión mejorada
   ============================================ */

/* Contenedor principal */
.photo-notes-section {
    padding: 20px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.photo-notes-section:hover {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.9));
}

/* Label con icono */
.notes-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 0.95rem;
    margin-bottom: 12px;
    font-weight: 600;
    user-select: none;
    letter-spacing: 0.3px;
}

.notes-label .icon-note {
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

.notes-label span {
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Textarea mejorado */
.notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    color: #f1f5f9;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    resize: vertical;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notes-textarea:hover {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
                0 0 0 4px rgba(59, 130, 246, 0.05);
}

.notes-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(15, 23, 42, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
                0 0 0 4px rgba(59, 130, 246, 0.15),
                0 4px 12px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.notes-textarea::placeholder {
    color: #64748b;
    font-style: italic;
    opacity: 0.8;
}

/* Estados de guardado mejorados */
.notes-status {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.875rem;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}

.notes-status:not(:empty) {
    animation: slideInStatus 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-status.editing {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid #fbbf24;
}

.notes-status.saving {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
}

.notes-status.saved {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
}

.notes-status.error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

/* Animaciones mejoradas */
@keyframes slideInStatus {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes saveFlash {
    0% { 
        border-color: rgba(148, 163, 184, 0.25);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    50% { 
        border-color: #10b981;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),
                    0 0 0 4px rgba(16, 185, 129, 0.2),
                    0 4px 12px rgba(16, 185, 129, 0.3);
    }
    100% { 
        border-color: rgba(148, 163, 184, 0.25);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

.notes-textarea.saved-animation {
    animation: saveFlash 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mejora de la thumbnail */
.photo-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px 12px 0 0;
}

.photo-thumbnail:hover {
    transform: scale(1.03);
    filter: brightness(1.15) contrast(1.05);
}

/* Card completa mejorada */
.photo-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6));
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
}

.photo-card:hover {
    border-color: rgba(148, 163, 184, 0.35);
    transform: translateY(-6px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15),
                0 10px 10px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* Botones de acción mejorados */
.photo-actions {
    padding: 16px;
    display: flex;
    gap: 12px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    backdrop-filter: blur(10px);
}

.photo-actions button {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-download {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.btn-download:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.btn-delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.btn-download:active,
.btn-delete:active {
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .photo-notes-section {
        padding: 16px;
    }
    
    .notes-textarea {
        min-height: 90px;
        font-size: 0.9rem;
        padding: 12px 14px;
    }
    
    .notes-label {
        font-size: 0.9rem;
    }
    
    .notes-status {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    .photo-actions button {
        padding: 11px 14px;
        font-size: 0.875rem;
    }
}

/* Móviles grandes (481px - 767px) */
@media (max-width: 767px) {
    .photo-notes-section {
        padding: 14px;
    }
    
    .notes-textarea {
        min-height: 80px;
        font-size: 0.875rem;
        padding: 10px 12px;
        border-radius: 8px;
    }
    
    .notes-label {
        font-size: 0.875rem;
        gap: 8px;
    }
    
    .notes-label .icon-note {
        font-size: 1.1rem;
    }
    
    .notes-status {
        font-size: 0.8rem;
        padding: 6px 8px;
        min-height: 32px;
    }
    
    .photo-card {
        border-radius: 12px;
    }
    
    .photo-actions {
        padding: 12px;
        gap: 10px;
        flex-direction: row;
    }
    
    .photo-actions button {
        padding: 10px 12px;
        font-size: 0.85rem;
        gap: 6px;
    }
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    .photo-notes-section {
        padding: 12px;
    }
    
    .notes-textarea {
        min-height: 70px;
        font-size: 0.85rem;
        padding: 10px;
        line-height: 1.6;
    }
    
    .notes-label {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }
    
    .notes-status {
        font-size: 0.75rem;
        padding: 5px 8px;
        min-height: 28px;
        gap: 6px;
    }
    
    .photo-actions {
        padding: 10px;
        gap: 8px;
    }
    
    .photo-actions button {
        padding: 9px 10px;
        font-size: 0.8rem;
        border-radius: 6px;
    }
    
    /* Hacer los botones más accesibles en móvil */
    .photo-actions button {
        min-height: 40px; /* Tamaño mínimo para touch targets */
    }
}

/* Móviles muy pequeños (hasta 360px) */
@media (max-width: 360px) {
    .photo-notes-section {
        padding: 10px;
    }
    
    .notes-textarea {
        min-height: 60px;
        font-size: 0.8rem;
        padding: 8px;
    }
    
    .notes-label {
        font-size: 0.8rem;
    }
    
    .photo-actions {
        padding: 8px;
        gap: 6px;
    }
    
    .photo-actions button {
        padding: 8px;
        font-size: 0.75rem;
    }
}

/* Landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
    .notes-textarea {
        min-height: 60px;
    }
    
    .photo-notes-section {
        padding: 10px;
    }
}

/* Dark mode support (si el navegador lo soporta) */
@media (prefers-color-scheme: dark) {
    .photo-card {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.8));
    }
    
    .notes-textarea {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* Reducir animaciones para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .photo-card,
    .photo-thumbnail,
    .notes-textarea,
    .photo-actions button,
    .notes-status {
        transition: none;
        animation: none;
    }
    
    .photo-card:hover {
        transform: none;
    }
}


/* ============================================
   FIX: Mostrar todas las imágenes en películas
   21 OCT 2025 - Solución altura ilimitada CON colapso funcional
   ============================================ */

/* Asegurar que todos los contenedores permitan scroll completo */
.warehouse-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.warehouse-section {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Grid de imágenes sin límite de altura. Segunda declaracion de la misma
   rejilla: se mantiene por lo de max-height/overflow, que es lo suyo, y se
   alinea con la de arriba para que no se contradigan. */
.warehouse-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 10px;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* ✅ CRÍTICO: Permitir colapso pero sin límite de altura cuando expandido */
.entrega-content {
    padding: 20px;
    overflow: visible !important;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* Cuando NO está colapsado: altura ilimitada */
.entrega-content:not(.collapsed) {
    max-height: none !important;
    height: auto !important;
}


* ✅ FIX: Colapso funcional SOLO cuando tiene clase collapsed */
.month-content.collapsed,
.entrega-content.collapsed {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}


/* Lo mismo para las secciones de entrega */
.entrega-section {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Project viewer debe permitir scroll completo */
.project-viewer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--pv-fondo-color);      /* !important retirado, ver arriba */
    overflow-y: auto !important;
    z-index: 1000 !important;
    padding: 20px;
    height: 100vh !important;
}

/* Asegurar scroll suave en móvil */
@media (max-width: 768px) {
    .project-viewer {
        -webkit-overflow-scrolling: touch !important;
    }
    
    .warehouse-images {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
}

/* ============================================
   GARANTÍA: Altura ilimitada para TODAS las secciones
   (Spots, Películas y Molins)
   ============================================ */

/* Month content para Spots y Molins - CON colapso funcional */
.month-content:not(.collapsed) {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}


.month-content:not(.collapsed),
.entrega-content:not(.collapsed) {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1;
    padding: 20px;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* Headers siempre clickeables */
.month-header,
.entrega-header {
    cursor: pointer !important;
    user-select: none;
}

/* Grid de proyectos en listado */
.projects-list,
.project-card-grid {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Asegurar que el body del viewer permita scroll completo */
#projectViewer {
    overflow-y: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* Para móviles: asegurar scroll táctil suave */
@media (max-width: 768px) {
    #projectViewer,
    .warehouse-container,
    .warehouse-images {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
    }
    
    /* En móvil, permitir colapso también */
    .entrega-content,
    .month-content {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================
   FIN DEL FIX
   ============================================ */



/* ============================================
   PANEL DE FILTROS DE ALMACENES
   ============================================ */

.warehouse-filters-panel {
    background: linear-gradient(135deg, var(--pv-filtro-fondo-1-color) 0%, var(--pv-filtro-fondo-2-color) 100%);
    border: 2px solid var(--pv-filtro-borde-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px var(--pv-negro-30-color);
}

.filters-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filters-icon {
    font-size: 20px;
}

.filters-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pv-filtro-texto-color);
    flex: 1;
}

.filter-btn-all,
.filter-btn-none {
    background: var(--pv-blanco-10-color);
    border: 1px solid var(--pv-blanco-20-color);
    color: var(--pv-filtro-texto-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

/* El color del texto se fija aqui a proposito. Estos dos hover pintan un
   fondo SOLIDO que NO sigue al tema (verde y rojo Bootstrap); si el texto
   siguiera al tema, en claro se oscureceria sobre un fondo que no ha
   cambiado. Con el rojo de "ninguno" eso empeoraba el contraste de 3,76 a
   3,43. Fijandolo, los dos temas dan el MISMO numero. Cero pixeles en
   oscuro. Los dos siguen por debajo de 4,5 y estan en la lista de exentos
   del arnes: arreglarlo de verdad pide oscurecer esos dos colores, que es
   un cambio del tema oscuro y una decision aparte. */
.filter-btn-all:hover {
    background: var(--pv-filtro-todos-color);
    border-color: var(--pv-filtro-todos-color);
    color: var(--pv-boton-solido-texto-color);
}

.filter-btn-none:hover {
    background: var(--pv-filtro-ninguno-color);
    border-color: var(--pv-filtro-ninguno-color);
    color: var(--pv-boton-solido-texto-color);
}

.filters-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--pv-blanco-05-color);
    border: 1px solid var(--pv-blanco-10-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.filter-checkbox:hover {
    background: var(--pv-blanco-10-color);
    border-color: var(--pv-blanco-20-color);
}

.warehouse-filter-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.filter-label {
    font-size: 14px;
    color: var(--pv-filtro-texto-color);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .filters-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .filters-header {
        font-size: 14px;
    }
}
/* ========================================
   SELECTOR DE AÑOS - FASE 4
   ======================================== */

.year-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.year-filter {
    padding: 8px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.year-filter:hover {
    border-color: #4A90E2;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.year-filter:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.year-selector label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Responsive para selector de años */
@media (max-width: 768px) {
    .year-selector {
        margin-left: 0 !important;
        margin-top: 10px;
        width: 100%;
    }
    
    .year-filter {
        flex: 1;
    }
}

/* ================================ */
/* NUEVO DISEÑO - TARJETAS DE SECCIONES */
/* ================================ */

/* Selector de Años Mejorado */
.year-selector-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 30, 30, 0.5) 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.year-selector-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.year-filter-select {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    min-width: 180px;
}

.year-filter-select:hover {
    border-color: var(--accent-color);
    background-color: rgba(74, 158, 255, 0.05);
}

.year-filter-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

/* Grid de Tarjetas de Secciones */
.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Tarjeta de Sección */
.section-card {
    background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), #2196f3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
}

.section-card:hover::before {
    transform: scaleX(1);
}

.section-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(74, 158, 255, 0.2);
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, var(--surface-color) 100%);
}

.section-card:active {
    transform: translateY(-4px);
}

/* Icono de la tarjeta */
.section-card-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    transition: transform var(--transition-normal);
}

.section-card:hover .section-card-icon {
    transform: scale(1.1);
}

/* Contenido de la tarjeta */
.section-card-content {
    width: 100%;
}

.section-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
}

.section-card-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.section-card-stats {
    padding: 1rem;
    background: rgba(74, 158, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-color);
}

/* ================================ */
/* ÚLTIMOS PROYECTOS VISTOS */
/* ================================ */

.recent-projects-section {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.recent-projects-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.recent-projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.recent-project-card {
    background: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.recent-project-card:hover {
    border-color: var(--accent-color);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.recent-project-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.recent-project-info {
    flex: 1;
    overflow: hidden;
}

.recent-project-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-project-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 1rem;
}

.recent-project-time {
    color: var(--accent-color);
    font-weight: 500;
}

/* ================================ */
/* LISTA DE PROYECTOS (OCULTA) */
/* ================================ */

.projects-list-section {
    animation: fadeIn 0.3s ease;
}

.projects-list-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.projects-list-section .section-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

/* ================================ */
/* RESPONSIVE */
/* ================================ */

@media (max-width: 1024px) {
    .sections-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .recent-projects-list {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .year-selector-container {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .year-filter-select {
        width: 100%;
    }
    
    .sections-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .section-card {
        padding: 1.5rem;
    }
    
    .section-card-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .section-card-title {
        font-size: 1.5rem;
    }
    
    .recent-projects-section {
        padding: 1.5rem;
    }
    
    .recent-projects-title {
        font-size: 1.25rem;
    }
    
    .recent-projects-list {
        grid-template-columns: 1fr;
    }
    
    .projects-list-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .section-card {
        padding: 1.25rem;
    }
    
    .section-card-icon {
        font-size: 2.5rem;
    }
    
    .section-card-title {
        font-size: 1.25rem;
    }
    
    .section-card-description {
        font-size: 0.875rem;
    }
    
    .recent-project-card {
        padding: 0.875rem;
    }
}

/* ================================ */
/* ANIMACIONES */
/* ================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ================================ */
/* TEMAS DE COLOR POR SECCIÓN */
/* ================================ */

/* Variables de color por sección */
:root {
    --spot-color: #E91E63;
    --spot-color-light: rgba(233, 30, 99, 0.1);
    --spot-color-border: rgba(233, 30, 99, 0.3);
    
    --molins-color: #FF9800;
    --molins-color-light: rgba(255, 152, 0, 0.1);
    --molins-color-border: rgba(255, 152, 0, 0.3);
    
    --pelicula-color: #9C27B0;
    --pelicula-color-light: rgba(156, 39, 176, 0.1);
    --pelicula-color-border: rgba(156, 39, 176, 0.3);
}

/* Cuando está activa la sección SPOTS */
body.section-spot .section-header h2::before {
    content: '📍 ';
}

body.section-spot .section-header {
    border-left: 4px solid var(--spot-color);
    background: linear-gradient(90deg, var(--spot-color-light) 0%, transparent 100%);
}

body.section-spot .project-card {
    border-color: var(--spot-color-border);
}

body.section-spot .project-card:hover {
    border-color: var(--spot-color);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
}

body.section-spot #backToSections {
    background: var(--spot-color);
    border-color: var(--spot-color);
    color: white;
}

body.section-spot #backToSections:hover {
    background: #C2185B;
    border-color: #C2185B;
}

/* Cuando está activa la sección MOLINS */
body.section-molins .section-header h2::before {
    content: '📦 ';
}

body.section-molins .section-header {
    border-left: 4px solid var(--molins-color);
    background: linear-gradient(90deg, var(--molins-color-light) 0%, transparent 100%);
}

body.section-molins .project-card {
    border-color: var(--molins-color-border);
}

body.section-molins .project-card:hover {
    border-color: var(--molins-color);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

body.section-molins #backToSections {
    background: var(--molins-color);
    border-color: var(--molins-color);
    color: white;
}

body.section-molins #backToSections:hover {
    background: #F57C00;
    border-color: #F57C00;
}

/* Cuando está activa la sección PELÍCULAS */
body.section-pelicula .section-header h2::before {
    content: '🎬 ';
}

body.section-pelicula .section-header {
    border-left: 4px solid var(--pelicula-color);
    background: linear-gradient(90deg, var(--pelicula-color-light) 0%, transparent 100%);
}

body.section-pelicula .project-card {
    border-color: var(--pelicula-color-border);
}

body.section-pelicula .project-card:hover {
    border-color: var(--pelicula-color);
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
}

body.section-pelicula #backToSections {
    background: var(--pelicula-color);
    border-color: var(--pelicula-color);
    color: white;
}

body.section-pelicula #backToSections:hover {
    background: #7B1FA2;
    border-color: #7B1FA2;
}

/* Colores para las tarjetas de secciones en la página principal */
.section-card[data-type="spot"]:hover {
    border-color: var(--spot-color);
    box-shadow: 0 12px 24px rgba(233, 30, 99, 0.2);
}

.section-card[data-type="molins"]:hover {
    border-color: var(--molins-color);
    box-shadow: 0 12px 24px rgba(255, 152, 0, 0.2);
}

.section-card[data-type="pelicula"]:hover {
    border-color: var(--pelicula-color);
    box-shadow: 0 12px 24px rgba(156, 39, 176, 0.2);
}

/* Barra de progreso con color de sección */
body.section-spot #progressFill {
    background: linear-gradient(90deg, var(--spot-color), #FF4081);
}

body.section-molins #progressFill {
    background: linear-gradient(90deg, var(--molins-color), #FFB74D);
}

body.section-pelicula #progressFill {
    background: linear-gradient(90deg, var(--pelicula-color), #BA68C8);
}
/* ================================ */
/* TEMAS DE COLOR MEJORADOS */
/* ================================ */

/* Colores más intensos en los botones de mes/fecha */
body.section-spot .month-section,
body.section-spot .project-card {
    border-color: var(--spot-color-border);
}

body.section-spot .month-section:hover,
body.section-spot .project-card:hover {
    border-color: var(--spot-color);
    background: linear-gradient(135deg, var(--spot-color-light) 0%, var(--surface-color) 100%);
}

body.section-molins .month-section,
body.section-molins .project-card {
    border-color: var(--molins-color-border);
}

body.section-molins .month-section:hover,
body.section-molins .project-card:hover {
    border-color: var(--molins-color);
    background: linear-gradient(135deg, var(--molins-color-light) 0%, var(--surface-color) 100%);
}

body.section-pelicula .month-section,
body.section-pelicula .project-card {
    border-color: var(--pelicula-color-border);
}

body.section-pelicula .month-section:hover,
body.section-pelicula .project-card:hover {
    border-color: var(--pelicula-color);
    background: linear-gradient(135deg, var(--pelicula-color-light) 0%, var(--surface-color) 100%);
}

/* Header de la sección con fondo sutil */
body.section-spot .projects-list-section {
    background: linear-gradient(180deg, var(--spot-color-light) 0%, transparent 200px);
}

body.section-molins .projects-list-section {
    background: linear-gradient(180deg, var(--molins-color-light) 0%, transparent 200px);
}

body.section-pelicula .projects-list-section {
    background: linear-gradient(180deg, var(--pelicula-color-light) 0%, transparent 200px);
}

/* Título de la sección con color */
body.section-spot #currentSectionTitle {
    color: var(--spot-color);
    text-shadow: 0 0 20px rgba(233, 30, 99, 0.3);
}

body.section-molins #currentSectionTitle {
    color: var(--molins-color);
    text-shadow: 0 0 20px rgba(255, 152, 0, 0.3);
}

body.section-pelicula #currentSectionTitle {
    color: var(--pelicula-color);
    text-shadow: 0 0 20px rgba(156, 39, 176, 0.3);
}

/* Botones de mes coloreados */
body.section-spot .month-header {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.15) 0%, rgba(45, 53, 72, 0.5) 100%);
}

body.section-molins .month-header {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(45, 53, 72, 0.5) 100%);
}

body.section-pelicula .month-header {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(45, 53, 72, 0.5) 100%);
}

/* Input de búsqueda con borde coloreado al hacer focus */
body.section-spot .search-box input:focus {
    border-color: var(--spot-color);
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

body.section-molins .search-box input:focus {
    border-color: var(--molins-color);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

body.section-pelicula .search-box input:focus {
    border-color: var(--pelicula-color);
    box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}
/* ================================ */
/* MENSAJE DEL SELECTOR DE AÑOS */
/* ================================ */

.year-selector-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--surface-color) 0%, rgba(74, 158, 255, 0.05) 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.year-selector-message {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.15) 0%, rgba(33, 150, 243, 0.1) 100%);
    border: 2px solid rgba(74, 158, 255, 0.3);
    border-radius: var(--radius-md);
    animation: pulseGlow 2s ease-in-out infinite;
}

.message-icon {
    font-size: 1.75rem;
    animation: bounce 2s ease-in-out infinite;
}

.message-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
}

.year-selector-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(74, 158, 255, 0.5);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .year-selector-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .year-selector-message {
        flex-direction: column;
        text-align: center;
    }
    
    .year-selector-control {
        flex-direction: column;
        align-items: stretch;
    }
    
    .year-filter-select {
        width: 100%;
    }
}
/* ========================
   MOLINS SEARCH RESULTS
   ======================== */

.molins-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding: 10px;
}

.molins-search-result-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.molins-search-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border-color: #667eea;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.result-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.result-month {
    font-size: 13px;
    color: #667eea;
    background: #f0f4ff;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    margin-left: 10px;
    font-weight: 500;
}

.result-matches {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.match-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.match-item:hover {
    background: #e8eef7;
}

.match-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid #ddd;
}

.match-info {
    flex: 1;
    min-width: 0;
}

.match-filename {
    font-size: 13px;
    color: #2c3e50;
    font-weight: 500;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.match-filename mark {
    background: #fff3cd;
    color: #856404;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.match-warehouse {
    font-size: 12px;
    color: #6c757d;
    background: white;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.more-matches {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.result-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
}

.match-count {
    color: #667eea;
    font-weight: 600;
}

.click-hint {
    color: #95a5a6;
    font-size: 12px;
    font-style: italic;
}

@media (max-width: 768px) {
    .molins-search-results {
        grid-template-columns: 1fr;
    }
    
    .result-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .result-month {
        margin-left: 0;
        margin-top: 8px;
    }
}
/* ============================================
   MEJORAS TABLET Y MÓVIL - 25 NOV 2025
   ============================================ */

/* El boton Recargar se retiro del DOM en la tanda 3 (llevaba oculto por CSS
   en todos los tamaños desde el 25-11-2025 y su handler solo hacia
   openProject() del proyecto ya abierto). Esta regla se va con el. */

/* Mejoras para tablets (769px - 1024px) */
/* La franja de tablet ya no necesita nada: la fila es densa en todos los
   tamaños. Se retiran el flex:1 1 45% + min-width:180px que partian las
   acciones en filas de dos, y el flex-direction:column de la cabecera, que
   es lo que la estiraba a ~280 px. */
@media (min-width: 769px) and (max-width: 1024px) {
    .project-actions .acc,
    .project-actions .inf-btn { height: 40px; font-size: 0.82rem; }
}

/* Margen inferior para las imágenes (evitar que queden cortadas) */
.warehouse-images,
.project-images-grid,
#projectImages {
    padding-bottom: 80px !important;
}

/* Movil: solo iconos. La etiqueta se va, el icono se queda. */
@media (max-width: 560px) {
    .project-actions .acc-et { display: none; }
    .project-actions .acc,
    .project-actions .inf-btn { padding: 0 11px; }
    .project-header-info h2 { font-size: 0.88rem; }
}
/* ============================================
   BOTÓN DETALLE - 26 NOV 2025
   ============================================ */
.marker-btn-detalle {
    border-color: #00bcd4;
}
.marker-btn-detalle:hover {
    background: linear-gradient(135deg, #004450 0%, #002830 100%);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.3);
}
.marker-btn-detalle.active {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    border-color: #00bcd4;
    box-shadow: 0 0 25px rgba(0, 188, 212, 0.5);
    transform: scale(1.05);
}
/* ============================================
   GRUPOS POR MES - PROYECTOS CHEQUEADOS
   26 NOV 2025
   ============================================ */
.month-group {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #2d3748;
}

.month-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.month-header:hover {
    background: linear-gradient(135deg, #3d4758 0%, #2a303c 100%);
}

.month-toggle {
    font-size: 14px;
    color: #00d4ff;
    transition: transform 0.3s ease;
}

.month-icon {
    font-size: 20px;
}

.month-name {
    font-size: 18px;
    font-weight: bold;
    color: #00d4ff;
    flex-grow: 1;
}

.month-count {
    font-size: 14px;
    color: #a0aec0;
    background: rgba(0, 212, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.month-stats {
    display: flex;
    gap: 15px;
}

.month-ok {
    color: #48bb78;
    font-weight: bold;
}

.month-issues {
    color: #f6ad55;
    font-weight: bold;
}

.month-content {
    padding: 0;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.month-group.collapsed .month-content {
    max-height: 0;
    padding: 0;
}

.month-group.collapsed .month-toggle {
    transform: rotate(-90deg);
}

.month-group .checked-table {
    margin: 0;
    border-radius: 0;
}

.month-group .checked-table thead {
    background: #1a1a2e;
}
/* ============================================
   FIX: COLAPSO Y ANCHO DE TABLA - 27 NOV 2025
/* ============================================
   FIX FINAL: TABLA PROYECTOS CHEQUEADOS - 27 NOV 2025
   ============================================ */

/* Contenedor del mes ocupa todo el ancho */
.month-group {
    width: 100% !important;
}

/* Contenido colapsable */
.month-group .month-content {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 !important;
}

.month-group.collapsed .month-content {
    max-height: 0 !important;
}

/* Tabla ocupa 100% del contenedor */
.month-group .checked-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}

/* Quitar table-layout fixed para que las columnas se ajusten automáticamente */
.month-group .checked-table th,
.month-group .checked-table td {
    padding: 12px 15px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Primera columna (nombre) más ancha */
.month-group .checked-table th:first-child,
.month-group .checked-table td:first-child {
    min-width: 300px;
}
/* ============================================
   MEJORAS RESPONSIVE PROYECTOS CHEQUEADOS
   27 NOV 2025
   ============================================ */

/* Header centrado y profesional */
#checked-projects-section .section-header,
.checked-projects-header {
    text-align: center !important;
    margin-bottom: 20px;
}

#checked-projects-section h2 {
    text-align: center !important;
}

#checked-projects-section .section-description {
    text-align: center !important;
}

/* Botones de filtro centrados */
.checked-filters,
#checked-projects-section .filter-buttons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

/* Buscador centrado */
#checked-projects-section .search-container,
.checked-search {
    max-width: 500px !important;
    margin: 0 auto 20px auto !important;
}

/* Estadísticas centradas */
.checked-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

/* Tabla ocupa todo el ancho disponible */
.month-group {
    width: 100% !important;
    max-width: 100% !important;
}

.month-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.month-group .checked-table {
    width: 100% !important;
    min-width: 800px !important;
}

/* DESKTOP: Tabla expandida */
@media (min-width: 1200px) {
    .month-group .checked-table {
        min-width: 100% !important;
    }
    
    .month-group .checked-table th:first-child,
    .month-group .checked-table td:first-child {
        width: 45% !important;
    }
}

/* TABLET */
@media (max-width: 1024px) {
    .month-group .checked-table {
        min-width: 750px !important;
    }
}

/* MÓVIL: Scroll horizontal */
@media (max-width: 768px) {
    .month-content {
        overflow-x: scroll !important;
        padding-bottom: 10px !important;
    }
    
    .month-group .checked-table {
        min-width: 700px !important;
        font-size: 13px !important;
    }
    
    .month-group .checked-table th,
    .month-group .checked-table td {
        padding: 10px 8px !important;
    }
    
    .month-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .month-name {
        font-size: 16px !important;
    }
    
    .checked-stats {
        flex-wrap: wrap !important;
    }
    
    .stat-item {
        min-width: 80px !important;
    }
}

/* Indicador de scroll en móvil */
@media (max-width: 768px) {
    .month-content::after {
        content: '← Desliza para ver más →';
        display: block;
        text-align: center;
        font-size: 11px;
        color: #666;
        padding: 5px;
        background: rgba(0,0,0,0.3);
    }
    
    .month-group.collapsed .month-content::after {
        display: none;
    }
}
/* ============================================
   SCROLL HORIZONTAL FORZADO - 27 NOV 2025
   ============================================ */

/* Contenedor con scroll */
.month-group .month-content {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    padding-bottom: 15px !important;
}

/* Tabla con ancho mínimo fijo */
.month-group .checked-table {
    min-width: 900px !important;
    width: max-content !important;
}

/* Scrollbar visible */
.month-content::-webkit-scrollbar {
    height: 8px !important;
}

.month-content::-webkit-scrollbar-track {
    background: #1a1a2e !important;
    border-radius: 4px !important;
}

.month-content::-webkit-scrollbar-thumb {
    background: #00d4ff !important;
    border-radius: 4px !important;
}

/* Quitar mensaje de scroll que puede interferir */
.month-content::after {
    display: none !important;
}
/* ============================================
   BUSCADOR CENTRADO - 27 NOV 2025
   ============================================ */
#checked-projects-section .search-input,
#checked-projects-section input[type="text"],
#checked-projects-section .checked-search-input {
    display: block !important;
    margin: 15px auto !important;
    max-width: 500px !important;
    width: 90% !important;
}

#checked-projects-section > div:first-child {
    text-align: center !important;
}
/* ============================================
   BUSCADOR CENTRADO FIX - 27 NOV 2025
   ============================================ */
.checked-search {
    display: block !important;
    margin: 15px auto !important;
    max-width: 500px !important;
    width: 90% !important;
}

#checked-search-input {
    width: 100% !important;
}
/* ============================================
   BUSCADOR CENTRADO FINAL - 27 NOV 2025
   ============================================ */
.checked-search {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
}

.checked-search input {
    margin: 0 auto !important;
}

/* ============================================
   BUSQUEDA POR TEXTO EN PROYECTO (CLIP)
   ============================================ */

/* Boton en project-actions */
.btn-project-search {
    background: linear-gradient(135deg, #6f42c1, #5a32a3) !important;
    border: none !important;
    color: white !important;
    font-weight: bold !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-project-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
}

/* Modal overlay */
.project-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
}

.project-search-modal-content {
    background: #1a1a2e;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(111, 66, 193, 0.3);
}

.project-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-search-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
}

.project-search-header h3 span {
    color: #6f42c1;
}

.project-search-close {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
}

.project-search-close:hover {
    color: #fff;
}

.project-search-body {
    padding: 20px 25px;
    overflow-y: auto;
    flex: 1;
}

.project-search-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.project-search-input-group input {
    flex: 1;
    padding: 12px 16px;
    background: #16213e;
    border: 2px solid rgba(111, 66, 193, 0.3);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
}

.project-search-input-group input:focus {
    border-color: #6f42c1;
}

.project-search-input-group input::placeholder {
    color: #666;
}

.project-search-input-group button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    white-space: nowrap;
}

.project-search-input-group button:hover {
    transform: translateY(-1px);
}

.project-search-input-group button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.project-search-status {
    padding: 10px 0;
    color: #aaa;
    font-size: 14px;
}

/* Spinner */
.project-search-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(111, 66, 193, 0.3);
    border-top: 2px solid #6f42c1;
    border-radius: 50%;
    animation: projectSearchSpin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes projectSearchSpin {
    to { transform: rotate(360deg); }
}

/* Grid de resultados */
.project-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.project-search-result-item {
    background: #16213e;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}

.project-search-result-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(111, 66, 193, 0.3);
    border-color: rgba(111, 66, 193, 0.5);
}

.project-search-result-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.project-search-result-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.project-search-result-name {
    color: #ddd;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-search-result-similarity {
    color: #6f42c1;
    font-size: 12px;
    font-weight: bold;
}

/* Highlight animation en la galeria */
@keyframes searchHighlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0.7); }
    50%  { box-shadow: 0 0 20px 10px rgba(111, 66, 193, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0); }
}

.search-highlight {
    animation: searchHighlightPulse 1s ease-in-out 3;
    border: 3px solid #6f42c1 !important;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .project-search-modal {
        padding-top: 20px;
    }
    .project-search-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    .project-search-results {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .project-search-input-group {
        flex-direction: column;
    }
}

/* ============================================
   TABS DE BUSQUEDA (texto / imagen)
   ============================================ */

.project-search-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 12px;
}

.search-tab {
    flex: 1;
    padding: 12px 20px;
    background: #2a2a3e;
    border: 2px solid #333;
    border-radius: 8px;
    color: #888;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-tab:hover {
    background: #3a3a4e;
    color: #fff;
}

.search-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
}

.search-tab-content {
    display: none;
}

.search-tab-content.active {
    display: block;
}

/* ============================================
   OPCIONES DE IMAGEN (camara / subir)
   ============================================ */

.project-search-image-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 20px;
}

.btn-image-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 32px;
    background: #2a2a3e;
    border: 2px dashed #444;
    border-radius: 12px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.btn-image-option:hover {
    background: #3a3a4e;
    border-color: #667eea;
    color: white;
    transform: translateY(-2px);
}

.btn-image-option .option-icon {
    font-size: 36px;
}

.btn-image-option .option-text {
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   PREVIEW DE IMAGEN
   ============================================ */

.project-image-preview {
    text-align: center;
    margin: 20px 0;
    padding: 16px;
    background: #2a2a3e;
    border-radius: 12px;
}

.project-image-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.btn-preview-remove {
    padding: 6px 16px;
    font-size: 12px;
    background: #dc3545;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-preview-remove:hover {
    background: #c82333;
}

/* ============================================
   CAMARA
   ============================================ */

.project-camera-container {
    margin: 20px 0;
    text-align: center;
}

.project-camera-container video {
    width: 100%;
    max-height: 300px;
    border-radius: 12px;
    background: #000;
}

.camera-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.btn-camera-capture {
    padding: 12px 24px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-camera-capture:hover {
    transform: translateY(-1px);
}

.btn-camera-cancel {
    padding: 12px 24px;
    background: #444;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-camera-cancel:hover {
    background: #555;
}

/* ============================================
   BOTON BUSCAR CON IMAGEN
   ============================================ */

.btn-image-search-go {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-image-search-go:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
}

/* ============================================
   INFO DE PROYECTO EN MODAL
   ============================================ */

.project-search-info {
    padding: 8px 0 12px;
    color: #888;
    font-size: 13px;
    border-top: 1px solid #333;
    margin-top: 16px;
}

.project-search-info strong {
    color: #6f42c1;
}

/* ============================================
   RESPONSIVE - BUSQUEDA POR IMAGEN
   ============================================ */

@media (max-width: 500px) {
    .project-search-image-options {
        flex-direction: column;
    }

    .btn-image-option {
        flex-direction: row;
        justify-content: center;
        padding: 16px 24px;
    }

    .btn-image-option .option-icon {
        font-size: 24px;
    }
}

/* ========================
   LAZY LOADING ENTREGAS
   ======================== */

.lazy-load-sentinel {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.loading-more-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pv-texto-5-color);
    font-size: 14px;
    padding: 16px 20px;
}

.spinner-small {
    width: 22px;
    height: 22px;
    border: 3px solid var(--pv-borde-3-color);
    border-top-color: var(--pv-degradado-1-color);
    border-radius: 50%;
    animation: lazySpinAnim 0.8s linear infinite;
}

@keyframes lazySpinAnim {
    to { transform: rotate(360deg); }
}


/* ============================================
   BUSCADOR POR NOMBRE DE ARCHIVO EN EL PROYECTO
   ============================================ */

/* BUSCADOR POR NOMBRE DE ARCHIVO  ·  tono oscuro (tanda 2)
   Era un recuadro #f8f9fa con bordes #e0e0e0 en medio de una interfaz negra:
   el unico elemento claro de la vista, y justo encima de las fotos. Se pasa
   al material del resto (superficie #151515, borde #333) SIN tocar
   project-image-search.js: los nombres de clase y el marcado son los mismos,
   incluidos .image-search-count-found / -empty que pone el JS. */
.image-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 12px;
    background: var(--pv-superficie-2-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* Fija bajo el header sticky del proyecto (z-index 100).
       --pis-sticky-top lo calcula project-image-search.js con el alto real. */
    position: sticky;
    top: var(--pis-sticky-top, 0px);
    z-index: 90;
    box-shadow: 0 4px 14px var(--pv-negro-45-color);
}

.image-search-icon { font-size: 16px; opacity: .8; }

.image-search-input {
    flex: 1;
    min-width: 160px;
    padding: 8px 12px;
    background: var(--pv-entrada-color);
    border: 1px solid var(--pv-borde-2-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 14px;
    outline: none;
}
.image-search-input::placeholder { color: var(--pv-texto-placeholder-color); }
.image-search-input:focus { border-color: var(--accent-color); }

.image-search-nav,
.image-search-clear {
    /* 36px de lado: objetivo tactil decente sin engordar la barra. */
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pv-borde-2-color);
    border-radius: 8px;
    background: var(--pv-boton-color);
    color: var(--pv-texto-boton-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.image-search-nav:hover:not(:disabled),
.image-search-clear:hover { background: var(--pv-boton-hover-color); color: var(--text-color); }
.image-search-nav:disabled { background: var(--pv-boton-inerte-color); color: var(--text-muted-color); border-color: var(--surface-2-color); cursor: default; }
.image-search-clear { background: var(--pv-limpiar-color); border-color: var(--pv-limpiar-borde-color); color: var(--pv-limpiar-texto-color); }

.image-search-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Los mismos nombres que pone _renderCounter(), en tonos que se leen sobre
   negro: el verde y el rojo de antes eran para fondo claro. */
.image-search-count-found { color: var(--pv-ok-claro-color); }
.image-search-count-empty { color: var(--pv-roto-claro-color); }

/* Resaltado PERSISTENTE de todas las coincidencias.
   Misma especificidad que .image-item:hover (0,2,0) pero declarado despues,
   asi que gana sin necesidad de !important. */
.image-item.filename-match {
    outline: 3px solid var(--warning-color);
    outline-offset: 2px;
    border-radius: 8px;
    transform: scale(1.05);
    z-index: 5;
}

/* (0,3,0): mantiene el feedback de hover sobre una coincidencia. */
.image-item.filename-match:hover {
    transform: scale(1.08);
}

/* COINCIDENCIA ACTUAL del buscador por nombre. Clase PROPIA: no toco
   .search-highlight, que usan highlightImageInGallery y
   loadEntregasUntilAndHighlight desde el modal CLIP. */
@keyframes pisHeartbeat {
    0%   { transform: scale(1.15); }
    50%  { transform: scale(1.30); }
    100% { transform: scale(1.15); }
}

.image-item.filename-match.pis-current-match,
.image-item.filename-match.pis-current-match:hover {
    outline: 4px solid var(--pv-informar-color);
    outline-offset: 3px;
    /* Estado final: queda fija y ampliada cuando termina el latido. */
    transform: scale(1.15);
    /* 7 latidos x 0.5s = 3.5 s */
    animation: pisHeartbeat 0.5s ease-in-out 7;
    /* Por encima de las miniaturas vecinas (z-index auto) y muy por debajo
       de la barra (90) y de los modales (2000+). */
    z-index: 20;
    box-shadow: 0 10px 28px var(--overlay-color);
}

@media (prefers-reduced-motion: reduce) {
    .image-item.filename-match.pis-current-match { animation: none; }
}

/* En <=768px, la regla de ~L3525 pone overflow-y:auto en .warehouse-images, lo
   que computa overflow-x a auto y RECORTA la miniatura ampliada. Esa regla no
   aporta scroll (la cuadricula tiene height:auto y nunca desborda: quien
   scrollea es .project-viewer), asi que la revertimos solo aqui. */
@media (max-width: 768px) {
    .warehouse-images { overflow: visible !important; }
}

@media (max-width: 600px) {
    .image-search-count { width: 100%; }
}

/* ============================================
   PASO 1 - SALIDA DE EMERGENCIA   11-09-2026
   FRENTE 4: boton de salida garantizada.
   Bloque terminal, se anade al FINAL del fichero.
   ============================================ */

/* Hermano de .modal e hijo directo de <body>. La colocacion real la
   hace anclarSalidaEmergencia() en project-management-v8.js, porque
   position:fixed se ancla al layout viewport y el pinch-zoom solo
   altera el viewport VISUAL: un fixed se pierde de pantalla igual.
   top/left a 0 solo fijan el origen; el translate() del JS lo lleva
   a la esquina visible y scale(1/vv.scale) conserva su tamano fisico. */
#emergencyExit {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    min-height: 44px;            /* objetivo tactil minimo recomendado */
    border: 2px solid #ff4d4d;
    border-radius: 999px;
    background: #1a0d0d;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
    transform-origin: top left;
}

#emergencyExit.visible {
    display: flex;
}

#emergencyExit:active {
    background: #2a1414;
}

#emergencyExit:focus {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

/* ============================================
   PASO 1 - FRENTES 1 y 1b   11-09-2026
   Bloque terminal: va DESPUES de las 156 reglas
   previas del modal para ganarlas sin editarlas
   una por una (335 !important repartidos).
   ============================================ */

/* FRENTE 1: el blur decorativo fuera.
   No se aprecia sobre un fondo ya opaco al 90%, penaliza el
   compositing en las tablets Android, y ademas convertia a .modal
   en bloque contenedor de sus hijos position:fixed. */
#annotationModal.modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* FRENTE 1b: el pie vuelve al flujo.
   Hasta ahora, de 0 a 1024px el pie era position:fixed y se anclaba
   al borde inferior de la pantalla:
     - entre 769 y 1024px quedaba despegado de la tarjeta, que
       terminaba a 97.5vh;
     - con el teclado en pantalla abierto (al escribir en "Notas
       adicionales") Android no encoge el layout viewport, asi que
       el pie se quedaba DETRAS del teclado, inalcanzable.
   Como tercera fila de un flex column no puede despegarse ni
   esconderse: si no cabe, se llega a el con scroll. */
@media (max-width: 1024px) {
    /* Tarjeta a pantalla completa tambien en tablet
       (el fullscreen previo solo llegaba a 768px). */
    #annotationModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        height: 100dvh !important;      /* Chrome 108+; si no, se queda el vh */
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #annotationModal .modal-footer {
        position: static !important;
        flex: 0 0 auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
    }

    /* El cuerpo es el unico con scroll. min-height:0 es obligatorio
       o el flex item no se encoge y desborda la tarjeta. El
       padding-bottom que compensaba el pie fixed ya no hace falta. */
    #annotationModal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        padding-bottom: 1rem !important;
    }

    /* Refuerzo por CSS de lo que Fabric ya pone inline con
       allowTouchScrolling:false (frente 2), por si alguien
       vuelve a cambiar esa opcion. */
    .annotation-canvas-container,
    #annotationModal canvas {
        touch-action: none !important;
    }
}

/* ============================================
   TANDA A - PANEL DE ANOTACION REDISENADO
   11-09-2026
   Clases 'an-*': nombres NUEVOS a proposito. Las 82 reglas
   antiguas (.marker-btn, .size-btn, .marker-states-*,
   .annotation-notes, .status-buttons) ya no encuentran
   elemento al que aplicarse, asi que aqui NO hace falta
   ni un solo !important. Quedan inertes; se borraran en
   una tanda posterior, comprobando selector por selector
   que ningun elemento las cumple.
   ============================================ */

.an-ctl{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:10px 0 0; flex-shrink:0;
}
.an-col{
  background:var(--an-superficie-color); border:1px solid var(--an-borde-color);
  border-radius:11px; padding:9px 10px; min-width:0;
}
.an-lbl{
  font-size:10px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--an-texto-2-color); margin-bottom:7px;
}

/* --- marcadores: una sola fila --- */
.an-marks{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
/* LOS CHIPS NO SIGUEN AL TEMA. Todas sus variables llevan el prefijo
   --an-mk-, y el arnes comprueba que ninguna se redefina en claro. */
.an-mk{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:7px 2px 6px; border:1px solid var(--an-mk-borde-color); border-radius:9px;
  background:var(--an-mk-fondo-color); color:var(--an-mk-texto-color); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.an-dot{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 2px var(--an-mk-halo-color); }
.an-nm{ font-size:10px; font-weight:700; letter-spacing:.3px; color:var(--an-mk-nm-color); }
.an-ct{
  position:absolute; top:-6px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border-radius:9px;
  font-size:10px; font-weight:700; background:var(--an-mk-ct-fondo-color); color:var(--an-mk-texto-color);
  border:2px solid var(--an-mk-ct-borde-color); font-variant-numeric:tabular-nums;
}
/* colores actuales, sin cambios */
.an-mk[data-marker=ok]      .an-dot{ background:var(--an-mk-ok-color); }
.an-mk[data-marker=roto]    .an-dot{ background:var(--an-mk-roto-color); }
.an-mk[data-marker=falta]   .an-dot{ background:var(--an-mk-falta-color); }
.an-mk[data-marker=detalle] .an-dot{ background:var(--an-mk-detalle-color); }
.an-mk.active[data-marker=ok]     { border-color:var(--an-mk-ok-color); background:var(--an-mk-ok-fondo-color); }
.an-mk.active[data-marker=roto]   { border-color:var(--an-mk-roto-color); background:var(--an-mk-roto-fondo-color); }
.an-mk.active[data-marker=falta]  { border-color:var(--an-mk-falta-color); background:var(--an-mk-falta-fondo-color); }
.an-mk.active[data-marker=detalle]{ border-color:var(--an-mk-detalle-color); background:var(--an-mk-detalle-fondo-color); }
.an-mk.active .an-nm{ color:var(--an-mk-texto-color); }
.an-mk.active .an-ct{ background:var(--an-mk-ct-activa-fondo-color); color:var(--an-mk-ct-activa-texto-color); }

/* --- deslizador de tamano --- */
.an-size{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.an-size-prev{ flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; }
.an-size-prev i{ display:block; border-radius:50%; background:var(--an-texto-2-color); box-shadow:0 0 0 2px var(--an-halo-color); }
.an-size input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:4px;
  border-radius:2px; background:var(--an-superficie-3-color); outline:0; margin:0;
}
/* El anillo del pulgar es del color del PANEL, no del chip: separa el pulgar
   de la pista, asi que tiene que seguir al tema con el panel. */
.an-size input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--an-acento-color); border:3px solid var(--an-superficie-color); cursor:pointer;
}
.an-size input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--an-acento-color); border:3px solid var(--an-superficie-color); cursor:pointer;
}
/* El unico cian que es TEXTO: usa la variable que SI sigue al tema. */
.an-size-val{ flex:0 0 34px; text-align:right; font-size:11px; font-weight:700; color:var(--an-acento-texto-color); font-variant-numeric:tabular-nums; }

/* --- notas --- */
.an-notes{ display:flex; flex-direction:column; }
.an-notes textarea{
  flex:1; width:100%; min-height:76px; resize:none; padding:9px 10px;
  border:1px solid var(--an-borde-color); border-radius:9px; background:var(--an-fondo-color);
  color:var(--an-texto-color); font-size:13px; line-height:1.45; font-family:inherit; outline:0;
  transition:border-color .15s, box-shadow .15s;
}
.an-notes textarea::placeholder{ color:var(--an-placeholder-color); }
.an-notes textarea:focus{ border-color:var(--an-foco-color); box-shadow:0 0 0 3px var(--an-foco-halo-color); }

@media (max-width:560px){
  .an-ctl{ grid-template-columns:1fr; }
}

/* ============================================
   AJUSTES TRAS PRUEBA EN TABLET   11-09-2026
   Bloque terminal. Clases nuevas donde hace falta,
   para no pelear con la cascada (igual que la tanda A).
   ============================================ */

/* --- (1) El lienzo se queda el sobrante vertical -------------
   Antes, .modal-body (flex:1 1 auto) absorbia el espacio y sus
   tres hijos se apilaban arriba sin flex-grow: de ahi el hueco
   muerto entre la barra de herramientas y el pie.
   Mas superficie de imagen = mas precision al colocar marcadores.

   OJO A LA ESPECIFICIDAD: #annotationModal .modal-body > *
   (L2104, @media 768) declara flex-shrink:0 !important con
   especificidad (1,1,0). Como la cascada se resuelve por
   longhand, ganaria al flex-shrink del atajo `flex`. Por eso
   este selector es (1,2,0) y no `.annotation-canvas-container`.
   Sin esto, en movil el lienzo creceria pero no podria encoger. */
#annotationModal .modal-body > .annotation-canvas-container {
  /* !important OBLIGATORIO aqui, al contrario que en la tanda A.
     Alli se renombraron las clases y no competia nadie. Aqui se
     reutiliza .annotation-canvas-container, que esta redeclarada 8
     veces con height/min-height/max-height/flex-shrink en !important
     (L947, L1099, L1723, L1918, L2110, L2159, L2280, L2317). Y en la
     cascada la IMPORTANCIA se resuelve ANTES que la especificidad: un
     (0,1,0) con !important gana a un (1,2,0) sin el. Sin estos
     !important el lienzo quedaba topado por max-height:50vh y el hueco
     seguia ahi en <=768px. Verificado con resolutor de cascada. */
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 220px !important;   /* suelo: por debajo, scrollea .modal-body */
  max-height: none !important;
  margin-bottom: 0 !important;
}

/* Los paneles de abajo conservan su altura natural y no ceden. */
#annotationModal .modal-body > .an-ctl,
#annotationModal .modal-body > .annotation-controls {
  flex: 0 0 auto !important;
}

/* --- (2) Herramientas del lienzo: Deshacer / Rehacer / Borrar
   Hasta ahora .canvas-tool-btn NO tenia estilo base en ninguna
   de las tres hojas: se pintaban como botones NATIVOS del
   navegador, y el unico rasgo del estado inerte era opacity:.4.
   Distinguir por brillo es lo que peor aguanta la luz de un
   almacen, donde el reflejo lava los negros. Aqui la diferencia
   es de FORMA: relleno solido frente a hueco, borde continuo
   frente a discontinuo. */
.an-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--an-borde-color);
  border-radius: 9px;
  background: var(--an-superficie-2-color);
  color: var(--an-texto-color);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.an-tool span { font-size: 16px; line-height: 1; }
.an-tool:active { background: var(--an-superficie-3-color); }
.an-tool:focus  { outline: 2px solid var(--an-acento-color); outline-offset: 2px; }

/* Estado inerte: hueco + borde discontinuo. El opacity se aplica
   SOLO al glifo: la etiqueta debe seguir leyendose, un boton
   inactivo tiene que poder leerse, no desvanecerse. */
.an-tool.disabled,
.an-tool:disabled {
  background: transparent;
  border: 1px dashed var(--an-borde-inerte-color);
  color: var(--an-texto-inerte-color);
  cursor: not-allowed;
  box-shadow: none;
}
.an-tool.disabled span,
.an-tool:disabled span { opacity: .45; }

.an-tool.disabled:active,
.an-tool:disabled:active { background: transparent; transform: none; }

/* ============================================================
   TEMA CLARO DEL VISOR  ·  paso 3 del modo dia   (PROPUESTA)
   ------------------------------------------------------------
   Solo redefine variables. Ni una propiedad, ni un selector nuevo:
   si esto necesitara tocar una regla, seria que el paso 1 no acabo.

   AMBITO: la clase va en <html> (para poder ponerla antes del primer
   pintado en el paso 4) y el alcance lo pone el selector. Lo que no
   nombre aqui se queda oscuro, que es lo acordado.

   LO QUE NO CAMBIA, a proposito:
     - Los cuatro colores de estado (--success/--error/--warning/--detail).
       Se leen sobre FOTOGRAFIAS (el punto de la miniatura) y contra el
       borde de la miniatura, no contra la superficie del tema. Cambiarlos
       obligaria al encargado a reaprender los colores y no ganaria nada.
     - El modal de anotacion: blindado en la zona 6.
     - Los marcadores de Fabric: nunca fueron del tema.
   ============================================================ */

html.tema-claro .project-viewer {

    /* --- Superficies ------------------------------------------------
       El fondo NO es blanco puro: al sol, un #ffffff a pantalla completa
       deslumbra y cansa. Un gris muy claro deja ademas que las tarjetas
       blancas se separen del fondo sin necesidad de sombras fuertes. */
    --pv-fondo-color: #eef0f3;              /* era #1a1a1a  (fondo del visor) */
    --surface-color: #ffffff;               /* era #1e1e1e  (tarjeta, cabecera) */
    --surface-2-color: #f4f6f8;             /* era #2a2a2a  (elevado) */
    --pv-superficie-2-color: #ffffff;       /* era #151515  (barra de busqueda) */
    --pv-entrada-color: #ffffff;            /* era #0f0f0f  (input) */
    --pv-cabecera-movil-color: rgba(255, 255, 255, 0.98);   /* era rgba(30,30,30,.98) */

    /* --- Bordes: la jerarquia se mantiene, invertida ---------------- */
    --border-color: #ccd2d9;                /* era #333 */
    --pv-borde-2-color: #d5dae0;            /* era #3a3a3a */
    --pv-borde-3-color: #c3cad4;            /* era #444444 */
    --pv-separador-color: #e6e9ed;          /* era #262626 */

    /* --- Tinta -------------------------------------------------------
       #1f2430 en vez de negro puro: el mismo que ya usa el tema claro de
       confirmacion-chequeo.js, y con 14,2 de contraste sobre blanco sobra. */
    --text-color: #1f2430;                  /* era #ffffff */
    --text-secondary: #5a6470;              /* era #888     -> 5,9 sobre blanco */
    --text-muted-color: #79818c;            /* era #555555  -> 4,0 (no es texto de leer) */
    --pv-texto-boton-color: #3c434d;        /* era #cfcfcf */
    /* Subido de #767e89 a #646b75 en el paso 5A: el anterior daba 4,10 sobre
       el fondo del input y no llegaba a 4,5. No se habia visto porque el
       placeholder no estaba entre las cadenas del arnes; ahora si esta.
       Su pareja oscura subio a #8a8a8a en 5B por el mismo motivo. */
    --pv-texto-placeholder-color: #646b75;
    --pv-texto-5-color: #5a6470;            /* era #aaaaaa */
    --pv-filtro-texto-color: #1f2430;       /* era #e8eaed */

    /* --- Semanticos que SI son texto --------------------------------
       Los tres se leen sobre superficie clara, asi que bajan de tono. */
    --pv-ok-claro-color: #1a7a35;           /* era #81c784  -> 5,0 sobre blanco */
    --pv-roto-claro-color: #b3261e;         /* era #ef9a9a  -> 6,6 */
    --pv-aviso-color: #8a5a00;              /* era #ffb74d  -> 6,2 */

    /* --- Panel de filtro por almacen --------------------------------
       Decidido: sigue al visor, no a la pestaña de Roturas. */
    --pv-filtro-fondo-1-color: #f7f9fb;     /* era #2d3548 */
    --pv-filtro-fondo-2-color: #eef2f6;     /* era #1e2530 */
    --pv-filtro-borde-color: #ccd4de;       /* era #3d4558 */

    /* --- Botones de la barra ---------------------------------------- */
    --pv-boton-color: #eef1f4;              /* era #242424 */
    --pv-boton-hover-color: #e2e6ea;        /* era #303030 */
    --pv-boton-inerte-color: #f2f4f6;       /* era #1c1c1c */
    --pv-limpiar-color: #fdeaea;            /* era #2a2020 */
    --pv-limpiar-borde-color: #f0c4c4;      /* era #4a3030 */
    --pv-limpiar-texto-color: #b3261e;      /* era #e0b4b4 */

    /* --- LAS CINCO QUE HAY QUE MIRAR EN LA TABLET -------------------
       Un blanco al 5% sobre #1a1a1a se ve; sobre #ffffff no existe. Y una
       sombra negra al 30% que sobre oscuro apenas se nota, sobre claro es
       una mancha. No se traducen: se deciden. Estos son los valores de la
       OPCION B (la intermedia) de cada una; ver el informe. */
    --pv-blanco-05-color: rgba(31, 36, 48, 0.04);
    --pv-blanco-10-color: rgba(31, 36, 48, 0.08);
    --pv-blanco-20-color: rgba(31, 36, 48, 0.14);
    --pv-negro-30-color: rgba(16, 24, 40, 0.10);
    --pv-negro-45-color: rgba(16, 24, 40, 0.14);

    /* --- Sombras ----------------------------------------------------- */
    /* Cuadro "ya informado" (ver arriba). El neutro sigue siendo neutro:
       ni verde ni rojo, que es lo que significa "NO". */
    --inf-estado-fondo-color: rgba(31, 36, 48, 0.06);
    --inf-estado-borde-color: rgba(16, 24, 40, 0.16);
    --inf-estado-texto-color: #3c434d;
    --inf-neutro-color: #5a6470;

    --shadow-color: rgba(16, 24, 40, 0.10);       /* era rgba(0,0,0,.35) */
    --pv-negro-60-color: rgba(16, 24, 40, 0.22);  /* la del punto de estado */

    /* --overlay-color NO cambia: es el fondo del punto de estado cuando
       la imagen no tiene color propio, y vive sobre la FOTO. */
}

/* --- Los que se escapan del visor -------------------------------------
   Los tres viven fuera de .project-viewer pero son suyos: el menu de
   INFORMAR lo mudamos a <body> por el overflow y el backdrop-filter, la
   pastilla del aviso es fixed, y los toasts cuelgan de su contenedor.
   Se nombran uno a uno; lo que no se nombre, se queda oscuro. */
html.tema-claro #informarMenu {
    --cf-panel: #ffffff;
    --cf-texto: #1f2430;
    --cf-borde: #ccd2d9;
}

html.tema-claro .unsaved-changes-banner {
    --text-color: #1f2430;
}

html.tema-claro .toast {
    --surface-color: #ffffff;
    --text-color: #1f2430;
    --border-color: #ccd2d9;
}

/* ============================================================
   EL MODAL DE ANOTACION EN ESCRITORIO  (13-09-2026)
   ------------------------------------------------------------
   La tanda 1b del canvas puso el modal a pantalla completa solo hasta
   1024px, que era donde estaba el atrapamiento en tablet. Por encima de
   1024 se quedo el diseno viejo -- ventana centrada -- y ahi faltaba UNA
   cosa: la ALTURA.

   Ninguna regla declara 'height' sobre #annotationModal .modal-content por
   encima de 1024. Solo topes (max-height:98vh en L2228). Asi que el modal
   era del tamano de su contenido... y su contenido tampoco tiene tamano
   propio, porque toda la cadena esta montada para REPARTIR un alto:

       .modal-content   display:flex; flex-direction:column   (sin height)
       .modal-body      flex:1 1 auto; min-height:0
       .modal-body > .annotation-canvas-container
                        flex:1 1 auto; height:auto; min-height:220px

   'flex: 1' reparte espacio LIBRE. En una columna sin altura definida no
   hay espacio libre, asi que el lienzo caia a su min-height. Y el bucle se
   cerraba en annotation-canvas.js:154, donde setupCanvasSize() mide el
   contenedor para dimensionar el canvas: contenedor a 220 -> canvas a 220
   -> contenedor a 220. El lienzo medi­a 220 px en cualquier pantalla, y por
   eso "arreglaba" estrechar la ventana: al bajar de 1024 entra el bloque
   de tablet, que si da height:100vh.

   NO LLEVA !important a proposito: nadie declara 'height' en este tramo,
   asi que gana sin pelear con nadie. Y NO se toca ni una regla de <=1024,
   que funciona y esta validada.

   El ancho ya era 1600px (L2228) y se queda: bajarlo a 1400 seria quitarle
   200 px de lienzo.
   ============================================================ */
@media (min-width: 1025px) {
    #annotationModal .modal-content {
        height: 92vh;
    }
}

/* ============================================================
   LA GALERIA EN MOVIL  ·  tres columnas  (13-09-2026)
   ------------------------------------------------------------
   POR QUE SALIA UNA SOLA COLUMNA. No era el !important: era el ORDEN.
   Hay tres bloques para .warehouse-images y el de 480 no es el ultimo:

       L1567  @media 768   minmax(150px,1fr)              (sin !important)
       L3007  @media 768   minmax(150px,1fr) !important   gap 8, padding 10
       L3053  @media 480   minmax(120px,1fr) !important   gap 6, padding 8
       L3903  @media 768   minmax(150px,1fr) !important   <- EL ULTIMO

   En un movil de 360 px casan LAS DOS consultas. Misma especificidad
   (0,1,0), las dos con !important: gana la ultima del fichero. Una media
   query no tiene prioridad por ser mas estrecha. Asi que a <=480 se
   aplicaba un HIBRIDO: la rejilla de 150 px de L3903 con el gap y el
   padding de L3053.

   Y con eso no caben dos columnas por SEIS pixeles:
       360 - 40 (padding del visor) - 4 (borde de seccion) - 16 (padding
       de la rejilla) = 300 disponibles;  2 x 150 + 6 de gap = 306.
   Umbral real: la segunda columna aparecia a partir de 366 px de viewport
   en MOLINS y de 406 px en PELICULAS (que mete otros 40 px de padding en
   .entrega-content). Un movil de 360 -- Android clasico, iPhone SE -- caia
   justo por debajo, y por eso el fallo parecia caprichoso.

   EL MARGEN GRANDE NO ESTABA EN EL GAP sino en los 40 px de padding del
   visor, que nunca habian tenido variante movil, y en los 40 de
   .entrega-content. Son el 11% y el 11% de una pantalla de 360.

   Este bloque va AL FINAL del fichero a proposito: mover los @media que ya
   estan arrastraria las demas declaraciones que llevan dentro, y hay
   demasiadas copias como para fiarse de que un bloque solo toca la rejilla.

   Resultado, en 360 x 780 descontando cabeceras:
       antes      1 columna  x 2 filas =  2 imagenes de golpe
       ahora      3 columnas x 5 filas = 15 imagenes de golpe
   Con 422 imagenes eso es pasar de ~210 pantallas a ~28.
   ============================================================ */
@media (max-width: 480px) {
    /* 8 px en vez de 20: en una pantalla de 360 esos 40 px eran el 11%.
       Lo ganan tambien la cabecera compacta y el buscador, que son hijos
       suyos. No cambia la ALTURA de .project-header, asi que el
       ResizeObserver de project-image-search.js no tiene que recalcular
       --pis-sticky-top. */
    .project-viewer { padding: 8px; }

    /* Lo mismo en PELICULAS. La segunda regla es la que gana hoy (va
       despues y lleva el mismo padding), asi que hay que nombrar las dos
       o el cambio se queda a medias. */
    .entrega-content,
    .entrega-header:not(.collapsed) + .entrega-content { padding: 8px; }

    /* 96 px de minimo: da tres columnas en el movil estrecho y mantiene la
       miniatura por encima de los 100 px reales, que es donde todavia se
       reconoce un mueble. El punto de estado mide 22 px: una quinta parte
       del lado. */
    /* !important OBLIGATORIO en las tres, y por la misma razon que el bloque
       del lienzo: EN LA CASCADA LA IMPORTANCIA SE RESUELVE ANTES QUE LA
       ESPECIFICIDAD Y QUE EL ORDEN. Las tres propiedades tienen competidor
       con !important -- la rejilla en L3903 (@768) y el gap y el padding en
       L3053 (@480) -- asi que sin esto el bloque entero seria decorativo.
       Comprobado con resolutor de cascada a 360, 412 y 480 px. */
    .warehouse-images {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
        gap: 4px !important;
        padding: 6px !important;
    }
}