/* File: assets/css/comisiones-newmember.css (v4.2 - Correct Admin Mobile Cards Layout) */

/* =================================================================== */
/*  Estilos del Dashboard del Artista (Frontend y Admin View)
/* =================================================================== */
.comisiones-dashboard *,
.comisiones-dashboard *:before,
.comisiones-dashboard *:after{box-sizing:border-box;}
.comisiones-dashboard .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.comisiones-dashboard{background:#1e1e1e;padding:20px 15px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;max-width:100%;overflow-x:hidden}
.comisiones-dashboard .artista-section{margin-bottom:40px;border-top:2px solid #3498db;padding-top:20px}
.comisiones-dashboard .artista-title{margin-bottom:20px;font-size:24px;color:#fff;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.comisiones-dashboard .paypal-info{font-size:.8em;color:#95a5a6;font-weight:400}
.comisiones-dashboard .dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:25px}
.comisiones-dashboard .card{background:#1a1a1a;padding:20px;border-radius:8px;text-align:center;border:1px solid #2d2d2d}
.comisiones-dashboard .card i{font-size:28px;margin-bottom:12px;color:#3498db}
.comisiones-dashboard .card h4{margin:0 0 10px;font-size:16px;font-weight:500;color:#bdc3c7;text-transform:uppercase}
.comisiones-dashboard .card p{margin:0;font-size:22px;font-weight:700}
.comisiones-dashboard .card .info-pendiente{font-size:14px;color:#3498db;cursor:pointer;vertical-align:middle}
.comisiones-dashboard .table-responsive{overflow-x:auto;width:100%}
.comisiones-dashboard .comisiones-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:14px}
.comisiones-dashboard .comisiones-table th,.comisiones-dashboard .comisiones-table td{padding:12px 15px;text-align:center;border:1px solid #2d2d2d;white-space:nowrap}
.comisiones-dashboard .comisiones-table .pendiente-ano{white-space:normal}
.comisiones-dashboard .comisiones-table th{background:#1a1a1a}
.comisiones-dashboard .comisiones-table .monto{cursor:pointer}
.comisiones-dashboard .tarifa-info{cursor:help;color:#7f8c8d}
.comisiones-dashboard .comision-pagada{background-color:#27ae601a}
.comisiones-dashboard .comision-pagada .monto{color:#2ecc71}
.comisiones-dashboard .comision-pendiente{background-color:#c0392b1a}
.comisiones-dashboard .comision-reclamada{background-color:#e67e221a}
.comisiones-dashboard .comision-reclamada .monto{color:#e67e22}
.comisiones-dashboard .comision-reclamada .fa-hourglass-half{color:#e67e22;cursor:help}
.comisiones-dashboard .trimestre-actual{border:2px solid #3498db!important}
.comisiones-dashboard .pendiente-ano .reclamado{color:#e67e22;font-size:.9em}
.comisiones-dashboard .artist-actions{margin:25px 0 15px 0;display:flex;gap:15px;justify-content:center}
.comisiones-dashboard .dashboard-note{margin-top:0;text-align:center}
.comisiones-dashboard .charts-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:30px 0 20px 0}
.comisiones-dashboard .chart-card{background-color:#1a1a1a;padding:20px;border-radius:8px;border:1px solid #2d2d2d;max-height:350px;display:flex;flex-direction:column;flex:1 1 400px;max-width:600px}
.comisiones-dashboard .chart-wrapper{position:relative;flex:1;min-height:0}
.comisiones-dashboard .chart-title{font-size:16px;font-weight:bold;margin-bottom:15px;color:#eaeaea;text-align:center}
.comisiones-dashboard .top-tracks-list-container{width:100%;background-color:#1a1a1a;padding:20px;border-radius:8px;border:1px solid #2d2d2d;flex-basis:100%}
.comisiones-dashboard .top-tracks-list{list-style:none;padding:0;margin:0}
.comisiones-dashboard .top-tracks-row{background-color:#2c2c2e;margin-bottom:8px;border-radius:5px;position:relative;overflow:hidden;min-height:40px;display:flex;align-items:center}
.comisiones-dashboard .top-tracks-row:last-child{margin-bottom:0}
.comisiones-dashboard .top-tracks-bar{position:absolute;left:0;top:0;height:100%;background-color:#9b59b6;border-radius:5px;z-index:1}
.comisiones-dashboard .top-tracks-info{position:relative;z-index:2;padding:10px 15px;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:768px){.comisiones-dashboard .dashboard-cards{grid-template-columns:repeat(2,1fr);gap:15px}.comisiones-dashboard .card{padding:15px}.comisiones-dashboard .card i{font-size:24px;margin-bottom:8px}.comisiones-dashboard .card h4{font-size:14px}.comisiones-dashboard .card p{font-size:20px}.comisiones-dashboard .artista-title{flex-direction:column;align-items:flex-start;gap:5px}.comisiones-dashboard .comisiones-table td,.comisiones-dashboard .comisiones-table th{padding:12px 10px;font-size:13px}}
@media(max-width:480px){.comisiones-dashboard{padding:15px 10px}.comisiones-dashboard .dashboard-cards{gap:10px}.comisiones-dashboard .card{padding:12px}.comisiones-dashboard .card i{font-size:22px;margin-bottom:6px}.comisiones-dashboard .card h4{font-size:13px}.comisiones-dashboard .card p{font-size:18px}.comisiones-dashboard .comisiones-table td,.comisiones-dashboard .comisiones-table th{font-size:13px;padding:10px 6px}}

/* =================================================================== */
/*  Estilos de Modales (Compartidos)
/* =================================================================== */
.modal-wrapper{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,10,10,.85);z-index:999999;justify-content:center;align-items:center;padding:40px 15px}
.modal-content{position:relative;background:#fefefe;color:#1d2327;border-radius:4px;max-width:900px;width:100%;border:1px solid #ddd;display:flex;flex-direction:column;max-height:90vh;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.comisiones-dashboard .modal-content, .comisiones-wrap .modal-content{background:#1e1e1e;color:#bdc3c7;border-color:#2d2d2d;border-radius:8px;}
.modal-close{position:absolute;top:0;right:0;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#888;cursor:pointer;line-height:1;transition:color .2s,transform .2s;z-index:10}
.modal-close:hover{color:#000;transform:rotate(90deg)}
.comisiones-dashboard .modal-close:hover, .comisiones-wrap .modal-close:hover{color:#fff;}
.modal-header{padding:15px 25px;border-bottom:1px solid #ddd;flex-shrink:0}
.comisiones-dashboard .modal-header, .comisiones-wrap .modal-header{border-color:#2d2d2d;}
.modal-header h4{margin:0;font-size:18px; color: #1d2327;}
.comisiones-dashboard .modal-header h4, .comisiones-wrap .modal-header h4{color:#fff;}
.modal-body{padding:25px;overflow-y:auto;font-size:14px}
.modal-footer{padding:15px 25px;border-top:1px solid #ddd;display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}
.comisiones-dashboard .modal-footer, .comisiones-wrap .modal-footer{border-color:#2d2d2d;}
.detalle-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:14px}
.detalle-table th,.detalle-table td{padding:12px 15px;text-align:center;border:1px solid #eee;white-space:nowrap}
.comisiones-dashboard .detalle-table th,.comisiones-dashboard .detalle-table td,
.comisiones-wrap .detalle-table th, .comisiones-wrap .detalle-table td {border-color:#2d2d2d;}
.detalle-table th.text-right,.detalle-table td.text-right{text-align:right}
.detalle-table .total-final{font-size:1.2em;font-weight:700}
.detalle-table th{background:#f0f0f1;color:#2c3338;}
.comisiones-dashboard .detalle-table th, .comisiones-wrap .detalle-table th{background:#3498db;color:#fff;}
.detalle-table td{text-align:left}
.detalle-table tfoot td{font-weight:700}
.tarifas-detalle{margin-top:15px;padding-top:15px;border-top:1px dashed #ccc}
.comisiones-dashboard .tarifas-detalle, .comisiones-wrap .tarifas-detalle{border-color:#2d2d2d;}
@media(max-width:920px){.modal-wrapper{padding:15px}}

/* =================================================================== */
/*  Estilos de Botones de Acción (Frontend)
/* =================================================================== */
.comisiones-dashboard .btn-abrir-modal-reclamar,
.comisiones-dashboard .btn-principal {background-color:#f5a623;color:#ffffff;border:none;padding:10px 20px;font-size:1em;font-weight:bold;cursor:pointer;border-radius:4px;transition:background-color .3s ease,transform .2s ease}
.comisiones-dashboard .btn-abrir-modal-reclamar:hover,
.comisiones-dashboard .btn-principal:hover {background-color:#f7b74e;transform:translateY(-2px)}
.comisiones-dashboard .btn-cerrar-detalle {background-color:#6c757d;color:white;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}
.comisiones-dashboard .btn-cerrar-detalle:hover {background-color:#5a6268}


/* =================================================================== */
/*  Estilos del Resumen de Administrador
/* =================================================================== */
.comisiones-admin-resumen { margin: 2em 0; }
.resumen-titulo { color: #f5a623; border-bottom: 1px solid #c3c4c7; padding-bottom: 8px; margin-bottom: 12px; text-transform: uppercase; font-weight: 600; }
.resumen-tabla-container { overflow-x: auto; border: 1px solid #c3c4c7; border-radius: 4px; }
.resumen-table { width: 100%; border-collapse: collapse; min-width: 800px; font-size: 14px; }
.resumen-table th, .resumen-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #ddd; }
.resumen-table th { background-color: #3498db; color: #fff; font-weight: bold; }
.resumen-row.tiene-solicitud { background-color: #3a4a6d; color: #fff; font-weight: 500; }
.resumen-row.tiene-solicitud .cell-artista a { color: #8ab4f8; }
.cell-artista a { color: #0073aa; text-decoration: none; font-weight: bold; }
.cell-artista a:hover { color: #00a0d2; }
.cell-saldo.saldo-alto { color: #d63638; font-weight: bold; }
.cell-trimestres { font-size: 0.9em; line-height: 1.4; }
.cell-trimestres .icon-solicitado { color: #f5a623; font-size: 0.9em; }
.cell-paypal { font-size: 0.9em; word-break: break-all; }
.cell-solicitud { text-align: center; }
.importe-solicitud { color: #f5a623; font-weight: bold; }
.cell-accion { text-align: left; white-space: nowrap; }

@media screen and (max-width: 782px) {
    .comisiones-admin-resumen { margin-top: 1em; }
    .resumen-tabla-container { border: none; }
    .resumen-table { min-width: 100%; }
    .resumen-table thead { display: none; } 
    .resumen-table tbody, .resumen-table tr, .resumen-table td { display: block; width: 100%; text-align: right; }
    .resumen-table tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.04); background: #fff; }
    .resumen-table tr.tiene-solicitud { border-left: 4px solid #3498db; background-color: #3a4a6d; color: #fff; }
    .resumen-table tr.tiene-solicitud td::before { color: #eee; }
    .resumen-table td { padding-left: 50%; position: relative; border-bottom: 1px solid #f0f0f1; }
    .resumen-row.tiene-solicitud td { border-bottom-color: #556282; }
    .resumen-table td:last-child { border-bottom: none; }
    .resumen-table td::before { content: attr(data-label); position: absolute; left: 10px; width: calc(50% - 20px); font-weight: bold; text-align: left; color: #555; }
    .cell-paypal { word-break: normal; }
    .cell-accion { padding-top: 15px; padding-bottom: 15px; background-color: #f9f9f9; text-align: center; }
    .resumen-row.tiene-solicitud .cell-accion { background-color: #4a597a; }
    .cell-accion .button { float: none; }
}


/* =================================================================== */
/*  Correcciones Específicas para Admin en Móvil
/* =================================================================== */
@media screen and (max-width: 782px) {
    /* Anula padding horizontal para evitar doble padding y desbordamiento */
    .wp-admin .comisiones-dashboard {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* 
     * **LA CORRECCIÓN DEFINITIVA**
     * Problema: Las tarjetas de resumen se desbordan en la vista de admin móvil.
     * Solución: Forzar una sola columna (apilamiento vertical). Esto es
     * infalible y garantiza que no haya desbordamiento horizontal.
     */
    .wp-admin .comisiones-dashboard .dashboard-cards {
        grid-template-columns: 1fr;
        gap: 15px; /* Se puede aumentar un poco el gap al estar apiladas */
    }

    /* Asegurar que las tarjetas de los gráficos no causen desbordamiento */
    .wp-admin .comisiones-dashboard .chart-card,
    .wp-admin .comisiones-dashboard .top-tracks-list-container {
        flex-basis: 100%;
        min-width: 0;
    }
}