@import url('geomat-grid.css');
@import url('geomat-dialog.css');

/* ══════════════════════════════════════════════════════════════════════════════
   GEOMAT Design Tokens — fuente oficial: Documentacion/geomat_design_guide.html
   Definidos en :root para que TODOS los módulos resuelvan var(--geo-*) / var(--font-*).
   (Sin esto, los componentes que usan var(--geo-*) se ven planos/sin color.)
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --geo-primary:       #0D3D26;
    --geo-primary-dark:  #082A19;
    --geo-accent:        #4AAD6B;
    --geo-accent-light:  #D7EBDD;
    --geo-bg:            #F7F9F7;
    --geo-surface:       #FFFFFF;
    --geo-border:        #E5E9E5;
    --geo-text:          #1A2419;
    --geo-text-muted:    #6B7470;
    --geo-warn:          #B8761A;
    --geo-warn-bg:       #FBF2E0;
    --geo-danger:        #A82A2A;
    --geo-danger-bg:     #FBE9E9;
    --geo-info:          #1F5A82;
    --geo-info-bg:       #E4EEF5;
    --geo-purple:        #5C2A82;
    --geo-purple-bg:     #F0E6F5;

    --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'Geist Mono', 'Cascadia Code', Consolas, monospace;
    --font-display: 'Fraunces', Georgia, serif;

    --geo-focus-ring: 0 0 0 3px rgba(74,173,107,0.15);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GEOMAT Design System — prefijo gu-  (global, disponible en todos los módulos)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────────────────── */
.gu-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 32px 20px;
    background: #ffffff;
    border-bottom: 1px solid #E5E9E5;
}
.gu-page-header__info {
    display: flex; flex-direction: column; gap: 4px;
    outline: none;
}
.gu-page-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 21px; font-weight: 600; color: #1A2419; margin: 0; line-height: 1.2;
}

/* Chevron indica que hay más info al pasar el mouse / enfocar con teclado */
.gu-page-title__chevron {
    width: 14px; height: 14px; flex-shrink: 0;
    color: #6B7470;
    transition: transform 0.25s ease, color 0.25s ease;
}
.gu-page-header__info:hover .gu-page-title__chevron,
.gu-page-header__info:focus-within .gu-page-title__chevron {
    transform: rotate(180deg);
    color: #4AAD6B;
}

