/* ========================================================================
   MKR – Ata de Reunião (Front)
   Arquivo: public/css/ata-reuniao-front.css
   Escopo: somente dentro de .mkr-ata-wrapper para não vazar estilos
   Tema: claro (branco), sem gradientes
   ======================================================================== */

/* ---------------------------
   0) Design Tokens (CSS Vars)
   --------------------------- */
.mkr-ata-wrapper {
  --mkr-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji", "Liberation Sans", sans-serif;

  --mkr-radius-xs: 6px;
  --mkr-radius-sm: 10px;
  --mkr-radius-md: 14px;
  --mkr-radius-lg: 18px;

  --mkr-space-1: .25rem;
  --mkr-space-2: .5rem;
  --mkr-space-3: .75rem;
  --mkr-space-4: 1rem;
  --mkr-space-5: 1.25rem;
  --mkr-space-6: 1.5rem;
  --mkr-space-7: 2rem;
  --mkr-space-8: 2.5rem;

  --mkr-fs-xs: .78rem;
  --mkr-fs-sm: .9rem;
  --mkr-fs-md: 1rem;
  --mkr-fs-lg: 1.15rem;
  --mkr-fs-xl: 1.35rem;
  --mkr-fs-2xl: 1.8rem;

  /* Cores (tema claro) */
  --mkr-bg: #ffffff;          /* fundo geral */
  --mkr-panel: #ffffff;       /* cards/painéis */
  --mkr-panel-2: #f8fafc;     /* superfície 2 (cinza bem claro) */
  --mkr-text: #0f172a;        /* slate-900 */
  --mkr-muted: #475569;       /* slate-600 */
  --mkr-border: #e5e7eb;      /* gray-200 */
  --mkr-ring: #2563eb;        /* azul foco */

  --mkr-primary: #2563eb;
  --mkr-primary-600: #1d4ed8;
  --mkr-primary-700: #1e40af;

  --mkr-success: #16a34a;
  --mkr-success-700: #15803d;

  --mkr-danger: #ef4444;
  --mkr-danger-700: #b91c1c;

  --mkr-warning: #f59e0b;
  --mkr-info: #0ea5e9;

  --mkr-shadow-1: 0 10px 25px rgba(2, 6, 23, .06), 0 2px 8px rgba(2, 6, 23, .04);
  --mkr-shadow-2: 0 18px 40px rgba(2, 6, 23, .08);
}

/* ---------------------------
   1) Layout base e tipografia
   --------------------------- */
.mkr-ata-wrapper {
  font-family: var(--mkr-font-sans);
  color: var(--mkr-text);
  line-height: 1.5;
  position: relative;
  padding: var(--mkr-space-7) var(--mkr-space-4);
  background: var(--mkr-bg);
}

.mkr-ata-title {
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  margin: 0 0 var(--mkr-space-5);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--mkr-text);
}

.mkr-ata-subtitle {
  font-size: var(--mkr-fs-xl);
  margin: 0 0 var(--mkr-space-4);
  font-weight: 700;
  color: var(--mkr-text);
}

/* Containers / cards */
.mkr-ata-section {
  background: var(--mkr-panel);
  border: 1px solid var(--mkr-border);
  border-radius: var(--mkr-radius-lg);
  box-shadow: var(--mkr-shadow-1);
  padding: var(--mkr-space-6);
  margin-bottom: var(--mkr-space-7);
  transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}

.mkr-ata-section:hover {
  box-shadow: var(--mkr-shadow-2);
}

/* Grid responsivo */
.mkr-ata-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mkr-space-5);
}

.mkr-ata-grid > .mkr-ata-field {
  grid-column: span 6;
}

@media (max-width: 1024px) {
  .mkr-ata-grid > .mkr-ata-field {
    grid-column: span 12;
  }
}

/* Campo do formulário */
.mkr-ata-field {
  display: flex;
  flex-direction: column;
  gap: var(--mkr-space-2);
}

