/* ============================================================================
   TAHUA — CSS del módulo de Membresías (extraído de los <style> inline de las
   vistas para que el navegador no los descarte; cargado en <head> por app.blade.php).
   ============================================================================ */


/* ===================== dashboard.blade.php ===================== */


/* ===== Módulo Membresías — Grafito & Ámbar ===== */
.mem-dashboard{padding-top:8px}

/* --- KPIs premium --- */
.mem-dashboard .mem-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(208px,1fr));
    gap:16px;
    margin-bottom:24px;
}
.mem-dashboard .mem-kpi{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--tahua-card);
    border:1px solid var(--tahua-line);
    border-left:3px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
    box-shadow:var(--tahua-shadow-sm);
    padding:20px 22px;
    transition:box-shadow .2s ease, transform .2s ease;
}
.mem-dashboard .mem-kpi:hover{box-shadow:var(--tahua-shadow-md);transform:translateY(-1px)}
.mem-dashboard .mem-kpi__icon{
    width:46px;height:46px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;font-size:19px;
    background:var(--tahua-bg);color:var(--tahua-muted);
}
.mem-dashboard .mem-kpi__value{
    font-size:34px;line-height:1;font-weight:700;
    color:var(--tahua-ink);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
}
.mem-dashboard .mem-kpi__label{
    margin-top:6px;font-size:11.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--tahua-muted);
}
.mem-dashboard .mem-kpi--good{border-left-color:var(--tahua-good)}
.mem-dashboard .mem-kpi--good  .mem-kpi__icon{background:color-mix(in srgb,var(--tahua-good) 13%,transparent);color:var(--tahua-good)}
.mem-dashboard .mem-kpi--warn{border-left-color:var(--tahua-warn)}
.mem-dashboard .mem-kpi--warn  .mem-kpi__icon{background:color-mix(in srgb,var(--tahua-warn) 14%,transparent);color:var(--tahua-warn)}
.mem-dashboard .mem-kpi--bad{border-left-color:var(--tahua-bad)}
.mem-dashboard .mem-kpi--bad   .mem-kpi__icon{background:color-mix(in srgb,var(--tahua-bad) 13%,transparent);color:var(--tahua-bad)}
.mem-dashboard .mem-kpi--brand{border-left-color:var(--tahua-brand)}
.mem-dashboard .mem-kpi--brand .mem-kpi__icon{background:var(--tahua-brand-soft);color:var(--tahua-brand)}
.mem-dashboard .mem-kpi--neutral{border-left-color:color-mix(in srgb,var(--tahua-ink) 45%,var(--tahua-line))}
.mem-dashboard .mem-kpi--neutral .mem-kpi__icon{background:color-mix(in srgb,var(--tahua-ink) 8%,var(--tahua-card));color:var(--tahua-ink)}

/* --- Toolbar / título / filtros --- */
.mem-dashboard .mem-card-title{
    margin:0;font-size:16px;font-weight:680;color:var(--tahua-ink);
    display:flex;align-items:center;gap:9px;
}
.mem-dashboard .mem-card-title i{color:var(--tahua-brand);font-size:15px}
.mem-dashboard .mem-toolbar{gap:14px}
.mem-dashboard .mem-filters .form-control{min-height:38px}
.mem-dashboard .mem-filters .input-group{margin-bottom:4px}

/* --- Tabla --- */
.mem-dashboard .table{color:var(--tahua-ink);margin-bottom:0}
.mem-dashboard .table thead th{
    text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;
    font-weight:700;color:var(--tahua-muted);
    border-bottom:1px solid var(--tahua-line);
    border-top:none;padding:12px 14px;white-space:nowrap;vertical-align:middle;
}
.mem-dashboard .table tbody td{
    padding:13px 14px;vertical-align:middle;
    border-top:1px solid var(--tahua-line);
    font-size:13.5px;
}
.mem-dashboard .table.table-striped tbody tr:nth-of-type(odd){background:transparent}
.mem-dashboard .table tbody tr{transition:background .15s ease}
.mem-dashboard .table tbody tr:hover{background:var(--tahua-elev)}
/* Filas resaltadas -> tinte suave semántico con acento izquierdo */
.mem-dashboard .table tbody tr.table-warning,
.mem-dashboard .table tbody tr.table-warning>td{
    background:color-mix(in srgb,var(--tahua-warn) 8%,var(--tahua-card))!important;
}
.mem-dashboard .table tbody tr.table-warning>td:first-child{box-shadow:inset 3px 0 0 var(--tahua-warn)}
.mem-dashboard .table tbody tr.table-danger,
.mem-dashboard .table tbody tr.table-danger>td{
    background:color-mix(in srgb,var(--tahua-bad) 7%,var(--tahua-card))!important;
}
.mem-dashboard .table tbody tr.table-danger>td:first-child{box-shadow:inset 3px 0 0 var(--tahua-bad)}
.mem-dashboard .table tbody tr.table-warning:hover>td,
.mem-dashboard .table tbody tr.table-danger:hover>td{filter:brightness(.99)}

/* Cliente en negrita sutil */
.mem-dashboard .table tbody td:first-child{font-weight:600;color:var(--tahua-ink)}
/* Fechas tabulares */
.mem-dashboard .table tbody td{font-variant-numeric:tabular-nums}

/* --- Pills (tipo / almacén) --- */
.mem-dashboard .mem-pill{
    font-size:12px;font-weight:600;padding:.4em .7em;
    max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mem-dashboard .mem-pill i{opacity:.75;font-size:.92em}
.mem-dashboard .mem-pill--warehouse{
    background-color:color-mix(in srgb,var(--tahua-ink) 7%,var(--tahua-card));
    color:var(--tahua-ink);
    border:1px solid var(--tahua-line);
    box-shadow:none;
}
.mem-dashboard .mem-pill--warehouse i{color:var(--tahua-brand);opacity:1}
.mem-dashboard .mem-pill--warehouse:hover{
    background-color:color-mix(in srgb,var(--tahua-ink) 12%,var(--tahua-card));
    transform:none;box-shadow:var(--tahua-shadow-sm);
}
.mem-dashboard .mem-pill--type i{color:var(--tahua-brand);opacity:1}
.mem-dashboard .mem-pill--type:hover{background-color:color-mix(in srgb,var(--tahua-brand) 22%,var(--tahua-card))}

/* --- Estado con punto --- */
.mem-dashboard .mem-status .mem-dot{
    width:7px;height:7px;border-radius:50%;display:inline-block;background:currentColor;
    margin-right:1px;
}

/* --- Días restantes --- */
.mem-dashboard .table td .text-success{color:var(--tahua-good)!important}
.mem-dashboard .table td .text-warning{color:var(--tahua-warn)!important}
.mem-dashboard .table td .text-danger{color:var(--tahua-bad)!important}

/* --- Botones de acción --- */
.mem-dashboard .mem-actions{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
    min-width:150px;
}
.mem-dashboard .mem-actions .btn-sm{
    font-size:12px;font-weight:600;padding:.34rem .62rem;
    display:inline-flex;align-items:center;gap:5px;
}
.mem-dashboard .mem-actions .btn-sm i{font-size:.92em}

/* --- Paginación / footer --- */
.mem-dashboard .card-footer{background:var(--tahua-elev);border-top:1px solid var(--tahua-line)}

@media (max-width:768px){
    .mem-dashboard .mem-toolbar{align-items:stretch}
    .mem-dashboard .mem-filters{width:100%}
    .mem-dashboard .mem-filters .form-control{width:100%}
}

/* --- Cabeceras de modales del módulo (coherentes Grafito) --- */
.modal-header.bg-primary,
.modal-header.bg-info{
    background:var(--tahua-action)!important;
    color:var(--tahua-action-ink)!important;
    border-bottom:1px solid var(--tahua-line);
}
.modal-header.bg-primary .close,
.modal-header.bg-info .close{color:var(--tahua-action-ink);opacity:.85;text-shadow:none}
.modal-header .modal-title{font-weight:660}
.modal-content{border:1px solid var(--tahua-line);border-radius:var(--tahua-r-card)}


/* Estilos para el modal de invitados */
.guests-grid {
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 20px;
    overflow-x: auto;
    overflow-y: hidden;
}

.guest-box {
    width: 80px;
    flex-shrink: 0;
    height: 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative;
}

.guest-box.available {
    background: var(--tahua-good);
    border: 2px solid #1e7e34;
}

.guest-box.available:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
}

