/* Extracted verbatim from sync68 inline styles. Order preserved; appearance unchanged. */

@media screen and (max-width: 600px) and (orientation: portrait) {
      html, body { width:100%; max-width:100%; overflow-x:hidden; }
      #app.container, .container, main, .section, .form-container, .rep-lista-box, .dash-hero, .dash-aviso, .search-bar, .filtros-ganancias, .tabla-wrap, .cards, .card { max-width:100%; min-width:0; box-sizing:border-box; }
      #app.container { width:100%; margin:0; padding-left:10px; padding-right:10px; }
      header { width:100%; min-width:0; box-sizing:border-box; flex-wrap:wrap; gap:10px; }
      header .marca, header .global-search-wrap, header .user-info { min-width:0; max-width:100%; }
      .global-search-wrap, .global-search-wrap input { width:100%; box-sizing:border-box; min-width:0; }
      .user-info { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
      .user-info select, .user-info #nombre-usuario, .user-info .btn-logout { max-width:100%; }
      nav { width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
      nav .nav-btn { flex:0 0 auto; white-space:nowrap; }
      .dash-hero { display:flex; flex-direction:column; gap:12px; }
      .dash-atajos { display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
      .dash-atajos .atajo, button, input, select, textarea { max-width:100%; box-sizing:border-box; }
      .cards, .dash-cards, .cuadre-pagos-extra, .reparto-cards { display:grid; grid-template-columns:minmax(0,1fr); width:100%; gap:10px; }
      .card { width:100%; overflow:hidden; }
      .form-container form { width:100%; min-width:0; box-sizing:border-box; grid-template-columns:minmax(0,1fr)!important; }
      .form-container form > * { min-width:0; max-width:100%; box-sizing:border-box; }
      .filtros-ganancias { display:grid; grid-template-columns:minmax(0,1fr); width:100%; min-width:0; gap:8px; }
      .filtros-ganancias > *, .filtros-ganancias label, .filtros-ganancias input, .filtros-ganancias select { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
      .rep-lista-header { display:flex; flex-wrap:wrap; width:100%; min-width:0; gap:8px; }
      .rep-lista-header h2 { width:100%; min-width:0; overflow-wrap:anywhere; }
      .tabla-wrap { width:100%; max-width:100%; min-width:0; overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
      .tabla-wrap table { width:max-content!important; max-width:none!important; min-width:100%!important; table-layout:auto!important; box-sizing:border-box; }
      .tabla-wrap tr, .tabla-wrap th, .tabla-wrap td { height:auto!important; min-height:0!important; }
      .tabla-wrap th, .tabla-wrap td { min-width:max-content!important; max-width:none; padding-left:7px; padding-right:7px; white-space:nowrap!important; overflow-wrap:normal!important; word-break:normal!important; }
      .tabla-wrap button { width:auto!important; max-width:none!important; white-space:nowrap!important; }
      .tabla-wrap th, .tabla-wrap td { font-size:12px; }
      .tabla-pagos { width:max-content!important; min-width:100%!important; table-layout:auto!important; }
      .tabla-pagos th:first-child, .tabla-pagos td:first-child { width:68%; }
      .tabla-pagos th:last-child, .tabla-pagos td:last-child { width:32%; }
      .section h2, .section h3, .hint, .rango-texto { overflow-wrap:anywhere; }
      #cuadre-admin-panel, #cuadre-admin-panel form { width:100%; min-width:0; box-sizing:border-box; }
      #cuadre-admin-panel input, #cuadre-admin-panel textarea, #cuadre-admin-panel button { width:100%; max-width:100%; box-sizing:border-box; }
      #cuadre-admin-panel #form-cuadre .grid-form { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:stretch; }
      #cuadre-admin-panel #form-cuadre .grid-form label { display:flex; flex-direction:column; width:100%; min-width:0; gap:6px; box-sizing:border-box; }
      #cuadre-admin-panel #form-cuadre .grid-form input[type="date"] { width:100%; min-width:0; height:44px; min-height:44px; padding:10px 12px; font-size:16px; line-height:1.2; box-sizing:border-box; border-radius:8px; }
      #cuadre-admin-panel #form-cuadre .grid-form input[type="date"]::-webkit-calendar-picker-indicator { width:22px; height:22px; padding:2px; }
      img, svg, canvas { max-width:100%; }
    }

/* El formulario de cuadre no debe heredar el grid general de formularios. */
    #cuadre-admin-panel #form-cuadre {
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      margin:0 !important;
      padding:0 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre #hint-ultimo-cierre {
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fechas {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      gap:12px !important;
      margin:0 0 12px !important;
      padding:0 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
      display:flex !important;
      flex-direction:column !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      margin:0 !important;
      padding:0 !important;
      gap:6px !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > span {
      display:block !important;
      width:100% !important;
      margin:0 !important;
      line-height:1.25 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      height:46px !important;
      min-height:46px !important;
      margin:0 !important;
      padding:8px 12px !important;
      box-sizing:border-box !important;
      font:inherit !important;
      font-size:16px !important;
      line-height:normal !important;
      border-radius:8px !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
      width:20px !important;
      height:20px !important;
      margin:0 !important;
      padding:0 !important;
    }
    @media screen and (max-width:768px) {
      #cuadre-admin-panel #form-cuadre .cuadre-fechas {
        grid-template-columns:minmax(0,1fr) !important;
      }
    }

/* Cuadre: estructura única para evitar conflictos de estilos anteriores. */
    #cuadre-admin-panel { width:100%; max-width:100%; box-sizing:border-box; }
    #cuadre-admin-panel .cuadre-fechas {
      display:flex; width:100%; max-width:100%; gap:12px; margin:0 0 12px;
      align-items:flex-start; box-sizing:border-box;
    }
    #cuadre-admin-panel .cuadre-fecha-control {
      flex:1 1 0; min-width:0; width:0; margin:0; padding:0;
      display:flex; flex-direction:column; gap:6px; box-sizing:border-box;
    }
    #cuadre-admin-panel .cuadre-fecha-control > span {
      display:block; margin:0; line-height:1.25;
    }
    #cuadre-admin-panel .cuadre-fecha-control > input[type="date"] {
      display:block; flex:0 0 44px; width:100%; min-width:0; max-width:100%;
      height:44px; min-height:44px; margin:0; padding:8px 10px;
      box-sizing:border-box; font:inherit; font-size:16px; line-height:normal;
      border-radius:8px;
    }
    #cuadre-admin-panel .cuadre-fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
      width:20px; height:20px; margin:0; padding:0;
    }
    #cuadre-admin-panel #btn-cerrar-caja,
    #cuadre-admin-panel #btn-abrir-caja,
    #cuadre-admin-panel #btn-guardar-cuadre,
    #cuadre-admin-panel #btn-reabrir-cuadre,
    #cuadre-admin-panel #btn-cancelar-ultimo-cuadre {
      box-sizing:border-box; max-width:100%;
    }
    @media (max-width:768px) {
      #cuadre-admin-panel .cuadre-fechas { flex-direction:column; gap:10px; }
      #cuadre-admin-panel .cuadre-fecha-control { width:100%; }
      #cuadre-admin-panel .cuadre-fecha-control > input[type="date"] { height:44px; min-height:44px; }
    }
    @media (max-width:600px) and (orientation:portrait) {
      #cuadre-admin-panel .cuadre-fecha-control > input[type="date"] { height:46px; min-height:46px; padding:10px 12px; }
    }

