/* ============================================================
   ESTUDIO LUCENTI — ajustes de marca sobre Duralux
   Amarillo #EEC934 · Marrón casi negro #211915
   ============================================================ */
:root {
    --el-amarillo: #eec934;
    --el-amarillo-suave: #fbf3d2;
    --el-oscuro: #211915;
    --el-oscuro-2: #3a2f29;
}

/* Logo */
.logo-cliente { border-radius: 22%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px rgba(33,25,21,.08); }
.logo-iniciales { box-shadow: none; }
.logo-vacio { background: var(--el-amarillo-suave); color: #b08d57; font-size: 28px; box-shadow: none; }
.logo-editor { width: 120px; }
.logo-drop { display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer; padding: .5rem; border: 1px dashed var(--bs-border-color); border-radius: 14px; }
.logo-drop:hover { border-color: var(--el-amarillo); background: var(--el-amarillo-suave); }
.logo-drop-txt { font-size: 12px; color: var(--bs-secondary-color); }
.bandera { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: -1px; }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .1rem .55rem; color: inherit; }
.chip:hover { border-color: var(--el-amarillo); }
.avatar-logo { width: 40px; height: 40px; border-radius: 10px; display: block; flex-shrink: 0; }
.nxl-navigation .m-header .logo-lg { height: 40px; width: auto; }
.nxl-navigation .m-header .logo-sm { height: 34px; width: auto; }
.logo-auth { max-width: 240px; width: 100%; height: auto; }

/* Menú: indicador activo en amarillo */
.nxl-navigation .nxl-item.active > .nxl-link,
.nxl-navigation .nxl-item > .nxl-link:hover { color: var(--el-oscuro); }
.nxl-navigation .nxl-item.active > .nxl-link {
    background: var(--el-amarillo-suave);
    box-shadow: inset 3px 0 0 var(--el-amarillo);
    font-weight: 600;
}
.nxl-navigation .nxl-item.active > .nxl-link .nxl-micon i { color: var(--el-oscuro); }

/* Botón principal: oscuro con acento amarillo al pasar */
.btn-primary { --bs-btn-bg: var(--el-oscuro); --bs-btn-border-color: var(--el-oscuro);
    --bs-btn-hover-bg: var(--el-oscuro-2); --bs-btn-hover-border-color: var(--el-oscuro-2);
    --bs-btn-active-bg: var(--el-oscuro-2); }
.btn-amarillo { background: var(--el-amarillo); border-color: var(--el-amarillo); color: var(--el-oscuro); font-weight: 600; }
.btn-amarillo:hover { background: #e2bb22; border-color: #e2bb22; color: var(--el-oscuro); }

.buscador { width: 280px; }

/* Tarjetas de resumen */
.resumen-num { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.resumen-card { border-top: 3px solid transparent; }
.resumen-card.atrasadas { border-top-color: var(--bs-danger); }
.resumen-card.hoy { border-top-color: var(--el-amarillo); }
.resumen-card.semana { border-top-color: var(--el-oscuro); }
.resumen-card.clientes { border-top-color: #5b8a72; }

/* Lista de tareas */
.tarea { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1.25rem; border-bottom: 1px solid var(--bs-border-color); }
.tarea:last-child { border-bottom: 0; }
.tarea .check-tarea { margin-top: .15rem; }
.tarea-titulo { font-weight: 600; color: var(--bs-heading-color, #283c50); }
.tarea.hecha .tarea-titulo { text-decoration: line-through; color: var(--bs-secondary-color); font-weight: 500; }
.tarea-meta { font-size: 12px; color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .2rem; }
.tarea-meta a { color: inherit; }
.tarea-acciones { margin-left: auto; display: flex; gap: .35rem; flex-shrink: 0; }
.fecha-atrasada { color: var(--bs-danger) !important; font-weight: 600; }
.fecha-hoy { color: #a8860b !important; font-weight: 600; }

/* Checklist dentro de una tarea */
.checklist { list-style: none; padding: 0; margin: .5rem 0 0; }
.checklist li { display: flex; gap: .5rem; align-items: center; font-size: 13px; padding: .15rem 0; }
.checklist li.hecho span { text-decoration: line-through; color: var(--bs-secondary-color); }
.progreso-mini { height: 4px; width: 80px; background: var(--bs-border-color); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; }
.progreso-mini > i { display: block; height: 100%; background: var(--el-amarillo); }

/* Rutinas */
.frecuencia { font-size: 12px; color: var(--el-oscuro); background: var(--el-amarillo-suave); border-radius: 4px; padding: .15rem .5rem; display: inline-block; }
.fechas-proximas { display: flex; flex-wrap: wrap; gap: .35rem; }
.fechas-proximas span { font-size: 11px; border: 1px solid var(--bs-border-color); border-radius: 4px; padding: .1rem .4rem; font-variant-numeric: tabular-nums; }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary-color); }
.vacio i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--el-amarillo); }

.dato-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .1rem; }
.dato-valor { font-weight: 500; word-break: break-word; }

@media (max-width: 575.98px) {
    .tarea { padding: .75rem 1rem; gap: .6rem; }
    .resumen-num { font-size: 1.4rem; }
}

/* Métodos de pago */
.metodo-logo { border-radius: 22%; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; background: #fff; vertical-align: middle; }
.pagos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.pago-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1rem .75rem .85rem; border: 1px solid var(--bs-border-color); border-radius: 12px; cursor: pointer; text-align: center; background: #fff; transition: border-color .15s, box-shadow .15s; }
.pago-tile:hover { border-color: var(--el-amarillo); }
.pago-tile input { position: absolute; top: .6rem; left: .6rem; margin: 0; }
.pago-tile.activo { border-color: var(--el-oscuro); box-shadow: 0 0 0 1px var(--el-oscuro); }
.pago-tile.bloqueado { opacity: .45; cursor: not-allowed; }
.pago-nombre { font-weight: 600; font-size: 13px; color: var(--el-oscuro); line-height: 1.2; }
.pago-moneda { font-size: 11px; color: var(--bs-secondary-color); letter-spacing: .04em; }
.pago-badge { display: none; position: absolute; top: .5rem; right: .5rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--el-amarillo); color: var(--el-oscuro); border-radius: 4px; padding: .05rem .35rem; }
.pago-tile.principal .pago-badge { display: inline-block; }
.pago-agregar { border-style: dashed; color: inherit; }
.monto { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; color: var(--el-oscuro); font-weight: 600; }

/* Redes sociales */
.red-icono { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; flex-shrink: 0; line-height: 1; }
.red-icono svg { width: 52%; height: 52%; }
.red-link { display: inline-flex; transition: transform .15s; }
.red-link:hover { transform: translateY(-2px); }
.red-fila { display: grid; grid-template-columns: 36px minmax(130px, 200px) 1fr auto; gap: .6rem; align-items: center; }
@media (max-width: 575.98px) { .red-fila { grid-template-columns: 36px 1fr auto; } .red-fila input { grid-column: 1 / -1; } }