/* ==================================================================
// style.css
// CONTEÚDOS MODULARES POR PÁGINAS
================================================================== */

/* Global WEB */
/*****************************************************************/
/* ==== Containers de Layout ==== */
.app-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.form-panel { background-color: var(--color-bg-surface-1); padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.preview-panel { display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--color-bg-surface-1); padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.alert { margin-top: 10px; font-size: 0.9rem; color: #4CB96E; display: none; font-weight: 600; text-align: center; }

/* 1. Gerador de Assinatura (assinatura.html) */
/*****************************************************************/
.preview-column { display: flex; flex-direction: column; height: 100%; }
.preview-box { border: 1px dashed var(--border-color); padding: 20px; background-color: var(--color-bg-surface-1); border-radius: var(--radius-md); min-height: 200px; display: block; overflow-x: auto; align-items: center; justify-content: center; margin-bottom: 20px; }

/* 2. Gerador de XML (custom-plate.html) */
/*****************************************************************/
.form-panel-xml { min-height: 1029px; }
.preview-panel-xml { min-height: 1029px; }
.plate-id-display { color: var(--text-main); margin-top: 20px; font-size: 1.0em;display: flex; flex-direction: column;}
.glass-slide-wrapper { overflow: auto; background: #eef2f5; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); display: flex; justify-content: center; align-items: flex-start; min-height: 250px; }
.glass-slide { position: relative; background-image: url('https://floriatan.com.br/web/components/custom-plate/slide.svg'); background-size: 100% 100%; background-repeat: no-repeat; }
.droplet-grid { position: absolute; display: grid; }
.droplet-cell { display: flex; justify-content: center; align-items: center; }
.droplet { background-color: #4a90e2; border-radius: 50%; box-shadow: inset -1px -1px 2px rgba(0,0,0,0.3); transition: width 0.3s, height 0.3s; }
.grid-warning { font-size: 0.85rem; word-wrap: break-word; padding: 10px; background-color: var(--bg-error); border: 1px solid #fdbebd; color: var(--text-color-error); border-radius: 4px; }
.xml-output { width: 100%; height: 247px; padding: 20px; font-family: 'Courier New', Courier, monospace; font-size: 0.85em; background: #282c34; color: #abb2bf; border: none; border-radius: 4px; resize: vertical; white-space: pre; overflow-x: auto; margin-bottom: 15px; box-sizing: border-box; }

/*****************************************************************/
/* Responsividade (Media Queries) */
/*****************************************************************/
/* ==== Tablets ==== */
@media (max-width: 1024px) {
    .app-container { grid-template-columns: 1fr; }
    .form-panel-xml, .preview-panel-xml { min-height: auto; }
}

/* ==== Celulares ==== */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: auto; }
    .btn-group { flex-direction: column; }
    .btn-group .btn { width: 100%; }
}