*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,system-ui,Arial;background:#f4f7f4;color:#203026}button,input,select,textarea{font:inherit}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0c5b32,#168a4c)}.login-card{width:min(420px,92vw);background:#fff;padding:38px;border-radius:22px;box-shadow:0 20px 60px #00351f55}.brand,.logo{font-weight:800;color:#08753d;letter-spacing:.3px}.login-card h1{margin:8px 0 4px}.login-card p{color:#68756d;margin:0 0 24px}.login-card input{width:100%;padding:14px;margin:7px 0;border:1px solid #d8e1da;border-radius:10px}.login-card button,.modal button{width:100%;padding:14px;border:0;border-radius:10px;background:#08753d;color:#fff;font-weight:700;margin-top:12px}.error{color:#b3261e;margin-top:12px}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);width:100vw;height:100vh;overflow:hidden}aside{width:240px;height:100vh;background:#fff;border-right:1px solid #dfe8e1;padding:24px 16px;display:flex;flex-direction:column;z-index:1000;overflow-y:auto}.logo{font-size:22px;padding:4px 10px 18px}.who{padding:12px 10px;margin-bottom:14px;background:#eef7f1;border-radius:10px;font-size:13px}.nav{border:0;background:transparent;text-align:left;padding:12px;border-radius:9px;margin:2px 0;color:#35463b;cursor:pointer;width:100%}.nav.active{background:#e3f3e8;color:#086c39;font-weight:700}.nav.danger{color:#a02c27}.spacer{flex:1}main{position:relative;min-width:0;width:100%;height:100vh;overflow:hidden}
.map-tools{margin:4px 0 10px;padding:10px;border-left:3px solid #159154;background:#f6fbf7}.map-tools label,.side-title{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#607067;margin:8px 0 5px}.map-tools select{width:100%;padding:9px;border:1px solid #d8e1da;border-radius:8px;background:#fff;color:#203026}.side-section{border-top:1px solid #dfe8e1;margin-top:12px;padding-top:4px}.kml-layers{font-size:12px;line-height:1.4}.map-hint{font-size:12px;color:#65736a;line-height:1.4;margin:12px 0 4px}.point-card{border-top:1px solid #dfe8e1;padding-top:10px;margin-top:10px;font-size:12px}.point-card p{margin:6px 0}.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:#e8eee9}.muted{color:#748078;font-size:12px}
header{height:86px;background:#fff;border-bottom:1px solid #dfe8e1;display:flex;align-items:center;padding:0 28px}header h2{margin:0;font-size:22px}#subtitle{font-size:13px;color:#78847c;margin-top:3px}.view{padding:26px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card,.panel{background:#fff;border:1px solid #e0e8e2;border-radius:14px;box-shadow:0 4px 18px #244d3420}.card{padding:20px}.card span{display:block;color:#718078;font-size:13px}.card strong{display:block;font-size:30px;margin-top:8px;color:#0a6f3c}.panel{padding:20px;margin-top:18px}.panel h3{margin-top:0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.project{border:1px solid #e0e8e2;border-radius:12px;padding:16px;cursor:pointer}.project:hover{border-color:#75b98f;background:#f8fcf9}.project small{color:#718078}
#map.view{position:absolute;inset:0;padding:0;margin:0;width:100%;height:100%;background:#ddd;z-index:10}#mapCanvas{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0}.map-mode #mainHeader{display:none}.modal{position:fixed;inset:0;background:#0b261999;display:grid;place-items:center;z-index:9999}.modal-card{background:#fff;width:min(460px,92vw);padding:24px;border-radius:16px}.modal-card label{display:block;font-size:13px;font-weight:700;margin:14px 0 5px}.modal-card select,.modal-card textarea{width:100%;padding:10px;border:1px solid #d5dfd8;border-radius:8px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal .secondary{background:#e7ece8;color:#344239}.status{display:inline-block;padding:4px 8px;border-radius:20px;background:#e4f3e8;color:#08723d;font-size:12px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #e4ebe6}th{font-size:12px;color:#6d7b72}@media(max-width:900px){.app{grid-template-columns:210px minmax(0,1fr)}aside{width:210px;padding:16px 10px}.cards{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}.view{padding:14px}}


/* =========================================================
   BUSCADOR TRANSLÚCIDO SOBRE EL MAPA
   ========================================================= */

.map-search{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:min(620px,calc(100% - 100px));
    min-height:52px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 10px 7px 16px;

    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    backdrop-filter:blur(14px) saturate(150%);

    border:1px solid rgba(255,255,255,.78);
    border-radius:18px;

    box-shadow:
        0 8px 30px rgba(19,55,35,.18),
        inset 0 1px 0 rgba(255,255,255,.65);

    z-index:700;
}

.map-search:focus-within{
    background:rgba(255,255,255,.84);
    border-color:rgba(8,117,61,.38);
    box-shadow:
        0 10px 34px rgba(19,55,35,.22),
        0 0 0 3px rgba(8,117,61,.10);
}

.map-search-icon{
    flex:0 0 auto;
    font-size:25px;
    line-height:1;
    color:#08753d;
    transform:rotate(-15deg);
    user-select:none;
}

#mapSearchInput{
    flex:1;
    min-width:0;
    height:38px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#173526;
    font-size:15px;
}

#mapSearchInput::placeholder{
    color:rgba(42,69,54,.67);
}

.map-search-clear{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    color:#456052;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.map-search-clear:hover{
    background:rgba(255,255,255,.85);
    color:#08753d;
}

.map-search-results{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;

    max-height:340px;
    overflow:auto;

    padding:7px;

    background:rgba(255,255,255,.90);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    backdrop-filter:blur(16px) saturate(150%);

    border:1px solid rgba(255,255,255,.86);
    border-radius:14px;

    box-shadow:0 12px 35px rgba(18,49,31,.22);
}

