:root{--primary:#1e73be;--bg:#f0f2f5;--card:#ffffff;--text-main:#1c1e21;--text-muted:#65676b;--border:#dddfe2;--accent:#e7f3ff;}
body{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text-main);margin:0;padding:12px;}
.container{max-width:800px;margin:auto;}


/* Contenedor principal ahora apila los dos bloques */
.app-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Fondo con 90% de opacidad y desenfoque de fondo */
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    padding: 15px;
    /* Esquinas redondeadas solo abajo para encajar con el tope */
    border-radius: 0 0 12px 12px;
    /* Compensamos el padding del body para que no queden huecos blancos */
    margin: -12px -12px 20px -12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.05);

    /* Fijado superior */
    position: sticky;
    top: 0;
	min-height: 110px;
    z-index: 1000;
}

/* Fila Superior: Logo y Texto siempre juntos a la izquierda */
.header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Fila Inferior: Los 4 iconos en una sola línea horizontal */
.header-bottom {
    display: flex;
    justify-content: space-between; /* Los separa equitativamente */
    align-items: center;
    width: 100%;
    border-top: 1px solid var(--border); /* Opcional: una línea sutil de separación */
    padding-top: 10px;
}

/* Los contenedores de los botones no deben tener márgenes raros */
.header-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0;
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 425px) {
    .header-bottom {
        gap: 8px;
    }
    
    .header-icon {
        width: 45px;  /* Un poco más grandes para facilitar el toque */
        height: 45px;
    }
}

.search-box{margin-top:10px;}

.search-box input{width:100%;padding:16px;font-size:18px;border-radius:14px;border:1px solid var(--border);background:var(--card);box-sizing:border-box;box-shadow:0 4px 12px rgba(0,0,0,0.06);transition:all .2s ease;outline:none;}

.search-box input:focus{border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,0.15);background:#fff;}