.guest-box.used {
    background: var(--tahua-bad);
    border: 2px solid #bd2130;
}

.guest-box.used:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
}

.guest-box .guest-number {
    display: none !important;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.guest-box .guest-icon {
    font-size: 14px;
    margin-top: 5px;
}

.guest-box .delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #dc3545;
    color: #dc3545;
    font-size: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.guest-box:hover .delete-btn {
    display: flex;
}

.guest-box .delete-btn:hover {
    background: #dc3545;
    color: white;
}

/* Estilos para el badge de almacén clickeable */
.warehouse-badge {
    transition: all 0.3s ease;
    position: relative;
}

.warehouse-badge:hover {
    box-shadow: var(--tahua-shadow-sm);
}

.warehouse-badge:active {
    transform: scale(0.98);
}

/* Tooltip para el warehouse badge */
.warehouse-badge::after {
    content: "Click para cambiar";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.warehouse-badge:hover::after {
    opacity: 1;
}

/* Estilos para el modal de cambio de almacén */
#changeWarehouseModal .modal-header {
    background: var(--tahua-action);
    color: var(--tahua-action-ink);
    border-bottom: none;
}

#changeWarehouseModal .alert-warning {
    border-left: 4px solid var(--tahua-warn);
    background-color: color-mix(in srgb, var(--tahua-warn) 12%, var(--tahua-card));
    border-color: color-mix(in srgb, var(--tahua-warn) 30%, transparent);
    color: var(--tahua-ink);
}

#changeWarehouseModal .badge {
    font-size: 0.9em;
    padding: 6px 12px;
}

/* Estilos para el modal de foto del cliente */
.photo-modal .modal-dialog {
    max-width: 600px;
    margin: 30px auto;
}

.photo-modal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.photo-modal .modal-header {
    background: linear-gradient(135deg, #2A2A2E 0%, #1C1C1E 100%);
    color: white;
    border-bottom: none;
    padding: 20px 24px;
}

.photo-modal .modal-header .modal-title {
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

.photo-modal .modal-header .close {
    color: white;
    opacity: 0.8;
    font-size: 24px;
    font-weight: 300;
    text-shadow: none;
}

.photo-modal .modal-header .close:hover {
    opacity: 1;
    color: white;
}

.photo-modal .modal-body {
    padding: 0;
    background-color: var(--tahua-bg);
}

.photo-modal .photo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    min-height: 400px;
    position: relative;
}

.photo-modal .customer-photo {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}

.photo-modal .no-photo-message {
    color: var(--tahua-muted);
    font-size: 16px;
    text-align: center;
    padding: 60px 20px;
}

.photo-modal .modal-footer {
    background-color: var(--tahua-card);
    border-top: 1px solid #e9ecef;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-modal .btn-group .btn {
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
    transition: all 0.2s ease;
}

.photo-modal .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.photo-modal .btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
    transform: translateY(-1px);
}

.photo-modal .btn-success {
    background-color: #28a745;
    border-color: var(--tahua-good);
}

.photo-modal .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
    transform: translateY(-1px);
}

.photo-modal .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.photo-modal .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
    transform: translateY(-1px);
}

.photo-modal .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.photo-modal .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-1px);
}

/* Animación de entrada del modal */
.photo-modal.fade .modal-dialog {
    transform: translateY(-50px);
    transition: transform 0.3s ease-out;
}

.photo-modal.show .modal-dialog {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .photo-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .photo-modal .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .photo-modal .btn-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .photo-modal .btn-group .btn {
        margin: 0;
        flex: 1;
        min-width: 120px;
    }
}

/* Indicador de carga para la foto */
.photo-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    color: var(--tahua-muted);
}

.photo-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--tahua-line);
    border-top: 4px solid var(--tahua-brand);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos mejorados para badges de almacén */
.warehouse-badge {
    font-weight: 600;
    font-size: 0.85em;
    padding: 8px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    display: inline-block;
    margin: 2px;
    min-width: 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.warehouse-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.warehouse-badge:hover::before {
    left: 100%;
}

.warehouse-badge:active {
    transform: scale(0.95);
}

/* Animación de pulso para badges importantes */
@keyframes warehouse-pulse {
    0% { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    50% { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    100% { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
}

.warehouse-badge.highlight {
    animation: warehouse-pulse 2s infinite;
}


.guest-info-card {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-item {
    display: flex;
    align-items: center;
    padding: 20px;
    background: var(--tahua-elev);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.info-item:hover {
    background: var(--tahua-bg);
    transform: translateX(5px);
}

.info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #2A2A2E 0%, #1C1C1E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.info-icon i {
    color: white;
    font-size: 20px;
}

.info-content {
    flex: 1;
}

.info-content label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.info-content p {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
    font-weight: 500;
}


.guests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    padding: 10px;
}

.guest-box {
    position: relative;
    border: 3px solid var(--tahua-line);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--tahua-card);
}

.guest-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.guest-box.available {
    border-color: var(--tahua-good);
    background: color-mix(in srgb, var(--tahua-good) 10%, var(--tahua-card));
}

.guest-box.used {
    border-color: var(--tahua-bad);
    background: color-mix(in srgb, var(--tahua-bad) 9%, var(--tahua-card));
}

.guest-icon {
    font-size: 48px;
    margin-bottom: 5px;
}

.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.guest-box:hover .delete-btn {
    opacity: 1;
}

.customer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--tahua-line);
    cursor: pointer;
    transition: background 0.2s;
}

.customer-item:hover {
    background: var(--tahua-elev);
}

.customer-item h6 {
    margin: 0;
    color: var(--tahua-ink);
}

.customer-item small {
    display: block;
    color: var(--tahua-muted);
}


/* ===================== list.blade.php ===================== */


/* ===== Grafito & Ámbar — Lista de Membresías ===== */
.mem-wrap{max-width:100%;}
.mem-card{
    background:var(--tahua-card);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
    box-shadow:var(--tahua-shadow-md);
    overflow:hidden;
}
.mem-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    padding:20px 24px;
    border-bottom:1px solid var(--tahua-line);
    background:var(--tahua-elev);
}
.mem-title{
    margin:0;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.12rem;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--tahua-ink);
}
.mem-title .mem-title-ic{
    width:38px;height:38px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:10px;
    background:var(--tahua-brand-soft);
    color:var(--tahua-brand);
    font-size:1rem;
}
.mem-title small{
    display:block;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--tahua-muted);
    margin-top:2px;
}
.mem-filters{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.mem-filters .mem-select,
.mem-filters .mem-search{
    height:42px;
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-control);
    background:var(--tahua-card);
    color:var(--tahua-ink);
    font-size:.9rem;
    padding:0 14px;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.mem-filters .mem-select{min-width:210px;appearance:none;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;}
.mem-filters .mem-search{min-width:230px;}
.mem-filters .mem-select:focus,
.mem-filters .mem-search:focus{
    outline:none;
    border-color:var(--tahua-action);
    box-shadow:0 0 0 3px rgba(190,140,0,.16);
}
.mem-search-group{display:flex;align-items:stretch;gap:8px;}
.mem-btn{
    height:42px;
    display:inline-flex;align-items:center;gap:7px;
    padding:0 16px;
    border-radius:var(--tahua-r-control);
    font-size:.88rem;font-weight:600;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
    white-space:nowrap;
}
.mem-btn-primary{background:var(--tahua-action);color:var(--tahua-action-ink);}
.mem-btn-primary:hover{background:var(--tahua-action-hover);color:var(--tahua-action-ink);}
.mem-btn-ghost{background:transparent;color:var(--tahua-muted);border-color:var(--tahua-line);}
.mem-btn-ghost:hover{color:var(--tahua-ink);border-color:var(--tahua-muted);}

.mem-body{padding:4px 0 8px;}
.mem-table-scroll{overflow-x:auto;}
.mem-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.mem-table thead th{
    text-align:left;
    padding:14px 18px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--tahua-muted);
    border-bottom:1px solid var(--tahua-line);
    white-space:nowrap;
    background:var(--tahua-card);
}
.mem-table tbody td{
    padding:14px 18px;
    border-bottom:1px solid var(--tahua-line);
    color:var(--tahua-ink);
    vertical-align:middle;
}
.mem-table tbody tr{transition:background .12s ease;}
.mem-table tbody tr:hover{background:var(--tahua-elev);}
.mem-table tbody tr:last-child td{border-bottom:none;}
.mem-table tbody tr.mem-row-warn{
    background:color-mix(in srgb, var(--tahua-bad) 6%, transparent);
    box-shadow:inset 3px 0 0 var(--tahua-bad);
}
.mem-table tbody tr.mem-row-warn:hover{
    background:color-mix(in srgb, var(--tahua-bad) 10%, transparent);
}
.mem-cust{font-weight:600;color:var(--tahua-ink);line-height:1.3;}
.mem-plan{color:var(--tahua-muted);font-size:.85rem;line-height:1.35;}
.mem-num{font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--tahua-ink);}
.mem-date{font-variant-numeric:tabular-nums;color:var(--tahua-ink);white-space:nowrap;}