.map-search-result{
    width:100%;
    display:block;
    padding:11px 12px;
    border:0;
    border-radius:10px;
    background:transparent;
    text-align:left;
    color:#203026;
    cursor:pointer;
}

.map-search-result:hover{
    background:rgba(227,243,232,.85);
}

.map-search-result b{
    display:block;
    color:#086c39;
    margin-bottom:3px;
}

.map-search-result small{
    display:block;
    color:#64746a;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.map-search-empty{
    padding:12px;
    color:#6f7d74;
    font-size:13px;
    text-align:center;
}

@media(max-width:900px){
    .map-search{
        top:10px;
        width:calc(100% - 20px);
    }
}





/* =========================================================
   CAPAS KML - DISEÑO DEFINITIVO
   ========================================================= */

.kml-layers{
    display:flex;
    flex-direction:column;
    gap:3px;
    width:100%;
    margin-top:5px;
}

.kml-layer-row{
    box-sizing:border-box;
    display:grid !important;
    grid-template-columns:18px 20px minmax(0,1fr) 16px !important;
    align-items:center !important;
    column-gap:7px !important;

    width:100% !important;
    min-width:0 !important;
    min-height:32px;

    margin:0 !important;
    padding:5px 5px !important;

    border-radius:7px;
    cursor:pointer;

    writing-mode:horizontal-tb !important;
    text-transform:none !important;
    letter-spacing:0 !important;

    font-size:12px !important;
    font-weight:600 !important;
    color:#35463b !important;
}

.kml-layer-row:hover{
    background:#eaf6ed;
}

.kml-layer-row input[type="checkbox"]{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:1px !important;
    height:1px !important;
    margin:0 !important;
}

.kml-check{
    grid-column:1;
    display:block !important;
    box-sizing:border-box;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    margin:0 !important;

    border:1.5px solid #93a79a;
    border-radius:4px;
    background:#fff;
    position:relative;
}

.kml-layer-row input:checked + .kml-check{
    background:#08753d;
    border-color:#08753d;
}

.kml-layer-row input:checked + .kml-check::after{
    content:'✓';
    position:absolute;
    inset:-2px 0 0 0;
    text-align:center;
    color:#fff;
    font-size:12px;
    line-height:16px;
    font-weight:900;
}

.kml-color-swatch{
    grid-column:2;
    display:block !important;
    box-sizing:border-box;
    width:20px !important;
    height:10px !important;
    min-width:20px !important;
    margin:0 !important;

    border-radius:4px;
    border:1px solid rgba(0,0,0,.18);
    box-shadow:0 1px 2px rgba(0,0,0,.10);
}

.kml-layer-name{
    grid-column:3;
    display:block !important;
    min-width:0 !important;

    writing-mode:horizontal-tb !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;

    line-height:1.25;
}

.kml-spinner{
    grid-column:4;
    box-sizing:border-box;
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    margin:0 !important;

    border:2px solid #c9d9ce;
    border-top-color:#08753d;
    border-radius:50%;
    animation:kmlspin .7s linear infinite;
}

.kml-spinner.hidden{
    visibility:hidden !important;
    display:block !important;
}

.kml-error{
    color:#a02c27;
    font-size:12px;
}

.kml-popup-desc{
    margin-top:6px;
    font-size:12px;
    max-height:220px;
    overflow:auto;
}

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


/* =========================================================
   POPUP DE TRABAJOS SOBRE EL MAPA
   ========================================================= */

.work-popup{
    width:300px;
    max-width:100%;
    color:#203026;
}

.work-popup-title{
    padding-bottom:7px;
    margin-bottom:7px;
    border-bottom:1px solid #dce7df;

    color:#08753d;
    font-size:16px;
    font-weight:800;
}

.work-popup-observation{
    margin:6px 0 10px;
    line-height:1.35;
    font-size:13px;
}

.work-popup-data{
    display:flex;
    flex-direction:column;
    gap:4px;

    color:#647269;
    font-size:11px;
}

.work-popup-photos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;

    margin-top:10px;
}

.work-popup-photos img{
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:cover;

    border-radius:6px;
    background:#e8eee9;
}

.work-popup-no-photos{
    margin-top:9px;
    padding:7px;

    border-radius:6px;
    background:#f1f5f2;

    color:#748078;
    font-size:11px;
    text-align:center;
}

.work-popup-loading{
    min-width:220px;
    padding:4px;
}

.work-popup-loading b{
    color:#08753d;
}

.work-popup-loading div{
    margin-top:5px;
    color:#748078;
    font-size:12px;
}

/* Leaflet popup un poco más limpio */
.leaflet-popup-content{
    margin:13px 15px !important;
}

.leaflet-popup-content-wrapper{
    border-radius:12px !important;
}


/* =========================================================
   ESTADO DE CARGA DE FOTOS AUTENTICADAS
   ========================================================= */

img[data-auth-src]{
    background:
        linear-gradient(
            110deg,
            #e7eee9 8%,
            #f5f8f6 18%,
            #e7eee9 33%
        );
    background-size:200% 100%;
    animation:photoLoading 1.2s linear infinite;
}

img.auth-image-loaded{
    animation:none;
    background:#e8eee9;
}

img.auth-image-error{
    animation:none;
    background:#eef2ef;
    opacity:.45;
}

@keyframes photoLoading{
    to{
        background-position-x:-200%;
    }
}



/* =========================================================
   VISOR GRANDE DE FOTOGRAFIAS
   ========================================================= */

.work-popup-photos img,
.photo-grid img{
    cursor:zoom-in;
}

.work-photo-viewer{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:rgba(8,20,13,.90);

    z-index:20000;
}

.work-photo-viewer.hidden{
    display:none !important;
}

.work-photo-full{
    display:none;

    max-width:94vw;
    max-height:90vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:10px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.55);
}

.work-photo-full.visible{
    display:block;
}

.work-photo-close{
    position:absolute;

    top:20px;
    right:25px;

    width:46px;
    height:46px;

    padding:0;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.92);

    color:#183025;

    font-size:32px;
    line-height:42px;
    font-weight:400;

    cursor:pointer;

    z-index:2;
}