/* Wrapper colapsable — grid-template-rows anima una altura fluida (0 → contenido) */
.gu-page-header__info-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.25s ease-out, margin-top 0.25s ease-out;
}
.gu-page-header__info:hover .gu-page-header__info-wrap,
.gu-page-header__info:focus-within .gu-page-header__info-wrap {
    grid-template-rows: 1fr;
    margin-top: 4px;
}
.gu-page-subtitle {
    overflow: hidden;
    min-height: 0;
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 13px; color: #6B7470; margin: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gu-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    background: #0D3D26; color: #ffffff; border: none; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.gu-btn-primary:hover:not(:disabled) { background: #082A19; }
.gu-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.gu-btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ffffff; color: #1A2419; border: 1px solid #E5E9E5; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.gu-btn-secondary:hover:not(:disabled) { background: #F7F9F7; }
.gu-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Variante "Imprimir en Zebra" del botón secundario (pie de los diálogos de tarja): mismas
   medidas que .gu-btn-secondary (alto, padding, tipografía), solo cambia el color a verde de
   acento para distinguirla como la acción de impresión. Una sola línea, sin crecer en altura. */
.gu-btn-secondary--zebra {
    white-space: nowrap;
    background: var(--geo-accent-light, #D7EBDD);
    border-color: var(--geo-accent, #4AAD6B);
    color: var(--geo-primary, #0D3D26);
}
.gu-btn-secondary--zebra:hover:not(:disabled) {
    background: var(--geo-accent, #4AAD6B);
    border-color: var(--geo-accent, #4AAD6B);
    color: #ffffff;
}

.gu-btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    background: #A82A2A; color: #ffffff; border: none; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.gu-btn-danger:hover { background: #8b2222; }

/* Acción positiva/confirmación fuerte, no destructiva (ej. cerrar turno) —
   equivalente al .btn-accent del Design System GEOMAT v1.0. */
.gu-btn-accent {
    display: inline-flex; align-items: center; gap: 6px;
    background: #4AAD6B; color: #ffffff; border: none; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.gu-btn-accent:hover:not(:disabled) { background: #3D8E58; }
.gu-btn-accent:disabled { opacity: 0.6; cursor: not-allowed; }

/* Equivalente al .btn-ghost del Design System GEOMAT v1.0 — acción terciaria sin borde. */
.gu-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: #6B7470; border: none; border-radius: 6px;
    padding: 9px 12px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.gu-btn-ghost:hover:not(:disabled) { background: #F0F4F1; color: #0D3D26; }
.gu-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }

.gu-btn-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid #E5E9E5;
    border-radius: 6px;
    color: #6B7470;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.gu-btn-icon:hover {
    background: #D7EBDD;
    border-color: #4AAD6B;
    color: #0D3D26;
}

/* Variante "Imprimir en Zebra" (impresión remota por agente, único camino de impresión
   de la tarja): borde/ícono en verde de acento en reposo y una "Z" dibujada dentro de
   la impresora. */
.gu-btn-icon--zebra {
    border-color: var(--geo-accent, #4AAD6B);
    color: var(--geo-primary, #0D3D26);
    background: var(--geo-accent-light, #D7EBDD);
}
.gu-btn-icon--zebra:hover {
    background: var(--geo-accent, #4AAD6B);
    border-color: var(--geo-accent, #4AAD6B);
    color: #ffffff;
}

/* ── Button / loading spinners ────────────────────────────────────────────── */
.gu-btn-spinner {
    display: inline-block; width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,0.35); border-top-color: #ffffff;
    border-radius: 50%; animation: gu-spin 0.75s linear infinite; margin-right: 4px;
}
.gu-spinner-wrap {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 0; gap: 14px;
}
.gu-spinner {
    width: 36px; height: 36px;
    border: 3px solid #E5E9E5; border-top-color: #4AAD6B;
    border-radius: 50%; animation: gu-spin 0.75s linear infinite;
}
@keyframes gu-spin { to { transform: rotate(360deg); } }
.gu-spinner-label {
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; color: #6B7470;
}

/* ── Error banner ─────────────────────────────────────────────────────────── */
.gu-error-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 32px; padding: 12px 16px;
    background: #FBE9E9; border: 1px solid #f0b8b8; border-radius: 6px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; color: #A82A2A;
}
.gu-error-icon { flex-shrink: 0; color: #A82A2A; }

/* ── Grid estándar → ver geomat-grid.css (.geo-grid) ─────────────────────── */
/* gu-grid-wrap mantenido como alias para compatibilidad con componentes existentes */
.gu-grid-wrap { padding: 20px 32px; }

/* ── Status chips ─────────────────────────────────────────────────────────── */
.gu-chip {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 11px; font-weight: 500; white-space: nowrap;
}
.gu-chip--active  { background: #D7EBDD; color: #0D3D26; }
.gu-chip--inactive { background: #EEF0EE; color: #6B7470; }
.gu-chip--warn     { background: #FCEBCB; color: #7A4A00; }
.gu-chip--admin   { background: #E4EEF5; color: #1F5A82; }
.gu-chip--neutral { background: #EEF0EE; color: #6B7470; }
.gu-cell-center   { display: flex; justify-content: center; }

/* ── Row action buttons ───────────────────────────────────────────────────── */
.gu-row-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }
.gu-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: 6px;
    cursor: pointer; transition: background 0.15s, color 0.15s;
    background: transparent; color: #6B7470;
}
.gu-action-btn--edit:hover   { background: #D7EBDD; color: #0D3D26; }
.gu-action-btn--reset:hover  { background: #FBF2E0; color: #B8761A; }
.gu-action-btn--delete:hover { background: #FBE9E9; color: #A82A2A; }

/* ── Dialog → ver geomat-dialog.css (.geo-dialog) ────────────────────────── */
/* gu-dialog* mantenidos como alias para componentes existentes */
.gu-dialog .e-dlg-header-content { background: #0D3D26 !important; padding: 14px 20px !important; }
.gu-dialog .e-dlg-header-content .e-dlg-header { color: #ffffff !important; font-family: 'Geist', -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; }
.gu-dialog .e-dlg-header-content .e-icon-dlg-close { color: #ffffff !important; opacity: 0.75 !important; }
.gu-dialog .e-dlg-content { padding: 20px !important; background: #ffffff !important; }
.gu-dialog .e-footer-content { padding: 12px 20px !important; background: #F7F9F7 !important; border-top: 1px solid #E5E9E5 !important; }
.gu-dialog .e-dialog { border-radius: 8px !important; border: 1px solid #E5E9E5 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important; overflow: hidden !important; }
.gu-dialog-title { font-family: 'Geist', -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: #ffffff; }
.gu-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.gu-dialog--confirm .e-dlg-header-content { background: #A82A2A !important; }
.gu-confirm-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; text-align: center; }
.gu-confirm-icon { color: #A82A2A; flex-shrink: 0; }
.gu-confirm-msg { font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; color: #1A2419; line-height: 1.6; margin: 0; }
.gu-confirm-msg strong { font-weight: 600; color: #A82A2A; }

/* ── Form grid ────────────────────────────────────────────────────────────── */
.gu-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.gu-form-field { display: flex; flex-direction: column; gap: 5px; }
.gu-form-field--full { grid-column: 1 / -1; }
.gu-form-field--check { justify-content: flex-end; padding-bottom: 6px; }
.gu-label {
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7470;
}
.gu-label-hint { text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 400; color: #6B7470; }
.gu-required { color: #A82A2A; }

/* Syncfusion input overrides */
.gu-input.e-input-group,
.gu-input.e-numerictextbox {
    border: 1px solid #E5E9E5 !important; border-radius: 6px !important;
    font-family: 'Geist', -apple-system, sans-serif !important; font-size: 13px !important;
    background: #ffffff !important;
    min-height: 39px !important; align-items: center !important;
}
.gu-input.e-input-group:focus-within {
    border-color: #4AAD6B !important; box-shadow: 0 0 0 3px rgba(74,173,107,0.15) !important;
}
.gu-input.e-input-group.e-disabled { background: #F7F9F7 !important; opacity: 0.7 !important; cursor: not-allowed !important; }

/* SfTextArea: a diferencia de SfTextBox/SfNumericTextBox, el CssClass del componente
   se aplica al wrapper .e-multi-line-input (NO .e-input-group, salvo que se use
   FloatLabelType Auto/Always) y el <textarea> real queda dentro con clase .e-textarea. */
.gu-input.e-multi-line-input {
    border: 1px solid #E5E9E5 !important; border-radius: 6px !important;
    font-family: 'Geist', -apple-system, sans-serif !important;
    background: #ffffff !important;
    padding: 0 !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
}
.gu-input.e-multi-line-input textarea.e-textarea {
    font-family: 'Geist', -apple-system, sans-serif !important; font-size: 13px !important;
    color: #1A2419 !important;
    border: none !important; border-radius: 6px !important; background: transparent !important;
    padding: 9px 12px !important; width: 100% !important; box-sizing: border-box !important;
    outline: none !important;
    resize: vertical !important;
}
.gu-input.e-multi-line-input:focus-within {
    border-color: #4AAD6B !important; box-shadow: 0 0 0 3px rgba(74,173,107,0.15) !important;
}
.gu-input.e-multi-line-input.e-disabled,
.gu-input.e-multi-line-input textarea.e-textarea:disabled {
    background: #F7F9F7 !important; opacity: 0.7 !important; cursor: not-allowed !important;
}

.gu-checkbox .e-checkbox-wrapper .e-frame.e-check { background: #4AAD6B !important; border-color: #4AAD6B !important; }
.gu-checkbox .e-checkbox-wrapper .e-label {
    font-family: 'Geist', -apple-system, sans-serif !important; font-size: 13px !important; color: #1A2419 !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gu-page-header { flex-direction: column; gap: 16px; padding: 20px 16px; }
    .gu-page-title__chevron { display: none; }
    .gu-page-header__info-wrap { display: none; }
    .gu-grid-wrap   { padding: 12px 8px; }
    .gu-form-grid   { grid-template-columns: 1fr; }
    .gu-form-field--full { grid-column: 1; }
}
@media (max-width: 767px) {
    .gu-grid-wrap { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gu-dialog--responsive.e-dialog { width: 95% !important; max-width: 95vw !important; }
}

/* ── Fix: overlap de etiqueta/valor en SfGrid modo adaptativo (EnableAdaptiveUI +
   RowRenderingMode.Vertical) en mobile — aplica a TODAS las pantallas de
   Maestros/Parámetros que usan este patrón (~35 componentes: GestionUsuarios,
   GestionRoles, GestionMateriales, GestionProveedores, GestionClientes,
   GestionBodegas, GestionLotes, etc.), no es un caso aislado de una pantalla.

   Causa raíz (confirmada inspeccionando el DOM real en /app/parametros/roles,
   viewport 375x812): cuando el grid entra en modo "e-row-responsive", el tema
   fluent2.css de Syncfusion dibuja el nombre de columna con un pseudo-elemento
   `td[data-cell]::before { content: attr(data-cell); position: absolute;
   left: 13px; top: 6px; width: 45%; }`, pensado para convivir en un layout
   lado-a-lado con la regla hermana `td[data-cell] { padding-left: 55%; ... }`
   que debería correr el valor real a la derecha del label. Esa segunda regla
   queda opacada por otras reglas de padding del propio tema con selectores
   distintos (`.e-grid.e-bigger .e-rowcell`, `.e-grid.e-device .e-rowcell`,
   etc.) que ganan la cascada y dejan el padding-left real en ~8-12px — casi la
   misma coordenada del label (left:13px) — por eso el texto de la etiqueta y
   el valor terminan dibujados uno encima del otro.

   Fix: en vez de pelear la guerra de especificidad con el propio tema, se
   redefine el layout como apilado (label arriba, valor abajo) con !important
   para que gane siempre, independiente del orden interno de fluent2.css. Un
   solo lugar para las ~35 pantallas — no se toca el markup de ningún
   componente Razor. */
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell] {
    padding-top: 26px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
    position: relative !important;
}

.e-grid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell]::before {
    position: absolute !important;
    top: 8px !important;
    left: 12px !important;
    width: calc(100% - 24px) !important;
    font-family: var(--font-ui, 'Geist', -apple-system, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--geo-text-muted, #6B7470) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

a, .btn-link {
    color: #006bb7;
}

/* ── GeoMat Buttons — globales, alcanzan portals de SfDialog ─────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--geo-primary); color: #ffffff;
    padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    border: none; cursor: pointer; transition: background 0.15s;
    text-decoration: none;
}
.btn-primary:hover:not(:disabled) { background: var(--geo-primary-dark); color: #ffffff; }
.btn-primary:disabled             { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ffffff; border: 1px solid var(--geo-border);
    color: var(--geo-text); padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    cursor: pointer; transition: all 0.15s;
    text-decoration: none;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--geo-accent); color: var(--geo-primary); }
.btn-secondary:disabled              { opacity: 0.55; cursor: not-allowed; }

.btn-accent {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--geo-accent); color: #ffffff;
    padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    border: none; cursor: pointer; transition: background 0.15s;
    text-decoration: none;
}
.btn-accent:hover:not(:disabled) { background: var(--geo-primary); }
.btn-accent:disabled             { opacity: 0.55; cursor: not-allowed; }

.btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--geo-danger); color: #ffffff;
    padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    border: none; cursor: pointer; transition: background 0.15s;
}
.btn-danger:hover:not(:disabled) { background: #8B1F1F; }
.btn-danger:disabled             { opacity: 0.55; cursor: not-allowed; }

/* Foco consistente para los botones GEOMAT — sin esto el navegador aplica su
   outline nativo (grueso, negro/azul) que no respeta el token --geo-focus-ring
   y se ve como un botón "roto" al lado de otro sin foco (ver Cuadratura). */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-accent:focus-visible,
.btn-danger:focus-visible {
    outline: none;
    box-shadow: var(--geo-focus-ring);
}

.cf-btn-sm { padding: 5px 12px !important; font-size: 11px !important; }

/* ── GeoMat Design System v1.0 — inputs / pills / tabla / label (globales) ── */
.geo-input {
    border: 1px solid var(--geo-border); border-radius: 6px;
    padding: 9px 12px; font-size: 13px; font-family: var(--font-ui); background: #ffffff;
}
.geo-input:focus { outline: none; border-color: var(--geo-accent); box-shadow: var(--geo-focus-ring); }

.geo-label {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--geo-text-muted);
}

.geo-pill {
    /*display: inline-flex;*/
            align-items: center; padding: 3px 10px; border-radius: 99px; font-family: var(--font-ui); font-size: 11px; font-weight: 500; }
.pill-ok      { background: var(--geo-accent-light); color: var(--geo-primary); }
.pill-warn    { background: var(--geo-warn-bg);      color: var(--geo-warn); }
.pill-danger  { background: var(--geo-danger-bg);    color: var(--geo-danger); }
.pill-info    { background: var(--geo-info-bg);      color: var(--geo-info); }
.pill-neutral { background: #EEF0EE;                 color: var(--geo-text-muted); }

.geo-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-ui); }
.geo-table th {
    text-align: left; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--geo-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--geo-border); background: #FAFBFA;
}
.geo-table td { padding: 9px 10px; border-bottom: 1px solid var(--geo-border); color: var(--geo-text); }
.geo-table tr:hover td { background: #FAFBFA; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Print — tarja (Armado) ───────────────────────────────────────────────────
   Etiquetadora física dedicada, 100mm x 60mm apaisada -- @page con nombre para
   que el tamaño de página no se filtre a #mov-print-etiqueta-pallet (regla
   hermana más abajo, otro módulo/hardware, sigue con el @page genérico). */
@page { margin: 0; }
@page tarja-armado {
    size: 100mm 60mm;
    margin: 0;
}

@media print {
    body * { visibility: hidden; }
    #arm-print-tarja,
    #arm-print-tarja * {
        visibility: visible;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #arm-print-tarja {
        /* 2026-09-30 (v2) — MARGEN REAL, no padding: con position:fixed + left:0/top:0
           + width/height:100%, el borde negro (.arm-tarja-print, border 0.7mm) queda
           dibujado exactamente en el borde físico del papel -- el "padding" de acá
           (versión anterior: 1.5mm 3mm 3mm) es espacio ENTRE el borde y el contenido,
           no entre el papel y el borde. En una impresora térmica dedicada con zona no
           imprimible real cerca del borde físico, eso deja el marco (y peor, arriba/
           izquierda) fuera de esa zona sin protección -- confirmado con una impresión
           física real (foto), no solo en preview de navegador.
           Ahora el elemento se inserta 3mm adentro por los 4 lados (left/top + un
           width/height reducidos en 6mm vía calc) ANTES de dibujar el borde, así que
           el marco completo -- no solo el contenido -- queda con un colchón real de
           3mm respecto del papel en los 4 lados. El padding entre el borde y el
           contenido (marco→texto) ahora vive solo en el componente
           (.arm-tarja-print / .arm-hist-tarja-print, ver esos .razor.css) -- una sola
           fuente para ese valor, en vez de que este archivo pisara por specificidad de
           ID el padding que el componente ya declaraba (ver historial git para esa
           duplicación confusa). El presupuesto vertical completo (incluyendo el QR
           subido de 13.5mm a 21mm) fue reverificado con un mock HTML a escala física
           real -- ver el bloque de impresión en ArmadoTarjaDialog.razor.css. */
        position: fixed;
        left: 3mm; top: 3mm;
        width: calc(100% - 6mm);
        height: calc(100% - 6mm);
        box-sizing: border-box;
        page: tarja-armado;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ── Print — etiqueta pallet traslado (CA-23/CA-53, Movimientos) ────────────── */
@media print {
    body * { visibility: hidden; }
    #mov-print-etiqueta-pallet,
    #mov-print-etiqueta-pallet * {
        visibility: visible;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #mov-print-etiqueta-pallet {
        position: fixed;
        left: 0; top: 0;
        width: 100%;
        padding: 24px;
        box-sizing: border-box;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ── Botones interactivos del toast de error (GeoToast) — viven acá a propósito ─
   Syncfusion renderiza el shell del SfToast (.e-toast, .e-toast-message,
   .e-toast-content) fuera del árbol de render de Blazor (JS interop), y
   GeoToast.razor no envuelve los <SfToast> en ningún div propio — por eso
   esta regla NUNCA puede vivir en GeoToast.razor.css: el aislamiento de CSS
   de Blazor exige que ::deep tenga un ancestro con el atributo de scope por
   ENCIMA del elemento apuntado, y acá la relación es al revés (.e-toast es
   ancestro de nuestro contenido escopeado, no al revés) — confirmado
   inspeccionando el CSS compilado real (2026-07-20). Aplica a cualquier
   elemento con @onclick dentro del template (Copiar, Ver más detalle); los
   <div> puramente visuales (texto de error, bloque de detalle) sí pueden
   vivir en GeoToast.razor.css. */
.geo-toast-error .geo-toast-error-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.geo-toast-error .geo-toast-masdetalle-btn,
.geo-toast-error .geo-toast-copy-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-family: -apple-system, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
}

.geo-toast-error .geo-toast-masdetalle-btn {
    background: #EEF0EE !important;
    border: 1.5px solid #D8DCD8 !important;
    color: #5A625E !important;
}

.geo-toast-error .geo-toast-masdetalle-btn:hover {
    background: #E2E5E2 !important;
    border-color: #C7CCC7 !important;
}

.geo-toast-error .geo-toast-masdetalle-btn:active {
    transform: scale(0.96) !important;
}

.geo-toast-error .geo-toast-masdetalle-icon {
    transition: transform 0.15s !important;
    flex-shrink: 0 !important;
}

.geo-toast-error .geo-toast-masdetalle-icon--open {
    transform: rotate(180deg) !important;
}

.geo-toast-error .geo-toast-copy-btn {
    background: var(--geo-danger, #A82A2A) !important;
    border: 1.5px solid var(--geo-danger, #A82A2A) !important;
    color: #ffffff !important;
}

.geo-toast-error .geo-toast-copy-btn:hover {
    background: #8B1F1F !important;
    border-color: #8B1F1F !important;
}

.geo-toast-error .geo-toast-copy-btn:active {
    transform: scale(0.96) !important;
}

/* ── Desplegables Syncfusion en celular: popup a pantalla completa (2026-10-02) ───
   En dispositivos táctiles SfDropDownList (AllowFiltering) abre un popup a pantalla
   completa (.e-popup-full-page + .e-ddl-device-filter) con width:100%, pero Syncfusion le
   deja un `left` inline igual a la posición X del input (p. ej. 37px) -- así el panel
   arrancaba desfasado a la derecha y se salía por el borde (lista y campo de búsqueda
   cortados). Se fuerza a ocupar exactamente el viewport. El popup cuelga de <body>, fuera del
   CSS aislado de los componentes, por eso vive acá. */
.e-ddl.e-popup.e-popup-full-page {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* ── Avisos (toast) en celular: que quepan en el viewport (2026-10-02) ───────────
   Causa del corte por la izquierda: el SfToast de error se declara con Width="440px"
   (GeoToast.razor), que Syncfusion pone inline en el .e-toast (style="width:440px"), y el
   contenedor .e-toast-container es position:fixed anclado a la derecha (right:10px). En un
   viewport de ~400px el aviso mide mas que la pantalla y se desborda hacia la IZQUIERDA
   (left = 412 - 10 - 440 = -38px en 412px; -75px en 375px). Las reglas con ::deep de
   GeoToast.razor.css (min(460px,90vw), scroll, wrap) tampoco lo evitaban: no tienen un
   ancestro con el atributo de scope de Blazor (el shell del toast cuelga de <body>), asi
   que nunca se aplican -- por eso este bloque vive en el CSS global, igual que los botones
   del toast mas arriba.
   Solo <= 480px: el escritorio (aviso de 440px anclado arriba a la derecha) no cambia. */
@media (max-width: 480px) {
    /* Contenedor: ancla izquierda y derecha con margenes simetricos, sin ancho propio. */
    .e-toast-container {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
    }

    /* El aviso ocupa todo el contenedor (pisa el width:440px inline de Syncfusion). */
    .e-toast-container .e-toast {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .e-toast-container .e-toast .e-toast-message {
        min-width: 0 !important;
    }

    /* Titulo y mensaje: envuelven, nunca desbordan. */
    .e-toast-container .e-toast .e-toast-title,
    .e-toast-container .e-toast .e-toast-content {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        min-width: 0 !important;
    }

    /* Aviso de error (plantilla de GeoToast): cuerpo en columna dentro del ancho. */
    .geo-toast-error .geo-toast-error-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Mensaje principal: envuelve; scroll interno si es muy largo. */
    .geo-toast-error .geo-toast-error-text {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        max-height: 30vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-width: 0 !important;
    }

    /* Botones ("Ver detalle" / "Copiar"): bajan de fila si no caben. */
    .geo-toast-error .geo-toast-error-actions {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    /* Detalle tecnico: monoespaciado, envuelto, con scroll interno propio. */
    .geo-toast-error .geo-toast-error-detalle {
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 40vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        font-family: var(--font-mono, 'Geist Mono', monospace) !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
        color: var(--geo-text, #1A2419) !important;
        background: var(--geo-surface, #FFFFFF) !important;
        border: 1px solid var(--geo-border, #E5E9E5) !important;
        border-radius: 4px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }
}