/* Pills */
.mem-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 11px;
    border-radius:999px;
    font-size:.74rem;font-weight:600;letter-spacing:.01em;
    line-height:1;white-space:nowrap;
}
.mem-pill .mem-dot{width:6px;height:6px;border-radius:50%;flex:none;}
.mem-pill-wh{
    background:var(--tahua-brand-soft);
    color:var(--tahua-brand-strong);
    border:1px solid color-mix(in srgb, var(--tahua-brand) 30%, transparent);
    cursor:default;
}
.mem-pill-wh svg{opacity:.8;}
.mem-status-active{background:color-mix(in srgb, var(--tahua-good) 14%, transparent);color:var(--tahua-good);}
.mem-status-active .mem-dot{background:var(--tahua-good);}
.mem-status-frozen{background:color-mix(in srgb, var(--tahua-warn) 16%, transparent);color:var(--tahua-warn);}
.mem-status-frozen .mem-dot{background:var(--tahua-warn);}
.mem-status-expired{background:color-mix(in srgb, var(--tahua-bad) 12%, transparent);color:var(--tahua-bad);}
.mem-status-expired .mem-dot{background:var(--tahua-bad);}

.mem-days{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mem-days-ok{color:var(--tahua-good);}
.mem-days-soon{color:var(--tahua-warn);}
.mem-days-crit{color:var(--tahua-bad);}
.mem-days-muted{color:var(--tahua-muted);font-weight:500;}

/* Action buttons */
.mem-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mem-act{
    width:34px;height:34px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;
    border:1px solid var(--tahua-line);
    background:var(--tahua-card);
    color:var(--tahua-muted);
    font-size:.85rem;
    cursor:pointer;
    transition:background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
}
.mem-act:hover{transform:translateY(-1px);}
.mem-act-add:hover{background:var(--tahua-action);color:var(--tahua-action-ink);border-color:var(--tahua-action);}
.mem-act-freeze:hover{background:color-mix(in srgb, var(--tahua-warn) 14%, transparent);color:var(--tahua-warn);border-color:var(--tahua-warn);}
.mem-act-unfreeze:hover{background:color-mix(in srgb, var(--tahua-info) 14%, transparent);color:var(--tahua-info);border-color:var(--tahua-info);}
.mem-act-wa{
    width:auto;padding:0 12px;gap:6px;
    color:var(--tahua-good);
    border-color:color-mix(in srgb, var(--tahua-good) 40%, transparent);
    font-size:.8rem;font-weight:600;
}
.mem-act-wa:hover{background:color-mix(in srgb, var(--tahua-good) 12%, transparent);color:var(--tahua-good);}

.mem-empty{
    text-align:center;
    padding:56px 24px;
    color:var(--tahua-muted);
}
.mem-empty .mem-empty-ic{
    font-size:1.8rem;color:var(--tahua-brand);margin-bottom:10px;display:block;
}
.mem-empty h6{color:var(--tahua-ink);font-weight:600;margin:0 0 4px;}

.mem-pager{display:flex;justify-content:center;padding:18px 12px 8px;}

@media (max-width:640px){
    .mem-head{padding:16px;}
    .mem-filters{width:100%;}
    .mem-filters form,.mem-filters .mem-select,.mem-search-group{width:100%;}
    .mem-filters .mem-search{flex:1 1 auto;min-width:0;}
}


/* ===================== benefits.blade.php ===================== */


    .tb-wrap{
        --tb-gap:24px;
        max-width:1180px;margin:0 auto;padding:28px 16px 56px;
        font-family:var(--tahua-sans);color:var(--tahua-ink);
    }

    /* Encabezado */
    .tb-head{
        display:flex;align-items:flex-end;justify-content:space-between;
        gap:20px;flex-wrap:wrap;margin-bottom:26px;
    }
    .tb-eyebrow{
        font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
        color:var(--tahua-brand);margin:0 0 8px;
    }
    .tb-title{
        font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;
        color:var(--tahua-ink);
    }
    .tb-sub{margin:8px 0 0;font-size:14px;color:var(--tahua-muted);max-width:52ch;}

    /* Botones */
    .tb-btn{
        display:inline-flex;align-items:center;gap:8px;
        font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;
        border-radius:var(--tahua-r-control);border:1px solid transparent;
        padding:11px 18px;transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;
        text-decoration:none;white-space:nowrap;
    }
    .tb-btn:active{transform:translateY(1px);}
    .tb-btn-primary{background:var(--tahua-action);color:var(--tahua-action-ink);box-shadow:var(--tahua-shadow-sm);}
    .tb-btn-primary:hover{background:var(--tahua-action-hover);color:var(--tahua-action-ink);box-shadow:var(--tahua-shadow-md);}
    .tb-btn-ghost{background:var(--tahua-card);color:var(--tahua-ink);border-color:var(--tahua-line);}
    .tb-btn-ghost:hover{border-color:var(--tahua-brand);color:var(--tahua-ink);}
    .tb-btn-quiet{background:transparent;color:var(--tahua-muted);border-color:var(--tahua-line);}
    .tb-btn-quiet:hover{color:var(--tahua-ink);border-color:var(--tahua-ink);}
    .tb-btn .tb-plus{font-size:16px;line-height:0;font-weight:400;}

    /* Nota informativa */
    .tb-note{
        position:relative;background:var(--tahua-card);border:1px solid var(--tahua-line);
        border-radius:var(--tahua-r-card);padding:18px 20px 18px 22px;margin-bottom:var(--tb-gap);
        box-shadow:var(--tahua-shadow-sm);overflow:hidden;
    }
    .tb-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tahua-brand);}
    .tb-note-title{
        font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
        color:var(--tahua-ink);margin:0 0 10px;
    }
    .tb-note ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
    .tb-note li{
        position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--tahua-muted);
    }
    .tb-note li::before{
        content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
        background:var(--tahua-brand);
    }
    .tb-note li strong{color:var(--tahua-ink);font-weight:600;}

    /* Aviso transitorio (JS reescribe la clase a alert alert-*) */
    .tb-wrap .alert{
        border-radius:var(--tahua-r-control);border:1px solid var(--tahua-line);
        padding:13px 16px;font-size:13.5px;font-weight:500;margin-bottom:var(--tb-gap);
        box-shadow:var(--tahua-shadow-sm);
    }
    .tb-wrap .alert-success{background:var(--tahua-card);border-color:var(--tahua-good);color:var(--tahua-good);}
    .tb-wrap .alert-danger{background:var(--tahua-card);border-color:var(--tahua-bad);color:var(--tahua-bad);}
    .tb-wrap .alert-info{background:var(--tahua-card);border-color:var(--tahua-info);color:var(--tahua-info);}

    /* Tarjeta de tabla */
    .tb-card{
        background:var(--tahua-card);border:1px solid var(--tahua-line);
        border-radius:var(--tahua-r-card);box-shadow:var(--tahua-shadow-md);overflow:hidden;
    }
    .tb-card-head{
        display:flex;align-items:center;justify-content:space-between;gap:16px;
        padding:16px 22px;border-bottom:1px solid var(--tahua-line);flex-wrap:wrap;
    }
    .tb-card-head h2{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--tahua-ink);}
    .tb-count{
        font-size:12px;font-weight:600;color:var(--tahua-muted);
        background:var(--tahua-bg);border:1px solid var(--tahua-line);border-radius:999px;padding:3px 11px;
    }

    .tb-scroll{overflow-x:auto;}
    table.tb-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px;}
    table.tb-table thead th{
        text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
        color:var(--tahua-muted);padding:13px 18px;background:var(--tahua-bg);
        border-bottom:1px solid var(--tahua-line);white-space:nowrap;
    }
    table.tb-table thead th.tb-c{text-align:center;}
    table.tb-table tbody td{
        padding:15px 18px;border-bottom:1px solid var(--tahua-line);vertical-align:middle;color:var(--tahua-ink);
    }
    table.tb-table tbody tr:last-child td{border-bottom:none;}
    table.tb-table tbody tr{transition:background .12s ease;}
    table.tb-table tbody tr:hover{background:var(--tahua-elev);}
    table.tb-table td.tb-c{text-align:center;}
    .tb-plan-name{font-weight:600;color:var(--tahua-ink);}
    .tb-code{
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
        background:var(--tahua-bg);border:1px solid var(--tahua-line);border-radius:6px;
        padding:3px 8px;color:var(--tahua-brand);white-space:nowrap;
    }
    .tb-notes{font-size:12.5px;color:var(--tahua-muted);}

    /* Píldoras de estado / métricas */
    .tb-pill{
        display:inline-flex;align-items:center;gap:7px;
        font-size:12.5px;font-weight:600;line-height:1;
        padding:6px 12px;border-radius:999px;border:1px solid var(--tahua-line);
        background:var(--tahua-bg);color:var(--tahua-ink);white-space:nowrap;
    }
    .tb-pill .tb-dot{width:7px;height:7px;border-radius:50%;flex:none;}
    .tb-pill-num{font-variant-numeric:tabular-nums;font-weight:700;}
    .tb-pill--good{background:var(--tahua-brand-soft);border-color:transparent;color:var(--tahua-brand-strong);}
    .tb-pill--good .tb-dot{background:var(--tahua-brand);}
    .tb-pill--info{background:var(--tahua-bg);color:var(--tahua-info);}
    .tb-pill--info .tb-dot{background:var(--tahua-info);}
    .tb-pill--off{color:var(--tahua-muted);}
    .tb-pill--off .tb-dot{background:var(--tahua-muted);}
    .tb-pill--active{color:var(--tahua-good);border-color:transparent;background:transparent;padding-left:0;padding-right:0;}
    .tb-pill--active .tb-dot{background:var(--tahua-good);box-shadow:0 0 0 3px rgba(22,163,74,.14);}
    .tb-pill--inactive{color:var(--tahua-bad);border-color:transparent;background:transparent;padding-left:0;padding-right:0;}
    .tb-pill--inactive .tb-dot{background:var(--tahua-bad);}

    .tb-foot{margin-top:var(--tb-gap);}

    /* Modales — refinado sobre Bootstrap */
    .tb-wrap ~ .tb-modal .modal-content,
    .tb-modal .modal-content{
        border:1px solid var(--tahua-line);border-radius:var(--tahua-r-card);
        box-shadow:var(--tahua-shadow-lg);overflow:hidden;background:var(--tahua-card);
    }
    .tb-modal .modal-header{
        background:var(--tahua-card);border-bottom:1px solid var(--tahua-line);
        padding:18px 22px;align-items:center;
    }
    .tb-modal .modal-title{font-size:16px;font-weight:700;color:var(--tahua-ink);letter-spacing:-.01em;margin:0;}
    .tb-modal .modal-header .close{
        color:var(--tahua-muted);opacity:1;text-shadow:none;font-weight:400;font-size:24px;
    }
    .tb-modal .modal-header .close:hover{color:var(--tahua-ink);}
    .tb-modal .modal-body{padding:22px;color:var(--tahua-ink);}
    .tb-modal .modal-footer{
        background:var(--tahua-bg);border-top:1px solid var(--tahua-line);padding:15px 22px;gap:10px;
    }
    .tb-field{margin-bottom:16px;}
    .tb-field:last-child{margin-bottom:0;}
    .tb-field label{
        display:block;font-size:12.5px;font-weight:600;color:var(--tahua-ink);margin:0 0 7px;
    }
    .tb-field .form-control{
        width:100%;background:var(--tahua-card);border:1px solid var(--tahua-line);
        border-radius:var(--tahua-r-control);padding:11px 13px;font-size:14px;color:var(--tahua-ink);
        transition:border-color .15s ease,box-shadow .15s ease;height:auto;
    }
    .tb-field .form-control::placeholder{color:var(--tahua-muted);}
    .tb-field .form-control:focus{
        outline:none;border-color:var(--tahua-brand);
        box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 22%,transparent);
    }
    .tb-hint{display:block;margin-top:6px;font-size:12px;color:var(--tahua-muted);line-height:1.4;}
    .tb-hint code{
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
        background:var(--tahua-bg);border:1px solid var(--tahua-line);border-radius:5px;padding:1px 6px;color:var(--tahua-brand);
    }
    .tb-check{display:flex;align-items:center;gap:10px;}
    .tb-check input[type=checkbox]{
        width:18px;height:18px;accent-color:var(--tahua-brand);cursor:pointer;margin:0;
    }
    .tb-check label{margin:0;font-size:13.5px;font-weight:600;cursor:pointer;}

    @media (max-width:640px){
        .tb-head{align-items:flex-start;}
        .tb-title{font-size:22px;}
    }


