/* =============================================================================
   PLEXO · Tablas responsivas elegantes
   -----------------------------------------------------------------------------
   Reemplaza el scroll horizontal de .table-responsive por un modo "tarjeta":
   en pantallas pequeñas cada fila se convierte en una ficha, y cada celda
   muestra el titulo de su columna como etiqueta.

   El marcado lo genera automaticamente dist/js/plexo.tablas.js
   (clases .plx-tbl-wrap / .plx-tbl / .is-cards y atributo data-plx-label).

   Para excluir una tabla:  <table data-plx-tabla="no">  o  class="plx-no-cards"
   ============================================================================= */

:root{
  --plx-tbl-borde:#e3e8ef;
  --plx-tbl-borde-suave:#f1f4f8;
  --plx-tbl-fondo:#ffffff;
  --plx-tbl-fondo-alt:#f8fafc;
  --plx-tbl-etiqueta:#64748b;
  --plx-tbl-titulo:#1f2d3d;
  --plx-tbl-acento:#337ab7;
}

/* -----------------------------------------------------------------------------
   1. Base (todas las pantallas)
   -------------------------------------------------------------------------- */
/* Sin overflow en escritorio: un contenedor con overflow recortaria los
   dropdowns, tooltips y popovers que vivan dentro de las celdas. */
.plx-tbl-wrap{
  width:100%;
  max-width:100%;
  margin-bottom:15px;
  overflow:visible;
}

/* En escritorio no se fuerza el ancho (hay tablas pequenas de maquetacion),
   solo se impide que desborden el contenedor. */
table.plx-tbl{
  max-width:100% !important;
}

/* El contenido viejo de CKEditor trae width/cellpadding fijos: los neutralizamos */
table.plx-tbl[width],
table.plx-tbl col[width],
table.plx-tbl td[width],
table.plx-tbl th[width]{
  width:auto !important;
}

table.plx-tbl td,
table.plx-tbl th{
  word-wrap:break-word;
  overflow-wrap:break-word;
}

table.plx-tbl img{
  max-width:100%;
  height:auto;
}