/* Los selectores de fecha del cuadre usan la misma apariencia compacta
       de los selectores Desde/Hasta de las secciones inferiores. */
    #cuadre-admin-panel #form-cuadre .cuadre-fechas {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
      gap:10px !important;
      width:100% !important;
      margin:0 0 12px !important;
      padding:0 !important;
      align-items:end !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
      display:flex !important;
      flex-direction:row !important;
      align-items:center !important;
      gap:10px !important;
      width:100% !important;
      min-width:0 !important;
      margin:0 !important;
      padding:0 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > span {
      flex:0 1 auto !important;
      width:auto !important;
      min-width:0 !important;
      margin:0 !important;
      line-height:1.25 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
      flex:0 0 195px !important;
      width:195px !important;
      max-width:195px !important;
      min-width:195px !important;
      height:52px !important;
      min-height:52px !important;
      margin:0 !important;
      padding:10px 12px !important;
      border:1px solid var(--border) !important;
      border-radius:10px !important;
      font:inherit !important;
      font-size:16px !important;
      line-height:1.25 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
      width:20px !important;
      height:20px !important;
      margin:0 !important;
      padding:0 !important;
    }
    @media (max-width:900px) {
      #cuadre-admin-panel #form-cuadre .cuadre-fechas {
        grid-template-columns:minmax(0,1fr) !important;
      }
    }
    @media (max-width:600px) and (orientation:portrait) {
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
        align-items:center !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        flex-basis:195px !important;
        width:195px !important;
        max-width:195px !important;
        min-width:195px !important;
        height:50px !important;
        min-height:50px !important;
      }
    }
    @media (max-width:430px) {
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
        flex-wrap:wrap !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        flex:1 1 100% !important;
      }
    }

