/* El estilo "Kroth" vive aparte; @import debe ir antes que cualquier otra regla. */
@import url("kroth-tema.css");
/* Identidad de Grafi; las escalas y colores de las gráficas conservan su editor. */
:root{--acento:#567047;--acento-hover:#405938;--acento-suave:#edf2e6;--acento-texto:#3d5634;--anillo:0 0 0 3px #95ad7740}
.barra{flex-wrap:wrap;row-gap:8px}.volver-kroth{font-size:11px;text-decoration:none;color:var(--suave);white-space:nowrap}.volver-kroth:hover{color:var(--acento)}
.marca{letter-spacing:-.05em!important}.grafi-by{display:block;font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--suave);text-transform:uppercase;margin-top:1px}
.grafi-attribution{max-width:420px;margin:22px auto 0;text-align:center;font-size:11px;line-height:1.6;color:var(--suave)}
html[data-apariencia="oscuro"]{--acento:#b5c991;--acento-hover:#c6d8a6;--acento-texto:#d8e3c6}
@media(max-width:760px){.volver-kroth{flex-basis:100%;font-size:10px}.barra .pasos{order:3}.barra .acciones{gap:6px}.grafi-by{font-size:8px}}

/* Las columnas del archivo original se apilan en móvil, sin recortar controles. */
.barra{height:auto;min-height:64px;padding-top:12px;padding-bottom:12px}.barra .acciones{flex-wrap:wrap}.columna,#panel,#escenario{min-width:0}
@media(min-width:901px) and (max-width:1199px){.paso-datos{grid-template-columns:260px minmax(0,1fr) 280px}.barra{gap:14px}.barra .acciones{gap:6px}.columna{padding-left:14px;padding-right:14px}}
@media(max-width:900px){
 html,body{height:auto;min-height:100%}.barra{gap:10px;align-items:center}.volver-kroth{flex-basis:100%}.barra .marca{flex:1}.barra .acciones{width:100%;margin-left:0;gap:8px;order:3}.barra .pasos{order:2}.barra .interruptor{flex-shrink:0}.barra .cuenta{margin-left:auto}
 .paso-datos,.paso-grafica{display:flex;flex-direction:column;flex:none;gap:16px}.columna{width:100%;overflow:visible;min-width:0}.columna.explorar,.columna.seleccion{border:0}.columna.ficha{padding:20px}.ficha-vacia{min-height:120px}.lista-catalogo{max-height:52vh;overflow:auto}.pie-seleccion{margin-top:20px}.agregar .tarjeta{flex-wrap:wrap}.agregar .campo{min-width:0;width:100%}
 #panel{order:2;overflow:visible;padding:20px;border:0}#escenario{order:1;min-height:470px;padding:16px;justify-content:flex-start}#marco{max-width:100%;min-height:340px}.barra-grafica{flex-wrap:wrap}#reproductor{gap:6px;flex-wrap:wrap}#linea-tiempo{min-width:80px}.contenido-tabla{padding:16px;overflow-x:hidden}.contenido-tabla>*{min-width:0}.tabla-contenedor{max-width:100%;overflow:auto}.copiable{flex-wrap:wrap}.copiable input,.copiable textarea{min-width:0}.tarjeta-acceso{padding:22px}
}
@media(max-width:480px){.barra{padding:12px 16px}.barra .paso{padding:5px 8px;gap:5px}.barra .acciones .btn{font-size:11px;padding:8px}.barra .interruptor{font-size:11px}.barra .cuenta{margin-left:0}.paso-datos .fila{flex-wrap:wrap}.paso-datos .fila select{max-width:100%;min-width:0}.grafi-by{font-size:8px}}

html[data-estilo-datos="clay"] .admite-clay .barra{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px}