/* ===================== modals.blade.php ===================== */


    /* Scoped a los tres modales de membresías para no filtrar estilos */
    .tahua-mem-modal .modal-dialog{max-width:480px}
    .tahua-mem-modal .modal-content{overflow:hidden}

    .tahua-mem-modal .modal-header{
        align-items:center;
        gap:.85rem;
        padding:1.15rem 1.35rem;
        background:var(--tahua-elev);
        border-bottom:1px solid var(--tahua-line);
    }
    .tahua-mem-modal .modal-title{
        display:flex;
        align-items:center;
        gap:.75rem;
        margin:0;
        font-size:1.06rem;
        font-weight:650;
        letter-spacing:-.01em;
        color:var(--tahua-ink);
    }
    .tahua-mem-modal .mem-chip{
        flex:0 0 auto;
        width:38px;height:38px;
        display:inline-flex;
        align-items:center;justify-content:center;
        border-radius:10px;
        background:var(--tahua-brand-soft);
        color:var(--tahua-brand);
        box-shadow:var(--tahua-shadow-sm);
    }
    .tahua-mem-modal .mem-chip svg{display:block}
    .tahua-mem-modal .modal-header .close{
        margin:-.5rem -.35rem -.5rem auto;
        padding:.4rem .55rem;
        font-size:1.5rem;line-height:1;
        color:var(--tahua-muted);
        opacity:.7;text-shadow:none;
        transition:opacity .15s ease,color .15s ease;
    }
    .tahua-mem-modal .modal-header .close:hover{opacity:1;color:var(--tahua-ink)}

    .tahua-mem-modal .modal-body{padding:1.35rem}
    .tahua-mem-modal .modal-footer{
        padding:1rem 1.35rem;
        gap:.6rem;
        background:var(--tahua-elev);
        border-top:1px solid var(--tahua-line);
    }

    /* Bloque de contexto (cliente / membresía) — datos de solo lectura */
    .tahua-mem-modal .mem-context{
        display:grid;
        gap:.65rem;
        padding:.9rem 1rem;
        margin-bottom:1.3rem;
        background:var(--tahua-elev);
        border:1px solid var(--tahua-line);
        border-radius:var(--tahua-r-control);
    }
    .tahua-mem-modal .mem-context .mem-row{display:grid;gap:.15rem}
    .tahua-mem-modal .mem-context label{
        margin:0;
        font-size:.72rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:var(--tahua-muted);
    }
    .tahua-mem-modal .mem-context input[readonly]{
        padding:0;height:auto;
        background:transparent;border:none;box-shadow:none!important;
        font-size:.95rem;font-weight:600;color:var(--tahua-ink);
    }
    .tahua-mem-modal .mem-context input[readonly]:focus{border:none;box-shadow:none!important}

    /* Etiquetas de campos editables */
    .tahua-mem-modal .modal-body > .form-group label,
    .tahua-mem-modal .modal-body > form .form-group label{
        margin-bottom:.4rem;
        font-size:.85rem;font-weight:600;
        color:var(--tahua-ink);
    }
    .tahua-mem-modal .form-text{
        margin-top:.45rem;
        font-size:.78rem;
        color:var(--tahua-muted)!important;
    }

    /* Vista previa del mensaje (solo lectura) */
    .tahua-mem-modal textarea#whatsappMessage{
        background:var(--tahua-bg);
        resize:none;
        font-size:.9rem;line-height:1.5;
        color:var(--tahua-ink);
    }
    .tahua-mem-modal input#whatsappDaysLeft{
        max-width:150px;font-weight:600;font-variant-numeric:tabular-nums;
    }

    /* Botones: acción primaria grafito, cancelar fantasma */
    .tahua-mem-modal .modal-footer .btn{
        font-weight:600;
        padding:.55rem 1.15rem;
    }
    .tahua-mem-modal .modal-footer .btn[type="submit"]{
        background:var(--tahua-action);
        border-color:var(--tahua-action);
        color:var(--tahua-action-ink);
        box-shadow:var(--tahua-shadow-sm);
    }
    .tahua-mem-modal .modal-footer .btn[type="submit"]:hover,
    .tahua-mem-modal .modal-footer .btn[type="submit"]:focus,
    .tahua-mem-modal .modal-footer .btn[type="submit"]:active{
        background:var(--tahua-action-hover)!important;
        border-color:var(--tahua-action-hover)!important;
        color:var(--tahua-action-ink)!important;
    }
    .tahua-mem-modal .modal-footer .btn-secondary{
        background:transparent;
        border-color:var(--tahua-line);
        color:var(--tahua-ink);
    }
    .tahua-mem-modal .modal-footer .btn-secondary:hover{
        background:var(--tahua-bg);
        border-color:color-mix(in srgb,var(--tahua-ink) 20%,var(--tahua-line));
        color:var(--tahua-ink);
    }


