/* css/clientes-panel.css v4 */

/* === SECCIÓN PRINCIPAL === */
#clientes-section{margin-bottom:24px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}
.clientes-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#2c3544;cursor:pointer;user-select:none;transition:background .2s}
.clientes-header:hover{background:#344050}
.clientes-header-left{display:flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:#f0f2f5}
.clientes-header-left i{color:#C9376F;font-size:18px}
.clientes-header-right{display:flex;align-items:center;gap:10px}
.clientes-count{background:rgba(201,55,111,.15);color:#C9376F;font-size:12px;font-weight:700;padding:2px 10px;border-radius:12px;font-family:'DM Sans',sans-serif}
.clientes-chevron{color:rgba(255,255,255,.4);transition:transform .3s;font-size:14px}
.clientes-body{background:#252d3a;padding:16px 18px}

/* === TOOLBAR === */
.clientes-toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.btn-add-cliente{display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(201,55,111,.1);color:#C9376F;border:1px solid rgba(201,55,111,.25);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-add-cliente:hover{background:rgba(201,55,111,.18);transform:translateY(-1px)}
.clientes-search{flex:1;min-width:180px;padding:8px 14px;background:#1c2636;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px}
.clientes-search:focus{border-color:#C9376F;outline:none;box-shadow:0 0 0 2px rgba(201,55,111,.15)}
.clientes-search::placeholder{color:rgba(255,255,255,.3)}

/* === LISTA === */
.clientes-list{display:flex;flex-direction:column;gap:10px;max-height:500px;overflow-y:auto}
.clientes-empty{text-align:center;padding:30px;color:rgba(255,255,255,.3);font-family:'DM Sans',sans-serif}
.clientes-empty i{font-size:36px;display:block;margin-bottom:10px}

/* === CARD CLIENTE === */
.cliente-card{background:#2c3544;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s}
.cliente-card:hover{border-color:rgba(255,255,255,.12);box-shadow:0 2px 10px rgba(0,0,0,.15)}
.cliente-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.cliente-nombre{margin:0;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;color:#f0f2f5}
.cliente-contacto{font-size:12px;color:rgba(255,255,255,.45);font-family:'DM Sans',sans-serif}
.cliente-actions-row{display:flex;gap:6px}
.btn-edit-cliente,.btn-delete-cliente{background:transparent;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s}
.btn-edit-cliente:hover{background:rgba(91,141,239,.12);color:#5b8def;border-color:rgba(91,141,239,.3)}
.btn-delete-cliente:hover{background:rgba(231,76,60,.12);color:#e74c3c;border-color:rgba(231,76,60,.3)}
.no-redes{font-size:11px;color:rgba(255,255,255,.25);font-family:'DM Sans',sans-serif;font-style:italic}

/* === FORMULARIO === */
.cliente-form-container{margin-top:16px;background:#1c2636;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:20px}
.form-section-title{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:#C9376F;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.form-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:5px}
.form-group input,.form-group textarea{padding:8px 12px;background:#252d3a;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px}
.form-group input:focus,.form-group textarea:focus{border-color:#C9376F;outline:none;box-shadow:0 0 0 2px rgba(201,55,111,.12)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.25)}
.form-group textarea{resize:vertical}
.form-actions{display:flex;justify-content:flex-end;gap:10px}
.btn-cancel{padding:8px 18px;background:#2c3544;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-cancel:hover{background:#344050;color:#f0f2f5}
.btn-save{padding:8px 20px;background:#C9376F;color:#fff;border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.btn-save:hover{background:#e04a80;transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,55,111,.3)}
.btn-export-excel{padding:8px 16px;background:rgba(46,204,113,.08);color:#2ecc71;border:1px solid rgba(46,204,113,.2);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.btn-export-excel:hover{background:rgba(46,204,113,.15);transform:translateY(-1px)}
.redes-hint{font-size:12px;color:rgba(255,255,255,.35);font-family:'DM Sans',sans-serif;margin-top:16px;text-align:center;font-style:italic}

/* === SECCIONES DE AUDITORÍA === */
.audit-sections{display:flex;flex-direction:column;gap:20px}
.audit-category{border-top:1px solid rgba(255,255,255,.06);padding-top:16px}
.audit-cat-header{display:flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:#f0f2f5;padding:8px 14px;margin-bottom:10px;border-radius:6px;background:rgba(255,255,255,.02)}
.audit-cat-header i{font-size:16px}
.audit-cat-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);margin-left:auto;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:10px}
.audit-cat-add{margin-bottom:12px}
.add-item-select{width:100%;padding:9px 14px;background:#252d3a;color:rgba(255,255,255,.5);border:1px dashed rgba(255,255,255,.1);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;cursor:pointer}
.add-item-select:focus{border-color:#C9376F;outline:none;color:#f0f2f5}
.audit-cat-items{display:flex;flex-direction:column;gap:10px}

/* === CARD POR ITEM === */
.item-card{background:#252d3a;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px}
.item-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.item-card-title{display:flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:#f0f2f5}
.item-card-title i{font-size:18px}
.item-pct{font-size:12px;font-weight:700;margin-left:4px}
.btn-delete-item{background:transparent;border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.3);width:26px;height:26px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s}
.btn-delete-item:hover{background:rgba(231,76,60,.12);color:#e74c3c;border-color:rgba(231,76,60,.25)}

.item-card-user,.item-card-notes{margin-bottom:10px}
.item-user-input,.item-notes-input{width:100%;padding:8px 12px;background:#1c2636;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;box-sizing:border-box}
.item-user-input:focus,.item-notes-input:focus{border-color:#C9376F;outline:none;box-shadow:0 0 0 2px rgba(201,55,111,.12)}
.item-user-input::placeholder,.item-notes-input::placeholder{color:rgba(255,255,255,.2)}
.item-notes-input{font-size:12px;color:rgba(255,255,255,.5)}
.item-notes-input::placeholder{color:rgba(255,255,255,.15);font-style:italic}

.item-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:10px}
.check-item-sm{display:flex;align-items:center;gap:7px;padding:6px 10px;background:#1c2636;border:1px solid rgba(255,255,255,.04);border-radius:6px;cursor:pointer;transition:all .15s;user-select:none}
.check-item-sm:hover{border-color:rgba(255,255,255,.08)}
.check-item-sm input[type="checkbox"]{accent-color:#C9376F;width:15px;height:15px;cursor:pointer;flex-shrink:0}
.check-item-sm span{font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(255,255,255,.55)}
.check-item-sm:has(input:checked){border-color:rgba(46,204,113,.2);background:rgba(46,204,113,.05)}
.check-item-sm:has(input:checked) span{color:#2ecc71}

.btn-save-item{width:100%;padding:7px;background:rgba(201,55,111,.08);color:rgba(201,55,111,.7);border:1px solid rgba(201,55,111,.15);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .2s}
.btn-save-item:hover{background:rgba(201,55,111,.15);color:#C9376F}

/* Admin / Propietario row */
.item-card-admin-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.item-admin-field{display:flex;flex-direction:column;gap:3px}
.item-admin-field label{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:4px}
.item-propietario-input,.item-admin-input{width:100%;padding:7px 10px;background:#1c2636;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:12px;box-sizing:border-box}
.item-propietario-input:focus,.item-admin-input:focus{border-color:#C9376F;outline:none;box-shadow:0 0 0 2px rgba(201,55,111,.1)}
.item-propietario-input::placeholder,.item-admin-input::placeholder{color:rgba(255,255,255,.18)}

/* Fecha row */
.item-card-date-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.item-card-date-row label{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.item-fecha-input{padding:6px 10px;background:#1c2636;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:12px}
.item-fecha-input:focus{border-color:#C9376F;outline:none}
.fecha-badge{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;background:rgba(46,204,113,.08);color:#2ecc71;white-space:nowrap}
.fecha-badge.fecha-warn{background:rgba(240,152,62,.1);color:#f0983e}

/* === SELECTOR CLIENTE EN PROYECTO === */
.project-cliente-row{margin:10px 0 14px 0}
.proyecto-cliente-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.proyecto-cliente-label{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;white-space:nowrap}
.proyecto-cliente-select{flex:1;min-width:200px;max-width:350px;padding:8px 12px;background:#1c2636;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer}
.proyecto-cliente-select:focus{border-color:#C9376F;outline:none;box-shadow:0 0 0 2px rgba(201,55,111,.15)}
.btn-save-cliente-link{padding:7px 16px;background:rgba(201,55,111,.1);color:#C9376F;border:1px solid rgba(201,55,111,.25);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-save-cliente-link:hover:not(:disabled){background:rgba(201,55,111,.2)}
.btn-save-cliente-link:disabled{opacity:.35;cursor:not-allowed}
.cliente-link-status{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;transition:opacity .3s}
.cliente-link-status.success{color:#2ecc71}.cliente-link-status.error{color:#e74c3c}
.filter-cliente-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.filter-cliente-label{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px;white-space:nowrap}
.filter-cliente-select{flex:1;padding:7px 12px;background:#1c2636;color:#f0f2f5;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;cursor:pointer}
.filter-cliente-select:focus{border-color:#C9376F;outline:none}

@media(max-width:768px){
    .form-grid-2{grid-template-columns:1fr}
    .item-checks{grid-template-columns:1fr}
    .clientes-toolbar{flex-direction:column}
    .proyecto-cliente-inner{flex-direction:column}
    .filter-cliente-wrapper{flex-direction:column}
}