.work-photo-close:hover{
    background:#fff;
}

.work-photo-loading{
    color:#fff;
    font-size:15px;
    font-weight:600;
}



/* =========================================================
   ZOOM DEL VISOR DE FOTOGRAFIAS
   ========================================================= */

.work-photo-stage{
    position:absolute;
    inset:70px 20px 20px 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.work-photo-stage .work-photo-full{
    max-width:92%;
    max-height:92%;

    transform-origin:center center;

    transition:transform .12s ease;

    user-select:none;
    -webkit-user-drag:none;

    cursor:zoom-in;
}

.work-photo-stage .work-photo-full.visible{
    display:block;
}

.work-photo-stage .work-photo-full.dragging{
    cursor:grabbing;
    transition:none;
}

.work-photo-toolbar{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:7px;

    padding:6px 8px;

    border-radius:12px;

    background:rgba(255,255,255,.94);

    box-shadow:0 5px 20px rgba(0,0,0,.25);

    z-index:3;
}

.work-photo-toolbar button{
    min-width:38px;
    height:34px;

    padding:0 10px;

    border:0;
    border-radius:7px;

    background:#e8f3eb;
    color:#08753d;

    font-weight:800;
    font-size:18px;

    cursor:pointer;
}

.work-photo-toolbar button:hover{
    background:#d8ebde;
}

#workPhotoZoomValue{
    min-width:55px;

    color:#263d30;

    font-size:12px;
    font-weight:800;

    text-align:center;
}



/* =========================================================
   MARCADORES DE TRABAJOS - ICONO DE FOTOGRAFIA
   ========================================================= */

.work-photo-marker{
    background:none !important;
    border:none !important;
}

.work-photo-marker-pin{
    position:relative;

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#08753d;

    border:3px solid #fff;
    border-radius:50% 50% 50% 8px;

    transform:rotate(-45deg);

    box-shadow:
        0 3px 8px rgba(0,0,0,.35);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.work-photo-marker-pin svg{
    width:21px;
    height:21px;

    fill:#fff;

    transform:rotate(45deg);
}

.work-photo-marker:hover .work-photo-marker-pin{
    transform:
        rotate(-45deg)
        scale(1.12);

    box-shadow:
        0 5px 12px rgba(0,0,0,.42);
}



/* =========================================================
   MARCADORES DE TRABAJO
   CAMARA + NUMERO DE FOTOGRAFIAS
   ========================================================= */

.ramblas-work-marker{
    background:none !important;
    border:0 !important;
}

.ramblas-camera-pin{
    position:relative;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    background:#08753d;

    border:3px solid #fff;
    border-radius:50% 50% 50% 8px;

    transform:rotate(-45deg);

    box-shadow:
        0 3px 9px rgba(0,0,0,.40);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

    cursor:pointer;
}

.ramblas-camera-pin svg{
    width:22px;
    height:22px;

    fill:#fff;

    transform:rotate(45deg);
}

/*
 * Contador circular de fotografías.
 */
.ramblas-photo-count{
    position:absolute;

    top:-10px;
    right:-10px;

    min-width:23px;
    height:23px;

    padding:0 5px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    background:#fff;
    color:#08753d;

    border:2px solid #08753d;
    border-radius:999px;

    font-size:11px;
    line-height:1;
    font-weight:900;

    transform:rotate(45deg);

    box-shadow:
        0 2px 5px rgba(0,0,0,.28);
}

.ramblas-work-marker:hover
.ramblas-camera-pin{

    transform:
        rotate(-45deg)
        scale(1.12);

    box-shadow:
        0 5px 13px rgba(0,0,0,.45);
}



/* =========================================================
   CREAR PROYECTO
   ========================================================= */

.projects-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.projects-toolbar h3{
    margin:0 0 3px 0;
}

.create-project-btn{
    width:auto;
    padding:12px 18px;
    background:#08753d;
    color:#fff;
    border:0;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
}

.create-project-btn:hover{
    filter:brightness(1.08);
}


/* Ventana modal */

.project-modal{
    position:fixed;
    inset:0;
    z-index:10000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.52);
    backdrop-filter:blur(3px);
}

.project-modal.hidden{
    display:none !important;
}

.project-modal-card{
    width:min(520px,100%);
    box-sizing:border-box;

    padding:24px;

    background:#fff;
    color:#202820;

    border-radius:16px;

    box-shadow:
        0 18px 60px rgba(0,0,0,.30);
}

.project-modal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;

    margin-bottom:22px;
}

.project-modal-header h2{
    margin:0;
    color:#08753d;
}

.project-modal-header p{
    margin:5px 0 0;
    color:#66736a;
}

.project-modal-close{
    width:38px;
    height:38px;
    padding:0;

    border:0;
    border-radius:50%;

    font-size:26px;
    line-height:1;

    cursor:pointer;
}

.project-modal-card label{
    display:block;
    margin:15px 0 6px;

    font-weight:700;
}

.project-modal-card input,
.project-modal-card textarea{
    width:100%;
    box-sizing:border-box;

    padding:11px 12px;

    border:1px solid #cbd5ce;
    border-radius:9px;

    font:inherit;
}

.project-modal-card textarea{
    resize:vertical;
}

.project-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;

    margin-top:22px;
}

.project-modal-actions button{
    width:auto;
    min-width:130px;
}



/* =========================================================
   GESTIÓN DE USUARIOS
   ========================================================= */

.users-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.users-toolbar h3{
    margin:0 0 3px 0;
}

.users-panel{
    overflow:auto;
}

.users-table-wrap{
    width:100%;
    overflow-x:auto;
}

.users-table{
    min-width:620px;
}

.users-table td{
    vertical-align:middle;
}