/* ============================================================================
   TAHUA — Membresías · CAPA PREMIUM v2 (2026-07-10)
   ----------------------------------------------------------------------------
   - Convención nueva: .mem-guest-stat / .mem-guest-tile / .mem-dot--free|used.
   - Modales del módulo estilizados por ID (los IDs se preservan en el markup).
   - Neutraliza colores Bootstrap crudos (bg-success/bg-danger/bg-primary/bg-info)
     dentro del scope del módulo, remapeándolos a tokens var(--tahua-*).
   - Todo en var(--tahua-*): al activarse body.dark-mode el tema se voltea solo.
   - Estas reglas van al final del archivo para GANAR por orden a los estilos
     heredados del markup viejo (misma o mayor especificidad + posición).
   - Toggle sol/luna: usar <a class="mem-theme-toggle"> con dos <i fa fa-moon-o>
     y <i fa fa-sun-o>; el CSS alterna cuál se ve según body.dark-mode.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) SUPERFICIE Y CABECERAS DE LOS MODALES DEL MÓDULO (por ID preservado)
   --------------------------------------------------------------------------- */
#guestsModal .modal-content,
#customerSelectorModal .modal-content,
#guestInfoModal .modal-content,
#customerPhotoModal .modal-content,
#daysHistoryModal .modal-content,
#freezeModal .modal-content,
#addDaysModal .modal-content,
#whatsappModal .modal-content,
#changeWarehouseModal .modal-content,
#changeMembershipTypeModal .modal-content{
    background:var(--tahua-card);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
    box-shadow:var(--tahua-shadow-lg);
    overflow:hidden;
}

/* Cabecera: superficie elevada + tinta. !important vence a .bg-primary/.bg-info,
   a .text-white y a los style="" inline del markup viejo (negro pleno/gradiente). */
#guestsModal .modal-header,
#customerSelectorModal .modal-header,
#guestInfoModal .modal-header,
#customerPhotoModal .modal-header,
#daysHistoryModal .modal-header,
#freezeModal .modal-header,
#addDaysModal .modal-header,
#whatsappModal .modal-header,
#changeWarehouseModal .modal-header,
#changeMembershipTypeModal .modal-header{
    background:var(--tahua-elev)!important;
    color:var(--tahua-ink)!important;
    border-bottom:1px solid var(--tahua-line)!important;
    padding:1.1rem 1.35rem;
    align-items:center;
}
#guestsModal .modal-header .modal-title,
#customerSelectorModal .modal-header .modal-title,
#guestInfoModal .modal-header .modal-title,
#customerPhotoModal .modal-header .modal-title,
#daysHistoryModal .modal-header .modal-title,
#freezeModal .modal-header .modal-title,
#addDaysModal .modal-header .modal-title,
#whatsappModal .modal-header .modal-title,
#changeWarehouseModal .modal-header .modal-title,
#changeMembershipTypeModal .modal-header .modal-title{
    display:flex;align-items:center;gap:.6rem;
    margin:0;font-size:1.05rem;font-weight:660;letter-spacing:-.01em;
    color:var(--tahua-ink)!important;
}
#guestsModal .modal-header .modal-title i,
#customerSelectorModal .modal-header .modal-title i,
#guestInfoModal .modal-header .modal-title i,
#customerPhotoModal .modal-header .modal-title i,
#daysHistoryModal .modal-header .modal-title i,
#freezeModal .modal-header .modal-title i,
#addDaysModal .modal-header .modal-title i,
#whatsappModal .modal-header .modal-title i,
#changeWarehouseModal .modal-header .modal-title i,
#changeMembershipTypeModal .modal-header .modal-title i{
    color:var(--tahua-brand)!important;
}
#guestsModal .modal-header .close,
#customerSelectorModal .modal-header .close,
#guestInfoModal .modal-header .close,
#customerPhotoModal .modal-header .close,
#daysHistoryModal .modal-header .close,
#freezeModal .modal-header .close,
#addDaysModal .modal-header .close,
#whatsappModal .modal-header .close,
#changeWarehouseModal .modal-header .close,
#changeMembershipTypeModal .modal-header .close{
    color:var(--tahua-muted)!important;
    opacity:1;text-shadow:none;font-weight:400;
    transition:color .15s ease;
}
#guestsModal .modal-header .close:hover,
#customerSelectorModal .modal-header .close:hover,
#guestInfoModal .modal-header .close:hover,
#customerPhotoModal .modal-header .close:hover,
#daysHistoryModal .modal-header .close:hover,
#freezeModal .modal-header .close:hover,
#addDaysModal .modal-header .close:hover,
#whatsappModal .modal-header .close:hover,
#changeWarehouseModal .modal-header .close:hover,
#changeMembershipTypeModal .modal-header .close:hover{color:var(--tahua-ink)!important;}

