:root{
    --bg:#000;
    --panel:#0b0b0b;
    --soft:#111;
    --line:#333;
    --muted:#9a9a9a;
    --text:#fff;
    --ok:#9be28f;
    --warn:#ffd166;
    --img-view-w:150px;
    --img-view-h:255px;
    --accent:#2a7a5a;
}

*{ box-sizing:border-box; }

html, body{
    height:100%;
    margin:0;
    overflow:hidden;
    font-family:Poppins, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
}

button, input, textarea, select{
    font:inherit;
}

button{
    background:var(--soft);
    color:var(--text);
    border:1px solid #555;
    padding:7px 12px;
    border-radius:8px;
    cursor:pointer;
    white-space:nowrap;
}

button:hover{ background:#222; }
button.small{ padding:5px 8px; font-size:11px; }
button.danger{ color:#ff8ea0; border-color:#5a2230; }
button.star-btn{
    background:transparent;
    border:none;
    color:#666;
    font-size:16px;
    padding:2px 4px;
    line-height:1;
}
button.star-btn.on{ color:#ffd166; }
button.star-btn:hover{ color:#ffd166; background:transparent; }

.app{
    height:100vh;
    display:grid;
    grid-template-rows:52px auto 1fr 42px;
}

.fotos-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    padding:8px 14px;
    background:#1a1505;
    border-bottom:1px solid #5a4a15;
    color:#ffd166;
    font-size:12px;
}

.fotos-banner[hidden]{
    display:none !important;
}

.fotos-banner strong{ color:#fff; }

.topbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    padding:8px 14px;
    border-bottom:1px solid #222;
    background:#050505;
}

.brand h1{
    margin:0;
    font-size:17px;
}

.brand small{
    display:block;
    color:var(--muted);
    font-size:11px;
}

.search input{
    width:100%;
    padding:7px 10px;
    border:1px solid #444;
    border-radius:8px;
    background:#000;
    color:#fff;
}

.actions-top{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
}

.prompt-card{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #2a2a2a;
    border-radius:8px;
    padding:7px;
    margin-bottom:6px;
    cursor:pointer;
    font-size:11px;
}

.prompt-card-check{
    flex-shrink:0;
    width:16px;
    height:16px;
    accent-color:var(--accent);
    cursor:pointer;
}

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

.prompt-card-thumb{
    width:36px;
    height:36px;
    flex-shrink:0;
    border:1px solid #555;
    object-fit:cover;
    background:#000;
    border-radius:4px;
}

.prompt-card-thumb.empty{
    opacity:0.25;
}

.workspace{
    display:grid;
    grid-template-columns:230px 1fr;
    min-height:0;
}

.sidebar{
    border-right:1px solid #222;
    padding:10px;
    overflow:auto;
    background:#060606;
}

.sidebar h2{
    margin:0 0 8px;
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
}

.sidebar-controls{
    margin-bottom:8px;
}

.sidebar-controls label{
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-bottom:3px;
}

.sidebar-controls select{
    width:100%;
    padding:5px 6px;
    border:1px solid #444;
    border-radius:6px;
    background:#000;
    color:#fff;
    font-size:11px;
}

.fav-filter{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    font-size:11px;
    color:var(--muted);
    cursor:pointer;
    user-select:none;
}

.fav-filter input{
    accent-color:var(--accent);
}

.lote-bar{
    display:flex;
    gap:6px;
    margin-bottom:8px;
    flex-wrap:wrap;
}

.lote-bar button{ flex:1; font-size:10px; padding:5px 6px; }

.prompt-card.active{
    border-color:#fff;
}

.prompt-card.fav-card{
    border-color:#5a4a15;
}

.prompt-card strong,
.prompt-card span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.prompt-card span{ color:var(--muted); }

.main{
    display:grid;
    grid-template-rows:minmax(320px, 44%) minmax(0, 1fr);
    gap:10px;
    padding:10px;
    min-height:0;
}

.upper{
    display:grid;
    grid-template-columns:var(--img-view-w) var(--img-view-w) minmax(0, 1fr);
    gap:10px;
    min-height:0;
}

.image-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.image-frame{
    position:relative;
    width:100%;
    height:var(--img-view-h);
    border:2px solid #fff;
    background:#000;
    overflow:hidden;
    flex-shrink:0;
    cursor:pointer;
    user-select:none;
}

.image-frame.drag-over{
    border-color:var(--ok);
    box-shadow:inset 0 0 0 2px rgba(155,226,143,0.35);
}

.image-frame canvas.foto-view{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    z-index:1;
}

.image-frame.sin-foto canvas.foto-view{
    opacity:0;
}

.crop-hint{
    position:absolute;
    left:0;
    right:0;
    bottom:4px;
    z-index:3;
    text-align:center;
    font-size:9px;
    color:#bbb;
    pointer-events:none;
    padding:0 4px;
}

.panel{
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    padding:8px;
    min-height:0;
}

.panel label{
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:5px;
}

.image-actions{
    display:flex;
    gap:5px;
    margin-top:6px;
    flex-wrap:wrap;
}

.prompt-editor textarea,
.notas-panel textarea,
.meta-fields input,
.meta-fields textarea{
    width:100%;
    border:1px solid #444;
    border-radius:8px;
    background:#000;
    color:#fff;
    padding:8px;
    outline:none;
}

.notas-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.notas-panel header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
    font-size:12px;
    color:var(--muted);
}

#notasPrompt{
    flex:1;
    min-height:0;
    resize:none;
    line-height:1.4;
    font-size:12px;
}

.prompt-editor{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.prompt-editor header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
    font-size:12px;
    color:var(--muted);
    flex-wrap:wrap;
}

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

.editor-fields .field{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.editor-fields .field.full{
    grid-column:1 / -1;
}

.editor-fields label{
    margin:0;
    font-size:10px;
}

.editor-fields input{
    width:100%;
    padding:5px 8px;
    border:1px solid #444;
    border-radius:6px;
    background:#000;
    color:#fff;
    font-size:12px;
}

.titulo-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    min-width:200px;
    flex:1;
    justify-content:flex-end;
}

.titulo-wrap label{
    margin:0;
    white-space:nowrap;
}

#inputTituloPrompt{
    width:100%;
    max-width:260px;
    min-width:140px;
    padding:5px 8px;
    border:1px solid #444;
    border-radius:6px;
    background:#000;
    color:#fff;
    font-size:12px;
}