.user-role,
.user-status{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.user-role-worker{
    background:#e8f3eb;
    color:#08753d;
}

.user-role-admin{
    background:#e8eef8;
    color:#245a9a;
}

.user-role-superadmin{
    background:#f3eafa;
    color:#7637a5;
}

.user-active{
    background:#e5f5e9;
    color:#08753d;
}

.user-inactive{
    background:#f3e7e6;
    color:#9a312b;
}

.user-modal-card{
    max-height:90vh;
    overflow-y:auto;
}

.user-modal-card select{
    width:100%;
    box-sizing:border-box;
    padding:11px 12px;
    border:1px solid #cbd5ce;
    border-radius:9px;
    background:#fff;
    color:#202820;
    font:inherit;
}

.user-projects-title{
    margin-top:20px;
    font-weight:800;
    color:#263a2e;
}

.user-projects-help{
    margin:4px 0 9px;
}

.user-project-selector{
    display:grid;
    gap:7px;
    max-height:210px;
    overflow-y:auto;
    padding:6px;
    border:1px solid #dce5df;
    border-radius:10px;
    background:#f8fbf9;
}

.user-project-option{
    display:flex !important;
    align-items:flex-start;
    gap:10px;
    margin:0 !important;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    background:#fff;
    border:1px solid transparent;
}

.user-project-option:hover{
    border-color:#91c5a5;
    background:#f5fbf7;
}

.user-project-option input{
    width:18px !important;
    height:18px;
    margin:2px 0 0 !important;
    flex:0 0 auto;
    accent-color:#08753d;
}

.user-project-option span{
    min-width:0;
}

.user-project-option b{
    display:block;
    color:#263a2e;
}

.user-project-option small{
    display:block;
    margin-top:3px;
    color:#748078;
    font-weight:400;
}

@media(max-width:900px){

    .users-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }
}



/* =========================================================
   USUARIOS PULSABLES + AVATARES
   ========================================================= */

.user-card-list{
    display:grid;
    gap:8px;
}

.user-card-row{
    width:100%;
    min-height:72px;
    display:grid;
    grid-template-columns:52px minmax(180px,1fr) 150px 100px 24px;
    align-items:center;
    gap:14px;
    padding:10px 14px;
    border:1px solid #e0e8e2;
    border-radius:12px;
    background:#fff;
    color:#263a2e;
    text-align:left;
}

.user-card-clickable{
    cursor:pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.user-card-clickable:hover{
    background:#f7fcf8;
    border-color:#8fc3a2;
    box-shadow:0 4px 14px rgba(20,85,48,.10);
    transform:translateY(-1px);
}

.user-card-readonly{
    cursor:default;
    opacity:.80;
}

.user-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#e3f3e8;
    color:#08753d;
    border:2px solid #d2e8d9;
    font-size:14px;
    font-weight:900;
    letter-spacing:.5px;
}

.user-avatar img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.user-avatar-large{
    width:58px;
    height:58px;
    flex-basis:58px;
    font-size:17px;
}

.user-card-identity{
    min-width:0;
}

.user-card-identity strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}

.user-card-identity small{
    display:block;
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#758178;
}

.user-card-arrow{
    color:#08753d;
    font-size:30px;
    line-height:1;
    text-align:right;
}

