/* main.css - Base CSS unificado para todo o sistema */
/* ====================================================
   VARIÁVEIS E RESET
   ==================================================== */
   :root {
    /* Cores principais */
    --dark-background: #060906;
    --green-primary: #21711B;
    --white-text: #CED5E8;
    --gray-selected: #797A7A;
    --light-green: #8FAD8C;
    /* Neutras */
    --white: #ffffff;
    --light-gray: #f5f5f5;
    --mid-gray: #dddddd;
    --dark-gray: #333333;
    /* Espaçamento */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    /* Bordas */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    /* Efeitos */
    --shadow: rgba(0,0,0,0.2);
    --shadow-strong: rgba(0,0,0,0.35);
    --overlay: rgba(6,9,6,0.75);
    /* Feedback */
    --success: #21711B;
    --error: #e74c3c;
    --warning: #f39c12;
    --info: #8FAD8C;
    /* Transições */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
  }
  
  /* Reset global */
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  body {
    background-color: var(--dark-background);
    color: var(--white-text);
    font-family: 'Roboto','Segoe UI',Arial,sans-serif;
    min-height:100vh;
    line-height:1.5;
    font-size:16px;
  }
  
  /* ====================================================
     LAYOUT BASE (CONTÊINERS, HEADER, FOOTER)
     ==================================================== */
  .wrapper { display:flex; flex-direction:column; min-height:100vh; }
  main { flex:1; padding: var(--spacing-lg) 0; }
  
  .container {
    width:100%; max-width:1200px; margin:0 auto; padding: var(--spacing-md);
  }
  
  .container-medium {
    width:100%; max-width:800px; margin:0 auto; padding: var(--spacing-md);
  }
  
  header, footer {
    background-color: var(--dark-background);
    padding: var(--spacing-md);
    color: var(--white-text);
  }
  header { box-shadow: 0 2px 10px var(--shadow); }
  footer { margin-top:auto; font-size:0.9rem; }
  
  /* ====================================================
     TIPOGRAFIA E LINKS
     ==================================================== */
  h1,h2,h3,h4,h5,h6 { margin-bottom: var(--spacing-md); font-weight:600; line-height:1.2; }
  h1 { font-size:2.25rem; margin-bottom: var(--spacing-lg); }
  h2 { font-size:1.8rem; }
  h3 { font-size:1.5rem; }
  h4 { font-size:1.25rem; }
  h5 { font-size:1.125rem; }
  h6 { font-size:1rem; }
  
  p { margin-bottom: var(--spacing-md); }
  a { color: var(--light-green); text-decoration:none; transition: color var(--transition-fast); }
  a:hover { color: var(--green-primary); text-decoration:underline; }
  
  /* ====================================================
     UTILITÁRIOS (FLEX, GRID, TEXT)
     ==================================================== */
  .flex { display:flex; }
  .flex-col { flex-direction:column; }
  .items-center { align-items:center; }
  .justify-between { justify-content:space-between; }
  .justify-center { justify-content:center; }
  .grid { display:grid; gap: var(--spacing-md); }
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
  .text-center { text-align:center; }
  .text-right { text-align:right; }
  .text-left { text-align:left; }
  .text-light { color: var(--white-text); }
  .text-muted { color: var(--gray-selected); opacity:0.75; }
  .text-success { color: var(--success); }
  .text-error { color: var(--error); }
  .text-warning { color: var(--warning); }
  .text-info { color: var(--info); }
  
  /* Classes de espaçamento */
  .m-0 { margin: 0; }
  .m-1 { margin: var(--spacing-xs); }
  .m-2 { margin: var(--spacing-sm); }
  .m-3 { margin: var(--spacing-md); }
  .m-4 { margin: var(--spacing-lg); }
  .m-5 { margin: var(--spacing-xl); }
  
  .mt-0 { margin-top: 0; }
  .mt-1 { margin-top: var(--spacing-xs); }
  .mt-2 { margin-top: var(--spacing-sm); }
  .mt-3 { margin-top: var(--spacing-md); }
  .mt-4 { margin-top: var(--spacing-lg); }
  .mt-5 { margin-top: var(--spacing-xl); }
  
  .mb-0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: var(--spacing-xs); }
  .mb-2 { margin-bottom: var(--spacing-sm); }
  .mb-3 { margin-bottom: var(--spacing-md); }
  .mb-4 { margin-bottom: var(--spacing-lg); }
  .mb-5 { margin-bottom: var(--spacing-xl); }
  
  .p-0 { padding: 0; }
  .p-1 { padding: var(--spacing-xs); }
  .p-2 { padding: var(--spacing-sm); }
  .p-3 { padding: var(--spacing-md); }
  .p-4 { padding: var(--spacing-lg); }
  .p-5 { padding: var(--spacing-xl); }
  
  /* Acessibilidade */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* ====================================================
     FORMULÁRIOS E BOTÕES
     ==================================================== */
  form { display:flex; flex-direction:column; gap: var(--spacing-md); }
  .form-group { display:flex; flex-direction:column; gap: var(--spacing-xs); }
  label { font-weight:500; color: var(--white-text); }
  input, select, textarea {
    padding:0.75rem; font-size:1rem;
    border:1px solid var(--gray-selected);
    border-radius: var(--border-radius-sm);
    background-color: var(--dark-background);
    color: var(--white-text);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    width:100%;
  }
  input::placeholder, textarea::placeholder { color: var(--gray-selected); opacity:0.7; }
  input:focus, textarea:focus, select:focus {
    outline:none; border-color: var(--green-primary);
    box-shadow: 0 0 0 2px rgba(33,113,27,0.3);
  }
  
  .button, button {
    padding:0.75rem 1.25rem; font-size:1rem; cursor:pointer;
    border:none; border-radius: var(--border-radius-sm);
    font-weight:600; text-align:center;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .button-primary { background-color: var(--green-primary); color: var(--white-text); }
  .button-primary:hover { background-color:#1a5e16; transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.15); }
  .button-secondary { background-color: var(--gray-selected); color: var(--white-text); border:1px solid var(--gray-selected); }
  .button-secondary:hover { background-color:#656565; transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.15); }
  .button-outline { background:transparent; color: var(--green-primary); border:1px solid var(--green-primary); }
  .button-outline:hover { background-color: rgba(33,113,27,0.1); transform:translateY(-2px); }
  
  /* ====================================================
     ALERTAS E NOTIFICAÇÕES GLOBAIS
     ==================================================== */
  .alert { padding: var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-md); font-weight:500; position:relative; border-left:4px solid transparent; }
  .alert-success { background-color:rgba(33,113,27,0.2); color:var(--success); border-color:var(--success); }
  .alert-error   { background-color:rgba(231,76,60,0.2); color:var(--error);   border-color:var(--error);   }
  .alert-warning { background-color:rgba(243,156,18,0.2); color:var(--warning); border-color:var(--warning); }
  .alert-info    { background-color:rgba(143,173,140,0.2); color:var(--info);   border-color:var(--info);   }
  .notification {
    position:fixed; top:var(--spacing-md); right:var(--spacing-md);
    padding:var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px var(--shadow);
    z-index:1000;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    opacity:0; transform: translateY(-20px);
    max-width:350px;
  }
  .notification.show { opacity:1; transform: translateY(0); }
  .notification-success { background-color: var(--success); color:white; }
  .notification-error   { background-color: var(--error);   color:white; }
  .notification-warning { background-color: var(--warning); color:white; }
  .notification-info    { background-color: var(--info);    color:white; }
  
  /* ====================================================
     IMAGENS E MÍDIA
     ==================================================== */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* ====================================================
     RESPONSIVIDADE GLOBAL
     ==================================================== */
  @media(max-width:1024px){ .grid-4{ grid-template-columns:repeat(3,1fr);} }
  @media(max-width:768px){
    h1{ font-size:2rem;} h2{ font-size:1.6rem;}
    .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr);}  
    .info-group{ flex-direction:column; align-items:flex-start;}  
    .info-label, .info-value{ width:100%; margin-bottom:var(--spacing-sm);}  
    .button, button{ width:100%;}  
    .button-group{ flex-direction:column;}  
    table{ font-size:0.9rem;}  
  }
  @media(max-width:480px){
    h1{ font-size:1.8rem;}  
    .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr;}  
    .modal-content{ padding:var(--spacing-md);}  
  }
  
  /* ====================================================
     ESTILOS PARA IMPRESSÃO
     ==================================================== */
  @media print {
    body {
      background: white;
      color: black;
      font-size: 12pt;
    }
    
    header, footer, .no-print {
      display: none;
    }
    
    .container, .container-medium {
      width: 100%;
      max-width: 100%;
      padding: 0;
      margin: 0;
    }
    
    a {
      color: black;
      text-decoration: underline;
    }
    
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid;
      page-break-inside: avoid;
    }
    
    img {
      max-width: 100% !important;
      page-break-inside: avoid;
    }
    
    p, blockquote, ul, ol, dl, table {
      page-break-inside: avoid;
    }
    
    p, h2, h3 {
      orphans: 3;
      widows: 3;
    }
  }