/* Cuerpo y pie coherentes */
#guestsModal .modal-body,
#customerSelectorModal .modal-body,
#guestInfoModal .modal-body,
#customerPhotoModal .modal-body,
#daysHistoryModal .modal-body,
#freezeModal .modal-body,
#addDaysModal .modal-body,
#whatsappModal .modal-body,
#changeWarehouseModal .modal-body,
#changeMembershipTypeModal .modal-body{color:var(--tahua-ink);}
#guestsModal .modal-footer,
#customerSelectorModal .modal-footer,
#guestInfoModal .modal-footer,
#customerPhotoModal .modal-footer,
#daysHistoryModal .modal-footer,
#freezeModal .modal-footer,
#addDaysModal .modal-footer,
#whatsappModal .modal-footer,
#changeWarehouseModal .modal-footer,
#changeMembershipTypeModal .modal-footer{
    background:var(--tahua-elev);
    border-top:1px solid var(--tahua-line);
    padding:1rem 1.35rem;gap:.6rem;
}
/* text-muted legible en ambos temas dentro de los modales del módulo */
#guestsModal .text-muted,
#customerSelectorModal .text-muted,
#guestInfoModal .text-muted,
#customerPhotoModal .text-muted,
#daysHistoryModal .text-muted,
#freezeModal .text-muted,
#addDaysModal .text-muted{color:var(--tahua-muted)!important;}

/* ---------------------------------------------------------------------------
   2) MODAL DE INVITADOS — TARJETAS DE STAT (.mem-guest-stat)
   Superficie card + acento en borde. NUNCA verde/rojo pleno.
   --------------------------------------------------------------------------- */
.mem-guest-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;
}
.mem-guest-stat{
    display:flex;flex-direction:column;gap:8px;
    padding:16px 18px;
    background:var(--tahua-card);
    border:1px solid var(--tahua-line);
    border-left:3px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
    box-shadow:var(--tahua-shadow-sm);
}
.mem-guest-stat__value{
    font-size:30px;line-height:1;font-weight:700;
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;
    color:var(--tahua-ink);margin:0;
}
.mem-guest-stat__label{
    display:flex;align-items:center;gap:8px;
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:var(--tahua-muted);
}
.mem-guest-stat__label .mem-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.mem-guest-stat--available{border-left-color:var(--tahua-good);}
.mem-guest-stat--available .mem-guest-stat__value{color:var(--tahua-good);}
.mem-guest-stat--available .mem-dot{background:var(--tahua-good);}
.mem-guest-stat--used{border-left-color:var(--tahua-bad);}
.mem-guest-stat--used .mem-guest-stat__value{color:var(--tahua-ink);}
.mem-guest-stat--used .mem-dot{background:var(--tahua-bad);}

/* Defensa: si el markup aún trae <div class="card bg-success/bg-danger text-white">,
   lo remapeamos a tarjeta con acento (sin fondo pleno) hasta que se migre a mem-guest-stat. */
#guestsModal .card.bg-success,
#guestsModal .card.bg-danger,
#guestsModal .card.bg-primary,
#guestsModal .card.bg-info{
    background:var(--tahua-card)!important;
    border:1px solid var(--tahua-line)!important;
    border-left:3px solid var(--tahua-line)!important;
    border-radius:var(--tahua-r-card)!important;
    box-shadow:var(--tahua-shadow-sm)!important;
    color:var(--tahua-ink)!important;
}
#guestsModal .card.bg-success{border-left-color:var(--tahua-good)!important;}
#guestsModal .card.bg-danger{border-left-color:var(--tahua-bad)!important;}
#guestsModal .card.bg-success *,
#guestsModal .card.bg-danger *,
#guestsModal .card.bg-primary *,
#guestsModal .card.bg-info *{color:var(--tahua-ink)!important;}
#guestsModal .card.bg-success h3{color:var(--tahua-good)!important;}
#guestsModal .card.bg-danger h3{color:var(--tahua-bad)!important;}

/* ---------------------------------------------------------------------------
   3) MODAL DE INVITADOS — TILES DE INVITADO (.mem-guest-tile / .guest-box)
   Superficie elevada + punto de color (.mem-dot--free/--used). Sin emoji pleno.
   --------------------------------------------------------------------------- */
.guests-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
    gap:12px;
    padding:4px 2px;
    overflow:visible;
}
.mem-guest-tile,
.guest-box{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
    width:auto;min-width:0;height:auto;
    aspect-ratio:1/1;
    padding:14px 10px;
    background:var(--tahua-elev)!important;
    border:1px solid var(--tahua-line)!important;
    border-radius:var(--tahua-r-card)!important;
    box-shadow:none!important;
    color:var(--tahua-muted);
    cursor:pointer;text-align:center;
    transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.mem-guest-tile:hover,
.guest-box:hover{
    transform:translateY(-2px)!important;
    box-shadow:var(--tahua-shadow-md)!important;
    border-color:var(--tahua-muted)!important;
}
/* El punto de color reemplaza al emoji */
.mem-guest-tile .mem-dot{
    width:18px;height:18px;border-radius:50%;flex:none;
}
.mem-guest-tile__label{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--tahua-muted);}
.mem-dot--free{
    background:var(--tahua-good);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--tahua-good) 18%,transparent);
}
.mem-dot--used{
    background:var(--tahua-bad);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--tahua-bad) 16%,transparent);
}
.mem-guest-tile--free,
.guest-box.available{border-color:color-mix(in srgb,var(--tahua-good) 42%,var(--tahua-line))!important;}
.mem-guest-tile--free:hover,
.guest-box.available:hover{border-color:var(--tahua-good)!important;}
.mem-guest-tile--used,
.guest-box.used{border-color:color-mix(in srgb,var(--tahua-bad) 34%,var(--tahua-line))!important;}
.mem-guest-tile--used:hover,
.guest-box.used:hover{border-color:var(--tahua-bad)!important;}
/* Emoji heredado (si el JS aún lo pinta): lo contenemos a un tamaño discreto */
.guest-box .guest-icon{font-size:22px!important;line-height:1;margin:0!important;}
.guest-box .guest-number{display:none!important;}

/* Botón de eliminar del tile */
.mem-guest-tile .delete-btn,
.guest-box .delete-btn{
    position:absolute;top:-7px;right:-7px;
    width:22px;height:22px;border-radius:50%;
    display:none;align-items:center;justify-content:center;
    background:var(--tahua-card);border:1px solid var(--tahua-bad);color:var(--tahua-bad);
    font-size:11px;cursor:pointer;box-shadow:var(--tahua-shadow-sm);
    transition:background .15s ease,color .15s ease;opacity:1;
}
.mem-guest-tile:hover .delete-btn,
.guest-box:hover .delete-btn{display:flex;}
.mem-guest-tile .delete-btn:hover,
.guest-box .delete-btn:hover{background:var(--tahua-bad);color:#fff;}

/* Estado vacío del grid de invitados */
#guestsModal .guests-grid .text-muted{color:var(--tahua-muted)!important;}

/* ---------------------------------------------------------------------------
   4) MODAL INFORMACIÓN DEL INVITADO (#guestInfoModal) — filas de datos
   --------------------------------------------------------------------------- */
#guestInfoModal .modal-body{padding:1.55rem 1.6rem;}
.guest-info-card{display:flex;flex-direction:column;gap:12px;}
.info-item{
    display:flex;align-items:center;gap:16px;
    padding:14px 16px;
    background:var(--tahua-elev);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-control);
    transition:border-color .15s ease;
}
.info-item:hover{background:var(--tahua-elev);border-color:var(--tahua-muted);transform:none;}
.info-icon{
    width:44px;height:44px;flex-shrink:0;margin:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--tahua-brand-soft)!important;
    border-radius:11px;
}
.info-icon i{color:var(--tahua-brand)!important;font-size:17px;}
.info-content{flex:1;min-width:0;}
.info-content label{
    display:block;margin:0 0 3px;
    font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
    color:var(--tahua-muted)!important;
}
.info-content p{margin:0;font-size:15px;font-weight:600;color:var(--tahua-ink)!important;}