.manage-user-heading{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.manage-user-heading h2{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-project-disabled{
    opacity:.55;
    cursor:not-allowed;
}

@media(max-width:850px){

    .user-card-row{
        grid-template-columns:46px minmax(0,1fr) 24px;
    }

    .user-card-role,
    .user-card-state{
        display:none;
    }
}



/* =========================================================
   GESTIÓN COMPLETA DE USUARIOS
   ========================================================= */

.user-management-card{
    width:min(720px,calc(100vw - 30px));
    max-height:92vh;
    overflow-y:auto;
}

.manage-user-title{
    min-width:0;
}

.manage-user-title p{
    margin:4px 0 0;
    color:#738078;
}

.user-management-section{
    margin-top:18px;
    padding:16px;
    border:1px solid #e1e9e3;
    border-radius:12px;
    background:#fbfdfb;
}

.user-management-section h3{
    margin:0 0 14px;
    font-size:15px;
    color:#174c30;
}

.user-management-section input[type="text"],
.user-management-section input[type="password"],
.user-management-section select{
    width:100%;
    box-sizing:border-box;
    margin-top:6px;
    margin-bottom:12px;
}

.user-account-status-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-top:8px;
    padding:12px 14px;
    border-radius:9px;
    background:#f1f5f2;
}

.manage-status-active{
    color:#08753d;
}

.manage-status-inactive{
    color:#a22b2b;
}

.user-management-action{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:12px 0;
}

.user-management-action + .user-management-action{
    border-top:1px solid #e5e9e6;
}

.user-management-action strong{
    display:block;
    margin-bottom:4px;
}

.user-management-action small{
    display:block;
    color:#77827a;
    line-height:1.4;
}

.warning-button{
    flex:0 0 auto;
    background:#e58a00 !important;
    border-color:#e58a00 !important;
    color:#fff !important;
}

.activate-button{
    flex:0 0 auto;
    background:#08753d !important;
    border-color:#08753d !important;
    color:#fff !important;
}

.danger-button{
    flex:0 0 auto;
    background:#b3261e !important;
    border-color:#b3261e !important;
    color:#fff !important;
}

.user-danger-section{
    border-color:#ead7d5;
    background:#fffafa;
}

.user-delete-action strong{
    color:#9d201a;
}

button:disabled{
    opacity:.50;
    cursor:not-allowed !important;
}

@media(max-width:650px){

    .user-management-action{
        align-items:stretch;
        flex-direction:column;
    }

    .user-management-action button{
        width:100%;
    }
}



/* ==========================================
   MAPA - MENU LATERAL DESPLEGABLE
   ========================================== */

.map-tools {
    padding: 6px;
}

.map-accordion {
    margin: 7px 0;
    border: 1px solid #dce9df;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.map-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 11px;
    color: #17683e;
    font-size: 12px;
    font-weight: 800;
    list-style: none;
    user-select: none;
}

.map-accordion summary::-webkit-details-marker {
    display: none;
}

.map-accordion summary::after {
    content: "▾";
    font-size: 16px;
    transition: transform .2s ease;
}

.map-accordion[open] summary::after {
    transform: rotate(180deg);
}

.map-accordion[open] summary {
    background: #edf7f0;
    border-bottom: 1px solid #dce9df;
}

.map-accordion-content {
    padding: 10px;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.map-accordion-content .side-section {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.map-accordion-content .side-title {
    display: none;
}

.map-accordion-content select {
    width: 100%;
}

.map-accordion-content .kmz-management {
    margin: 0;
}

.map-accordion-content .map-hint {
    margin-top: 0;
}

/* ==========================================
   RAMBLASAPP WEB - SCROLL GENERAL
   ========================================== */

/* Zona principal */
main {
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Proyectos, usuarios y otras secciones */
main > .view:not(#map) {
    min-height: 0;
    overflow: visible;
}

/* Menú lateral independiente */
aside {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #9dc8aa transparent;
}

/* Usuarios */
#users {
    padding-bottom: 45px;
}

.users-panel {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

/* Proyectos */
#dashboard {
    padding-bottom: 45px;
}

/* Ventanas emergentes */
.modal,
.project-modal {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
}

.modal-card,
.project-modal-card,
.user-modal-card {
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Scroll visual */
main,
.modal-card,
.project-modal-card,
.user-modal-card {
    scrollbar-width: thin;
    scrollbar-color: #a6cdb1 transparent;
}

/* El mapa conserva su tamaño completo */
#map.view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* En modo mapa no desplazar el contenido */
main.map-mode,
.map-mode main {
    overflow: hidden;
}



/* ELIMINACIÓN DE PROYECTOS */

.projects-toolbar {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.projects-toolbar > div:first-child {
    margin-right:auto;
}

.delete-project-btn {
    background:#b3261e;
}

.delete-project-btn:hover {
    background:#942018;
}

.delete-project-card {
    max-height:calc(100dvh - 30px);
    overflow-y:auto;
}

.delete-project-card select {
    width:100%;
    padding:11px;
    border:1px solid #cbd5ce;
    border-radius:9px;
    background:#fff;
}

.delete-project-preview {
    margin-top:16px;
    padding:14px;
    border:1px solid #e4d7d5;
    border-radius:10px;
    background:#fff9f8;
    font-size:13px;
}

.delete-project-preview p {
    margin:8px 0;
}

.delete-project-warning {
    color:#a5221c;
    font-weight:700;
}

.delete-project-confirm {
    background:#b3261e !important;
    color:white !important;
}

.delete-project-confirm:disabled {
    opacity:.45;
    cursor:not-allowed;
}

/* ==========================================
   COPIAR Y PEGAR - RAMBLASAPP WEB
   ========================================== */

/* Permitir seleccionar y copiar texto */
main p,
main h1,
main h2,
main h3,
main span,
main td,
main th,
main b,
main strong,
main small,
.project-modal-card p,
.project-modal-card label,
.project-modal-card h2,
.who {
    -webkit-user-select: text;
    user-select: text;
}

/* Permitir seleccionar, copiar y pegar en formularios */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
}

/* Mantener el funcionamiento normal del mapa */
#mapCanvas,
.leaflet-container {
    -webkit-user-select: none;
    user-select: none;
}



/* ==========================================
   FOTOS / TRABAJOS
   ========================================== */

.works-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.works-toolbar h2{
    margin:0 0 5px;
    color:#08753d;
}

.works-toolbar p{
    margin:0;
}

.works-selector{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:240px;
}

.works-selector label{
    font-size:12px;
    font-weight:800;
    color:#607067;
}

.works-selector select{
    padding:11px;
    border:1px solid #cbd5ce;
    border-radius:10px;
    background:white;
}

.works-summary{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
}

.works-summary strong,
.works-summary span{
    background:#e7f4eb;
    color:#08753d;
    border-radius:9px;
    padding:10px 14px;
}

.works-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));
    gap:18px;
    padding-bottom:40px;
}

.work-list-card{
    min-width:0;
    background:white;
    border:1px solid #dce8df;
    border-radius:15px;
    padding:18px;
    box-shadow:0 4px 18px #244d3420;
}

.work-list-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.work-list-heading h3{
    margin:6px 0;
    color:#08753d;
}

.work-number{
    color:#748078;
    font-size:11px;
    font-weight:800;
}

.work-photo-badge{
    background:#e3f3e8;
    color:#08753d;
    padding:7px 10px;
    border-radius:20px;
    white-space:nowrap;
    font-size:12px;
    font-weight:800;
}

.work-list-meta{
    display:grid;
    gap:7px;
    font-size:12px;
    color:#58665d;
    margin:15px 0;
}

.work-list-photos{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
}

.work-list-photos img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:9px;
    background:#e9efeb;
    cursor:pointer;
}

.work-list-photos img:hover{
    outline:2px solid #08753d;
}



/* BOTONES DESCARGA - RAMBLASAPP */

.work-download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 17px;
    border:1px solid #08753d;
    border-radius:10px;
    background:#08753d;
    color:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:background .2s,transform .2s;
}

.work-download-btn:hover{
    background:#066332;
    transform:translateY(-1px);
}

.work-download-btn:disabled{
    opacity:.6;
    cursor:wait;
}

.work-download-actions{
    display:flex;
    justify-content:flex-end;
    margin:15px 0;
}

.works-selector .work-download-btn{
    margin-top:8px;
    width:100%;
}

/* RAMBLASAPP - GESTIÓN DE PUNTOS */

