/* /css/custom_styles.css */

/* ... (otros estilos personalizados que tengas arriba) ... */


/* =========================================================== */
/* == Estilos para Tablas Responsivas (Móvil) - REFINADOS v2 == */
/* =========================================================== */

/* Aplicar solo en pantallas pequeñas (<768px) */
@media screen and (max-width: 767px) {

  /* Seleccionar tablas que tengan la clase .table-cards-mobile */
  .table-cards-mobile {
    border: none;
  }

  /* Ocultar la cabecera de la tabla en móvil */
  .table-cards-mobile thead {
    display: none;
  }

  .table-cards-mobile tr {
    display: block;
    margin-bottom: 0.75rem; /* Espacio entre tarjetas */
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: #fff;
  }

  /* Estilo de celdas */
  .table-cards-mobile td {
    display: block;
    text-align: right; /* Alinear contenido a la derecha */
    /* === AJUSTE: Menos padding izquierdo para dar más espacio al contenido === */
    padding-left: 35%; /* Antes era 45% o 50% */
    /* ===================================================================== */
    padding-top: 0.4rem;    /* Padding vertical reducido */
    padding-bottom: 0.4rem; /* Padding vertical reducido */
    padding-right: 0.75rem;
    position: relative;
    border-bottom: 1px dotted #eee;
    min-height: 1.5em;
  }

  .table-cards-mobile td:last-child {
    border-bottom: 0;
    padding-bottom: 0.6rem;
  }

  /* Estilo de etiquetas generadas */
  .table-cards-mobile td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    /* === AJUSTE: Menos ancho para la etiqueta === */
    width: 30%; /* Antes era 40% o 45% */
    /* ========================================= */
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #495057;
    font-size: 0.85em;
  }

  /* Ocultar celdas que también están ocultas en desktop */
  /* (Reglas sin cambios) */
  .table-cards-mobile td.d-none,
  .table-cards-mobile td.d-sm-none,
  .table-cards-mobile td.d-md-none,
  .table-cards-mobile td.d-lg-none,
  .table-cards-mobile td.d-xl-none,
  .table-cards-mobile td.d-xxl-none { display: none !important; }
  .table-cards-mobile td.d-sm-table-cell,
  .table-cards-mobile td.d-md-table-cell,
  .table-cards-mobile td.d-lg-table-cell,
  .table-cards-mobile td.d-xl-table-cell,
  .table-cards-mobile td.d-xxl-table-cell { display: block !important; }

  /* Ocultar ID en vista tarjeta (Sin cambios) */
  .table-cards-mobile td[data-label="ID:"] { display: none !important; }

  /* Ajustes específicos para la celda de acciones (Sin cambios) */
   .table-cards-mobile td[data-label="Acciones:"] { text-align: center; padding-left: 0.75rem; }
   .table-cards-mobile td[data-label="Acciones:"]::before { text-align: center; width: 100%; position: static; font-weight: bold; display: block; margin-bottom: 0.5rem; }

} /* Fin @media screen */

/* Otros estilos personalizados */
/* css/custom_styles.css o css/style.css */

/* ... tus estilos existentes ... */

@media print {
    body {
        font-family: Arial, Helvetica, sans-serif; /* Fuente estándar para impresión */
        font-size: 10pt; /* Tamaño legible */
        color: #000; /* Texto negro */
        background-color: #fff !important; /* Fondo blanco */
    }

    .no-print, 
    .no-print * {
        display: none !important; /* Oculta elementos con clase no-print y sus hijos */
    }

    /* Mostrar el título específico de impresión */
    .d-print-block {
        display: block !important;
    }

    /* Asegurar que el área principal del informe ocupe el espacio */
    .printable-area {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Estilos para los encabezados de sección de club/profesionales/sin club */
    .club-header {
        background-color: #e9ecef !important; /* Un gris claro para impresión */
        color: #000 !important; /* Texto negro */
        border: 1px solid #adb5bd !important;
        padding: 0.5rem !important;
        font-size: 12pt !important;
        border-bottom: 0 !important; /* Quitar borde inferior si la tabla va justo debajo */
    }
    .club-header h4 { /* Si usas h4 dentro de .club-header */
        margin-bottom: 0 !important;
    }

    /* Estilos para las tablas en la impresión */
    .table-responsive {
        overflow-x: visible !important; /* Evitar scrollbars en impresión */
        border: 1px solid #adb5bd !important; /* Borde alrededor de la tabla */
        border-top: 0 !important; /* Quitar borde superior si el .club-header ya lo tiene */
        border-top-left-radius:0 !important; 
        border-top-right-radius:0 !important;
        margin-bottom: 1.5rem !important; /* Espacio después de cada tabla */
        page-break-inside: avoid !important; /* Intenta evitar que la tabla se corte entre páginas */
    }

    .table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important; /* Un poco más pequeño para que quepa más */
    }

    .table th,
    .table td {
        border: 1px solid #dee2e6 !important; /* Bordes para celdas */
        padding: 0.25rem 0.4rem !important; /* Padding más ajustado */
        vertical-align: top; /* Alineación superior para celdas */
        color: #000 !important; /* Texto negro */
    }

    .table thead th {
        background-color: #f8f9fa !important; /* Fondo ligero para encabezados de tabla */
        font-weight: bold;
        color: #000 !important;
    }

    /* Estilos para badges en impresión */
    .badge {
        border: 1px solid #6c757d !important; /* Borde para el badge */
        padding: 0.2em 0.4em !important;
        font-size: 0.8em !important;
        color: #000 !important; /* Texto negro para el badge */
        background-color: #fff !important; /* Fondo blanco para el badge */
        vertical-align: middle;
    }
    
    /* Ocultar elementos Bootstrap que no queremos, como sombras en tarjetas */
    .card.shadow-sm, .card.shadow {
        box-shadow: none !important;
    }
    
    /* Ajustes generales para que no haya márgenes de body extraños */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Evitar que los títulos de sección se separen de su contenido */
    h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }
    
    a {
        text-decoration: none !important; /* Quitar subrayado de enlaces */
        color: #000 !important; /* Enlaces en negro */
    }
    /* Opcional: mostrar URL de enlaces al imprimir (si es útil) */
    /*
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-style: italic;
    }
    */
}