/* ==========================================================================
   movil.css  |  Ajustes para celular de todo el sistema
   --------------------------------------------------------------------------
   Se carga después de activos.css, así que gana por orden. Los !important
   están solo donde activos.css fija medidas en el propio HTML.
   ========================================================================== */

@media (max-width: 820px) {

  /* --- Topbar: una sola línea, sin lo prescindible --------------------- */

  .cabecera {
    padding: .5rem .7rem !important;
    gap: .6rem !important;
    flex-wrap: nowrap !important;
  }

  .cab-logo img {
    height: 34px !important;
    max-width: 120px !important;
  }

  .cab-div,
  .cab-empresa-sub,
  .cab-empresa-pagina,
  .cab-supervisor,
  #cab-reloj {
    display: none !important;
  }

  .cab-empresa-nombre {
    font-size: .68rem !important;
    line-height: 1.2;
  }

  .cab-acciones {
    gap: .5rem !important;
    margin-left: auto;
  }

  .cab-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: .65rem !important;
  }

  .cab-salir {
    padding: .35rem .6rem !important;
    font-size: .65rem !important;
  }

  /* --- Botón de menú, solo visible en celular -------------------------- */

  .cab-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: 1px solid #C3CFE8;
    border-radius: 8px;
    color: #1E40AF;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
  }

  /* --- Menú lateral: oculto, se despliega con el botón ------------------ */

  .cl-layout {
    display: block !important;
  }

  /* Todo lo que cuelga del layout y no es el contenido principal es el menú.
     Se selecciona así para no depender de su nombre de clase. */
  .cl-layout > *:not(.cl-main):not(main) {
    display: none !important;
  }

  body.menu-abierto .cl-layout > *:not(.cl-main):not(main) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    position: static !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #D7DEEE;
  }

  .cl-main,
  main.cl-main {
    margin: 0 !important;
    padding: .9rem !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* --- Formularios: 16px evita que iOS haga zoom al tocar un campo ------ */

  input, select, textarea, button {
    font-size: 16px !important;
  }

  input[type=text],
  input[type=date],
  select,
  textarea {
    width: 100% !important;
    padding: .85rem !important;
    box-sizing: border-box;
  }

  /* --- En celular alcanza con el desplegable nativo, que ya ocupa toda
         la pantalla: el buscador de arriba solo estorba ------------------ */

  #buscador {
    display: none !important;
  }

  /* --- Tablas: cada fila pasa a ser una tarjeta ------------------------- */

  .sp-tabla,
  .sp-tabla tbody,
  .sp-tabla tr,
  .sp-tabla td {
    display: block;
    width: 100%;
  }

  .sp-tabla thead { display: none; }

  .sp-tabla tr {
    border: 1px solid #D7DEEE;
    border-radius: 12px;
    padding: .8rem;
    margin: 0 0 .8rem;
  }

  .sp-tabla td {
    border: none;
    padding: .18rem 0;
  }

  .sp-tabla td:empty { display: none; }

  .sp-mini {
    width: 100% !important;
    height: 160px !important;
    margin: .5rem 0;
  }

  .sp-acciones {
    text-align: left !important;
    padding-top: .6rem !important;
  }

  .sp-acciones a,
  .sp-acciones button {
    font-size: 1.5rem !important;
    padding: .4rem .8rem !important;
  }

  /* --- Botones y filtros a lo ancho ------------------------------------ */

  .sp-boton {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    margin-bottom: .7rem;
  }

  .sp-filtros {
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
  }

  .sp-fichas { gap: .6rem; }
  .sp-ficha  { flex: 1 1 8rem; padding: .8rem; }

  .sp-foto   { padding: 2rem 1rem; }
  .sp-tit    { font-size: 1.3rem; }
}

/* El botón de menú no existe en pantalla grande. */
.cab-menu { display: none; }