.point-management-actions{
    margin:18px 0;
    padding:15px;
    background:#f3faf5;
    border:1px solid #cde5d4;
    border-radius:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.point-management-actions h4{
    grid-column:1/-1;
    margin:0 0 7px;
    color:#08753d;
}

.point-management-actions button{
    background:#08753d;
    color:white;
    border:0;
    border-radius:9px;
    padding:11px 8px;
    cursor:pointer;
    font-weight:600;
}

.point-management-actions button:hover{
    background:#065c30;
}

.point-management-actions .point-danger{
    background:#b42318;
    grid-column:1/-1;
}

.point-management-actions .point-danger:hover{
    background:#891b13;
}

/* RAMBLASAPP - POPUP COMPACTO */

.leaflet-popup-content{
    margin:10px 12px;
    width:290px !important;
    max-width:290px;
}

.work-popup{
    font-size:12px;
}

.work-popup-title{
    font-size:15px;
    margin-bottom:4px;
}

.work-popup-observation{
    margin:4px 0;
}

.work-popup-data{
    font-size:11px;
    line-height:1.35;
}

.work-popup-photos{
    gap:5px;
    margin-top:7px;
}

.work-popup-photos img{
    width:65px;
    height:65px;
    object-fit:cover;
}

.work-popup .point-management-actions{
    margin:8px 0 0;
    padding:8px;
    gap:5px;
    grid-template-columns:1fr 1fr;
    border-radius:9px;
}

.work-popup .point-management-actions h4{
    font-size:12px;
    margin:0 0 3px;
}

.work-popup .point-management-actions button{
    padding:7px 4px;
    font-size:10px;
    line-height:1.2;
    border-radius:6px;
    min-height:30px;
}

.work-popup .point-management-actions .point-danger{
    padding:7px;
}


/* Miniaturas del popup ligeramente más grandes */
.work-popup .work-popup-photos img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}


/* GESTIÓN DESPLEGABLE DEL PUNTO */

.work-popup .point-management-dropdown{
    margin-top:8px;
}

.work-popup .point-management-dropdown summary{
    display:block;
    padding:9px 12px;
    background:#08753d;
    color:white;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
    text-align:center;
    cursor:pointer;
    list-style:none;
}

.work-popup .point-management-dropdown summary::-webkit-details-marker{
    display:none;
}

.work-popup .point-management-dropdown summary:hover{
    background:#065c30;
}

.work-popup .point-management-dropdown[open] summary{
    border-radius:8px 8px 0 0;
}

.work-popup .point-management-dropdown .point-management-actions{
    margin:0;
    border-radius:0 0 8px 8px;
    border-top:0;
}


/* OPCIONES DEL MAPA AGRUPADAS */

.map-options-group{
    margin:8px 0;
    border:1px solid #cde5d4;
    border-radius:10px;
    background:#f3faf5;
    overflow:hidden;
}

.map-options-group > summary{
    padding:12px 10px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    color:#08753d;
    list-style:none;
}

.map-options-group > summary::-webkit-details-marker{
    display:none;
}

.map-options-group > summary::after{
    content:"▼";
    float:right;
    font-size:10px;
}

.map-options-group[open] > summary::after{
    content:"▲";
}

.map-options-group-content{
    padding:5px 7px 9px;
}

.map-options-group-content .map-accordion{
    margin:5px 0;
}


/* PERFIL PERSONAL RAMBLASAPP */

.my-profile-menu{
    margin:10px 0 16px;
    border:1px solid #d5e8dc;
    border-radius:12px;
    background:#f4faf6;
    overflow:hidden;
}

.my-profile-menu > summary{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    cursor:pointer;
    list-style:none;
}

.my-profile-menu > summary::-webkit-details-marker{
    display:none;
}

.my-profile-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:50%;
    background:#d9eee0;
    color:#08753d;
    font-size:21px;
    overflow:hidden;
}

.my-profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.my-profile-menu .who{
    flex:1;
    min-width:0;
    font-size:12px;
    overflow-wrap:anywhere;
}

.my-profile-arrow{
    color:#08753d;
    font-size:18px;
}

.my-profile-options{
    display:flex;
    flex-direction:column;
    padding:7px;
    border-top:1px solid #d5e8dc;
    gap:4px;
}

.my-profile-options button{
    width:100%;
    padding:10px;
    text-align:left;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#185a35;
    font-size:12px;
    cursor:pointer;
}

.my-profile-options button:hover{
    background:#dcefe2;
}


/* CORRECCIÓN VISUAL DEL MENÚ DEL AVATAR */