/* Dimensiones fluidas: escritorio compactas; móvil portrait sin desbordes. */
    #cuadre-admin-panel #form-cuadre .cuadre-fechas {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
      gap:12px !important;
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
      display:grid !important;
      grid-template-columns:auto minmax(0,195px) !important;
      align-items:center !important;
      column-gap:10px !important;
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > span {
      min-width:0 !important;
      width:auto !important;
      overflow-wrap:anywhere !important;
      line-height:1.2 !important;
    }
    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
      width:100% !important;
      max-width:195px !important;
      min-width:0 !important;
      height:52px !important;
      min-height:52px !important;
      margin:0 !important;
      padding:10px 12px !important;
      box-sizing:border-box !important;
      font-size:16px !important;
    }

    @media (max-width:900px) {
      #cuadre-admin-panel #form-cuadre .cuadre-fechas {
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
        grid-template-columns:minmax(0,1fr) !important;
        row-gap:6px !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        max-width:100% !important;
        width:100% !important;
      }
    }

    @media (max-width:600px) {
      /* En teléfono vertical: los selectores ocupan aproximadamente la mitad
         del ancho disponible para evitar cualquier desbordamiento lateral. */
      #cuadre-admin-panel #form-cuadre .cuadre-fechas {
        grid-template-columns:minmax(0,1fr) !important;
        gap:8px !important;
        width:100% !important;
        max-width:100% !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        justify-items:start !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > span {
        width:auto !important;
        max-width:100% !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        width:50% !important;
        max-width:50% !important;
        min-width:0 !important;
        height:26px !important;
        min-height:26px !important;
        padding:3px 7px !important;
        font-size:14px !important;
        border-radius:7px !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
        width:15px !important;
        height:15px !important;
      }
    }

    @media (max-width:380px) {
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        width:50% !important;
        max-width:50% !important;
        height:24px !important;
        min-height:24px !important;
        padding:2px 6px !important;
        font-size:13px !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
        width:14px !important;
        height:14px !important;
      }
    }

