/* Layout base */
.vsj-container{max-width:1200px;margin:24px auto;padding:16px;border:1px solid #e5e5e5;border-radius:14px;background:#fff;color:#111;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.vsj-title{margin:0 0 12px;font-size:22px;font-weight:700}
.vsj-subtitle{margin:20px 0 8px;font-size:16px;font-weight:600}

/* Tabs */
.vsj-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.vsj-tab{background:#f3f3f3;border:1px solid #ddd;border-radius:10px;padding:8px 12px;cursor:pointer}
.vsj-tab.vsj-tab-active{background:#111;color:#fff;border-color:#111}
.vsj-tabpanel{display:none}
.vsj-tabpanel.vsj-tabpanel-active{display:block}

/* Form */
.vsj-form .vsj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.vsj-form label{display:flex;flex-direction:column;font-size:12px;color:#333;gap:6px}
.vsj-form input,.vsj-form select,.vsj-form textarea{border:1px solid #d0d0d0;border-radius:10px;padding:8px;background:#fafafa}
.vsj-form .vsj-col-2{grid-column:span 2}
.vsj-btn{margin-top:8px;background:#111;color:#fff;border:none;border-radius:12px;padding:10px 16px;cursor:pointer}
.vsj-btn:hover{opacity:.9}
.vsj-msg{min-height:18px;margin-top:8px;font-size:12px}
.vsj-msg.is-ok{color:#0a7d2d}
.vsj-msg.is-error{color:#b00020}

/* Filtros */
.vsj-filtros{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.vsj-filtros input,.vsj-filtros select{border:1px solid #ccc;border-radius:8px;padding:6px 10px}
.vsj-filtros button{background:#444;color:#fff;border:none;border-radius:8px;padding:6px 12px;cursor:pointer}
.vsj-filtros button:hover{background:#222}
.vsj-filtros button#export-csv{background:#0073aa}
.vsj-filtros button#export-csv:hover{background:#005177}

/* Tabla */
.vsj-table-wrap{margin-top:16px;overflow:auto;border:1px solid #eee;border-radius:12px}
.vsj-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto;min-width:980px}
.vsj-table th,.vsj-table td{
  border-bottom:1px solid #eee;
  padding:8px 10px;
  vertical-align:middle;
  text-align:left;
  /* Legibilidad: NO partir palabras y usar elipsis en todas las vistas */
  white-space:nowrap;
  word-break:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vsj-table thead th{position:sticky;top:0;background:#f6f6f6;font-weight:600}
.vsj-center{text-align:center}
.vsj-delete{background:#f5f5f5;border:1px solid #ddd;border-radius:10px;padding:6px 10px;cursor:pointer}
.vsj-delete:hover{background:#eee}
.vsj-ok{outline:2px solid #66bb6a;transition:all .2s}

/* Permitir que Observaciones sí pueda tener varias líneas si necesitás leer más */
.vsj-table td[data-field="observaciones"]{
  white-space:normal;
  text-overflow:clip;
}

/* Inputs mínimos para que no se achiquen */
.vsj-table td input[type="number"]{ min-width:88px; }
.vsj-table td input[type="date"]{   min-width:140px; }
.vsj-table td select{               min-width:120px; }

@media (max-width:900px){
 .vsj-form .vsj-grid{grid-template-columns:repeat(2,1fr)}
 .vsj-form .vsj-col-2{grid-column:span 2}
 .vsj-table{font-size:12px}
}