.my-profile-menu {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.my-profile-menu > summary {
    min-width: 0;
}

.my-profile-options {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.my-profile-options button {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 42px;
    padding: 11px 9px;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.45;
    text-align: left;
    font-size: 12px;
}

.my-profile-menu .who {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* GESTIÓN DEL SERVIDOR */

.server-admin-header {
    margin-bottom: 20px;
}

.server-admin-header h3 {
    color: #08753d;
    margin-bottom: 5px;
}

.server-admin-header p {
    color: #64776a;
}

.server-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.server-admin-card {
    background: #f4faf6;
    border: 1px solid #d3e7d9;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-admin-card span {
    color: #557263;
    font-size: 13px;
}

.server-admin-card strong {
    color: #08753d;
    font-size: 25px;
}

.server-admin-panel {
    background: #fff;
    border: 1px solid #d3e7d9;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-admin-panel h3 {
    margin: 0 0 8px;
}

.server-admin-panel button {
    width: 100%;
    min-height: 43px;
    padding: 11px;
    text-align: left;
    white-space: normal;
    border-radius: 8px;
    cursor: pointer;
}

.server-admin-panel button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.server-admin-danger {
    border-color: #e8c4c4;
}

.server-admin-danger h3 {
    color: #a12b2b;
}


/* CERRAR SESIÓN DENTRO DEL AVATAR */

.my-profile-options .my-profile-logout {
    color: #c62828 !important;
    font-weight: 700;
    border-top: 1px solid #e4d6d6;
    border-radius: 0;
    margin-top: 6px;
    padding-top: 13px;
}

.my-profile-options .my-profile-logout:hover {
    background: #fff0f0;
}



/* TARJETAS PULSABLES RAMBLASAPP */

.server-admin-card.server-card-clickable {
    cursor: pointer;
    position: relative;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.server-admin-card.server-card-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(20,100,50,.15);
    border-color: #28844e;
}

.server-admin-card.server-card-clickable:focus-visible {
    outline: 3px solid #28844e;
    outline-offset: 3px;
}

.server-admin-card.server-card-clickable::after {
    content: '↗';
    position: absolute;
    right: 12px;
    top: 10px;
    color: #28844e;
    font-size: 18px;
    font-weight: bold;
}



/* MENÚ DESCARGA SELECTIVA */

.server-download-menu {
    margin-top: 14px;
    padding: 20px;
    border: 1px solid #c9dfce;
    border-radius: 14px;
    background: #f5faf6;
    color: #183d28;
}

.server-download-menu.hidden,
.server-download-projects.hidden {
    display: none !important;
}

.server-download-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 5px;
    cursor: pointer;
}

.server-download-projects {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #d2e4d6;
    border-radius: 10px;
    max-height: 250px;
    overflow-y: auto;
}

.server-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}



/* CONSOLA DE PROGRESO DE DESCARGAS */

.server-download-log {
    margin-top: 12px;
    padding: 14px;
    min-height: 90px;
    max-height: 210px;
    overflow-y: auto;
    background: #14251b;
    color: #d7f5df;
    border-radius: 10px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.7;
}

.server-download-log > div {
    padding: 2px 0;
    overflow-wrap: anywhere;
}

.server-download-log .download-log-success {
    color: #80e8a0;
}

.server-download-log .download-log-error {
    color: #ff9999;
}



/* RAMBLAS LOGIN PREMIUM V1 */

.ramblas-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
      radial-gradient(circle at 10% 10%, #2d9962 0%, transparent 38%),
      linear-gradient(135deg, #07391f, #0c5b32 58%, #167a47);
}

.ramblas-login-shell {
    width: min(1100px, 100%);
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 95px rgba(0, 24, 11, .32);
}

.ramblas-login-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px 46px;
    color: #ffffff;
    background:
      radial-gradient(circle at 100% 100%, rgba(111,218,145,.18), transparent 42%),
      linear-gradient(150deg, #135c37, #073b23);
}

.ramblas-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ramblas-login-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 10px;
    border-radius: 17px;
    color: #ffffff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
}

.ramblas-login-icon svg {
    width: 100%;
    height: 100%;
}

.ramblas-login-brand strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.ramblas-login-brand span {
    display: block;
    margin-top: 3px;
    color: #c6e8d2;
    font-size: 12px;
}

.ramblas-login-eyebrow {
    color: #a8e9be;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ramblas-login-intro h1 {
    margin: 18px 0 20px;
    font-size: clamp(32px, 4vw, 51px);
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.ramblas-login-intro h1 span {
    color: #9ce2b3;
}

.ramblas-login-description {
    max-width: 440px;
    color: #d6eadd;
    line-height: 1.8;
    font-size: 15px;
}

.ramblas-login-features {
    display: grid;
    gap: 16px;
    margin-top: 32px;
    font-size: 13px;
    color: #f0fff4;
}

.ramblas-login-features div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ramblas-login-features span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    color: #a7f0be;
    font-size: 18px;
}

.ramblas-login-intro-footer {
    color: #a7cdb4;
    font-size: 11px;
}

.ramblas-login-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #ffffff;
}

.ramblas-login-card {
    width: min(390px, 100%);
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ramblas-login-welcome-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #e8f5ed;
    color: #117443;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 24px;
}

.ramblas-login-tag {
    color: #13864c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ramblas-login-card h2 {
    margin: 10px 0 9px;
    color: #173b29;
    font-size: 36px;
    letter-spacing: -1.1px;
}

.ramblas-login-card .ramblas-login-subtitle {
    margin: 0 0 30px;
    color: #708176;
    font-size: 14px;
    line-height: 1.6;
}

.ramblas-login-card label {
    display: block;
    margin: 15px 0 7px;
    color: #2b4d39;
    font-size: 13px;
    font-weight: 700;
}

.ramblas-login-card input {
    width: 100%;
    padding: 15px;
    margin: 0;
    background: #f7faf8;
    border: 1px solid #d9e6dd;
    border-radius: 12px;
    color: #203026;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.ramblas-login-card input:focus {
    border-color: #16874d;
    box-shadow: 0 0 0 4px rgba(22,135,77,.12);
}

.ramblas-login-card #loginBtn {
    width: 100%;
    margin-top: 25px;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #08753d, #159153);
    color: white;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(8,117,61,.22);
}

.ramblas-login-card #loginBtn:hover {
    background: linear-gradient(135deg, #086b39, #087c43);
}

.ramblas-login-card #loginBtn span {
    margin-left: 10px;
}

.ramblas-login-access-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #edf1ee;
    color: #829188;
    text-align: center;
    font-size: 11px;
}

.ramblas-login-lock {
    color: #139054;
    margin-right: 5px;
}

.ramblas-login-copyright {
    margin-top: 35px;
    color: #9aa9a0;
    font-size: 11px;
}

.ramblas-login-mobile-brand {
    display: none;
}

@media (max-width: 760px) {
    .ramblas-login {
        padding: 14px;
        align-items: flex-start;
    }

    .ramblas-login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 22px;
    }

    .ramblas-login-intro {
        padding: 25px;
        gap: 18px;
    }

    .ramblas-login-intro-content {
        display: none;
    }

    .ramblas-login-intro-footer {
        display: none;
    }

    .ramblas-login-access {
        padding: 35px 25px;
    }

    .ramblas-login-card h2 {
        font-size: 30px;
    }

    .ramblas-login-copyright {
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ramblas-login-card input {
        transition: none;
    }
}


/* ICONO ORIGINAL RAMBLASAPP */

.ramblas-original-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.ramblas-login-icon,
.ramblas-login-welcome-icon {
    overflow: hidden;
}