.search-box input::placeholder{color:#999;opacity:1;font-size:16px;}

.cliente-card{display:flex;align-items:flex-start;background:var(--card);padding:10px;border-radius:16px;margin-bottom:20px;padding-right:35px;gap:15px;border:1px solid var(--border);position:relative;min-height: 105px;}
.cliente-card img.foto-cliente{width:70px;height:70px;min-width:70px;max-width:70px;max-height:70px;border-radius:50%;object-fit:cover;border:2px solid var(--primary);}

.serv_header img.foto-equipo{width:55px !IMPORTANT;height:55px !IMPORTANT;min-width:55px !IMPORTANT;max-width:55px !IMPORTANT;max-height:55px !IMPORTANT;object-fit:cover;}

.edit-btn{background:#dbeafe;color:#1d4ed8;}
.add-serv-btn{background:#D9C456;color:#1d4ed8;}

textarea{resize:none;}

textarea.disabled{
background:#f1f5f9;
color:#9ca3af;
cursor:not-allowed;
}

.radio-pill-group{
display:flex;
gap:10px;
margin-top:5px;
}

.radio-pill{
display:flex;
align-items:center;
gap:8px;
padding:6px 12px;
border-radius:10px;
background:#f1f5f9;
cursor:pointer;
border:1px solid #e5e7eb;
transition:0.2s;
}

.radio-pill input{
margin:0;
}

.radio-pill:hover{
background:#e2e8f0;
}

.radio-pill input:checked + span{
font-weight:600;
}

.radio-pill input:checked{
accent-color:#2563eb;
}

.eliminar-cliente{position:absolute;top:45px;right:5px;z-index:10;}
.eliminar-cliente-filter {width: 30px;height: 30px;border-radius: 8px;font-size: 14px;border: 0;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 6px rgba(0,0,0,0.1);transition: transform 0.1s;}
.servicio{background:var(--card);border-radius:16px;padding:16px;margin-bottom:20px;border:1px solid var(--border);opacity:0;transform:translateY(30px);}
.serv_header{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--bg);}
.status-icon{font-size:24px;margin-left:auto;}
.info-block{background:var(--bg);padding:12px;border-radius:8px;font-size:15px;margin:12px 0;border-left:4px solid var(--primary);}
.prod_block{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:10px;}
.prod_title{font-weight:700;font-size:15px;color:#1e73be;margin-bottom:6px;}
.prod_title_costo{font-weight:600;font-size:13px;color:#1e73be;margin-bottom:6px;}
table{width:100%;border-collapse:collapse;font-size:13px;background:white;;margin-top:6px;}
th{background:#f1f5f9;color:#475569;font-weight:600;padding:8px 4px;border:1px solid #e2e8f0;}
td{padding:8px 4px;text-align:center;border:1px solid #e2e8f0;color:#334155;}
.resumen-footer{background:#1e293b;color:white;padding:15px;border-radius:10px;margin-top:10px;font-size:14px;}
@media (max-width:600px){th,td{font-size:11px;padding:6px 2px;}}
@keyframes fadeSlide{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
.anim_resultados{animation:fadeSlide 0.65s ease;}
.servicio.visible{animation:servFade 0.45s ease forwards;}
@keyframes servFade{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.icon-menu{margin-left:auto;margin-bottom:10px;display:flex;gap:6px;align-items:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:6px 8px;box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.icon-menu .icon-btn{background:#ffffff;}
.icon-menu .icon-btn:hover{background:#f1f5f9;transform:scale(1.05);}
.icon-btn{width:34px;height:34px;border:0;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:0.2s;}
.icon-btn.pdf{background:#fee2e2;color:#b91c1c;}

.logo{width:50px;}
.app-title{font-size:22px;font-weight:800;color:var(--primary);}
.app-subtitle{font-size:14px;color:var(--text-muted);font-weight:600;}

.header-icon{background:#e7f3ff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border:0;padding:0;}


.resultados{margin-top:10px;}

.cliente-img-default{width:70px;height:70px;min-width:70px;max-width:70px;max-height:70px;border-radius:50%;background:#f0f2f5;display:flex;align-items:center;justify-content:center;font-size:40px;border:2px solid #1e73be;}
.equipo-img-default{width:55px;height:55px;min-width:55px;max-width:55px;max-height:55px;background:#f0f2f5;display:flex;align-items:center;justify-content:center;font-size:34px;}
.cliente-nombre{font-size:clamp(16px,4vw,20px);font-weight:600;word-break:break-word;line-height:1.2;}
.cliente-movil{color:var(--primary);font-size:15px;font-weight:600;}
.link-movil{text-decoration:none;color:var(--primary);}
.serv-title{font-weight:700;font-size:18px;}
.serv-fecha{font-size:14px;color:var(--text-muted);}
.status-servicio{background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:600;padding:3px 6px;border-radius:6px;}
.status-finalizado{background:#dcfce7;color:#166534;font-size:11px;font-weight:600;padding:3px 6px;border-radius:6px;}
.ganancia{color:#16a34a;font-weight:700;}
.total{font-size:18px;color:#4ade80;}


.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:999;}
.modal-content{background:#fff;width:320px;margin:210px auto;padding:15px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.2);}
.modal-title{font-weight:bold;margin-bottom:10px;}
.modal-actions{text-align:right;margin-top:10px;}


.res-item{display:flex;align-items:center;gap:14px;padding:14px 10px;border-bottom:1px solid #e5e5e5;background:#fff;}
.res-item.en-servicio{border-left:6px solid #e53935;}
.res-link{display:flex;align-items:center;gap:14px;flex:1;text-decoration:none;color:#000;}
.res-img-wrap{position:relative;}
.res-img{width:60px;height:60px;border-radius:8px;object-fit:cover;}
.res-img-default{width:60px;height:60px;border-radius:8px;background:#f0f2f5;display:flex;align-items:center;justify-content:center;font-size:32px;}
.res-nombre{font-size:19px;font-weight:600;text-align:left;}
.res-movil{font-size:16px;color:#666;margin-top:3px;text-align:left;}
.res-wa{padding:10px;}
.wa-icon{width:30px;height:30px;vertical-align:middle;}
.wa-icon-card{width:20px;height:20px;vertical-align:middle;}

.clientes-box{background: #ffffff;border: 1px solid #e5e5e5;border-radius: 12px;padding: 12px 14px;margin: 12px 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.06);}
.clientes-total{font-weight: 600;font-size: 13px;color: #222;}
@media (max-width: 600px){
    .clientes-eliminados{
        display: block;
        margin-top: 2px;
    }
}
.clientes-stats{margin-top: 6px;font-size: 13px;color: #555;}
.clientes-box.eliminados{background: #fff4f4;border: 1px solid #f1b0b0;color: #c0392b;font-weight: 500;}

.img-eliminado {border: 4px solid #e53935 !important;box-shadow: 0 0 10px rgba(229, 57, 53, 0.5);}

.info-wrapper {display: flex;align-items: center;gap: 8px;margin: 0 10px;}

.clientes-box#clientesInfo {flex: 1;margin: 0;}

.filter-btn {width: 45px;height: 45px;border-radius: 12px;font-size: 20px;border: 0;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 6px rgba(0,0,0,0.1);transition: transform 0.1s;}

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

.service-btn {background: #e7f3ff;color: #1e73be;}

.trash-btn {background: #fee2e2;color: #b91c1c;}
.restore-btn{background:#dcfce7;color:#166534;}

.cliente-info {font-size: 0.85em;color: #444;margin-top: 3px;display: flex;align-items: center;gap: 5px;}

.cliente-notas-trigger {margin-top: 8px;display: inline-block;background: #f0f0f0;padding: 4px 8px;border-radius: 4px;font-size: 0.8em;color: #1e73be;cursor: pointer;border: 1px solid #ddd;}

.modal-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;}
.modal-content {background: white; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%;}
.modal-body {margin: 15px 0; white-space: pre-wrap; word-wrap: break-word;}
.btn-cerrar {width: 100%; padding: 10px; cursor: pointer;}



.app-contenido{background:var(--card);padding:15px;border-radius:12px;margin-bottom:20px;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.home-btn{margin-left:auto;}
.logo-preview-container{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;}
#logo_preview{width:120px;height:120px;object-fit:contain;border:2px solid #e5e7eb;border-radius:10px;padding:5px;background:#f9fafb;}
.btn-edit-logo{display:inline-block;margin-top:8px;font-size:12px;color:#1e73be;cursor:pointer;text-decoration:underline;}
.section-title{border-bottom:2px solid #f3f4f6;padding-bottom:8px;margin:25px 0 15px 0;color:#1e3a8a;font-size:18px;}
.msg_ok{background:#dcfce7;color:#166534;padding:12px;border-radius:6px;margin-bottom:15px;font-size:14px;}
.msg_error{background:#fee2e2;color:#b91c1c;padding:12px;border-radius:6px;margin-bottom:15px;font-size:14px;}
.firma-item{display:flex;gap:10px;align-items:center;margin-bottom:10px;background:#f8fafc;padding:10px;border-radius:8px;}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-weight:600;font-size:13px;margin-bottom:4px;color:#4b5563;}
.form-group input{display:block;width:100%;padding:10px;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;}
.form-group textarea{display:block;width:100%;padding:10px;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;}
.config-form button{width:100%;padding:12px;background:#1e73be;color:#fff;border:0;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;}
.input-info {font-size: 11px;margin-top: 3px;color: #6b7280;}
input.error {border: 1px solid red;background: #fff5f5;}
.form-group select{display:block;width:100%;padding:10px;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;background:#fff;}
.form-group select.error{border:1px solid red;background:#fff5f5;}



.gan-year{padding:14px;cursor:pointer;font-weight:700;border-radius:10px;margin-bottom:4px;border:1px solid var(--border);}
.gan-year:nth-of-type(odd){background:#ffffff;}
.gan-year:nth-of-type(even){background:#f9f9f9;}
.gan-month-container{margin-bottom:10px;}
.gan-month{padding:10px 14px;margin-left:15px;font-weight:700;cursor:pointer;border-radius:8px;margin-bottom:2px;}
.gan-month:nth-of-type(odd){background:#eef6ff;}
.gan-month:nth-of-type(even){background:#e1effe;}
.gan-serv-container{margin-bottom:10px;}
.gan-serv{margin-left:30px;padding:10px;font-size:14px;border-radius:6px;margin-bottom:1px;}
.gan-serv:nth-of-type(odd){background:#fff;}
.gan-serv:nth-of-type(even){background:#f1f1f1;}
.gan-serv-si{color:#d32f2f;font-weight:bold;}
.gan-hidden{display:none;}
.gan-bold{font-weight:800;color:#333;}

.add-btn{background:#dcfce7;color:#166534;}
#img_preview{width:80px;height:80px;object-fit:cover;border-radius:50%;border:2px solid var(--primary);}
#img_default{width:80px;height:80px;object-fit:cover;border-radius:50%;border:2px solid var(--primary);}


#guardando {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#guardando.active {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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


.equipo-row{
display:flex;
gap:10px;
align-items:center;
}

.equipo-row select{
flex:1;
}

.equipo-preview-container{
width:75px;
height:75px;
min-width:75px;
padding:2px;
display:flex;
align-items:center;
justify-content:center;
background:#f1f5f9;
border-radius:10px;
border:1px solid #e5e7eb;
overflow:hidden;
}

.equipo-preview-container img{
width:100%;
height:100%;
object-fit:cover;
border-radius:8px;
}

.mc_modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);display:none;align-items:center;justify-content:center;z-index:9999;}
.mc_box{background:#fff;padding:20px;border-radius:14px;min-width:280px;max-width:90%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.mc_icon{font-size:28px;margin-bottom:10px;}
.mc_title{font-weight:600;font-size:16px;margin-bottom:8px;}
.mc_msg{font-size:14px;margin-bottom:20px;}
.mc_actions{display:flex;justify-content:center;gap:10px;}
.mc_btn{padding:8px 16px;border-radius:8px;border:0;cursor:pointer;}
.mc_cancel{background:#eee;}
.mc_ok{background:#111;color:#fff;}
.mc_warning{color:#b45309;}
.mc_error{color:#b91c1c;}
.mc_success{color:#15803d;}
.mc_question{color:#1d4ed8;}

.highlight-servicio{
background:#fef9c3;
transition: background 0.5s;
}

.backup-box{
background:#f1f5f9;
padding:20px;
border-radius:12px;
border:1px solid #e5e7eb;
text-align:center;
}

.backup-text{
font-size:15px;
color:#111827;
font-weight:500;
line-height:1.4;
margin-bottom: 20px;
}

.backup-sub{
display:block;
margin-top:6px;
font-size:13px;
color:#6b7280;
font-weight:400;
}

.btn-backup{width:100%;padding:12px;background:#1e73be;color:#fff;border:0;border-radius:6px;font-size:16px;font-weight:bold;cursor:pointer;margin-bottom:10px;}



.listbox-productos {
    border: 1px solid #ccc;
    height: 220px;
    overflow-y: auto;
    font-size: 13px;
}
.item-producto {
    padding: 6px;
    cursor: pointer;
}
.item-producto:hover {
    background: #eee;
}
.item-producto.selected {
    background: #2563eb;
    color: #fff;
}


.galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.img-item{position:relative;}
.img-item img{width:100%;height:auto;}
.img-item button{position:absolute;top:5px;right:5px;}




.firma-help{
    background:#f0f9ff;
    border:1px solid #bae6fd;
    color:#0369a1;
    font-size:13px;
    padding:8px 10px;
    border-radius:6px;
    margin-bottom:10px;
    font-weight:500;
}
.tec-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    padding:8px;
    border-bottom:1px solid #eee;
}

.tec-firma{
    width:100px;
    height:100px;
    flex-shrink:0;
    border-radius:4px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee;
}

.tec-firma img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.tec-firma-default{
    font-size:22px;
}

.tec-nombre{
    flex:1;
    font-size:14px;
    font-weight:500;
    word-break:break-word;
}

.tec-actions{
    display:flex;
    align-items:center;
    gap:5px;
}

.tec-actions button{
    padding:4px 6px;
}

.btn-file-tecnico{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    font-size:12px;
    padding:4px 6px;
    border:1px solid #ccc;
    border-radius:4px;
    background:#f9f9f9;
}

.btn-file-tecnico input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.tec-elim{
    opacity:0.5;
}

/* responsive */
@media(max-width:600px){
    .tec-item{
        align-items:flex-start;
    }

    .tec-actions{
        flex-direction:column;
        align-items:flex-end;
    }
}