/* demo.css — Solo estilos sin equivalente en el theme */

/* ---- Tarjeta danger ---- */
.demo-danger-card { border-color: rgba(220,40,40,.22); }
.demo-danger-card .ui-module-head { border-bottom-color: rgba(220,40,40,.18); }
body.light .demo-danger-card { background: rgba(220,40,40,.03); }

/* ---- Fila de controles (selectores + botón en línea) ---- */
.demo-controls-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
/* Anchos fijos para los selects: evita que se estiren al 100% */
.demo-field-sm { flex: 0 0 140px; }   /* Mes */
.demo-field-xs { flex: 0 0 82px;  }   /* Año */
.demo-field-md { flex: 0 0 100px; }   /* Cantidad */
/* Botón alineado con los selects */
.demo-btn-gen  { flex: 0 0 auto; align-self: flex-end; }
/* Hint de texto junto al botón */
.demo-hint-inline {
    margin: 0;
    align-self: flex-end;
    padding-bottom: 10px;  /* alinea visualmente con la base del botón */
}

/* ---- Lista "qué se genera" en 2 columnas ---- */
.demo-include-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.demo-include-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 24px;
}
.demo-include-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.35;
}
.demo-include-list li::before {
    content: "✓";
    flex: 0 0 auto;
    color: #22c9a5;
    font-weight: 700;
    font-size: 12px;
    margin-top: 1px;
}

/* ---- Log de operaciones ---- */
.demo-log {
    display: none;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(91,170,224,.22) transparent;
}
.demo-log::-webkit-scrollbar { width: 5px; }
.demo-log::-webkit-scrollbar-thumb { background: rgba(91,170,224,.22); border-radius: 999px; }
.demo-log-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid transparent;
}
.demo-log-ts {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-family: monospace;
    color: var(--text-muted);
}
.demo-log-success { background: rgba(0,180,120,.08); border-color: rgba(0,180,120,.22); color: #7fe6d6; }
.demo-log-danger  { background: rgba(220,40,40,.07);  border-color: rgba(220,40,40,.20);  color: rgba(255,140,140,.90); }
.demo-log-error   { background: rgba(220,120,40,.07); border-color: rgba(220,120,40,.20); color: rgba(255,180,100,.90); }
.demo-log-info    { background: rgba(91,170,224,.07); border-color: rgba(91,170,224,.18); color: var(--text-soft); }

body.light .demo-log-success { color: #0a7a5c; }
body.light .demo-log-danger  { color: #b02020; }
body.light .demo-log-error   { color: #a05010; }