/* Ajuste final: fechas fluidas y tablas de cuadres desplazables horizontalmente en móvil. */
    #cuadre-admin-panel #form-cuadre .cuadre-fechas,
    #cuadre-admin-panel .form-container .grid-form {
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }

    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control,
    #cuadre-admin-panel .form-container .grid-form > label {
      min-width:0 !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }

    #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"],
    #cuadre-admin-panel .form-container .grid-form input[type="date"] {
      display:block !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
      height:52px !important;
      min-height:52px !important;
      padding:10px 12px !important;
    }

    /* La lista de cuadres conserva el ancho natural de sus columnas.
       En pantallas pequeñas se desliza de izquierda a derecha en vez de comprimir texto. */
    #cuadre-admin-panel #cuadre-guardados {
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      overflow-x:auto !important;
      overflow-y:hidden !important;
      -webkit-overflow-scrolling:touch !important;
      box-sizing:border-box !important;
      scrollbar-width:auto;
    }

    #cuadre-admin-panel #cuadre-guardados table {
      width:max-content !important;
      min-width:900px !important;
      max-width:none !important;
      table-layout:auto !important;
      box-sizing:border-box !important;
    }

    #cuadre-admin-panel #cuadre-guardados th,
    #cuadre-admin-panel #cuadre-guardados td {
      min-width:0 !important;
      max-width:none !important;
      white-space:nowrap !important;
      overflow-wrap:normal !important;
      word-break:normal !important;
      padding-left:10px !important;
      padding-right:10px !important;
    }

    #cuadre-admin-panel #cuadre-guardados th {
      white-space:nowrap !important;
    }

    #cuadre-admin-panel #cuadre-guardados td button {
      white-space:nowrap !important;
      width:auto !important;
      max-width:none !important;
      min-width:max-content !important;
    }

    @media (max-width:600px) and (orientation:portrait) {
      #cuadre-admin-panel #form-cuadre .cuadre-fechas {
        grid-template-columns:minmax(0,1fr) !important;
      }

      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control {
        width:100% !important;
        max-width:100% !important;
      }

      /* En teléfono vertical, los selectores del cuadre se mantienen compactos
         y nunca ocupan todo el ancho de la pantalla. */
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        width:50% !important;
        max-width:50% !important;
        min-width:0 !important;
        height:28px !important;
        min-height:28px !important;
        padding:3px 7px !important;
        font-size:13px !important;
        line-height:1 !important;
      }

      #cuadre-admin-panel #cuadre-guardados {
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
      }

      #cuadre-admin-panel #cuadre-guardados table {
        min-width:900px !important;
        width:max-content !important;
        max-width:none !important;
        table-layout:auto !important;
      }
    }

@media (max-width:600px) and (orientation:portrait) {
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"] {
        width:50% !important;
        max-width:50% !important;
        min-width:0 !important;
        height:28px !important;
        min-height:28px !important;
        padding:3px 7px !important;
        font-size:13px !important;
        line-height:1 !important;
        box-sizing:border-box !important;
      }
      #cuadre-admin-panel #form-cuadre .cuadre-fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
        width:14px !important;
        height:14px !important;
        margin:0 !important;
        padding:0 !important;
      }
    }

/* Solo los selectores de fecha de "Cuadre diario/semanal".
       En móvil se hacen compactos sin modificar los selectores de cierre/reapertura. */
    @media screen and (max-width:600px) and (orientation:portrait) {
      #cuadre .filtros-ganancias label {
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
      }
      #cuadre .filtros-ganancias input#cuadre-desde,
      #cuadre .filtros-ganancias input#cuadre-hasta {
        display:block !important;
        width:50% !important;
        max-width:50% !important;
        min-width:0 !important;
        height:28px !important;
        min-height:28px !important;
        padding:3px 7px !important;
        margin:4px 0 0 !important;
        box-sizing:border-box !important;
        font-size:13px !important;
        line-height:1 !important;
        border-radius:8px !important;
      }
      #cuadre .filtros-ganancias input#cuadre-desde::-webkit-calendar-picker-indicator,
      #cuadre .filtros-ganancias input#cuadre-hasta::-webkit-calendar-picker-indicator {
        width:14px !important;
        height:14px !important;
        padding:0 !important;
        margin:0 !important;
      }
    }