.prompt-card .titulo-bib{
    color:var(--ok);
    font-size:10px;
    margin-top:2px;
}

.prompt-card .tags-bib{
    color:#7ab;
    font-size:9px;
    margin-top:2px;
}

.prompt-card .meta-bib{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:3px;
    font-size:9px;
    color:#777;
}

.prompt-card .fecha-bib{
    color:#888;
}

.prompt-card .puntaje-bib{
    padding:1px 5px;
    border-radius:4px;
    background:#1a2a1a;
    border:1px solid #2a5a2a;
    color:#9be28f;
    font-weight:600;
}

.puntaje-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 8px;
    border-left:1px solid #333;
    border-right:1px solid #333;
}

.puntaje-wrap label{
    font-size:11px;
    color:var(--muted);
    white-space:nowrap;
}

.puntaje-wrap select{
    width:54px;
    padding:5px 6px;
    border:1px solid #444;
    border-radius:6px;
    background:#000;
    color:#fff;
    font-size:12px;
}

#textoPrompt{
    flex:1;
    min-height:0;
    resize:none;
    line-height:1.55;
    font-size:13px;
}

.bottombar{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:6px 12px;
    border-top:1px solid #222;
    background:#050505;
}

.meta{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    font-size:11px;
}

.meta label{ color:var(--muted); }

.meta input{
    width:110px;
    padding:5px 7px;
    border:1px solid #444;
    border-radius:6px;
    background:#000;
    color:#fff;
}

.group{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}

.status{
    position:fixed;
    right:14px;
    bottom:50px;
    padding:8px 12px;
    border:1px solid #115d52;
    border-radius:8px;
    background:#04120f;
    color:var(--ok);
    font-size:12px;
    display:none;
    z-index:30;
}

