/* ===================================
   AJUSTES PARA TABLETS
   Referencia: Redmi Pad 2 (11", 2560x1600)
   - Em pe:    ~800 x 1280 px
   - Deitado: ~1280 x 800 px
   Carregado por ultimo em cada pagina; nao altera o computador.
   =================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Sempre tema claro: impede o modo escuro do aparelho/navegador
   de escurecer as telas automaticamente */
:root {
    color-scheme: light only;
}

/* ----- Telas de toque: alvos maiores para o dedo ----- */
@media (pointer: coarse) and (min-width: 600px) {
    button,
    .btn,
    .toolbar-btn,
    .tab-btn,
    .modal-tab-button,
    input[type="submit"],
    input[type="button"] {
        min-height: 40px;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .toolbar-btn {
        padding-left: 12px;
        padding-right: 12px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
    }

    a {
        touch-action: manipulation;
    }
}

/* ----- Tela de clientes: tablet deitado (1280 x 800) ----- */
@media (min-width: 901px) and (max-width: 1366px) and (max-height: 900px) {
    .container-clientes {
        margin: 8px auto;
        padding: 12px;
        max-width: calc(100% - 16px);
        box-sizing: border-box;
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
    }

    .container-clientes .form-area-fixed {
        max-height: 50vh;
        max-height: 50dvh;
    }
}

/* ----- Tela de clientes: tablet em pe (800 x 1280) ----- */
@media (min-width: 601px) and (max-width: 900px) {
    .container-clientes {
        box-sizing: border-box;
        height: calc(100vh - 20px);
        height: calc(100dvh - 20px);
    }

    .container-clientes .form-area-fixed {
        max-height: 50vh;
        max-height: 50dvh;
    }

    /* Cartoes de clientes em duas colunas */
    .container-clientes table tbody {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .container-clientes table tbody tr {
        margin-bottom: 0 !important;
    }

    .container-clientes table tbody td {
        padding-left: 44% !important;
        overflow-wrap: anywhere;
    }

    .container-clientes table tbody td:first-child {
        padding-left: 10px !important;
    }

    .container-clientes table tbody td:before {
        width: 40%;
    }
}