/* En móvil, el detalle de ventas conserva el ancho de sus columnas y se desplaza horizontalmente. */
    #cuadre-admin-panel #tabla-cuadre-detalle {
      width: max-content !important;
      min-width: 720px !important;
      max-width: none !important;
      table-layout: auto !important;
      box-sizing: border-box !important;
    }
    #cuadre-admin-panel #tabla-cuadre-detalle th,
    #cuadre-admin-panel #tabla-cuadre-detalle td {
      white-space: nowrap !important;
      word-break: normal !important;
      overflow-wrap: normal !important;
      min-width: 0 !important;
    }
    #cuadre-admin-panel #tabla-cuadre-detalle th:nth-child(1),
    #cuadre-admin-panel #tabla-cuadre-detalle td:nth-child(1) { min-width: 105px !important; }
    #cuadre-admin-panel #tabla-cuadre-detalle th:nth-child(2),
    #cuadre-admin-panel #tabla-cuadre-detalle td:nth-child(2) { min-width: 180px !important; }
    #cuadre-admin-panel #tabla-cuadre-detalle th:nth-child(3),
    #cuadre-admin-panel #tabla-cuadre-detalle td:nth-child(3) { min-width: 70px !important; }
    #cuadre-admin-panel #tabla-cuadre-detalle th:nth-child(4),
    #cuadre-admin-panel #tabla-cuadre-detalle td:nth-child(4),
    #cuadre-admin-panel #tabla-cuadre-detalle th:nth-child(5),
    #cuadre-admin-panel #tabla-cuadre-detalle td:nth-child(5) { min-width: 105px !important; }
    #cuadre-admin-panel #tabla-cuadre-detalle th:nth-child(6),
    #cuadre-admin-panel #tabla-cuadre-detalle td:nth-child(6) { min-width: 150px !important; }
    @media screen and (max-width: 600px) and (orientation: portrait) {
      #cuadre-admin-panel #tabla-cuadre-detalle {
        width: max-content !important;
        min-width: 720px !important;
        max-width: none !important;
      }
      #cuadre-admin-panel #tabla-cuadre-detalle th,
      #cuadre-admin-panel #tabla-cuadre-detalle td {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
      }
    }

#cal-cuadre, #cal-ganancias, .cal-rango, .cal-popover, #cal-cuadre-mes, #cal-ganancias-mes {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