.status.show{ display:block; }

.dirty-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ffd166;
    margin-left:6px;
    vertical-align:middle;
    opacity:0;
}
.dirty-dot.on{ opacity:1; }

/* Modal zoom / compare */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.88);
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal-overlay.open{ display:flex; }

.modal-box{
    width:min(96vw, 1200px);
    max-height:92vh;
    background:#0b0b0b;
    border:1px solid #333;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    border-bottom:1px solid #222;
    gap:10px;
}

.modal-head h3{
    margin:0;
    font-size:14px;
}

.modal-body{
    padding:12px;
    overflow:auto;
    min-height:0;
    flex:1;
}

.compare-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    min-height:60vh;
}

.compare-pane{
    display:flex;
    flex-direction:column;
    border:1px solid #333;
    border-radius:8px;
    overflow:hidden;
    background:#050505;
}

.compare-pane h4{
    margin:0;
    padding:8px 10px;
    font-size:12px;
    color:var(--muted);
    border-bottom:1px solid #222;
}

.compare-view{
    flex:1;
    min-height:50vh;
    overflow:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:grab;
    background:#000;
}

.compare-view:active{ cursor:grabbing; }

.compare-view img{
    max-width:100%;
    max-height:70vh;
    transform-origin:center center;
    transition:transform 0.05s linear;
    user-select:none;
    pointer-events:none;
}

.compare-empty{
    color:#666;
    font-size:13px;
    padding:24px;
}

.modal-hint{
    font-size:11px;
    color:var(--muted);
}

/* Historial panel */
.historial-panel{
    position:fixed;
    top:0;
    right:0;
    width:min(380px, 100vw);
    height:100vh;
    background:#0b0b0b;
    border-left:1px solid #333;
    z-index:90;
    display:none;
    flex-direction:column;
    box-shadow:-8px 0 24px rgba(0,0,0,0.5);
}
.historial-panel.open{ display:flex; }

.historial-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid #222;
}
.historial-head h3{ margin:0; font-size:14px; }

.historial-list{
    flex:1;
    overflow:auto;
    padding:10px;
}

.hist-item{
    border:1px solid #2a2a2a;
    border-radius:8px;
    padding:8px 10px;
    margin-bottom:8px;
    font-size:12px;
}
.hist-item .hist-ver{
    color:var(--ok);
    font-weight:600;
    font-size:11px;
}
.hist-item .hist-fecha{
    color:#777;
    font-size:10px;
    margin:2px 0 4px;
}
.hist-item .hist-res{
    color:#ccc;
    line-height:1.4;
}

.backdrop-hist{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:85;
    display:none;
}
.backdrop-hist.open{ display:block; }

.capture-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(0,0,0,0.82);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:10px;
    gap:8px;
}
.capture-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:center;
    width:100%;
    color:#ddd;
    font-size:12px;
}
.capture-toolbar span{ margin-right:auto; padding-left:4px; }
.capture-btn{
    background:#111;
    color:#fff;
    border:1px solid #555;
    padding:7px 12px;
    border-radius:8px;
    cursor:pointer;
}
.capture-btn:hover{ background:#222; }
.capture-btn.danger{ color:#ff8ea0; border-color:#5a2230; }
.capture-stage{
    max-width:100%;
    max-height:calc(100vh - 70px);
    cursor:crosshair;
    border:1px solid #444;
    box-shadow:0 0 0 1px #222;
}
.capture-sel{
    position:fixed;
    border:2px solid #00c8e0;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.45);
    pointer-events:none;
    z-index:201;
}

@media (max-width:1100px){
    html, body{ overflow:auto; }
    .app{ height:auto; min-height:100vh; grid-template-rows:auto 1fr auto; }
    .workspace{ grid-template-columns:1fr; }
    .upper{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
    .upper .prompt-editor{ grid-column:1 / -1; }
    .main{ grid-template-rows:auto auto; }
    .actions-top{ flex-wrap:wrap; }
    .compare-grid{ grid-template-columns:1fr; }
}