/* ---------------------------------------------------------------------------
   5) MODAL FOTO DEL CLIENTE (#customerPhotoModal)
   --------------------------------------------------------------------------- */
#customerPhotoModal .modal-body{background:var(--tahua-card);color:var(--tahua-ink);}
#customerPhotoModal .text-primary{color:var(--tahua-ink)!important;}
#customerPhotoModal .photo-container{
    display:flex;align-items:center;justify-content:center;
    min-height:320px;padding:16px;
    background:var(--tahua-bg);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
}
#customerPhotoModal .photo-container img,
#customerPhotoModal .customer-photo{
    max-width:100%;max-height:60vh;height:auto;object-fit:contain;border-radius:8px;
    box-shadow:var(--tahua-shadow-md);
}
/* Orfebrería defensiva: si el markup usara la clase .photo-modal en su header,
   evitamos el gradiente negro pleno. */
.photo-modal .modal-header{background:var(--tahua-elev)!important;color:var(--tahua-ink)!important;}
.photo-modal .modal-header .modal-title{color:var(--tahua-ink)!important;}
.photo-modal .modal-header .close{color:var(--tahua-muted)!important;}
.photo-modal .photo-container{background:var(--tahua-bg)!important;}

/* ---------------------------------------------------------------------------
   6) NEUTRALIZACIÓN DE BOTONES BOOTSTRAP CRUDOS EN MODALES DEL MÓDULO
   (btn-info no está tokenizado por la marca; el resto ya lo hereda de brand.css)
   --------------------------------------------------------------------------- */
#guestsModal .btn-info,
#guestInfoModal .btn-info,
#customerSelectorModal .btn-info,
#customerPhotoModal .btn-info{
    background:var(--tahua-info);border-color:var(--tahua-info);color:#fff;
    box-shadow:var(--tahua-shadow-sm);
}
#guestsModal .btn-info:hover,
#guestInfoModal .btn-info:hover,
#customerSelectorModal .btn-info:hover,
#customerPhotoModal .btn-info:hover{
    background:color-mix(in srgb,var(--tahua-info) 88%,#000);
    border-color:color-mix(in srgb,var(--tahua-info) 88%,#000);color:#fff;
}

/* ---------------------------------------------------------------------------
   7) ALERTAS INTERNAS (freeze) legibles en día/noche
   --------------------------------------------------------------------------- */
#freezeModal .alert,
#addDaysModal .alert{border-radius:var(--tahua-r-control);border:1px solid var(--tahua-line);}
#freezeModal .alert-info{
    background:color-mix(in srgb,var(--tahua-info) 10%,var(--tahua-card));
    border-color:color-mix(in srgb,var(--tahua-info) 30%,transparent);
    color:var(--tahua-ink);
}
#freezeModal .alert-secondary{
    background:var(--tahua-elev);border-color:var(--tahua-line);color:var(--tahua-muted);
}
#freezeModal .alert-danger{
    background:color-mix(in srgb,var(--tahua-bad) 10%,var(--tahua-card));
    border-color:color-mix(in srgb,var(--tahua-bad) 30%,transparent);
    color:var(--tahua-bad);
}
#freezeModal .alert .text-success{color:var(--tahua-good)!important;}

/* ---------------------------------------------------------------------------
   8) TOGGLE SOL/LUNA DE LA TOPBAR (sincronizado con el panel vía body.dark-mode)
   Markup sugerido:
     <a class="mem-theme-toggle" ...><i class="fa fa-moon-o"></i><i class="fa fa-sun-o"></i></a>
   --------------------------------------------------------------------------- */
.mem-theme-toggle{
    width:40px;height:40px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:10px;border:1px solid var(--tahua-line);
    background:var(--tahua-card);color:var(--tahua-muted);
    font-size:16px;cursor:pointer;text-decoration:none;
    transition:color .15s ease,border-color .15s ease,background .15s ease,transform .1s ease;
}
.mem-theme-toggle:hover{color:var(--tahua-brand);border-color:var(--tahua-brand);}
.mem-theme-toggle:active{transform:scale(.96);}
.mem-theme-toggle i{line-height:1;pointer-events:none;}
.mem-theme-toggle .fa-sun-o{display:none;}
.mem-theme-toggle .fa-moon-o{display:inline-block;}
body.dark-mode .mem-theme-toggle .fa-moon-o{display:none;}
body.dark-mode .mem-theme-toggle .fa-sun-o{display:inline-block;}

/* ---------------------------------------------------------------------------
   9) REFUERZOS DÍA/NOCHE PARA HARDCODES QUE PUDIERAN COLARSE
   (la mayoría ya se voltea por token; esto cubre sombras/badges heredados)
   --------------------------------------------------------------------------- */
body.dark-mode .warehouse-badge::after{background:rgba(0,0,0,.85);color:#fff;}
body.dark-mode #guestsModal .guest-box,
body.dark-mode #guestsModal .mem-guest-tile{box-shadow:none;}

/* Pulido de acciones de la fila (respiración entre botones) */
.mem-dashboard .mem-actions .btn-sm{border-radius:calc(var(--tahua-r-control) - 2px);}
.mem-dashboard .mem-actions .btn-group{gap:6px;}


/* ============================================================================
   TAHUA — Membresías · CAPA GRÁFICOS v3 (2026-07-10)
   ----------------------------------------------------------------------------
   - Tarjetas premium para el bar chart y el pie chart + panel "Resumen de ventas".
   - Placeholder elegante de "sin foto" (.mem-photo-empty) y botones coherentes
     del modal de foto del cliente (#customerPhotoModal).
   - Solo opciones VISUALES: no toca ningún id de canvas, fetch, ni datasets.
   - Todo en var(--tahua-*): con body.dark-mode el tema se voltea solo.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   10) TARJETAS DE GRÁFICO — superficie, jerarquía de encabezado y respiración
   Clases reutilizables (el markup puede adoptarlas) + refuerzo sobre el .card
   heredado dentro del dashboard para que se vea premium sin depender de inline.
   --------------------------------------------------------------------------- */
.mem-chart-card{
    background:var(--tahua-card);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
    box-shadow:var(--tahua-shadow-sm);
    overflow:hidden;
    transition:box-shadow .2s ease;
}
.mem-chart-card:hover{box-shadow:var(--tahua-shadow-md);}

.mem-chart-card__head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:20px;flex-wrap:wrap;
    padding:22px 26px;
    background:var(--tahua-card);
    border-bottom:1px solid var(--tahua-line);
}
.mem-chart-card__eyebrow{
    display:block;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tahua-brand);margin:0 0 7px;
}
.mem-chart-card__title{
    margin:0;
    font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
    color:var(--tahua-ink);
}
.mem-chart-card__sub{
    margin:6px 0 0;
    font-size:13px;line-height:1.45;color:var(--tahua-muted);
}
.mem-chart-card__body{
    background:var(--tahua-card);
    padding:26px 28px 22px;
}
.mem-chart-card__filters{
    display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
}