*, *::before, *::after { box-sizing: border-box; }
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
    #app.container { width: min(100%, 1200px); max-width: 1200px; }
    header, nav, main, .section, .form-container, .rep-lista-box, .cards, .card,
    .filtros-ganancias, .search-bar, .config-block, .acordeon-cuerpo {
      min-width: 0;
      max-width: 100%;
    }
    img, svg, canvas { max-width: 100%; }
    input, select, textarea, button { max-width: 100%; }
    .login-box, #caja-2fa { width: min(420px, calc(100vw - 24px)); max-width: 100%; }
    #form-2fa, #setup-2fa:not(.oculto) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      width: 100%;
    }
    #setup-2fa {
      padding: 12px;
      margin-top: 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg-muted);
    }
    #setup-2fa img { width: min(180px, 100%); height: auto; justify-self: center; }
    #setup-2fa input, #setup-2fa button { width: 100%; }
    .sync-toasts {
      right: max(10px, env(safe-area-inset-right));
      bottom: max(52px, calc(env(safe-area-inset-bottom) + 48px));
      width: min(340px, calc(100vw - 20px));
      max-height: calc(100dvh - 90px);
      overflow-y: auto;
      overscroll-behavior: contain;
      pointer-events: auto;
    }
    .sync-toast { width: 100%; box-shadow: 0 10px 28px rgba(35, 10, 55, .3); pointer-events: none; }
    .sync-chip { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }

    #cuadre-admin-panel .form-container.solo-admin .grid-form {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      width: 100% !important;
    }
    #cuadre-admin-panel .form-container.solo-admin .grid-form > label {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
    }
    #cuadre-reabrir-desde, #cuadre-reabrir-hasta {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      min-height: 40px !important;
      height: 40px !important;
      padding: 7px 9px !important;
    }

    @media screen and (min-width: 768px) and (max-width: 1100px) {
      .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .form-container form, .config-add-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .filtros-ganancias { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }

    @media screen and (max-width: 767px) {
      #app.container { padding: 8px; }
      header, .section { width: 100%; padding: 12px; border-radius: 12px; }
      nav { width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
      nav .nav-btn { flex: 0 0 auto; white-space: nowrap; }
      header .user-info { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      header .user-info > * { width: 100%; min-width: 0; }
      .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
      .card { width: 100%; min-height: 96px; height: 100%; }
      .form-container form, #form-encargo, #form-venta, #form-producto, #form-gasto,
      #form-usuario, #form-cuadre, #form-config-taller, .config-add-row,
      .filtros-ganancias, #reparaciones .filtros-ganancias {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
      }
      .form-container form > *, .config-add-row > *, .filtros-ganancias > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
      }
      .rep-lista-header { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .rep-lista-header h2 { grid-column: 1 / -1; }
      .rep-lista-header button { width: 100%; }
      .tabla-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
      .tabla-wrap table { width: max-content !important; min-width: 100% !important; max-width: none !important; table-layout: auto !important; }
      .tabla-wrap tr, .tabla-wrap th, .tabla-wrap td { height: auto !important; min-height: 0 !important; }
      .tabla-wrap th, .tabla-wrap td { min-width: max-content !important; max-width: none !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
      .tabla-wrap button { width: auto !important; min-width: max-content !important; white-space: nowrap !important; }
      #tabla-reparaciones { width: max-content !important; min-width: 760px !important; table-layout: auto !important; }
      #modal-reparacion .modal-panel, #modal-venta .modal-panel { width: 100% !important; height: calc(100dvh - 12px) !important; max-height: calc(100dvh - 12px) !important; }
      #form-reparacion-box, #form-venta-box { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
      .sync-toasts { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }
    }

    @media screen and (max-width: 420px) {
      header .user-info, .cards, .rep-lista-header { grid-template-columns: minmax(0, 1fr); }
      .rep-lista-header h2 { grid-column: 1; }
      #cuadre-admin-panel .form-container.solo-admin .grid-form { grid-template-columns: minmax(0, 1fr) !important; }
      .card { min-height: 0; }
    }

/* Cerrar sesión siempre queda en una segunda línea, alineado a la derecha
       y contenido dentro del cuadro de usuario en cualquier ancho. */
    header .user-info .logout-row {
      flex: 1 0 100%;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      box-sizing: border-box;
      margin-top: 2px;
    }
    header .user-info .logout-row #btn-logout {
      flex: 0 1 auto;
      width: auto !important;
      max-width: 100% !important;
      min-width: 0;
      margin: 0 !important;
      white-space: nowrap;
      box-sizing: border-box;
    }
    @media screen and (max-width: 767px) {
      header .user-info .logout-row {
        grid-column: 1 / -1;
        justify-self: stretch;
      }
    }

/* El trabajador nunca debe ver controles destinados a guardar cuadres.
       Esta regla prevalece sobre los antiguos ajustes dimensionales con !important. */
    html[data-cellfix-role="trabajador"] #cuadre-admin-panel #form-cuadre,
    html[data-cellfix-role="trabajador"] #cuadre-admin-panel #cuadre-fechas-guardar,
    html[data-cellfix-role="trabajador"] #cuadre-admin-panel #cuadre-notas,
    html[data-cellfix-role="trabajador"] #cuadre-admin-panel #btn-guardar-cuadre {
      display: none !important;
      visibility: hidden !important;
    }


/* sync78 · cabecera global; saludo exclusivo del Dashboard */
#app > #app-header { display: flex !important; }
html:not([data-cellfix-section="dashboard"]) #dashboard .dash-hero { display: none !important; }
.section:not(.active) { display: none !important; }
#dashboard:not(.active) .dash-hero { display: none !important; }

/* sync79 · saludo a la izquierda y accesos compactos apilados a la derecha.
   Las reglas de visibilidad del Dashboard conservan la prioridad. */
#dashboard .dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
}
#dashboard .dash-hero > :first-child {
  min-width: 0;
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}
#dashboard .dash-atajos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: end;
  gap: 6px;
  width: 148px;
  min-width: 0;
  max-width: 100%;
}
#dashboard .dash-atajos .atajo {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 9px;
  font-size: .85rem;
  line-height: 1.2;
}

