/**
 * v2-components.css — Componentes canónicos V2
 * Botones, badges, tabs/menú, forms, tablas, alertas, toasts, modales, notificaciones, búsqueda
 */

/* =============================================
   BOTONES (.v2-btn canónico, .btn compatibilidad)
   ============================================= */
.v2-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--v2-font-family);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.1;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.v2-btn:hover, .btn:hover { text-decoration: none; }
.v2-btn:disabled, .btn:disabled,
.v2-btn.disabled, .btn.disabled { opacity: 0.65; cursor: not-allowed; pointer-events: none; }
.v2-btn:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--v2-focus-ring); }

/* Tamaños */
.v2-btn-sm, .btn-sm { font-size: var(--v2-font-size-sm); padding: var(--v2-space-1) var(--v2-space-3); }
.v2-btn-md, .btn-md { padding: 8px 14px; }
.v2-btn-lg, .btn-lg { padding: 12px 20px; font-size: 1em; border-radius: 10px; }

/* Variantes */
.v2-btn-primary, .btn-primary {
  background: var(--v2-primary); color: #fff; border-color: var(--v2-primary);
}
.v2-btn-primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: var(--v2-primary-hover); border-color: var(--v2-primary-hover);
}

.v2-btn-secondary, .btn-secondary {
  background: #e9ecef; color: var(--v2-text); border-color: #d7dce1;
}
.v2-btn-secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background: #dde2e7; border-color: #ccd3d9;
}

.v2-btn-danger, .btn-danger {
  background: var(--v2-danger); color: #fff; border-color: var(--v2-danger);
}
.v2-btn-danger:hover:not(:disabled), .btn-danger:hover:not(:disabled) {
  background: #c82333; border-color: #bd1f2f;
}

.v2-btn-success, .btn-success {
  background: var(--v2-success); color: #fff; border-color: var(--v2-success);
}
.v2-btn-success:hover:not(:disabled), .btn-success:hover:not(:disabled) {
  background: #218838; border-color: #1e7e34;
}

.v2-btn-warning, .btn-warning {
  background: #f0ad4e; color: #fff; border-color: #eea236;
}
.v2-btn-warning:hover:not(:disabled), .btn-warning:hover:not(:disabled) {
  background: #ec971f; border-color: #d58512;
}

.v2-btn-outline, .btn-outline {
  background: transparent; color: var(--v2-primary); border-color: var(--v2-primary);
}
.v2-btn-outline:hover:not(:disabled), .btn-outline:hover:not(:disabled) {
  background: var(--v2-primary); color: #fff;
}

.v2-btn-ghost, .btn-ghost {
  background: transparent; border-color: transparent; color: var(--v2-text);
}
.v2-btn-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
  background: var(--v2-bg-subtle);
}

/* Acciones grid 2x2 (Proveedores, etc.) */
.acciones-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px;
  justify-content: center;
  align-items: center;
}
.acciones-grid .acciones-inline-form {
  display: contents;
}
.acciones-grid > * {
  width: auto !important;
  margin: 0 !important;
}
.acciones-grid button,
.acciones-grid a {
  width: auto !important;
  display: inline-flex;
}