.mkr-ata-field label {
  font-size: var(--mkr-fs-sm);
  font-weight: 600;
  color: var(--mkr-muted);
}

.mkr-ata-field input[type="text"],
.mkr-ata-field input[type="url"],
.mkr-ata-field input[type="date"],
.mkr-ata-field input[type="time"],
.mkr-ata-field input[type="number"],
.mkr-ata-field textarea,
.mkr-ata-field select {
  appearance: none;
  width: 100%;
  font-size: var(--mkr-fs-md);
  padding: .7rem .85rem;
  color: var(--mkr-text);
  background: var(--mkr-panel-2);
  border: 1px solid var(--mkr-border);
  border-radius: var(--mkr-radius-sm);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .05s ease;
}

.mkr-ata-field textarea {
  min-height: 110px;
  resize: vertical;
}

.mkr-ata-field input:focus,
.mkr-ata-field textarea:focus,
.mkr-ata-field select:focus {
  border-color: var(--mkr-ring);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
  background: #ffffff;
}

.mkr-ata-field input:hover,
.mkr-ata-field textarea:hover,
.mkr-ata-field select:hover {
  background: #ffffff;
}

/* Estados inválidos/disabled */
.mkr-ata-field input:invalid,
.mkr-ata-field select:invalid,
.mkr-ata-field textarea:invalid {
  border-color: #f3b1b1;
}

.mkr-ata-field input[disabled],
.mkr-ata-field select[disabled],
.mkr-ata-field textarea[disabled] {
  opacity: .7;
  cursor: not-allowed;
}

/* Texto auxiliar */
.mkr-ata-project strong {
  display: inline-block;
  padding: .4rem .6rem;
  background: var(--mkr-panel-2);
  border: 1px solid var(--mkr-border);
  border-radius: var(--mkr-radius-xs);
  font-weight: 700;
}

/* ---------------------------
   2) Botões (sem gradiente)
   --------------------------- */
.mkr-ata-btn {
  --btn-bg: #eef2f7;
  --btn-fg: #0f172a;
  --btn-br: var(--mkr-border);
  --btn-shadow: var(--mkr-shadow-1);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: var(--mkr-fs-md);
  padding: .7rem 1rem;
  border-radius: var(--mkr-radius-md);
  border: 1px solid var(--btn-br);
  color: var(--btn-fg);
  background: var(--btn-bg);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
  user-select: none;
}

.mkr-ata-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow);
  background: #e9edf4;
}

.mkr-ata-btn:active {
  transform: translateY(0);
}

.mkr-ata-btn-primary {
  --btn-bg: var(--mkr-primary);
  --btn-fg: #ffffff;
  --btn-br: #1e3a8a; /* azul mais escuro */
  color: #ffffff;
  background: var(--mkr-primary);
  border-color: var(--btn-br);
}

.mkr-ata-btn-primary:hover {
  background: var(--mkr-primary-600);
}

.mkr-ata-btn-success {
  color: #ffffff;
  background: var(--mkr-success);
  border-color: #166534;
}

.mkr-ata-btn-success:hover {
  background: var(--mkr-success-700);
}

.mkr-ata-btn-danger {
  color: #ffffff;
  background: var(--mkr-danger);
  border-color: #991b1b;
}

.mkr-ata-btn-danger:hover {
  background: var(--mkr-danger-700);
}

.mkr-ata-btn.mini {
  padding: .45rem .6rem;
  font-size: var(--mkr-fs-sm);
  border-radius: var(--mkr-radius-sm);
}

/* Ações do formulário (rodapé) */
.mkr-ata-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkr-space-3);
  margin-top: var(--mkr-space-5);
}

/* ---------------------------
   3) Pauta Estruturada
   --------------------------- */
#mkr-ata-pauta-list {
  display: grid;
  gap: var(--mkr-space-5);
}

.mkr-ata-pauta-item {
  border: 1px dashed var(--mkr-border);
  border-radius: var(--mkr-radius-lg);
  padding: var(--mkr-space-5);
  background: var(--mkr-panel);
  animation: mkrSlideIn .2s ease;
}

