* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: #f5f6fa; color: #2d3436; }
#login-screen {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, #6c5b4f 0%, #c0785a 100%);
display: flex; justify-content: center; align-items: center; z-index: 1000;
}
.login-box {
background: white; padding: 40px; border-radius: 16px;
width: 400px; text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo { font-size: 32px; font-weight: bold; margin-bottom: 8px; }
.login-logo .pet { color: #2d3436; }
.login-logo .stop { color: #e17055; }
.login-subtitle { color: #636e72; margin-bottom: 30px; font-size: 14px; }
.login-box label { display: block; text-align: left; margin: 15px 0 6px; font-weight: 600; font-size: 14px; color: #2d3436; }
.login-box input {
width: 100%; padding: 12px 14px; border: 2px solid #dfe6e9;
border-radius: 8px; font-size: 15px; transition: border 0.2s;
}
.login-box input:focus { outline: none; border-color: #e17055; }
.login-demo {
background: #fff8f0; border: 1px solid #ffe0cc; border-radius: 8px;
padding: 10px; margin: 20px 0; font-size: 13px; color: #636e72;
}
.login-demo strong { color: #e17055; }
.btn-login {
width: 100%; padding: 14px; background: #e17055; color: white;
border: none; border-radius: 8px; font-size: 16px; font-weight: 600;
cursor: pointer; transition: background 0.2s;
}
.btn-login:hover { background: #d63031; }
.login-error { color: #d63031; font-size: 13px; margin-top: 10px; display: none; }
#admin-panel { display: none; }
.sidebar {
width: 240px; background: #2d3436; color: white;
height: 100vh; position: fixed; padding: 0; overflow-y: auto;
}
.sidebar-header { padding: 24px 20px; border-bottom: 1px solid #636e72; }
.sidebar-header .logo { font-size: 24px; font-weight: bold; }
.sidebar-header .logo .pet { color: white; }
.sidebar-header .logo .stop { color: #e17055; }
.sidebar-header .subtitle { font-size: 12px; color: #b2bec3; margin-top: 4px; }
.sidebar a {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px; color: #b2bec3; text-decoration: none;
transition: all 0.2s; cursor: pointer; border-left: 3px solid transparent;
}
.sidebar a:hover { background: #3d4649; color: white; }
.sidebar a.active {
background: #3d4649; color: white;
border-left-color: #e17055;
}
.sidebar a .icon { font-size: 18px; }
.content { margin-left: 240px; padding: 24px 32px; }
.page-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 24px; padding-bottom: 16px;
border-bottom: 2px solid #dfe6e9;
}
.page-header h1 { color: #2d3436; font-size: 28px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-time { color: #636e72; font-size: 14px; }
.header-user {
background: #e17055; color: white; padding: 6px 14px;
border-radius: 20px; font-size: 13px; font-weight: 600;
}
.section { display: none; }
.section.active { display: block; }
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px; margin-bottom: 28px;
}
.stat-card {
background: white; padding: 22px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-left: 4px solid #0984e3; position: relative;
}
.stat-card .stat-icon {
width: 48px; height: 48px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 12px;
}
.stat-card .stat-icon.blue { background: #e3f2fd; color: #0984e3; }
.stat-card .stat-icon.green { background: #e8f8f5; color: #00b894; }
.stat-card .stat-icon.orange { background: #fef5e7; color: #e17055; }
.stat-card .stat-icon.red { background: #fdecea; color: #d63031; }
.stat-card .stat-badge {
position: absolute; top: 16px; right: 16px;
background: #d4edda; color: #155724; padding: 3px 10px;
border-radius: 12px; font-size: 11px; font-weight: 600;
}
.stat-card .stat-badge.down { background: #fdecea; color: #721c24; }
.stat-card .stat-number { font-size: 32px; font-weight: bold; color: #2d3436; margin: 8px 0; }
.stat-card .stat-label { font-size: 14px; color: #636e72; }
.stat-card .stat-sub { font-size: 12px; color: #b2bec3; margin-top: 4px; }
.stat-card.border-blue { border-left-color: #0984e3; }
.stat-card.border-green { border-left-color: #00b894; }
.stat-card.border-orange { border-left-color: #e17055; }
.stat-card.border-red { border-left-color: #d63031; }
.card {
background: white; border-radius: 12px; padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 24px;
}
.card-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px; padding-bottom: 12px;
border-bottom: 2px solid #f1f2f6;
}
.card-header h2 { color: #2d3436; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.card-header .live-dot {
width: 10px; height: 10px; background: #00b894; border-radius: 50%;
display: inline-block; animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.card-header .badge-count {
background: #d63031; color: white; padding: 2px 10px;
border-radius: 12px; font-size: 12px; font-weight: 600;
}
.dashboard-grid {
display: grid; grid-template-columns: 2fr 1fr; gap: 24px;
}
.dashboard-grid .full-width { grid-column: 1 / -1; }
.columna-derecha { display: flex; flex-direction: column; gap: 24px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f1f2f6; }
th { background: #2d3436; color: white; font-weight: 600; font-size: 13px; }
th:first-child { border-radius: 8px 0 0 0; }
th:last-child { border-radius: 0 8px 0 0; }
tr:hover { background: #f8f9fa; }
.badge {
padding: 4px 12px; border-radius: 12px; font-size: 12px;
font-weight: 600; display: inline-block;
}
.badge-confirmada { background: #e3f2fd; color: #0984e3; }
.badge-activa { background: #e8f8f5; color: #00b894; }
.badge-finalizada { background: #f1f2f6; color: #636e72; }
.badge-disponible { background: #e8f8f5; color: #00b894; }
.badge-ocupada { background: #fdecea; color: #d63031; }
.badge-mantenimiento { background: #fef5e7; color: #e17055; }
.badge-reservada { background: #e3f2fd; color: #0984e3; }
.badge-pendiente { background: #fff3cd; color: #856404; }
.badge-excedida { background: #fdecea; color: #721c24; }
.badge-cancelada { background: #f1f2f6; color: #636e72; }
.badge-pagada-aprobacion { background: #ffe0b3; color: #e17055; font-weight: bold; }
.alerta-item {
padding: 14px; border-left: 4px solid #d63031;
background: #fff5f5; margin-bottom: 10px; border-radius: 6px;
display: flex; justify-content: space-between; align-items: center;
}
.alerta-item.amarilla { border-left-color: #e17055; background: #fff8f0; }
.alerta-item.azul { border-left-color: #0984e3; background: #f0f7ff; }
.alerta-item .alerta-texto { font-size: 14px; }
.alerta-item .alerta-texto strong { color: #2d3436; }
.alerta-item small { color: #636e72; font-size: 12px; white-space: nowrap; }
.mascotas-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.mascota-card {
background: #f8f9fa; border-radius: 10px; padding: 16px;
display: flex; align-items: center; gap: 14px;
}
.mascota-avatar {
width: 50px; height: 50px; border-radius: 50%;
background: #e3f2fd; display: flex; align-items: center;
justify-content: center; font-size: 24px;
}
.mascota-info h4 { color: #2d3436; font-size: 15px; margin-bottom: 3px; }
.mascota-info p { font-size: 12px; color: #636e72; margin: 2px 0; }
.mascota-info .jaula-tag { color: #0984e3; font-weight: 600; }
.mascota-tiempo { margin-left: auto; text-align: right; }
.mascota-tiempo .tiempo { font-size: 20px; font-weight: bold; color: #2d3436; }
.mascota-tiempo .label { font-size: 11px; color: #b2bec3; }
.mascota-tiempo .sale { font-size: 12px; color: #00b894; font-weight: 600; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center; }
.filtros button {
padding: 8px 18px; border: 2px solid #dfe6e9; border-radius: 20px;
background: white; color: #636e72; cursor: pointer;
font-size: 13px; font-weight: 600; transition: all 0.2s;
}
.filtros button:hover { border-color: #e17055; color: #e17055; }
.filtros button.active { background: #2d3436; color: white; border-color: #2d3436; }
.btn-primary {
background: #e17055; color: white; padding: 10px 20px;
border: none; border-radius: 8px; cursor: pointer;
font-size: 14px; font-weight: 600; transition: background 0.2s;
}
.btn-primary:hover { background: #d63031; }
.btn-secondary {
background: #0984e3; color: white; padding: 8px 14px;
border: none; border-radius: 6px; cursor: pointer;
font-size: 13px; margin-right: 6px;
}
.btn-secondary:hover { background: #0769b5; }
.btn-success { background: #00b894; color: white; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-right: 6px; }
.btn-success:hover { background: #008f72; }
.btn-danger { background: #d63031; color: white; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-danger:hover { background: #b52526; }
.btn-warning { background: #fdcb6e; color: #2d3436; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-right: 6px; }
.btn-warning:hover { background: #f39c12; }
.btn-refresh {
background: #00b894; color: white; padding: 10px 20px;
border: none; border-radius: 8px; cursor: pointer;
font-size: 14px; font-weight: 600; transition: all 0.3s;
margin-left: 10px;
}
.btn-refresh:hover { background: #008f72; }
.modal-overlay {
display: none; position: fixed; top: 0; left: 0;
width: 100%; height: 100%; background: rgba(0,0,0,0.5);
z-index: 2000; justify-content: center; align-items: center;
}
.modal-overlay.active { display: flex; }
.modal {
background: white; padding: 30px; border-radius: 12px;
width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto;
}
.modal.modal-large { max-width: 900px; }
.modal.modal-xl { max-width: 1100px; }
.modal-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #f1f2f6;
}
.modal-header h2 { color: #2d3436; font-size: 22px; }
.modal-close {
background: none; border: none; font-size: 24px; cursor: pointer;
color: #636e72; padding: 0 8px;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #2d3436; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 10px 12px; border: 2px solid #dfe6e9;
border-radius: 6px; font-size: 14px; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none; border-color: #e17055;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.btn-cancel { background: #b2bec3; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.btn-save { background: #00b894; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.iot-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.iot-card {
border: 1px solid #dfe6e9; border-radius: 10px; padding: 16px;
background: #f8f9fa; border-left: 4px solid #00b894;
}
.iot-card.alerta { border-left-color: #d63031; background: #fff5f5; }
.iot-card h4 { color: #2d3436; margin-bottom: 10px; font-size: 15px; }
.iot-card .sensor-row {
display: flex; justify-content: space-between; font-size: 13px;
padding: 3px 0; color: #636e72;
}
.iot-card .sensor-row strong { color: #2d3436; }
.iot-card .sensor-row.alert-text { color: #d63031; font-weight: bold; }
.iot-empty { text-align: center; color: #b2bec3; padding: 30px; font-style: italic; }
.badge-agua-ok { color: #00b894; font-weight: bold; }
.badge-agua-vacio { color: #d63031; font-weight: bold; }

/* 🎨 NUEVO: Indicadores IoT con colores y alertas */
.iot-ok { color: #00b894; font-weight: bold; }
.iot-warning { color: #e17055; font-weight: bold; }
.iot-danger { color: #d63031; font-weight: bold; }

.progress-item { margin-bottom: 16px; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.progress-bar { height: 10px; background: #dfe6e9; border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 5px; transition: width 0.5s; }
.progress-fill.green { background: #00b894; }
.progress-fill.red { background: #d63031; }
.progress-fill.orange { background: #e17055; }
.ingresos-valor { font-size: 36px; font-weight: bold; color: #2d3436; margin: 12px 0; }
.ingresos-sub { font-size: 13px; color: #636e72; margin-bottom: 12px; }
.ingresos-badge { display: inline-block; background: #d4edda; color: #155724; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.objetivo-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: #636e72; }
.objetivo-bar { height: 8px; background: #dfe6e9; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.objetivo-fill { height: 100%; background: #00b894; border-radius: 4px; }
.objetivo-restante { text-align: center; font-size: 12px; color: #636e72; margin-bottom: 16px; }
.pagos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pago-box { background: #f8f9fa; padding: 12px; border-radius: 8px; text-align: center; }
.pago-box .numero { font-size: 22px; font-weight: bold; color: #2d3436; }
.pago-box .label { font-size: 11px; color: #636e72; }
.chart-container { position: relative; height: 300px; }
.chart-container-small { position: relative; height: 120px; }
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.config-item { margin-bottom: 14px; }
.config-item label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.config-item input { width: 100%; padding: 10px; border: 2px solid #dfe6e9; border-radius: 6px; }
.footer { text-align: center; padding: 20px; color: #b2bec3; font-size: 13px; margin-top: 40px; }
.perrera-section {
background: #fff8f0; border: 2px solid #ffe0cc; border-radius: 8px;
padding: 16px; margin-bottom: 16px;
}
.perrera-section h3 { color: #e17055; margin-bottom: 12px; font-size: 16px; }
@media (max-width: 768px) {
.sidebar { width: 100%; height: auto; position: relative; }
.content { margin-left: 0; }
.dashboard-grid { grid-template-columns: 1fr; }
.config-grid { grid-template-columns: 1fr; }
}

/* ========================================== */
/* 🚨 BOTÓN APERTURA DE EMERGENCIA            */
/* ========================================== */
.btn-emergencia {
    background: #d63031;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    margin-left: 10px;
    animation: pulse-emergencia 2s infinite;
}

.btn-emergencia:hover {
    background: #b52526;
    transform: scale(1.05);
}

@keyframes pulse-emergencia {
    0% { box-shadow: 0 0 0 0 rgba(214, 48, 49, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(214, 48, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 48, 49, 0); }
}

/* ========================================== */
/* 🔓 BOTÓN APERTURA MANUAL (en tabla cabinas) */
/* ========================================== */
.btn-apertura-manual {
    background: #fdcb6e;
    color: #2d3436;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-apertura-manual:hover {
    background: #f39c12;
    transform: translateY(-1px);
}

/* ========================================== */
/* 📦 TARJETAS ESTADÍSTICAS DE CABINAS         */
/* (reutilizan .stat-card existente; aquí solo */
/*  ajustes específicos si fueran necesarios)  */
/* ========================================== */
.stat-card .stat-icon.purple { background: #f3e8ff; color: #6c5ce7; }
.stat-card.border-purple { border-left-color: #6c5ce7; }

/* ========================================== */
/* 🎯 TARJETAS COMPACTAS - Sección Cabinas    */
/* (50% tamaño, layout horizontal icono↔número,*/
/*  clicables para filtrar la tabla)          */
/* ========================================== */
.stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.stat-card-compact {
    background: white;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border-left: 4px solid #0984e3;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
    min-height: 56px;
}

.stat-card-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.stat-card-compact:focus {
    outline: 2px solid #e17055;
    outline-offset: 2px;
}

.stat-card-compact.active {
    background: #2d3436;
    color: white;
    border-left-width: 6px;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.stat-card-compact.active .stat-icon-mini {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
}

.stat-card-compact.active .stat-number-mini {
    color: white;
}

.stat-card-compact.border-blue   { border-left-color: #0984e3; }
.stat-card-compact.border-green  { border-left-color: #00b894; }
.stat-card-compact.border-red    { border-left-color: #d63031; }
.stat-card-compact.border-orange { border-left-color: #e17055; }
.stat-card-compact.border-purple { border-left-color: #6c5ce7; }

.stat-icon-mini {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #e3f2fd;
    color: #0984e3;
}
.stat-icon-mini.blue   { background: #e3f2fd; color: #0984e3; }
.stat-icon-mini.green  { background: #e8f8f5; color: #00b894; }
.stat-icon-mini.red    { background: #fdecea; color: #d63031; }
.stat-icon-mini.orange { background: #fef5e7; color: #e17055; }
.stat-icon-mini.purple { background: #f3e8ff; color: #6c5ce7; }

.stat-card-compact .stat-content {
    flex: 1;
    text-align: right;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.stat-number-mini {
    font-size: 22px;
    font-weight: bold;
    color: #2d3436;
}

.stat-label-mini {
    font-size: 11px;
    color: #636e72;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-card-compact.active .stat-label-mini {
    color: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
    .stats-grid-compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================== */
/* 🎯 Variante: tarjetas en UNA SOLA LÍNEA    */
/* (para secciones con muchas tarjetas)        */
/* ========================================== */
.stats-grid-one-line {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    flex-wrap: nowrap;
}

.stats-grid-one-line .stat-card-compact {
    min-width: 0;
    padding: 8px 10px;
}

.stats-grid-one-line .stat-icon-mini {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.stats-grid-one-line .stat-number-mini {
    font-size: 18px;
}

.stats-grid-one-line .stat-label-mini {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 1200px) {
    .stats-grid-one-line {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .stats-grid-one-line {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================== */
/* 👥 MÓDULO CLIENTES - refactorización       */
/* ========================================== */

/* --- Toolbar (buscador + page size) --- */
.tabla-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}

.search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #636e72;
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 2px solid #dfe6e9;
    border-radius: 8px;
    font-size: 14px;
    transition: border 0.2s;
}

.search-box input:focus {
    outline: none;
    border-color: #e17055;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #636e72;
    font-weight: 600;
}

.page-size-selector select {
    padding: 6px 10px;
    border: 2px solid #dfe6e9;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

/* --- Wrapper con scroll horizontal para tablas --- */
.tabla-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Tabla ordenable --- */
.tabla-ordenable th.th-sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.tabla-ordenable th.th-sortable:hover {
    background: #3d4649;
}

.tabla-ordenable th.th-center {
    text-align: center;
}

.sort-indicator {
    font-size: 11px;
    margin-left: 4px;
    color: #b2bec3;
    opacity: 0.6;
}

.sort-indicator.asc::before  { content: "↑"; opacity: 1; color: #e17055; font-weight: bold; }
.sort-indicator.desc::before { content: "↓"; opacity: 1; color: #e17055; font-weight: bold; }

/* --- Badges de estado de cliente --- */
.badge-estado-cliente {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-estado-cliente.activo     { background: #d4edda; color: #155724; }
.badge-estado-cliente.inactivo   { background: #fff3cd; color: #856404; }
.badge-estado-cliente.bloqueado  { background: #fdecea; color: #721c24; }
.badge-estado-cliente.vip        { background: #fff4d6; color: #9a6700; border: 1px solid #f1c40f; }

/* --- Indicador VIP (estrella) --- */
.vip-star {
    color: #f1c40f;
    margin-left: 4px;
    font-size: 13px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

/* --- Acciones en tabla --- */
.acciones-cell {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 160px;
}

.btn-icon {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    padding: 0;
}

.btn-icon.btn-edit    { background: #0984e3; color: white; }
.btn-icon.btn-edit:hover { background: #0769b5; }

.btn-icon.btn-delete  { background: #d63031; color: white; }
.btn-icon.btn-delete:hover { background: #b52526; }

.btn-icon.btn-email   { background: #00b894; color: white; }
.btn-icon.btn-email:hover { background: #008f72; }

.btn-icon.btn-bloquear { background: #fdcb6e; color: #2d3436; }
.btn-icon.btn-bloquear:hover { background: #f39c12; }

.btn-icon.btn-menu    { background: #f1f2f6; color: #2d3436; }
.btn-icon.btn-menu:hover { background: #dfe6e9; }

/* --- Dropdown acciones rápidas (⋮) --- */
.dropdown-acciones {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: white;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #2d3436;
    text-align: left;
    transition: background 0.15s;
}

.dropdown-menu button:hover {
    background: #f8f9fa;
}

.dropdown-menu button.danger {
    color: #d63031;
}

.dropdown-menu button.danger:hover {
    background: #fdecea;
}

.dropdown-menu hr {
    border: none;
    border-top: 1px solid #f1f2f6;
    margin: 0;
}

/* --- Paginación --- */
.paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f2f6;
    flex-wrap: wrap;
    gap: 10px;
}

.paginacion-info {
    font-size: 13px;
    color: #636e72;
}

.paginacion-controles {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-page {
    background: white;
    border: 2px solid #dfe6e9;
    color: #2d3436;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-page:hover:not(:disabled) {
    border-color: #e17055;
    color: #e17055;
}

.btn-page:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.paginacion-pagina {
    font-size: 13px;
    color: #636e72;
    font-weight: 600;
}

/* --- Modal con pestañas --- */
.cliente-stats-container {
    margin-bottom: 16px;
}

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #f1f2f6;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab {
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #636e72;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    border-radius: 6px 6px 0 0;
}

.tab:hover {
    color: #2d3436;
    background: #f8f9fa;
}

.tab.active {
    color: #e17055;
    border-bottom-color: #e17055;
}

.tab-content {
    min-height: 200px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel-header {
    margin-bottom: 12px;
}

.tab-panel-header h3 {
    color: #2d3436;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Mascotas dentro del modal --- */
.cliente-mascotas-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.cliente-mascota-card {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cliente-mascota-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.cliente-mascota-info h4 {
    font-size: 14px;
    color: #2d3436;
    margin-bottom: 2px;
}

.cliente-mascota-info p {
    font-size: 11px;
    color: #636e72;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .tabla-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box {
        max-width: none;
    }
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .tab {
        white-space: nowrap;
    }
    .paginacion {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .paginacion-controles {
        justify-content: center;
    }
}

/* ========================================== */
/* 🎨 NUEVOS BORDES DE TARJETAS (marrón/amarillo/oscuro) */
/* ========================================== */
.stat-card-compact.border-brown  { border-left-color: #8b5a2b; }
.stat-card-compact.border-yellow { border-left-color: #f1c40f; }
.stat-card-compact.border-dark   { border-left-color: #2d3436; }

.stat-icon-mini.brown  { background: #f5e6d3; color: #8b5a2b; }
.stat-icon-mini.yellow { background: #fff9c4; color: #9a6700; }
.stat-icon-mini.dark   { background: #e0e0e0; color: #2d3436; }

/* ========================================== */
/* 🔔 NOTIFICACIONES TOAST                     */
/* ========================================== */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: white;
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    border-left: 4px solid #00b894;
    color: #2d3436;
    font-size: 14px;
    font-weight: 600;
    min-width: 280px;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    animation: toast-in 0.3s ease;
}

.toast.success { border-left-color: #00b894; }
.toast.error   { border-left-color: #d63031; }
.toast.warning { border-left-color: #fdcb6e; }
.toast.info    { border-left-color: #0984e3; }

.toast.removing { animation: toast-out 0.3s ease forwards; }

@keyframes toast-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* ========================================== */
/* ⏳ SPINNER DE CARGA EN BOTONES              */
/* ========================================== */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

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

/* ========================================== */
/* 💰 FLUJO DE CAJA - badges y alertas         */
/* ========================================== */
.badge-tipo-movimiento {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-tipo-movimiento.entrada { background: #d4edda; color: #155724; }
.badge-tipo-movimiento.salida  { background: #fdecea; color: #721c24; }

.badge-categoria {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: #f1f2f6;
    color: #636e72;
}

.importe-entrada { color: #00b894; font-weight: bold; }
.importe-salida  { color: #d63031; font-weight: bold; }

/* Alerta visual si el balance es negativo */
.stat-card-compact.balance-negativo {
    background: #fdecea !important;
    border-left-color: #d63031 !important;
    animation: pulse-alerta 1.5s infinite;
}

.stat-card-compact.balance-negativo .stat-number-mini {
    color: #d63031 !important;
}

@keyframes pulse-alerta {
    0%, 100% { box-shadow: 0 2px 6px rgba(214,48,49,0.3); }
    50%      { box-shadow: 0 4px 14px rgba(214,48,49,0.6); }
}

/* ========================================== */
/* 🎯 BOTONES DE ACCIÓN DE RESERVAS (iconos)   */
/* ========================================== */
.btn-icon.btn-view       { background: #0984e3; color: white; }
.btn-icon.btn-view:hover { background: #0769b5; }

.btn-icon.btn-approve       { background: #00b894; color: white; }
.btn-icon.btn-approve:hover { background: #008f72; }

.btn-icon.btn-pay       { background: #f1c40f; color: #2d3436; }
.btn-icon.btn-pay:hover { background: #d4ac0d; }

.btn-icon.btn-renew       { background: #74b9ff; color: #2d3436; }
.btn-icon.btn-renew:hover { background: #5aa9ff; }

.btn-icon.btn-reminder       { background: #b2bec3; color: white; }
.btn-icon.btn-reminder:hover { background: #95a5a6; }

.btn-icon.btn-cancel       { background: #d63031; color: white; }
.btn-icon.btn-cancel:hover { background: #b52526; }

.btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon:disabled:hover {
    transform: none;
}

/* Columna de acciones más ancha para reservas (7 botones) */
#tabla-reservas-body .acciones-cell {
    min-width: 240px;
    flex-wrap: wrap;
}

/* ========================================== */
/* 💸 BOTÓN DEVOLVER BIZUM (morado)            */
/* ========================================== */
.btn-icon.btn-bizum {
    background: #6c5ce7;
    color: white;
}
.btn-icon.btn-bizum:hover {
    background: #5849c2;
    transform: scale(1.1);
}

/* ========================================== */
/* 🔔 TOAST CON BOTÓN DE ACCIÓN                */
/* (para devolución Bizum: copiar referencia)  */
/* ========================================== */
.toast.toast-con-accion {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 320px;
    max-width: 420px;
}

.toast-con-accion .toast-content-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast-action-btn {
    background: white;
    color: #2d3436;
    border: 2px solid #2d3436;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s;
    width: 100%;
}

.toast-action-btn:hover {
    background: #2d3436;
    color: white;
    transform: translateY(-1px);
}

/* ========================================== */
/* 🏷️ BADGE BIZUM (en detalle de reserva)     */
/* ========================================== */
.badge-bizum {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.badge-bizum.recibido {
    background: #d4edda;
    color: #155724;
}

.badge-bizum.pendiente {
    background: #fff3cd;
    color: #856404;
}

.badge-bizum.sin-bizum {
    background: #f1f2f6;
    color: #636e72;
}

.badge-bizum.devuelto {
    background: #f3e8ff;
    color: #6c5ce7;
}

/* Fila destacada para Bizum en detalle de reserva */
.fila-bizum {
    background: #f8f5ff !important;
    border-left: 4px solid #6c5ce7;
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 8px;
}

.fila-bizum strong {
    color: #6c5ce7;
}

/* ========================================== */
/* 📅 AGENDA / CALENDARIO NATIVO              */
/* ========================================== */
.agenda-calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.agenda-dia-header {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: #636e72;
    padding: 8px 0;
}
.agenda-dia {
    min-height: 70px;
    border: 1px solid #f1f2f6;
    border-radius: 6px;
    padding: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.agenda-dia:hover {
    background: #f8f9fa;
    border-color: #e17055;
}
.agenda-dia.vacio {
    background: #fafafa;
    cursor: default;
}
.agenda-dia.vacio:hover {
    background: #fafafa;
    border-color: #f1f2f6;
}
.agenda-dia.hoy {
    background: #e3f2fd;
    border-color: #0984e3;
    font-weight: bold;
}
.agenda-dia-num {
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 4px;
}
.agenda-actividad {
    background: #e17055;
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-item {
    background: white;
    border-left: 4px solid #e17055;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.agenda-item.completada {
    opacity: 0.6;
    text-decoration: line-through;
    border-left-color: #00b894;
}