/* ICONO ORIGINAL EN PANEL WEB */

.ramblas-panel-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    font-size: 21px;
    font-weight: 800;
}

.ramblas-panel-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 12px;
    background: #ffffff;
    padding: 3px;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}

.ramblas-panel-brand span {
    min-width: 0;
    overflow-wrap: anywhere;
}



/* ===== RAMBLAS RESPONSIVE V1 ===== */

.mobile-menu-toggle,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 767px) {

    html, body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-x: hidden;
    }

    .app {
        display: block;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    .app > main {
        width: 100%;
        min-width: 0;
        height: 100dvh;
        overflow: hidden;
    }

    .app > aside {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(310px, 86vw);
        height: 100dvh;
        padding: 20px 15px;
        background: #fff;
        z-index: 6002;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 8px 0 28px rgba(0,0,0,.10);
    }

    .app.mobile-menu-open > aside {
        transform: translateX(0);
    }

    .mobile-menu-toggle {
        display: flex;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 6003;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border: 1px solid #dce8df;
        border-radius: 12px;
        background: #fff;
        color: #08713d;
        font-size: 25px;
        box-shadow: 0 3px 12px rgba(0,0,0,.12);
        cursor: pointer;
    }

    .app.mobile-menu-open .mobile-menu-toggle {
        background: #e5f4ea;
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 6001;
        border: 0;
        background: rgba(9,31,19,.52);
        cursor: pointer;
    }

    .app.mobile-menu-open .mobile-menu-backdrop {
        display: block;
    }

    #mainHeader {
        padding-right: 65px;
        min-width: 0;
    }

    #mainHeader h2 {
        overflow-wrap: anywhere;
    }

    .app .view:not(#map) {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app .cards,
    .app .project-grid,
    .app .server-admin-grid {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 220px), 1fr)
        );
    }

    .app img {
        max-width: 100%;
    }

    .app input,
    .app select,
    .app textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    .app table {
        max-width: 100%;
    }

    .app button,
    .app select {
        touch-action: manipulation;
    }

    #map.view,
    #mapCanvas {
        width: 100%;
        max-width: 100%;
    }

    .modal-card {
        width: min(460px, 94vw);
        max-height: 92dvh;
        overflow-y: auto;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .app .cards,
    .app .project-grid,
    .app .server-admin-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app > aside {
        transition: none;
    }
}


/* RAMBLAS_PRESENCE_WEB_V1 */
.presence-header {
    padding: 10px 14px;
    margin: 8px 6px;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
}
.presence-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 9px;
}
.presence-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.presence-avatar {
    width: 37px;
    height: 37px;
    position: relative;
    flex: 0 0 auto;
}
.presence-avatar-circle {
    display: flex;
    width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #dbe9e0;
    color: #245b39;
    font-size: 11px;
    font-weight: bold;
    overflow: hidden;
}
.presence-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.presence-avatar-dot,
.presence-dot {
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}
.presence-avatar-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
}
.user-online-state {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}
.user-online-state .presence-dot {
    width: 8px;
    height: 8px;
    background: #9ca3af;
}
.user-online-state.is-online {
    color: #16803d;
    font-weight: 600;
}
.user-online-state.is-online .presence-dot {
    background: #22c55e;
}


/* RAMBLASAPP - COLORES DE ACTUACIONES */
.ramblas-camera-pin{
    background:var(--ramblas-pin-color,#08753d);
    box-shadow:0 4px 12px rgba(0,0,0,.38);
}

.ramblas-photo-count{
    color:var(--ramblas-pin-color,#08753d);
    border-color:var(--ramblas-pin-color,#08753d);
}

.ramblas-action-desbroce{
    --ramblas-pin-color:#159447;
}
.ramblas-action-limpieza{
    --ramblas-pin-color:#2675d9;
}
.ramblas-action-tala-poda{
    --ramblas-pin-color:#ed9b24;
}
.ramblas-action-residuos{
    --ramblas-pin-color:#d45e37;
}
.ramblas-action-retirada-restos{
    --ramblas-pin-color:#9051c8;
}
.ramblas-action-otro{
    --ramblas-pin-color:#617587;
}

.ramblas-action-legend{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px 14px;
    background:rgba(255,255,255,.96);
    color:#243343;
    border:1px solid #dce3e8;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    font-size:12px;
    line-height:1.3;
    max-height:220px;
    overflow-y:auto;
}

.ramblas-action-legend strong{
    margin-bottom:5px;
    font-size:12px;
}

.ramblas-action-legend span{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.ramblas-dot{
    display:inline-block;
    width:11px;
    height:11px;
    flex:none;
    border-radius:50%;
    background:#617587;
}

.ramblas-dot.desbroce{background:#159447}
.ramblas-dot.limpieza{background:#2675d9}
.ramblas-dot.tala-poda{background:#ed9b24}
.ramblas-dot.residuos{background:#d45e37}
.ramblas-dot.retirada-restos{background:#9051c8}
.ramblas-dot.otro{background:#617587}

@media(max-width:600px){
    .ramblas-action-legend{
        padding:8px 10px;
        font-size:10px;
        max-height:155px;
    }
}


/* Marcador propio de INCIDENCIA. No altera los iconos de trabajos existentes. */
.ramblas-incidencia-pin {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.36));
}
.ramblas-incidencia-pin svg { display: block; width: 44px; height: 44px; }

/* Contador exclusivo del marcador Incidencia; no altera los demás. */
.ramblas-incidencia-pin { position:relative; overflow:visible; }
.ramblas-incidencia-count {
    position:absolute; top:0; right:0; transform:translate(20%,-20%);
    min-width:19px; height:19px; padding:0 3px; box-sizing:border-box;
    border-radius:99px; background:#fff; color:#303030;
    font:700 11px/19px Arial,sans-serif; text-align:center;
    box-shadow:0 1px 4px rgba(0,0,0,.36); z-index:2;
}