/* Pie de fuente de datos, coherente y discreto */
.mem-chart-source{
    margin-top:18px;padding-top:14px;
    border-top:1px solid var(--tahua-line);
    display:flex;align-items:center;gap:7px;
    font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--tahua-muted);
}
.mem-chart-source::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--tahua-brand);flex:none;opacity:.85;
}

/* Refuerzo sobre el markup heredado: eleva el .card del bar/pie chart a marca.
   Se acota a las filas de gráficos (card con .card-header) dentro del dashboard. */
.mem-dashboard .row .card:has(#membershipChart),
.mem-dashboard .row .card:has(#membershipPieChart){
    border-radius:var(--tahua-r-card);
    box-shadow:var(--tahua-shadow-sm);
    transition:box-shadow .2s ease;
}
.mem-dashboard .row .card:has(#membershipChart):hover,
.mem-dashboard .row .card:has(#membershipPieChart):hover{
    box-shadow:var(--tahua-shadow-md);
}

/* ---------------------------------------------------------------------------
   11) PANEL "RESUMEN DE VENTAS" (columna del pie) — jerarquía tipográfica
   Estiliza el contenido inyectado en #pieChartStats sin tocar el JS.
   --------------------------------------------------------------------------- */
#pieChartStats{
    display:flex;flex-direction:column;gap:2px;
    font-variant-numeric:tabular-nums;
}
/* Bloque totales (Total membresías / Ingresos totales) -> tarjeta suave */
#pieChartStats > .mb-3{
    background:var(--tahua-elev);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-control);
    padding:14px 16px;margin-bottom:18px!important;
    display:flex;flex-direction:column;gap:9px;
}
#pieChartStats > .mb-3 .d-flex{
    align-items:baseline;
    font-size:13px;color:var(--tahua-muted);
}
#pieChartStats > .mb-3 .d-flex strong{
    font-size:20px;font-weight:700;letter-spacing:-.02em;
    color:var(--tahua-ink);line-height:1;
}
#pieChartStats .text-success{color:var(--tahua-good)!important;}
/* Encabezado "Top membresías" */
#pieChartStats h6{
    font-size:11px!important;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--tahua-muted)!important;margin:0 0 10px!important;
}
/* Filas del top: separadores finos + respiración */
#pieChartStats h6 + * ~ .d-flex,
#pieChartStats > div > .d-flex{
    padding:9px 0;
    border-top:1px solid var(--tahua-line);
    font-size:12px!important;
}
#pieChartStats > div > .d-flex:first-of-type{border-top:none;}
#pieChartStats > div > .d-flex span{color:var(--tahua-ink);font-weight:600;}
#pieChartStats > div > .d-flex .text-right > div:first-child{
    font-weight:700;color:var(--tahua-ink);
}
#pieChartStats > div > .d-flex .text-right .text-success{
    font-weight:600;color:var(--tahua-good)!important;
}
/* El punto de color inyectado inline se respeta (viene del dataset del pie) */
#pieChartStats [style*="border-radius: 50%"]{
    box-shadow:0 0 0 3px color-mix(in srgb,var(--tahua-brand) 8%,transparent);
}

/* ---------------------------------------------------------------------------
   12) MODAL FOTO DEL CLIENTE — placeholder "sin foto" y botones coherentes
   --------------------------------------------------------------------------- */
/* Nombre + subtítulo del cliente en la cabecera del cuerpo */
#customerPhotoModal .customer-info h4{
    font-size:19px;font-weight:700;letter-spacing:-.01em;
    color:var(--tahua-ink)!important;margin:0 0 4px;
}
#customerPhotoModal .customer-info .text-muted{
    font-size:12.5px;color:var(--tahua-muted)!important;
}

/* Contenedor de foto: superficie elevada, borde de marca */
#customerPhotoModal .photo-container{
    min-height:340px;padding:18px;
    background:var(--tahua-bg);
    border:1px solid var(--tahua-line);
    border-radius:var(--tahua-r-card);
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tahua-ink) 4%,transparent);
}
#customerPhotoModal .photo-container img{
    border:1px solid var(--tahua-line)!important;
    border-radius:12px!important;
    box-shadow:var(--tahua-shadow-md);
    background:var(--tahua-card);
}

/* Placeholder elegante de "sin foto" (el JS lo referencia como .mem-photo-empty) */
.mem-photo-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;width:100%;min-height:300px;
    padding:40px 24px;text-align:center;
    color:var(--tahua-muted);
}
.mem-photo-empty__icon{
    width:72px;height:72px;flex:none;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--tahua-brand-soft);
    color:var(--tahua-brand);
    font-size:30px;
    box-shadow:0 0 0 8px color-mix(in srgb,var(--tahua-brand) 7%,transparent);
}
.mem-photo-empty__title{
    font-size:15px;font-weight:600;color:var(--tahua-ink);margin:0;
}
.mem-photo-empty__hint{
    font-size:12.5px;line-height:1.5;color:var(--tahua-muted);margin:0;max-width:34ch;
}

/* Leyenda de verificación bajo la foto */
#customerPhotoModal .photo-actions > .text-muted{
    font-size:12px;color:var(--tahua-muted)!important;
}

/* Botones coherentes: mismo tamaño, radio y tipografía en toda la barra */
#customerPhotoModal .photo-actions .btn-group{gap:8px;display:inline-flex;flex-wrap:wrap;}
#customerPhotoModal .photo-actions .btn,
#customerPhotoModal .modal-footer .btn{
    border-radius:var(--tahua-r-control);
    padding:.5rem 1rem;
    font-size:13px;font-weight:600;
    display:inline-flex;align-items:center;gap:7px;
    box-shadow:var(--tahua-shadow-sm);
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
#customerPhotoModal .photo-actions .btn:active,
#customerPhotoModal .modal-footer .btn:active{transform:translateY(1px);}
/* Descargar -> acción secundaria de marca (ghost sobre línea) */
#customerPhotoModal .btn-info{
    background:var(--tahua-card);border-color:var(--tahua-line);color:var(--tahua-ink);
    box-shadow:none;
}
#customerPhotoModal .btn-info:hover{
    background:var(--tahua-elev);border-color:var(--tahua-muted);color:var(--tahua-ink);
}
/* Abrir -> mismo lenguaje ghost neutro */
#customerPhotoModal .btn-secondary{
    background:var(--tahua-card);border-color:var(--tahua-line);color:var(--tahua-ink);
    box-shadow:none;
}
#customerPhotoModal .btn-secondary:hover{
    background:var(--tahua-elev);border-color:var(--tahua-muted);color:var(--tahua-ink);
}
/* Editar Cliente -> acento ámbar suave (acción destacada, no destructiva) */
#customerPhotoModal .btn-warning{
    background:var(--tahua-brand-soft);
    border-color:color-mix(in srgb,var(--tahua-brand) 30%,transparent);
    color:var(--tahua-brand-strong);box-shadow:none;
}
#customerPhotoModal .btn-warning:hover{
    background:color-mix(in srgb,var(--tahua-brand) 20%,var(--tahua-card));
    border-color:var(--tahua-brand);color:var(--tahua-brand-strong);
}
/* Cerrar (pie) -> acción primaria grafito */
#customerPhotoModal .modal-footer .btn-primary{
    background:var(--tahua-action);border-color:var(--tahua-action);color:var(--tahua-action-ink);
}
#customerPhotoModal .modal-footer .btn-primary:hover{
    background:var(--tahua-action-hover);border-color:var(--tahua-action-hover);color:var(--tahua-action-ink);
}

@media (max-width:576px){
    #customerPhotoModal .photo-actions .btn-group{width:100%;}
    #customerPhotoModal .photo-actions .btn{flex:1 1 auto;justify-content:center;}
}