@keyframes mkrSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mkr-ata-pauta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mkr-space-4);
}

.mkr-ata-pauta-head h4 {
  margin: 0;
  font-size: var(--mkr-fs-lg);
  font-weight: 800;
  letter-spacing: .01em;
}

/* blocos de decisões e ações */
.mkr-ata-subblock {
  padding: var(--mkr-space-4);
  border: 1px solid var(--mkr-border);
  border-radius: var(--mkr-radius-md);
  background: var(--mkr-panel);
  margin-top: var(--mkr-space-4);
}

.mkr-ata-subblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mkr-space-3);
}

.mkr-ata-subblock-head strong {
  font-size: var(--mkr-fs-md);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mkr-muted);
}

/* linhas internas (decisões/ações) */
.mkr-ata-minirow {
  border-left: 4px solid var(--mkr-primary);
  padding: var(--mkr-space-3) var(--mkr-space-3) var(--mkr-space-3) var(--mkr-space-4);
  background: #f3f7ff; /* leve azul claro sólido */
  border-radius: 10px;
  margin-bottom: var(--mkr-space-4);
}

.mkr-ata-grid.mini {
  gap: var(--mkr-space-3);
}

.mkr-ata-minirow .mkr-ata-btn-danger {
  margin-top: var(--mkr-space-3);
}

/* ---------------------------
   4) Participantes
   --------------------------- */
#mkr-ata-participantes {
  display: grid;
  gap: var(--mkr-space-4);
}

.mkr-ata-participante {
  background: var(--mkr-panel);
  border: 1px solid var(--mkr-border);
  border-radius: var(--mkr-radius-lg);
  padding: var(--mkr-space-4);
  box-shadow: var(--mkr-shadow-1);
}

.mkr-ata-participante-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mkr-space-3);
}

.mkr-ata-participante-head strong {
  font-weight: 800;
  font-size: var(--mkr-fs-lg);
}

.mkr-ata-participante-adder {
  margin-top: var(--mkr-space-4);
  align-items: end;
}

/* ---------------------------
   5) Mensagens / Alerts
   --------------------------- */
.mkr-ata-msg,
.mkr-ata-alert {
  padding: var(--mkr-space-4) var(--mkr-space-5);
  border-radius: var(--mkr-radius-md);
  border: 1px solid var(--mkr-border);
  background: var(--mkr-panel);
  box-shadow: var(--mkr-shadow-1);
  margin: var(--mkr-space-4) 0;
}

.mkr-ata-erro,
.mkr-ata-alert-error {
  border-color: #f3b1b1;
  background: #fff5f5;
  color: #7f1d1d;
}

.mkr-ata-alert-warning {
  border-color: #f5d38b;
  background: #fff8e6;
  color: #8a5a00;
}

.mkr-ata-alert-info {
  border-color: #b7e3f6;
  background: #f0fbff;
  color: #0d5e86;
}

.mkr-ata-alert-success {
  border-color: #a3e3b6;
  background: #effcf3;
  color: #166534;
}

/* ---------------------------
   6) Form Header/Footer
   --------------------------- */
.mkr-ata-form {
  display: block;
}

.mkr-ata-form .mkr-ata-section:first-of-type {
  position: relative;
}

.mkr-ata-form .mkr-ata-section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* ---------------------------
   7) Utilidades e helpers
   --------------------------- */
.inline { display: inline-block; }
.hidden { display: none !important; }
.center { text-align: center; }

.mkr-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .5rem;
  font-size: var(--mkr-fs-xs);
  border: 1px solid var(--mkr-border);
  background: var(--mkr-panel-2);
  color: var(--mkr-muted);
  border-radius: 999px;
}

/* Focus-visible acessível */
.mkr-ata-wrapper :where(button, [type="button"], [type="submit"], a, select, input, textarea):focus-visible {
  outline: 3px solid rgba(37, 99, 235, .65);
  outline-offset: 2px;
}

