@charset "UTF-8";

    :root {

      --app-scale: 0.9;

    }



    /* Reset e estrutura b?sica */

    html, body, #root {

      height: 100%;

      margin: 0;

      padding: 0;

    }

    

    /* Estilos globais */

    body {

      background-color: var(--bg-primary);

      color: var(--text-primary);

      transition: var(--transition);

      zoom: var(--app-scale);

    }



    @supports not (zoom: 1) {

      body {

        transform: scale(var(--app-scale));

        transform-origin: top left;

        width: calc(100% / var(--app-scale));

      }

    }



    .spa-view {

      opacity: 0;

      transform: translateY(12px);

      transition: opacity 0.3s ease, transform 0.3s ease;

    }



    .spa-view.spa-ativo {

      opacity: 1;

      transform: translateY(0);

    }



    /* Cards e containers */

    .card {

      background-color: var(--bg-secondary);

      border-color: var(--border-color);

      box-shadow: var(--shadow);

    }



    .card-secundario {

      background-color: var(--bg-tertiary);

      border-color: var(--border-color);

    }



    .secao-moto {

      background-color: var(--bg-accent-moto);

      border-color: var(--border-accent-moto);

    }



    .secao-carro {

      background-color: var(--bg-accent-carro);

      border-color: var(--border-accent-carro);

    }



    /* CORREÇÃO: Alinhamento do cabeçalho principal à esquerda */

    .cabecalho-principal {

      text-align: left !important;

    }



    /* CORREÇÃO: Grade responsiva para técnicos */

    .grade-tecnicos {

      display: grid;

      grid-template-columns: 1.5fr 2fr 1.5fr 1fr;

      gap: 0.75rem;

      align-items: center;

      word-break: break-word;

      overflow-wrap: break-word;

    }



    /* Responsividade */

    @media (max-width: 1024px) {

      .grade-tecnicos {

        grid-template-columns: 1fr 1.5fr 1fr 0.8fr;

      }

    }



    @media (max-width: 768px) {

      .grade-tecnicos {

        grid-template-columns: 1fr;

        gap: 0.5rem;

      }



      .grade-tecnicos > div {

        margin-bottom: 0.25rem;

      }



      /* Estilos específicos para o campo editável no mobile */

      .campo-editavel::before {

        content: attr(data-label) ": ";

        font-weight: bold;

        color: var(--text-secondary);

        display: inline; /* Garante que o label e o conteúdo fiquem na mesma linha */

      }

    }



    /* Drag and drop */

    .arrastando {

      opacity: 0.5;

      transform: scale(0.95);

    }



    /* Transições suaves */

    * {

      transition: var(--transition);

    }



    /* Correção para inputs e selects com tema */

    input, select, textarea {

      background-color: var(--bg-secondary);

      color: var(--text-primary);

      border-color: var(--border-color);

    }



    input:focus, select:focus, textarea:focus {

      border-color: var(--accent-carro);

      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

    }



    /* Correção alinhamento vertical dos botões */

    button {

      display: inline-flex;

      align-items: center;

      justify-content: center;

    }



    button i {

      display: inline-flex;

      align-items: center;

      justify-content: center;

    }



    /* CORREÇÃO: Campos editáveis com melhor fluxo */

    .campo-editavel {

      min-height: 2rem;

      padding: 0.5rem;

      border: 2px solid transparent;

      border-radius: 0.375rem;

      transition: all 0.2s;

      cursor: text;

      max-width: 100%;

      word-wrap: break-word;

      white-space: pre-wrap;

      font-weight: bold; /* Conteúdo da tabela em negrito */

      color: var(--table-text-color); /* Cor do texto da tabela conforme o tema */

    }



    .campo-editavel:hover {

      background-color: var(--bg-tertiary);

    }



    .campo-editavel:focus {

      outline: none;

      border-color: var(--accent-carro);

      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

    }



    .campo-editavel:empty:before {

      content: attr(data-placeholder);

      color: var(--text-muted);

      font-style: italic;

      font-weight: normal; /* Placeholder não em negrito */

    }



    .campo-editavel:focus:empty:before {

      content: attr(data-placeholder);

      color: var(--text-muted);

      font-style: italic;

      font-weight: normal; /* Placeholder não em negrito */

    }



    /* CORREÇÃO: Container para captura de imagem */

    .area-captura-especial {

      background: white;

      color: black;

      padding: 20px;

    }



    .area-captura-especial .secao-moto,

    .area-captura-especial .secao-carro {

      background: white !important;

      border: 2px solid #e5e7eb !important;

    }



    .area-captura-especial .card-secundario {

      background: #f9fafb !important;

      border: 1px solid #e5e7eb !important;

    }



    .area-captura-especial .texto-primario {

      color: #111827 !important;

    }



    .area-captura-especial .texto-secundario {

      color: #6b7280 !important;

    }



    /* CORREÇÃO: Modo captura que remove botões e ações */

    .modo-captura button,

    .modo-captura .botao-hover {

      display: none !important;

    }



    /* CORREÇÃO: Layout unificado dos cards */

    .cards-unificados {

      display: flex;

      flex-direction: column;

      gap: 1.5rem;

    }



    .card-unificado {

      background-color: var(--bg-secondary);

      border: 1px solid var(--border-color);

      border-radius: 0.75rem;

      padding: 1.5rem;

      box-shadow: var(--shadow);

    }



    .card-secao {

      border-bottom: 1px solid var(--border-color);

      padding-bottom: 1.5rem;

      margin-bottom: 1.5rem;

    }



    .card-secao:last-child {

      border-bottom: none;

      padding-bottom: 0;

      margin-bottom: 0;

    }



    body[data-theme="dark"] .card,

    body[data-theme="dark"] .card-secundario,

    body[data-theme="dark"] .card-unificado,

    body[data-theme="dark"] #viewEscalaEquipes .card,

    body[data-theme="dark"] .escala-equipe-card,

    body[data-theme="dark"] .escala-card {

      border: none !important;

    }



    body[data-theme="dark"] .card-secao {

      border-bottom: none !important;

    }



    /* Modal Styles */

    .modal-overlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.5);

        display: flex;

        justify-content: center;

        align-items: center;

        z-index: 1000;

    }



    .modal-content {

        background-color: var(--bg-secondary);

        padding: 20px;

        border-radius: 8px;

        box-shadow: var(--shadow-md);

        text-align: center;

        max-width: 400px;

        width: 90%;

        color: var(--text-primary);

    }



    .modal-content h4 {

        margin-top: 0;

        margin-bottom: 15px; /* Espaçamento menor entre título e mensagem */

        color: var(--accent-moto);

        font-weight: bold; /* Título em negrito */

        font-size: 1.2rem; /* Tamanho menor para o título */

    }



    .modal-content p {

        margin-bottom: 15px; /* Mesmo espaçamento entre mensagem e botões */

        font-size: 0.9rem; /* Tamanho menor para a mensagem */

    }



    .modal-buttons {

        display: flex;

        justify-content: center;

        gap: 10px;

        margin-top: 12px;

    }



    .modal-buttons button {

        padding: 8px 16px; /* Padding menor para botões menores */

        border: none;

        border-radius: 4px; /* Border-radius menor */

        cursor: pointer;

        font-size: 13px; /* Fonte ainda menor */

        transition: background-color 0.3s;

    }



    .modal-buttons .btn-confirm {

        background-color: var(--accent-moto); /* Vermelho */

        color: white;

    }



    .modal-buttons .btn-confirm:hover {

        background-color: #dc2626; /* Vermelho mais escuro */

    }



    .modal-buttons .btn-cancel {

        background-color: var(--text-muted);

        color: white;

    }



    .modal-buttons .btn-cancel:hover {

        background-color: #6b7280; /* Darker gray */

    }



    .modal-content input[type="text"],
    .modal-content input[type="password"] {
        width: 100%;
        padding: 8px;
        margin-bottom: 8px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        font-size: 14px; /* Tamanho menor para o input */
    }

    .modal-content input[type="text"]:not(.hidden),
    .modal-content input[type="password"]:not(.hidden) {
        display: block;
    }


    .modal-error {

        color: #dc2626;

        font-size: 0.85rem;

        margin-bottom: 8px;

        text-align: left;

    }



    .modal-input-erro {

        border-color: #dc2626 !important;

        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);

    }



    /* Estilos para o menu flutuante de funções */

    /* Estilos dos botões de adicionar técnico */

    .botao-adicionar-moto,

    .botao-adicionar-carro {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 0.5rem;

        white-space: nowrap;

        border-radius: 0.375rem;

        font-size: 0.875rem;

        font-weight: 500;

        transition: all 0.2s ease-in-out;

        height: 2.5rem;

        padding: 0.5rem 1rem;

        color: white;

        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

        border: none;

        cursor: pointer;

    }



    .botao-adicionar-moto:focus-visible,

    .botao-adicionar-carro:focus-visible {

        outline: 2px solid transparent;

        outline-offset: 2px;

        box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent-moto);

    }



    .botao-adicionar-moto:disabled,

    .botao-adicionar-carro:disabled {

        pointer-events: none;

        opacity: 0.5;

    }



    .botao-adicionar-moto svg,

    .botao-adicionar-carro svg {

        pointer-events: none;

        width: 1rem;

        height: 1rem;

        flex-shrink: 0;

    }



    /* Remove hover dos elementos internos dos botões adicionar */

    .botao-adicionar-moto i,

    .botao-adicionar-moto span,

    .botao-adicionar-carro i,

    .botao-adicionar-carro span {

        pointer-events: none;

    }



    .botao-adicionar-moto {

        background: linear-gradient(to right, #ef4444, #dc2626);

        transform: translateY(0);

    }



    .botao-adicionar-moto:hover {

        background: linear-gradient(to right, #f87171, #ef4444);

        transform: translateY(-2px);

    }



    .botao-adicionar-moto:active {

        transform: translateY(0);

        background: linear-gradient(to right, #dc2626, #b91c1c);

    }



    .botao-adicionar-carro {

        background: linear-gradient(to right, #3b82f6, #2563eb);

        transform: translateY(0);

    }



    .botao-adicionar-carro:hover {

        background: linear-gradient(to right, #60a5fa, #3b82f6);

        transform: translateY(-2px);

    }



    .botao-adicionar-carro:active {

        transform: translateY(0);

        background: linear-gradient(to right, #2563eb, #1d4ed8);

    }



    /* Estilos do botão salvar modelo */

    .botao-salvar-modelo {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        white-space: nowrap;

        border-radius: 0.375rem;

        font-size: 0.875rem;

        font-weight: 500;

        transition: all 0.2s ease-in-out;

        height: 2.5rem;

        width: 2.5rem;

        color: white;

        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

        border: none;

        cursor: pointer;

        background: linear-gradient(to right, #ef4444, #dc2626);

        transform: translateY(0);

    }



    .botao-salvar-modelo:focus-visible {

        outline: 2px solid transparent;

        outline-offset: 2px;

        box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent-moto);

    }



    .botao-salvar-modelo:disabled {

        pointer-events: none;

        opacity: 0.5;

    }



    .botao-salvar-modelo svg,

    .botao-salvar-modelo i {

        pointer-events: none;

        width: 1.25rem;

        height: 1.25rem;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .botao-salvar-modelo:hover {

        background: linear-gradient(to right, #f87171, #ef4444);

        transform: translateY(-2px);

    }



    .botao-salvar-modelo:active {

        transform: translateY(0);

        background: linear-gradient(to right, #dc2626, #b91c1c);

    }



    /* Efeito hover melhorado para botões de excluir */

    .text-red-500:hover {

        background-color: #fee2e2 !important; /* Fundo vermelho muito claro no tema claro */

        color: #dc2626 !important;

    }



    /* Tema escuro - efeito hover para botões de excluir */

    body.dark .text-red-500:hover {

        background-color: rgba(255, 42, 48, 0.2) !important; /* Fundo vermelho translúcido */

        color: #ff6b6b !important;

    }



    /* Permite que tooltips do menu flutuante sejam visíveis */

        overflow: visible !important; /* Sobrepõe o overflow: hidden */

    }



    /* Z-index maior para tooltips do menu flutuante */

        z-index: 999999;

    }



    /* Tooltip específico para botão minimizar do menu flutuante no mobile quando minimizado */

    @media (max-width: 768px) {

            left: auto;

            right: 0;

            bottom: auto;

            top: 100%;

            transform: translateY(6px);

        }

    }



    /* Efeitos hover para botões do menu flutuante */

        transition: all 0.2s ease;

    }



        transform: scale(1.1);

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    }



    #botaoDesfazer {

        transition: all 0.2s ease;

    }



    #botaoDesfazer:hover {

        transform: translateY(-2px);

        background-color: var(--bg-tertiary);

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    }



    #botaoCapturar {

        transition: all 0.2s ease;

    }



    #botaoCapturar:hover {

        transform: translateY(-2px);

        background-color: #f87171; /* Vermelho mais claro */

        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);

    }



    /* Cartões da Escala de Equipes */

    .escala-paineis-superiores {

      grid-template-columns: 1fr;

    }



    @media (min-width: 1024px) {

      .escala-paineis-superiores {

        grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);

        align-items: stretch;

      }

    }



    #viewEscalaEquipes .card {

      border-radius: 1.25rem;

      border-width: 1px;

    }



    .escala-card {

      padding: 1.5rem;

      gap: 1rem;

    }



    .escala-predef-card {

      display: flex;

      flex-direction: column;

      gap: 1.5rem;

    }



    .escala-predef-acoes {

      display: flex;

      flex-direction: column;

      gap: 1rem;

    }



    .escala-predef-botoes button {

      flex: 1;

      min-width: 160px;

      justify-content: center;

    }



    .escala-predef-icones .escala-acao-icon {

      width: 48px;

      height: 48px;

    }



    @media (min-width: 1024px) {

      .escala-predef-card {

        flex-direction: row;

        justify-content: space-between;

        align-items: flex-start;

      }



      .escala-predef-texto {

        max-width: 360px;

      }



      .escala-predef-acoes {

        width: 420px;

      }

    }



    .escala-acao-principal {

      background: linear-gradient(90deg, #dc2626, #b91c1c);

      color: white;

      border: none;

      border-radius: 0.75rem;

      transition: var(--transition);

      box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.3);

    }



    .escala-acao-principal:hover {

      filter: brightness(1.05);

      transform: translateY(-2px);

    }



    .escala-acao-secundaria {

      background-color: var(--bg-tertiary);

      border: 1px solid var(--border-color);

      color: var(--text-primary);

      border-radius: 0.75rem;

      transition: var(--transition);

    }



    .escala-acao-secundaria:hover {

      border-color: #dc2626;

      color: #dc2626;

    }



    .acao-secundaria {

      background-color: var(--bg-tertiary);

      border: 1px solid var(--border-color);

      color: var(--text-primary);

      border-radius: 0.75rem;

      transition: var(--transition);

    }



    .acao-secundaria:hover {

      border-color: #dc2626;

      color: #dc2626;

    }



    .acao-destaque {

      background: linear-gradient(90deg, #dc2626, #b91c1c);

      color: white;

      border: none;

      border-radius: 0.75rem;

      transition: var(--transition);

      box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.3);

    }



    .acao-destaque:hover {

      filter: brightness(1.05);

      transform: translateY(-2px);

    }



    .escala-acao-icon {

      width: 42px;

      height: 42px;

      border-radius: 0.75rem;

      border: 1px solid var(--border-color);

      display: inline-flex;

      align-items: center;

      justify-content: center;

      color: var(--text-secondary);

      transition: var(--transition);

    }



    .escala-acao-icon:hover {

      background-color: var(--bg-tertiary);

      color: var(--text-primary);

    }



    .rota-acoes button {

      flex: 1 1 200px;

      justify-content: center;

    }



    .escala-equipe-card {

      padding: 1.25rem;

      display: flex;

      flex-direction: column;

      gap: 1rem;

    }



    .escala-card-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 0.75rem;

    }



    .escala-card-title {

      font-weight: 600;

      color: var(--text-primary);

    }



    .escala-add-linha {

      width: 36px;

      height: 36px;

      border-radius: 0.75rem;

      border: 1px solid transparent;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      color: white;

      background: linear-gradient(90deg, #dc2626, #b91c1c);

      transition: var(--transition);

    }



    .escala-add-linha:hover {

      transform: scale(1.05);

    }



    .escala-lista-colaboradores {

      display: flex;

      flex-direction: column;

      gap: 0.75rem;

    }



    .escala-linha-colaborador {

      display: flex;

      align-items: center;

      gap: 0.75rem;

      flex-wrap: wrap;

      background-color: var(--bg-tertiary);

      border-radius: 0.75rem;

      padding: 0.5rem;

      border: 1px solid var(--border-color);

    }



    .escala-linha-colaborador input {

      flex: 1;

      background: transparent;

      border: none;

      outline: none;

      color: var(--text-primary);

    }



    .escala-remover-linha {

      width: 34px;

      height: 34px;

      border-radius: 0.65rem;

      border: none;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      color: #dc2626;

      background-color: rgba(220, 38, 38, 0.12);

      transition: var(--transition);

    }



    .escala-remover-linha:hover {

      background-color: rgba(220, 38, 38, 0.2);

    }



    .escala-remover-inativo {

      display: none !important;

    }



    @media (max-width: 960px) {

      .escala-linha-colaborador {

        flex-direction: column;

        align-items: stretch;

      }



      .escala-remover-linha {

        width: 100%;

      }

    }



    .escala-equipe-card {

      border-color: rgba(239, 68, 68, 0.4);

      background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), transparent);

    }