/* Botón eliminar */
.btn-eliminar {
  background: var(--v2-danger); color: white; border: none;
  padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 1em;
}
.btn-eliminar:hover { background: #c82333; transform: scale(1.05); }

/* Botones de acción en tablas (compatibilidad JS) */
.btn-accion-ver, .btn-accion-editar, .btn-accion-eliminar,
.btn-accion-guardar, .btn-accion-cancelar, .btn-accion-descargar,
.btn-accion-subir, .btn-accion-success, .btn-accion-info, .btn-accion-warning {
  display: inline-block; padding: 5px 10px; border: none; border-radius: 5px;
  font-size: 0.8em; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: all 0.2s; white-space: nowrap; text-align: center; line-height: 1.4;
  vertical-align: middle; text-decoration: none;
}
a.btn-accion-ver, a.btn-accion-editar, a.btn-accion-eliminar,
a.btn-accion-success, a.btn-accion-info, a.btn-accion-warning,
a.btn-accion-cancelar, a.btn-accion-descargar, a.btn-accion-subir {
  text-decoration: none !important;
}
.btn-accion-ver { background: #4299e1; color: white; }
.btn-accion-ver:hover { background: #3182ce; transform: translateY(-1px); }
.btn-accion-editar { background: var(--v2-secondary); color: white; }
.btn-accion-editar:hover { background: var(--v2-secondary-hover); transform: translateY(-1px); }
.btn-accion-guardar, .btn-accion-success { background: var(--v2-success); color: white; }
.btn-accion-guardar:hover, .btn-accion-success:hover { background: #218838; transform: translateY(-1px); }
.btn-accion-cancelar { background: #a0aec0; color: white; }
.btn-accion-cancelar:hover { background: var(--v2-secondary); transform: translateY(-1px); }
.btn-accion-eliminar { background: var(--v2-danger); color: white; }
.btn-accion-eliminar:hover { background: #c82333; transform: translateY(-1px); }
.btn-accion-descargar, .btn-accion-info { background: #4299e1; color: white; }
.btn-accion-descargar:hover, .btn-accion-info:hover { background: #3182ce; transform: translateY(-1px); }
.btn-accion-subir { background: #9f7aea; color: white; }
.btn-accion-subir:hover { background: #805ad5; transform: translateY(-1px); }
.btn-accion-warning { background: var(--v2-warning); color: var(--v2-text); }

.acciones-botones {
  display: flex; gap: 4px; justify-content: center; align-items: center;
  flex-wrap: nowrap; width: 100%; margin: 0 auto; padding: 0;
}

/* Confirmación modal botones */
.btn-confirmar, .btn-cancelar {
  padding: 0.5rem 1.5rem; border-radius: var(--v2-radius-md);
  font-size: 1rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all var(--v2-transition-base); min-width: 100px;
}
.btn-confirmar { background: var(--v2-danger); color: white; border-color: var(--v2-danger); }
.btn-confirmar:hover { background: #c82333; transform: translateY(-2px); box-shadow: var(--v2-shadow-md); }
.btn-cancelar { background: var(--v2-bg-subtle); color: var(--v2-text); border-color: var(--v2-border); }
.btn-cancelar:hover { background: var(--v2-bg-lighter); transform: translateY(-2px); }

/* =============================================
   BADGES (.v2-badge canónico, .badge compatibilidad)
   ============================================= */
.v2-badge, .badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--v2-radius-sm);
  text-transform: uppercase;
}
.v2-badge-success, .badge-success { background-color: var(--v2-success); color: white; }
.v2-badge-danger, .badge-danger { background-color: var(--v2-danger); color: white; }
.v2-badge-warning, .badge-warning { background-color: var(--v2-warning); color: var(--v2-text); }
.v2-badge-info, .badge-info { background-color: var(--v2-info); color: white; }
.v2-badge-secondary, .badge-secondary,
.v2-badge-neutral, .badge-neutral { background-color: var(--v2-neutral); color: white; }
.v2-badge-primary, .badge-primary { background-color: var(--v2-primary); color: white; }

/* Badge estado (píldora) */
.v2-badge-estado {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; border-radius: 20px; font-size: 0.85em;
  font-weight: 500; line-height: 1.2; min-height: 28px;
}

/* =============================================
   TABS / MENÚ V2
   ============================================= */
.v2-menu {
  display: flex; gap: 10px; margin: 0; padding: 15px;
  background: var(--v2-bg-subtle); border-radius: var(--v2-radius-md); flex-wrap: wrap;
}
.v2-menu a {
  padding: 10px 20px; text-decoration: none; color: var(--v2-text);
  background: white; border-radius: 5px; border: 1px solid var(--v2-border);
  transition: all 0.2s; font-weight: 500;
}
.v2-menu a:hover { background: var(--v2-primary); color: white; border-color: var(--v2-primary); text-decoration: none; }
.v2-menu a.active { background: var(--v2-primary); color: white; border-color: var(--v2-primary); }
.v2-menu-separator { width: 1px; background: var(--v2-border); margin: 0 5px; align-self: stretch; }

/* Legacy tabs (nav-tabs/nav-tab) */
.nav-tabs {
  display: flex; gap: 12px; flex-wrap: nowrap; background: white;
  padding: 12px; border-radius: var(--v2-radius-xl);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  overflow-x: auto; overflow-y: hidden; justify-content: space-between;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.nav-tab {
  padding: 8px 16px; background: #f0f0f0; border: none;
  border-radius: var(--v2-radius-md); cursor: pointer;
  font-size: 0.85em; font-weight: 600; color: var(--v2-text-muted);
  transition: all 0.3s; white-space: nowrap; flex: 1 1 auto; min-width: fit-content; text-align: center;
}
.nav-tab:hover { background: var(--v2-primary); color: white; transform: translateY(-2px); }
.nav-tab.active { background: var(--v2-primary); color: white; }

/* =============================================
   FORMS
   ============================================= */
.form-group {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; position: relative;
}
.form-group label {
  display: block; font-weight: 600; color: var(--v2-text); font-size: 0.9em; margin-bottom: 0;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  padding: 10px 12px; border: 1px solid #d9dde1; border-radius: var(--v2-radius-md);
  font-size: 0.95em; background: var(--v2-bg); color: var(--v2-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}
.form-group input[readonly], .form-group select[disabled], .form-group textarea[readonly] {
  background: var(--v2-bg-lighter); color: var(--v2-text-muted); cursor: not-allowed;
}

.form-label {
  display: block; margin-bottom: var(--v2-space-1); font-weight: 600; color: var(--v2-text);
}
.form-control {
  width: 100%; min-height: 2.25rem;
  padding: var(--v2-space-2) var(--v2-space-3);
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm);
  font-size: var(--v2-font-size-base);
}
.form-control:focus { border-color: var(--v2-primary); box-shadow: 0 0 0 2px var(--v2-primary-light); }
.form-help { margin-top: var(--v2-space-1); font-size: var(--v2-font-size-sm); color: var(--v2-text-muted); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.form-row-1 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.form-grid { display: grid; gap: var(--v2-space-4); }
.form-grid--two { grid-template-columns: repeat(2, 1fr); }
.form-grid--three { grid-template-columns: repeat(3, 1fr); }

.search-box { margin-bottom: 20px; }

/* Checkbox inline V2 */
.v2-checkbox-inline { display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; }
.v2-checkbox-inline input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; }
.v2-checkbox-inline label { margin: 0; font-weight: normal; cursor: pointer; user-select: none; }
.v2-checkbox-inline--right { justify-content: flex-end; }

/* Stock footnote */
.v2-stock-footnote { font-size: 0.85em; color: var(--v2-text-muted); margin-top: 4px; display: block; }

/* =============================================
   TABLAS V2 CANÓNICAS — Contrato DataTable V2
   ============================================= */

/* === Wrapper engine V2: scroll horizontal cuando la tabla excede; tabla siempre 100% ancho === */
.v2-table-wrapper,
.v2-table-wrap,
.table-container {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 1rem;
}

/* === .v2-table — Tabla canónica V2 (100% ancho; auto-layout por contenido; mínimos en ch) === */
.v2-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--v2-font-size-sm);
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-md);
  overflow: hidden;
}
/* Si la suma de anchos de colgroup excede 100%, la tabla crece y el wrapper hace scroll */

/* Por defecto: nowrap + ellipsis; NUNCA wrap por carácter (word-break/overflow-wrap explícitos) */
.v2-table th,
.v2-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--v2-border);
  border-right: 1px solid var(--v2-border);
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}
.v2-table th:last-child,
.v2-table td:last-child { border-right: none; }

/* Cabecera: centrado canónico; NUNCA display -webkit-box (mantener table-cell) */
.v2-table thead th {
  background: var(--v2-primary);
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid var(--v2-primary-hover);
  text-align: center;
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
}
.v2-table thead th.v2-td--num { text-align: center; }

/* Body: una sola línea con ellipsis por defecto; sin romper por carácter */
.v2-table tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

/* Celdas texto (Descripción/Proyecto): clamp 2 líneas; break-word sin romper por carácter */
.v2-table tbody td.v2-td--text-clamp {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Header que puede partir en 2 líneas (wrap_header). NUNCA -webkit-box en th (rompe layout). */
.v2-table thead th.v2-th--wrap {
  display: table-cell;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  max-height: 2.4em;
}

/* === Colgroup + celdas: SOLO mínimos en ch (auto-layout; contenido influye) === */
.v2-table .v2-col--date,
.v2-table th.v2-col--date, .v2-table td.v2-col--date { min-width: 10ch; }
.v2-table .v2-col--datetime,
.v2-table th.v2-col--datetime, .v2-table td.v2-col--datetime { min-width: 16ch; }
.v2-table .v2-col--code,
.v2-table th.v2-col--code, .v2-table td.v2-col--code { min-width: 9ch; }
.v2-table .v2-col--reg,
.v2-table th.v2-col--reg, .v2-table td.v2-col--reg { min-width: 6ch; }
.v2-table .v2-col--type,
.v2-table th.v2-col--type, .v2-table td.v2-col--type { min-width: 8ch; }
.v2-table .v2-col--user,
.v2-table th.v2-col--user, .v2-table td.v2-col--user { min-width: 10ch; }
.v2-table .v2-col--user-sm,
.v2-table th.v2-col--user-sm, .v2-table td.v2-col--user-sm { min-width: 10ch; }
.v2-table .v2-col--num-sm,
.v2-table th.v2-col--num-sm, .v2-table td.v2-col--num-sm { min-width: 8ch; }
.v2-table .v2-col--num,
.v2-table th.v2-col--num, .v2-table td.v2-col--num { min-width: 10ch; }
.v2-table .v2-col--unit,
.v2-table th.v2-col--unit, .v2-table td.v2-col--unit { min-width: 6ch; }
.v2-table .v2-col--unit-sm,
.v2-table th.v2-col--unit-sm, .v2-table td.v2-col--unit-sm { min-width: 6ch; }
.v2-table .v2-col--status,
.v2-table th.v2-col--status, .v2-table td.v2-col--status { min-width: 10ch; }
.v2-table .v2-col--actions,
.v2-table th.v2-col--actions, .v2-table td.v2-col--actions { min-width: 10ch; }
.v2-table .v2-col--text-sm,
.v2-table th.v2-col--text-sm, .v2-table td.v2-col--text-sm { min-width: 14ch; }
.v2-table .v2-col--text-md,
.v2-table th.v2-col--text-md, .v2-table td.v2-col--text-md { min-width: 20ch; }
.v2-table .v2-col--text-lg,
.v2-table th.v2-col--text-lg, .v2-table td.v2-col--text-lg { min-width: 28ch; }
.v2-table .v2-col--text,
.v2-table th.v2-col--text, .v2-table td.v2-col--text { min-width: 20ch; }
.v2-table .v2-col--text-priority,
.v2-table th.v2-col--text-priority, .v2-table td.v2-col--text-priority { min-width: 28ch; }
.v2-table .v2-col--entity-code,
.v2-table th.v2-col--entity-code, .v2-table td.v2-col--entity-code { min-width: 9ch; }
.v2-table .v2-col--entity-name,
.v2-table th.v2-col--entity-name, .v2-table td.v2-col--entity-name { min-width: 20ch; }
.v2-table .v2-col--entity-both,
.v2-table th.v2-col--entity-both, .v2-table td.v2-col--entity-both { min-width: 28ch; }

.v2-table tbody tr { background: var(--v2-bg); }
.v2-table tbody tr:nth-child(even) { background: var(--v2-bg-subtle); }
.v2-table tbody tr:hover { background: var(--v2-primary-light); }

/* td transparente para que el fondo del tr sea visible */
.v2-table td { background: transparent !important; }

/* Celdas que permiten wrap (legacy): break-word sin romper por carácter */
.v2-table .v2-td--wrap {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  overflow: visible;
  text-overflow: clip;
}

/* Nowrap obligatorio para columnas fijas (Fecha/Código/Num/Tipo/Usuario/Reg/Unidad/Estado) */
.v2-table .v2-td--nowrap { white-space: nowrap; }
.v2-table th.v2-td--nowrap { white-space: nowrap; }
/* Reg.: alineación derecha */
.v2-table .v2-td--reg { text-align: right; }
.v2-table th.v2-td--reg { text-align: right; }
/* Alineación semántica */
.v2-table .v2-td--num { text-align: right; }
.v2-table .v2-td--center { text-align: center; }
.v2-table th.v2-td--num { text-align: right; }
.v2-table th.v2-td--center { text-align: center; }

/* Columna Acciones: botones inline sin wrap, compactos */
.v2-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.v2-table td .v2-actions .v2-btn,
.v2-table td .v2-actions .btn,
.v2-table td .v2-actions .btn-accion-ver,
.v2-table td .v2-actions .btn-accion-editar,
.v2-table td .v2-actions .btn-accion-eliminar,
.v2-table td .v2-actions .btn-accion-success,
.v2-table td .v2-actions .btn-accion-info,
.v2-table td .v2-actions .btn-accion-warning {
  padding: 4px 10px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Modificador denso: muchas columnas, headers y botones en una fila */
.v2-table--dense {
  font-size: 0.8rem;
}
.v2-table--dense th,
.v2-table--dense td {
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-table--dense thead th { white-space: nowrap; }
.v2-table--dense td .v2-actions .v2-btn,
.v2-table--dense td .v2-actions .btn,
.v2-table--dense td .v2-actions .btn-accion-ver,
.v2-table--dense td .v2-actions .btn-accion-editar,
.v2-table--dense td .v2-actions .btn-accion-eliminar,
.v2-table--dense td .v2-actions .btn-accion-success,
.v2-table--dense td .v2-actions .btn-accion-info,
.v2-table--dense td .v2-actions .btn-accion-warning {
  padding: 2px 6px;
  font-size: 0.75rem;
}

/* Variantes */
.v2-table--bordered { border: 1px solid var(--v2-border); }
.v2-table--bordered th, .v2-table--bordered td { border: 1px solid var(--v2-border); }
.v2-table--bordered thead th { border-bottom: 2px solid var(--v2-border); }

.v2-table--compact { font-size: 0.85em; }
.v2-table--compact th, .v2-table--compact td { padding: 0.4rem 0.5rem; vertical-align: middle; }
.v2-table--compact th { font-weight: 600; white-space: nowrap; }

.v2-table-scroll-x { overflow-x: auto; margin-bottom: 1rem; }
.v2-table-fixed { table-layout: fixed; width: 100%; }

.v2-table-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* Footer de tabla */
.v2-table-footer { background-color: var(--v2-bg-subtle); font-weight: 600; }
.v2-table-footer td { border-top: 2px solid var(--v2-border); }

/* Input integrado en tablas */
.v2-table-input {
  border: 0; outline: none; background: transparent; width: 100%;
  padding: 0.25rem 0.5rem; text-align: center;
}
.v2-table-input:focus { outline: 2px solid rgba(102, 126, 234, 0.5); outline-offset: 2px; background: rgba(255, 255, 255, 0.9); }

/* Inputs de cantidad */
.v2-input-cantidad { width: 120px; text-align: right; display: inline-block; }
.v2-input-cantidad-recepcion { width: 120px; text-align: right; display: inline-block; font-size: 0.9em; padding: 6px 10px; }

/* Transferencias anchos */
.v2-table-transferencias { width: 100%; }
.v2-table-transferencias th:nth-child(1) { width: 10%; }
.v2-table-transferencias th:nth-child(2) { width: 15%; }
.v2-table-transferencias th:nth-child(3) { width: 8%; }
.v2-table-transferencias th:nth-child(4) { width: 10%; }
.v2-table-transferencias th:nth-child(5) { width: 12%; }
.v2-table-transferencias th:nth-child(6) { width: 12%; }
.v2-table-transferencias th:nth-child(7) { width: 12%; }
.v2-table-transferencias th:nth-child(8) { width: 12%; }
.v2-table-transferencias th:nth-child(9) { width: 9%; }

/* Requisición items columns */
.v2-table-requisicion-items td.v2-table-stock { color: var(--v2-text-muted); font-size: 0.9em; }
.v2-table-requisicion-items .v2-table-cantidad { font-weight: 600; }
.v2-table-requisicion-items .v2-col-codigo { width: 100px; max-width: 110px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-col-desc { min-width: 220px; white-space: normal; word-break: break-word; }
.v2-table-requisicion-items .v2-col-unidad { width: 56px; max-width: 70px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-col-stock { width: 7%; min-width: 52px; max-width: 72px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-col-cant { width: 80px; max-width: 95px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-col-fecha { width: 120px; max-width: 130px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-col-frentecc { width: 110px; max-width: 130px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-col-obs { min-width: 120px; max-width: 260px; white-space: normal; word-break: break-word; }
.v2-table-requisicion-items .v2-col-actions { min-width: 200px; width: 200px; white-space: nowrap; text-align: center; }
.v2-table-requisicion-items .v2-table-actions-wrap { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.v2-table-requisicion-items .v2-table-actions-wrap .btn,
.v2-table-requisicion-items .v2-table-actions-wrap .v2-btn { padding: 4px 10px; font-size: 0.8rem; }

/* === .table-v2 — Alias (usado por templates migrados en paso anterior) === */
.table-v2 {
  width: 100%; border-collapse: collapse; font-size: var(--v2-font-size-sm);
  background: var(--v2-bg); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-md);
  overflow: hidden;
}
.table-v2 th, .table-v2 td {
  padding: 12px 14px; border-bottom: 1px solid var(--v2-border);
  border-right: 1px solid var(--v2-border); text-align: left;
}
.table-v2 th:last-child, .table-v2 td:last-child { border-right: none; }
.table-v2 thead th { background: var(--v2-primary); color: #fff; font-weight: 600; }
.table-v2 tbody tr:nth-child(even) { background: var(--v2-bg-subtle); }
.table-v2 tbody tr:hover { background: var(--v2-primary-light); }
.table-v2 td { background: transparent !important; }

/* Column width utilities */
.v2-col-w-xs { width: 4%; min-width: 40px; }
.v2-col-w-sm { width: 8%; min-width: 60px; }
.v2-col-w-md { width: 12%; min-width: 100px; }
.v2-col-w-lg { width: 16%; min-width: 140px; }
.v2-col-w-xl { width: 24%; min-width: 200px; }
.v2-w-fecha { width: 9%; } .v2-w-codigo { width: 12%; } .v2-w-descripcion { width: 22%; }
.v2-w-tipo { width: 7%; } .v2-w-cantidad { width: 7%; } .v2-w-unidad { width: 6%; }
.v2-w-almacen { width: 11%; } .v2-w-proyecto { width: 11%; }
.v2-w-usuario { width: 10%; } .v2-w-reg { width: 5%; }

/* Text alignment (scoped to v2 tables AND globally for compatibility) */
.v2-text-center, .text-center { text-align: center !important; }
.v2-text-right, .text-right { text-align: right !important; }
.v2-text-left, .text-left { text-align: left !important; }
.v2-nowrap { white-space: nowrap; }
.v2-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-hidden { display: none; }

/* Table action cells — auto-center when containing btns */
.v2-table td:has(.btn-accion-ver),
.v2-table td:has(.btn-accion-editar),
.v2-table td:has(.btn-accion-eliminar),
.v2-table td:has(.acciones-botones) {
  white-space: nowrap; text-align: center !important; vertical-align: middle !important; padding: 8px 4px !important;
}

/* =============================================
   DataTableV2 (Motor Informes v1 — solo skin)
   ============================================= */
.v2-datatable-v2 { margin-top: 0.5rem; }
.v2-dt-meta { color: var(--v2-text-muted); font-size: 0.9em; margin-bottom: 12px; }
.v2-dt-table { font-size: var(--v2-font-size-sm); color: var(--v2-text); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-md); border-collapse: collapse; background: var(--v2-bg); }
.v2-dt-table th, .v2-dt-table td { padding: var(--v2-space-2) var(--v2-space-3); border: 1px solid var(--v2-border); }
.v2-dt-table thead th { background-color: var(--v2-bg-subtle); font-weight: 600; color: var(--v2-text); }
.v2-dt-table tbody tr:nth-child(even) { background-color: var(--v2-bg-subtle); }
.v2-dt-table tbody tr:hover { background-color: var(--v2-primary-light); }
.v2-dt-table .v2-dt-right { text-align: right !important; }
.v2-dt-table .v2-dt-center { text-align: center !important; }
.v2-dt-table .v2-dt-left { text-align: left !important; }
.v2-dt-ellipsis { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.v2-dt-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.9em; font-weight: 500; }
.v2-dt-badge--yes { background: var(--v2-success-bg); color: var(--v2-success-text); }
.v2-dt-badge--no { background: var(--v2-danger-bg); color: var(--v2-danger-text); }

/* =============================================
   ALERTAS
   ============================================= */
.alert {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid transparent; font-size: 0.95em; line-height: 1.4;
  margin-bottom: 20px;
}
.alert-success { background: #e8f7ee; border-color: #bfe8cf; color: #216c3a; }
.alert-warning { background: #fff5e6; border-color: #ffd9a8; color: #8a5b12; }
.alert-error, .alert-danger { background: #fdecee; border-color: #f5c2c7; color: #8a1f2d; }
.alert-info { background: #eef4ff; border-color: #cddcff; color: #2a4b8d; }
.alert.show { display: block; }

/* Alert container */
.alert-container { margin-bottom: var(--v2-space-0); }

/* =============================================
   UI ALERTS — Toast System
   ============================================= */
.ui-alerts-toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px; max-width: 400px; pointer-events: none;
}
.ui-alert-toast {
  background: white; border-radius: var(--v2-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  min-width: 300px; max-width: 400px;
  opacity: 0; transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto; border-left: 4px solid;
}
.ui-alert-toast--visible { opacity: 1; transform: translateX(0); }
.ui-alert-toast--success { border-left-color: var(--v2-success); background: #f8fff9; }
.ui-alert-toast--error { border-left-color: var(--v2-danger); background: #fff8f8; }
.ui-alert-toast--info { border-left-color: var(--v2-info); background: #f0f9ff; }
.ui-alert-toast--warning { border-left-color: var(--v2-warning); background: #fffef5; }
.ui-alert-toast-icon { font-size: 1.2em; flex-shrink: 0; }
.ui-alert-toast-message { flex: 1; color: var(--v2-text); font-size: 0.95em; line-height: 1.4; }
.ui-alert-toast-close {
  background: none; border: none; font-size: 1.5em; color: var(--v2-text-lighter);
  cursor: pointer; padding: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--v2-radius-sm); transition: background 0.2s, color 0.2s;
}
.ui-alert-toast-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--v2-text); }

/* UI Alert Modals */
.ui-alert-modal-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); z-index: 9999;
  opacity: 0; transition: opacity 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.ui-alert-modal-backdrop--visible { opacity: 1; }
.ui-alert-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
  width: 90%; max-width: 500px; background: white;
  border-radius: var(--v2-radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 10000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
}
.ui-alert-modal--visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ui-alert-modal-content { display: flex; flex-direction: column; height: 100%; }
.ui-alert-modal-header { padding: 20px 24px; border-bottom: 1px solid #e0e0e0; background: var(--v2-bg-subtle); border-radius: var(--v2-radius-md) var(--v2-radius-md) 0 0; }
.ui-alert-modal-title { margin: 0; font-size: 1.25em; font-weight: 600; color: var(--v2-text); }
.ui-alert-modal-body { padding: 24px; flex: 1; overflow-y: auto; }
.ui-alert-modal-message { margin: 0; color: var(--v2-text-muted); line-height: 1.6; font-size: 1em; }
.ui-alert-modal-footer {
  padding: 16px 24px; border-top: 1px solid #e0e0e0; background: var(--v2-bg-subtle);
  border-radius: 0 0 var(--v2-radius-md) var(--v2-radius-md);
  display: flex; justify-content: flex-end; gap: 10px;
}
.ui-alert-modal-btn-ok, .ui-alert-modal-btn-cancel {
  min-width: 100px; padding: 8px 16px; font-size: 0.95em;
  border-radius: var(--v2-radius-sm); cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.ui-alert-modal-btn-ok:active, .ui-alert-modal-btn-cancel:active { transform: scale(0.98); }

/* =============================================
   MODAL CONFIRMACIÓN
   ============================================= */
.modal-confirmacion {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 20000; animation: fadeIn var(--v2-transition-base);
  backdrop-filter: blur(2px); padding: 20px;
}
.modal-confirmacion-contenido {
  background: var(--v2-bg); border-radius: 14px; padding: 24px;
  width: 100%; max-width: 480px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  animation: slideUp var(--v2-transition-base);
}
.modal-confirmacion-titulo { margin: 0 0 8px; font-size: 1.2em; color: var(--v2-text); }
.modal-confirmacion-mensaje { margin: 0 0 18px; color: var(--v2-text-muted); line-height: 1.5; }
.modal-confirmacion-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-confirmacion-input-container { margin-bottom: 16px; }
.modal-confirmacion-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--v2-text); }
.modal-confirmacion-input {
  width: 100%; padding: 10px 12px; border: 1px solid #d9dde1;
  border-radius: var(--v2-radius-md); font-size: 0.95em;
}
.modal-confirmacion-input:focus { outline: none; border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18); }
.modal-confirmacion-input.input-error { border-color: var(--v2-danger); box-shadow: 0 0 0 3px rgba(225, 91, 100, 0.2); }

/* Legacy modal overlay */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; }
.modal-content { background: white; border-radius: var(--v2-radius-xl); padding: 30px; max-width: 700px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: var(--v2-shadow-lg); position: relative; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0; }
.modal-header h2 { margin: 0; color: var(--v2-primary); font-size: 1.8em; }
.modal-close { background: var(--v2-danger); color: white; border: none; width: 35px; height: 35px; border-radius: 50%; font-size: 1.5em; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #c82333; transform: rotate(90deg); }
.modal-body { margin-bottom: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 2px solid #e0e0e0; }

/* =============================================
   NOTIFICACIONES
   ============================================= */
.notificaciones-container {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px; max-width: 400px; pointer-events: none;
}
.notificacion {
  background: white; border-radius: var(--v2-radius-md); padding: 16px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px;
  min-width: 300px; max-width: 400px; opacity: 0; transform: translateX(400px);
  transition: all 0.3s ease; pointer-events: auto; border-left: 4px solid;
}
.notificacion.mostrar { opacity: 1; transform: translateX(0); }
.notificacion-success { border-left-color: #10b981; }
.notificacion-error { border-left-color: #ef4444; }
.notificacion-warning { border-left-color: #f59e0b; }
.notificacion-info { border-left-color: #3b82f6; }
.notificacion-icono { font-size: 20px; font-weight: bold; flex-shrink: 0; }
.notificacion-success .notificacion-icono { color: #10b981; }
.notificacion-error .notificacion-icono { color: #ef4444; }
.notificacion-warning .notificacion-icono { color: #f59e0b; }
.notificacion-info .notificacion-icono { color: #3b82f6; }
.notificacion-mensaje { flex: 1; color: var(--v2-text); font-size: 14px; line-height: 1.4; }
.notificacion-cerrar {
  background: none; border: none; font-size: 24px; color: var(--v2-text-lighter);
  cursor: pointer; padding: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notificacion-cerrar:hover { color: var(--v2-text); }

/* =============================================
   PRODUCT SEARCH DROPDOWN
   ============================================= */
.producto-busqueda-container { position: relative; width: 100%; }
.producto-busqueda-input {
  width: 100%; padding: 12px; border: 2px solid #e0e0e0;
  border-radius: var(--v2-radius-md); font-size: 1em;
}
.producto-busqueda-input:focus { outline: none; border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.producto-busqueda-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: white; border: 2px solid #e0e0e0; border-radius: var(--v2-radius-md);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); max-height: 400px; overflow-y: auto; z-index: 1000; margin-top: 5px;
}
.producto-busqueda-item {
  padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s; display: flex; align-items: center; gap: 10px;
}
.producto-busqueda-item:hover, .producto-busqueda-item.selected { background-color: var(--v2-bg-subtle); }
.producto-busqueda-item:last-child { border-bottom: none; }
.producto-busqueda-codigo-inline { font-weight: bold; color: var(--v2-primary); font-size: 0.95em; min-width: 80px; flex-shrink: 0; }
.producto-busqueda-separador { color: var(--v2-text-lighter); font-size: 0.95em; flex-shrink: 0; }
.producto-busqueda-descripcion-inline { color: var(--v2-text); font-size: 0.95em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producto-busqueda-codigo { font-weight: bold; color: var(--v2-primary); font-size: 1.05em; margin-bottom: 4px; }
.producto-busqueda-nombre { color: var(--v2-text); font-size: 0.95em; margin-bottom: 2px; }
.producto-busqueda-descripcion { color: var(--v2-text-muted); font-size: 0.85em; margin-bottom: 2px; }
.producto-busqueda-unidad { color: var(--v2-text-lighter); font-size: 0.8em; }
.producto-busqueda-sin-resultados { padding: 20px; text-align: center; color: var(--v2-text-lighter); font-style: italic; }
.producto-busqueda-buscando { padding: 20px; text-align: center; color: var(--v2-primary); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Proveedor search */
.proveedor-busqueda-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; }
.proveedor-busqueda-item:hover:not(.disabled), .proveedor-busqueda-item.selected:not(.disabled) { background-color: #e3f2fd !important; }
.proveedor-busqueda-item.disabled { cursor: not-allowed; opacity: 0.5; background-color: var(--v2-bg-lighter) !important; }

/* Producto autocomplete */
.producto-autocomplete-container { position: relative; }
.producto-autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--v2-bg);
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm);
  box-shadow: var(--v2-shadow-md); max-height: 300px; overflow-y: auto; z-index: 1000; margin-top: 2px; display: none;
}
.producto-autocomplete-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; }
.producto-autocomplete-item:hover { background-color: var(--v2-bg-subtle); }
.producto-autocomplete-item:last-child { border-bottom: none; }
.producto-autocomplete-item strong { color: var(--v2-primary); }
.producto-autocomplete-item .descripcion { color: var(--v2-text-muted); font-size: 0.9em; margin-left: 5px; }

/* =============================================
   STATE COMPONENTS
   ============================================= */
.v2-state {
  background: var(--v2-bg); border: 1px solid var(--v2-border-light); border-radius: 12px;
  padding: 22px 24px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--v2-text);
}
.v2-state-icon { width: 36px; height: 36px; border-radius: 10px; background: #f1f5f9; border: 1px solid #e2e8f0; }
.v2-state-text { font-size: 0.95em; color: var(--v2-text-muted); }
.v2-state--loading .v2-state-icon { background: #eef2ff; border-color: #c7d2fe; }
.v2-state--empty .v2-state-icon { background: #f8fafc; border-color: #e2e8f0; }
.v2-state--error { border-color: #f5c2c7; background: #fff5f5; }
.v2-state--error .v2-state-icon { background: #ffe4e6; border-color: #f5c2c7; }

/* =============================================
   RESPONSIVE — COMPONENTS
   ============================================= */
@media (max-width: 768px) {
  .form-row, .form-row-3, .form-row-1 { grid-template-columns: 1fr; }
  .form-group { margin-bottom: 15px; width: 100% !important; }
  .btn-accion-editar, .btn-accion-eliminar { min-width: 32px !important; padding: 6px 8px !important; font-size: 0.75em !important; }
  .nav-tabs { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .nav-tab { flex: 1 1 calc(50% - 4px); font-size: 0.9em; padding: 10px 8px; }
  .ui-alerts-toast-container { top: 10px; right: 10px; left: 10px; max-width: none; }
  .ui-alert-toast { min-width: auto; max-width: none; }
  .ui-alert-modal { width: 95%; max-width: none; margin: 20px; }
  .notificaciones-container { top: 10px; right: 10px; left: 10px; max-width: none; }
  .notificacion { min-width: auto; max-width: none; padding: 12px 16px; }
  .modal-confirmacion-contenido { padding: 20px; width: 95%; }
  .modal-confirmacion-botones { flex-direction: column; }
  .btn-confirmar, .btn-cancelar { width: 100%; }
  button, .btn, .v2-btn, .nav-tab { min-height: 44px; min-width: 44px; }
}
@media (max-width: 480px) {
  .nav-tab { flex: 1 1 100%; font-size: 0.85em; padding: 8px 6px; }
  .notificacion { font-size: 13px; }
  .modal-content { width: 100% !important; max-width: 100% !important; border-radius: 0; }
}

/* Banner estado licencia (licenciamiento V1) */
.v2-license-banner {
  padding: 8px 16px;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0;
}
.v2-license-banner--gracia {
  background: #fff3e0;
  color: #e65100;
  border-bottom: 1px solid #ffcc80;
}
.v2-license-banner--lectura {
  background: #ffebee;
  color: #c62828;
  border-bottom: 1px solid #ef9a9a;
}

/* Auditoria Transferencias: el scroll horizontal debe vivir SOLO en la tabla */
#tabla-auditoria-container.v2-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Wrapper interno: aqui si permitimos scroll horizontal */
#tabla-auditoria-container .v2-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* La tabla no debe empujar el layout del main */
#tabla-auditoria-container .v2-table-wrap > table {
  width: 100%;
  max-width: 100%;
}