/* URLs y correos largos no revientan el ancho */
table.plx-tbl a{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Barra de herramientas (boton tarjetas/tabla) */
.plx-tbl-tools{
  display:none;
  margin:0 0 6px;
  text-align:right;
}

.plx-tbl-toggle{
  border:1px solid #e3e8ef;
  border:1px solid var(--plx-tbl-borde, #e3e8ef);
  background:#f8fafc;
  background:var(--plx-tbl-fondo-alt, #f8fafc);
  color:#64748b;
  color:var(--plx-tbl-etiqueta, #64748b);
  border-radius:16px;
  font-size:12px;
  line-height:1;
  padding:6px 12px;
  cursor:pointer;
}

.plx-tbl-toggle:hover,
.plx-tbl-toggle:focus{
  color:#337ab7;
  color:var(--plx-tbl-acento, #337ab7);
  border-color:#337ab7;
  border-color:var(--plx-tbl-acento, #337ab7);
  outline:none;
}

.plx-tbl-toggle em{
  margin-right:5px;
}

/* -----------------------------------------------------------------------------
   2. Modo tarjeta (solo moviles / pantallas angostas)
   -------------------------------------------------------------------------- */
@media screen and (max-width:767px){

  /* Solo las tablas que se muestran en modo clasico necesitan desplazamiento */
  .plx-tbl-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Nada de scroll horizontal cuando la tabla ya se apila */
  .plx-tbl-wrap.is-cards{
    overflow-x:visible;
  }

  /* Si la tabla venia dentro de un .table-responsive, lo desactivamos */
  .plx-tbl-wrap.is-cards.table-responsive{
    border:0;
    width:100%;
    margin-bottom:15px;
  }

  .plx-tbl-tools{
    display:block;
  }

  /* En movil si se ocupa todo el ancho disponible */
  table.plx-tbl{
    width:100% !important;
  }

  table.plx-tbl.is-cards,
  table.plx-tbl.is-cards > tbody,
  table.plx-tbl.is-cards > tfoot{
    display:block;
    width:100% !important;
    border:0;
  }

  /* Encabezado oculto a la vista pero disponible para lectores de pantalla */
  table.plx-tbl.is-cards > thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
  }

  /* Cada fila = una tarjeta */
  table.plx-tbl.is-cards > tbody > tr,
  table.plx-tbl.is-cards > tfoot > tr{
    display:block;
    margin:0 0 12px;
    background:#ffffff;
    background:var(--plx-tbl-fondo, #ffffff);
    border:1px solid #e3e8ef;
    border:1px solid var(--plx-tbl-borde, #e3e8ef);
    border-radius:8px;
    box-shadow:0 1px 3px rgba(16,24,40,.08);
    overflow:hidden;
  }

  table.plx-tbl.is-cards > tbody > tr:last-child,
  table.plx-tbl.is-cards > tfoot > tr:last-child{
    margin-bottom:0;
  }

  /* Cada celda = una linea etiqueta / valor */
  table.plx-tbl.is-cards > tbody > tr > td,
  table.plx-tbl.is-cards > tbody > tr > th,
  table.plx-tbl.is-cards > tfoot > tr > td,
  table.plx-tbl.is-cards > tfoot > tr > th{
    display:flex;
    align-items:flex-start;
    width:auto !important;
    height:auto !important;
    padding:8px 12px !important;
    border:0 !important;
    border-top:1px solid #f1f4f8 !important;
    border-top:1px solid var(--plx-tbl-borde-suave, #f1f4f8) !important;
    text-align:left !important;
    white-space:normal !important;
    font-size:13px;
    line-height:1.45;
  }

  table.plx-tbl.is-cards > tbody > tr > *:first-child,
  table.plx-tbl.is-cards > tfoot > tr > *:first-child{
    border-top:0 !important;
  }

  table.plx-tbl.is-cards > tbody > tr > td::before,
  table.plx-tbl.is-cards > tbody > tr > th::before,
  table.plx-tbl.is-cards > tfoot > tr > td::before,
  table.plx-tbl.is-cards > tfoot > tr > th::before{
    content:attr(data-plx-label);
    flex:0 0 38%;
    max-width:38%;
    padding-right:10px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#64748b;
    color:var(--plx-tbl-etiqueta, #64748b);
    line-height:1.5;
  }

  /* Celdas sin encabezado conocido: ocupan todo el ancho */
  table.plx-tbl.is-cards .plx-sin-etiqueta::before{
    display:none !important;
  }

  /* Primera celda = titulo de la tarjeta */
  table.plx-tbl.is-cards .plx-card-title{
    display:block !important;
    background:#f8fafc;
    background:var(--plx-tbl-fondo-alt, #f8fafc);
    border-bottom:1px solid #e3e8ef !important;
    border-bottom:1px solid var(--plx-tbl-borde, #e3e8ef) !important;
    padding:10px 12px !important;
    font-size:15px;
    font-weight:700;
    color:#1f2d3d;
    color:var(--plx-tbl-titulo, #1f2d3d);
  }

  table.plx-tbl.is-cards .plx-card-title::before{
    display:block;
    flex:none;
    max-width:none;
    margin-bottom:2px;
    padding-right:0;
    font-size:10px;
    font-weight:600;
    color:#64748b;
    color:var(--plx-tbl-etiqueta, #64748b);
  }

  /* Celdas con colspan (subtitulos internos): ancho completo, sin etiqueta */
  table.plx-tbl.is-cards .plx-celda-full{
    display:block !important;
    background:#f8fafc;
    background:var(--plx-tbl-fondo-alt, #f8fafc);
    font-weight:600;
    color:#1f2d3d;
    color:var(--plx-tbl-titulo, #1f2d3d);
  }

  table.plx-tbl.is-cards .plx-celda-full::before{
    display:none;
  }

  /* Fila que hacia de encabezado sin <thead>: ya se usa como etiquetas */
  table.plx-tbl.is-cards > tbody > tr.plx-fila-cabecera{
    display:none;
  }

  /* Celdas vacias: no generan ruido en la ficha */
  table.plx-tbl.is-cards .plx-celda-vacia{
    display:none !important;
  }

  /* Celdas que solo traen botones/acciones */
  table.plx-tbl.is-cards .plx-celda-acciones{
    flex-wrap:wrap;
    background:#f8fafc;
    background:var(--plx-tbl-fondo-alt, #f8fafc);
  }

  table.plx-tbl.is-cards .plx-celda-acciones .btn{
    margin:2px 4px 2px 0;
  }

  /* Tablas clave/valor (primera columna <th>): etiqueta arriba, valor abajo */
  table.plx-tbl.is-kv,
  table.plx-tbl.is-kv > tbody{
    display:block;
    width:100% !important;
  }

  table.plx-tbl.is-kv > tbody > tr{
    display:block;
    border-bottom:1px solid #f1f4f8;
    border-bottom:1px solid var(--plx-tbl-borde-suave, #f1f4f8);
    padding:6px 0;
  }

  table.plx-tbl.is-kv > tbody > tr > th,
  table.plx-tbl.is-kv > tbody > tr > td{
    display:block;
    width:auto !important;
    border:0 !important;
    padding:2px 0 !important;
    text-align:left !important;
    white-space:normal !important;
  }

  table.plx-tbl.is-kv > tbody > tr > th{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#64748b;
    color:var(--plx-tbl-etiqueta, #64748b);
  }

  /* Tablas de una sola columna o de maquetacion: solo fluidas */
  table.plx-tbl.is-fluid,
  table.plx-tbl.is-fluid > tbody,
  table.plx-tbl.is-fluid > tbody > tr,
  table.plx-tbl.is-fluid > tbody > tr > td,
  table.plx-tbl.is-fluid > tbody > tr > th{
    display:block;
    width:auto !important;
    max-width:100%;
    height:auto !important;
  }

  table.plx-tbl.is-fluid > tbody > tr > td,
  table.plx-tbl.is-fluid > tbody > tr > th{
    padding:6px 0 !important;
    text-align:left !important;
    white-space:normal !important;
  }
}

/* -----------------------------------------------------------------------------
   3. Impresion: siempre tabla clasica
   -------------------------------------------------------------------------- */
@media print{
  .plx-tbl-tools{ display:none !important; }
  .plx-tbl-wrap{ overflow:visible !important; }

  table.plx-tbl.is-cards,
  table.plx-tbl.is-cards > thead,
  table.plx-tbl.is-cards > tbody,
  table.plx-tbl.is-cards > tfoot{
    display:table;
    position:static;
    width:100% !important;
    height:auto;
    clip:auto;
    overflow:visible;
  }

  table.plx-tbl.is-cards > thead{ display:table-header-group; }
  table.plx-tbl.is-cards > tbody{ display:table-row-group; }
  table.plx-tbl.is-cards > tfoot{ display:table-footer-group; }

  table.plx-tbl.is-cards tr{ display:table-row; }

  table.plx-tbl.is-cards td,
  table.plx-tbl.is-cards th{ display:table-cell; }

  table.plx-tbl.is-cards td::before,
  table.plx-tbl.is-cards th::before{ display:none !important; }
}