/* sync79 · fechas acotadas: estos selectores vencen las reglas generales
   del cuadre y evitan el ancho mínimo nativo del selector de fecha en iOS. */
#cuadre-admin-panel #cuadre-reabrir-panel .grid-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 360px !important;
  min-width: 0 !important;
}
#cuadre-admin-panel #cuadre-reabrir-panel .grid-form > label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: .82rem !important;
}
#cuadre-admin-panel #cuadre-reabrir-panel input[type="date"] {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
}
#cuadre-admin-panel #cuadre-reabrir-panel input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}
#cuadre-admin-panel #cuadre-reabrir-panel input[type="date"]::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}
#cuadre-admin-panel #cuadre-reabrir-panel input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

/* sync78 · móvil: cabecera global compacta en todas las secciones. */
@media screen and (max-width: 767px) {
  #app > #app-header {
    padding: 8px 9px !important;
    gap: 6px !important;
    border-radius: 11px !important;
    align-items: center !important;
  }
  #app > #app-header .marca {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
  }
  #app > #app-header .logo-taller {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  #app > #app-header .marca h1 {
    font-size: .98rem !important;
    line-height: 1.05 !important;
  }
  #app > #app-header .marca p {
    font-size: .68rem !important;
    line-height: 1.15 !important;
    margin-top: 1px !important;
  }
  #app > #app-header .user-info {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
    gap: 5px 6px !important;
    align-items: center !important;
  }
  #app > #app-header .theme-switch {
    min-height: 32px !important;
    height: 32px !important;
  }
  #app > #app-header .theme-switch button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: .72rem !important;
  }
  #app > #app-header #select-taller {
    width: 100% !important;
    max-width: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: .82rem !important;
  }
  #app > #app-header #nombre-usuario {
    width: 100% !important;
    min-width: 0 !important;
    font-size: .84rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #app > #app-header .logout-row {
    grid-column: auto !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-end !important;
  }
  #app > #app-header #btn-logout {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 9px !important;
    font-size: .80rem !important;
    border-radius: 8px !important;
  }
  #app > #app-header .global-search-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #app > #app-header #busqueda-global {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: .80rem !important;
  }

  /* Saludo / resumen: solo Dashboard y con menos altura en teléfono. */
  #dashboard .dash-hero {
    margin-bottom: 8px !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  #dashboard .dash-hola {
    font-size: .88rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  #dashboard #dash-titulo {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    margin: 2px 0 3px !important;
    padding-bottom: 4px !important;
  }
  #dashboard #dash-fecha {
    font-size: .76rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  #dashboard .dash-atajos {
    gap: 5px !important;
    width: clamp(116px, 32vw, 132px) !important;
  }
  #dashboard .dash-atajos .atajo {
    min-height: 34px !important;
    padding: 5px 7px !important;
    font-size: .76rem !important;
  }

  /* Reabrir período: controles pequeños y contenidos dentro del móvil. */
  #cuadre-reabrir-panel { padding: 10px !important; margin-top: 10px !important; }
  #cuadre-reabrir-panel h4 { margin: 0 0 6px !important; }
  #cuadre-reabrir-panel .hint { margin: 0 0 8px !important; font-size: .82rem !important; line-height: 1.3 !important; }
  #cuadre-reabrir-panel button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 6px 12px !important;
    font-size: .86rem !important;
    margin-top: 7px !important;
  }
}

@media screen and (max-width: 359px) {
  #cuadre-admin-panel #cuadre-reabrir-panel .grid-form {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 190px !important;
  }
}
/* sync80 · distribución explícita del saludo, selector de temas y fechas.
   También se integra en index.html desde tools/build.py para que el ajuste
   viaje con el HTML aun cuando otra hoja de estilos siga en caché. */

/* Dos columnas reales: texto a la izquierda; botones apilados a la derecha.
   No se fuerza display con !important: se conservan los controles de visibilidad. */
