/* =====================================================================
   movil-tablas.css — las tablas anchas, como tarjetas.

   Fase 3 de docs/plan/producto/movil-web.md. Va SEPARADO de movil.css
   cargarse en dos documentos que no comparten nada: la página del mapa y
   el iframe de Administración (que tiene su propio <style> adentro).
   SMARTLASER lo usa también.

   Mismo candado de siempre: todo adentro del @media, y colgando de
   `body.mv-tablas`, que la pone movil-tablas.js con la misma consulta.
   El @media se evalúa contra el ancho del IFRAME, que en el teléfono es
   la pantalla entera — por eso funciona igual adentro de Administración
   sin pasarle nada.

   Qué NO se convierte (lo decide el .js): las tablas de menos de 4
   columnas, que entran igual, y las marcadas .mv-sin-tarjetas, que se
   leen mejor como tabla (el recorrido de la ruta óptica del abonado).
   ===================================================================== */

@media (max-width: 820px){

  /* La caja que las envuelve deja de ser una ventanita con su propio
     desplazamiento: las tarjetas fluyen en la página. */
  body.mv-tablas .mv-caja-tarjetas{
    max-height: none; overflow: visible; border: none; border-radius: 0;
  }

  body.mv-tablas table.mv-tarjetas,
  body.mv-tablas table.mv-tarjetas tbody,
  body.mv-tablas table.mv-tarjetas tr,
  body.mv-tablas table.mv-tarjetas td{
    display: block; width: auto;
  }
  /* Los encabezados no desaparecen: se mudan a cada celda como rótulo
     (el data-mv-rotulo que pone el .js). */
  body.mv-tablas table.mv-tarjetas thead{ display: none; }

  body.mv-tablas table.mv-tarjetas tbody tr{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 9px;
  }
  body.mv-tablas table.mv-tarjetas tbody tr:hover td{ background: none; }

  body.mv-tablas table.mv-tarjetas tbody td{
    border: none; padding: 4px 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    font-size: 13px; text-align: right; line-height: 1.35;
  }
  /* Varias celdas traen estilos EN LÍNEA pensados para acotar su columna
     (por ejemplo "Tal cual el Excel" viene con max-width:150px y
     overflow:hidden). En una tabla eso está bien; en una tarjeta esconde
     el dato para siempre, porque en un teléfono no hay "pasar el mouse"
     para ver el title. Por eso el !important: hay que ganarle al style
     del propio HTML. */
  body.mv-tablas table.mv-tarjetas tbody td{
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    flex-wrap: wrap;
  }
  body.mv-tablas table.mv-tarjetas tbody td::before{
    content: attr(data-mv-rotulo);
    flex: none; text-align: left;
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-dim); font-weight: 600;
  }

  /* La primera celda es el título de la tarjeta: sin rótulo, grande y
     con su propio renglón. Es la que hace que se lea de un vistazo. */
  body.mv-tablas table.mv-tarjetas tbody td:first-child{
    display: block; text-align: left;
    font-size: 15px; font-weight: 600;
    padding: 0 0 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  body.mv-tablas table.mv-tarjetas tbody td:first-child::before{ display: none; }

  /* Celdas vacías: no gastan un renglón en decir "—". */
  body.mv-tablas table.mv-tarjetas tbody td.mv-vacia{ display: none; }

  /* Columnas sin encabezado (las de ✎ / 🗑): sin rótulo y agrupadas
     al pie de la tarjeta, con puntos de toque de verdad. */
  body.mv-tablas table.mv-tarjetas tbody td.mv-acciones{
    justify-content: flex-end; gap: 6px; padding-top: 10px;
  }
  body.mv-tablas table.mv-tarjetas tbody td.mv-acciones::before{ display: none; }
  body.mv-tablas table.mv-tarjetas tbody td.mv-acciones button,
  body.mv-tablas table.mv-tarjetas tbody td.mv-acciones a{
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1px solid var(--line); font-size: 15px;
  }

  /* Los números siguen alineándose entre sí aunque ya no haya columna. */
  body.mv-tablas table.mv-tarjetas td.num,
  body.mv-tablas table.mv-tarjetas td.mono{ font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------------
     Administración: el resto del marco
     (estos selectores solo existen dentro de ese documento)
     --------------------------------------------------------------- */
  body.mv-tablas .tabs{
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-left: -14px; margin-right: -14px; padding: 0 14px;
  }
  body.mv-tablas .tabs::-webkit-scrollbar{ height: 0; }
  body.mv-tablas .tab{
    flex: none; scroll-snap-align: start;
    min-height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap;
  }

  /* En 390px de pantalla, 58px de relleno por lado (24 del .wrap + 20 del
     .card + 14 de la tarjeta) se comen un tercio del ancho. En un monitor
     ese aire está bien; acá no sobra. */
  body.mv-tablas .wrap{ padding-left: 12px; padding-right: 12px; padding-top: 18px; }
  body.mv-tablas .card{ padding-left: 12px; padding-right: 12px; }

  /* Los campos, como en movil.css: 16px o iOS acerca la página sola. */
  body.mv-tablas input:not([type="checkbox"]):not([type="radio"]),
  body.mv-tablas select,
  body.mv-tablas textarea{ font-size: 16px !important; min-height: 40px; }

  /* Administración solo le puso estilo a input[type=text|search] y a
     select: los de fecha quedaron con el aspecto de fábrica del
     navegador, o sea una caja BLANCA en un panel oscuro. En un monitor
     pasa medio desapercibido; a 40px de alto en un teléfono, no. Se
     arregla acá y no en el CSS de Administración para no cambiarle el
     aspecto al escritorio sin que nadie lo haya pedido. */
  body.mv-tablas input[type="date"],
  body.mv-tablas input[type="number"],
  body.mv-tablas input[type="password"],
  body.mv-tablas input:not([type]){
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
    padding: 7px 10px; color: var(--text); font-family: 'Inter', sans-serif;
  }
  body.mv-tablas input[type="date"]::-webkit-calendar-picker-indicator{
    filter: invert(1); opacity: .65;
  }
}