/* Placeholder suave */
.mkr-ata-wrapper ::placeholder {
  color: #9aa3af;
}

/* Checkbox baseline */
.mkr-ata-field input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--mkr-primary);
}

/* ---------------------------
   8) Responsividade adicional
   --------------------------- */
@media (max-width: 900px) {
  .mkr-ata-section { padding: var(--mkr-space-5); }
  .mkr-ata-actions { gap: var(--mkr-space-2); }
}

@media (max-width: 640px) {
  .mkr-ata-wrapper { padding: var(--mkr-space-6) var(--mkr-space-3); }
  .mkr-ata-title { font-size: clamp(1.4rem, 1.2rem + 1.2vw, 1.8rem); }
  .mkr-ata-subtitle { font-size: 1.1rem; }
  .mkr-ata-btn { width: 100%; }
}

/* ---------------------------
   9) Micro-interações
   --------------------------- */
.mkr-ata-field input,
.mkr-ata-field select,
.mkr-ata-field textarea {
  will-change: border-color, background, box-shadow, transform;
}

.mkr-ata-btn {
  will-change: transform, box-shadow, background, border-color;
}

/* ---------------------------
   10) Estados de carregamento/disabled de seção
   (sem gradiente; efeito de "pulse" suave)
   --------------------------- */
.mkr-ata-section.is-loading {
  position: relative;
  opacity: .85;
}

.mkr-ata-section.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(15, 23, 42, .03);
  animation: mkrPulse 1.1s ease-in-out infinite;
}

@keyframes mkrPulse {
  0%   { opacity: .25; }
  50%  { opacity: .55; }
  100% { opacity: .25; }
}

/* ---------------------------
   11) Tabelas (caso apareçam listas)
   --------------------------- */
.mkr-ata-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--mkr-radius-md);
  background: var(--mkr-panel);
  border: 1px solid var(--mkr-border);
}

.mkr-ata-table th,
.mkr-ata-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--mkr-border);
  text-align: left;
  font-size: var(--mkr-fs-sm);
}

.mkr-ata-table th {
  background: var(--mkr-panel-2);
  font-weight: 800;
  color: var(--mkr-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mkr-ata-table tr:hover td {
  background: #f9fafb;
}

/* ---------------------------
   12) Chips de status (úteis se você exibir)
   --------------------------- */
.mkr-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: var(--mkr-fs-xs);
  font-weight: 700;
  border: 1px solid var(--mkr-border);
  background: var(--mkr-panel-2);
}

.mkr-chip.primary  { border-color: #c7d2fe; color: var(--mkr-primary-700); }
.mkr-chip.success  { border-color: #bbf7d0; color: var(--mkr-success-700); }
.mkr-chip.danger   { border-color: #fecaca; color: var(--mkr-danger-700); }
.mkr-chip.warning  { border-color: #fde68a; color: #925d0b; }
.mkr-chip.info     { border-color: #bae6fd; color: #0d5e86; }

/* ---------------------------
   13) Print (para exportar/assinar)
   --------------------------- */
@media print {
  .mkr-ata-wrapper { background: #ffffff !important; padding: 0; }
  .mkr-ata-section { box-shadow: none !important; break-inside: avoid; border-color: #cbd5e1; }
  .mkr-ata-actions, .mkr-ata-btn { display: none !important; }
}

/* ---------------------------
   14) Links e tipografia auxiliar
   --------------------------- */
.mkr-ata-wrapper a {
  color: var(--mkr-primary-700);
  text-decoration: none;
  border-bottom: 1px dashed rgba(37, 99, 235, .5);
}

.mkr-ata-wrapper a:hover {
  color: var(--mkr-primary);
  border-bottom-style: solid;
}

.mkr-ata-wrapper small,
.mkr-ata-wrapper .hint {
  color: var(--mkr-muted);
  font-size: var(--mkr-fs-xs);
}

/* Espaço extra entre blocos específicos */
.mkr-ata-section + .mkr-ata-section {
  margin-top: var(--mkr-space-7);
}

/* Fim */