#dashboard #dashboard-intro {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
#dashboard #dashboard-intro #dashboard-welcome {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#dashboard #dashboard-welcome > * {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-wrap: anywhere;
}
#dashboard #dashboard-intro #dashboard-actions {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex: 0 0 142px !important;
  width: 142px !important;
  min-width: 0 !important;
  max-width: 142px !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dashboard #dashboard-actions > button.atajo {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* El óvalo mide únicamente lo que ocupan los tres iconos. */
#app > #app-header #app-theme-switch {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  gap: 2px !important;
  padding: 2px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#app > #app-header #app-theme-switch > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Cuadre: los tres pares de fechas usan las mismas medidas compactas.
   No se cambia display en los paneles: el permiso del trabajador prevalece. */
#app #cuadre .cuadre-periodo-fechas {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: end !important;
  justify-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 300px !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#app #cuadre label.cuadre-periodo-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  flex: 0 1 146px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 146px !important;
  height: auto !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}
#app #cuadre label.cuadre-periodo-control > span {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
}
#app #cuadre label.cuadre-periodo-control > input.cellfix-date[type="date"] {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 146px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  text-align: left !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#app #cuadre input.cellfix-date[type="date"]::-webkit-date-and-time-value {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.1 !important;
}
#app #cuadre input.cellfix-date[type="date"]::-webkit-datetime-edit {
  min-width: 0 !important;
  padding: 0 !important;
}
#app #cuadre input.cellfix-date[type="date"]::-webkit-calendar-picker-indicator {
  width: 14px !important;
  height: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width: 767px) {
  #dashboard #dashboard-intro { gap: 8px !important; }
  #dashboard #dashboard-intro #dashboard-actions {
    flex-basis: 112px !important;
    width: 112px !important;
    max-width: 112px !important;
  }
  #dashboard #dashboard-actions > button.atajo {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 4px !important;
    font-size: 11.5px !important;
  }
  #dashboard #dashboard-welcome #dash-saludo {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  #dashboard #dashboard-welcome #dash-titulo {
    margin: 3px 0 !important;
    padding-bottom: 3px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
  #dashboard #dashboard-welcome #dash-fecha {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  /* Esquina superior derecha, sobre el selector pequeño del taller. */
  #app > #app-header { position: relative; }
  #app > #app-header .marca {
    min-height: 32px !important;
    padding-right: 90px !important;
    box-sizing: border-box !important;
  }
  #app > #app-header .marca > div { min-width: 0; }
  #app > #app-header #app-theme-switch {
    position: absolute !important;
    top: 8px !important;
    right: 9px !important;
  }
  #app > #app-header .user-info {
    position: static !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 132px) !important;
    gap: 5px 8px !important;
  }
  #app > #app-header #select-taller {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  #app > #app-header #nombre-usuario {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #app > #app-header .user-info .logout-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-end !important;
  }
}

/* sync81 · buscador compacto en la misma fila que Cerrar sesión.
   Solo cambia la distribución móvil; el DOM y la búsqueda se conservan. */
@media screen and (max-width: 767px) {
  #app > #app-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    align-items: center !important;
    gap: 5px 8px !important;
  }
  #app > #app-header .marca {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  #app > #app-header .user-info { display: contents !important; }
  #app > #app-header #nombre-usuario {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  #app > #app-header #select-taller {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  #app > #app-header .user-info .logout-row {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: center !important;
  }
  #app > #app-header .global-search-wrap {
    grid-column: 1 !important;
    grid-row: 3 !important;
    order: 0 !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 260px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }
  #app > #app-header .global-search-wrap > label.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #app > #app-header .global-search-wrap #busqueda-global {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 3px 7px 3px 25px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  #app > #app-header .global-search-icon {
    left: 7px !important;
    top: 50% !important;
    font-size: 16px !important;
  }
  #app > #app-header .global-search-results {
    width: min(340px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    max-height: min(300px, 50vh);
    left: 0;
    right: auto;
    top: calc(100% + 6px);
    box-sizing: border-box;
  }
}