/* ============================================================
   Artesano Café — "toque Adira" (lenguaje visual MARN)
   Todo va scopeado bajo .art-shell para no filtrar a otras
   páginas. Tokens homologados a los dashboards de Aceros de
   Guatemala: tarjetas outlined #e6ecef / radio 8 / sombra
   suave, textos #263238/#607d8b/#90a4ae, azul #1f5b8a.
   ============================================================ */

.art-shell {
    --art-tinta: #263238;      /* texto principal            */
    --art-tinta2: #607d8b;     /* texto secundario           */
    --art-tinta3: #90a4ae;     /* labels / muted             */
    --art-borde: #e6ecef;      /* borde de tarjeta           */
    --art-borde2: #eef1f3;     /* separadores internos       */
    --art-azul: #1f5b8a;       /* acento institucional       */
    --art-azul-sua: #e3eef7;   /* acento suave (activo)      */
    --art-panel: #f7f9fa;      /* panel/relleno suave        */
    --art-sombra: 0 1px 4px rgba(0,0,0,.05);
    color: var(--art-tinta);
    padding: 2px 2px 24px;
}

.art-shell,
.art-shell .text-body,
.art-shell p { color: var(--art-tinta); }

/* ---------- Encabezado tipo barra MARN ---------- */
.art-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--art-borde);
    border-radius: 8px;
    box-shadow: var(--art-sombra);
    padding: 12px 16px;
    margin-bottom: 14px;
}

.art-header-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.art-header-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 10px;
    background: var(--art-azul-sua);
    color: var(--art-azul);
    border: 1px solid #cfe0ef;
}

.art-header-ico .rz-icon,
.art-header-ico .rzi { font-size: 26px; }

.art-header-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--art-tinta);
}

.art-header-sub {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--art-tinta3);
    margin-top: 2px;
}

.art-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Título de sección secundario dentro de la página */
.art-shell h4,
.art-shell h5,
.art-shell h6 {
    color: var(--art-tinta);
    font-weight: 800;
    letter-spacing: .01em;
}
.art-shell h6 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--art-tinta2); }

/* ---------- Tarjetas (border rounded ...) ---------- */
.art-shell .border.rounded {
    border: 1px solid var(--art-borde) !important;
    border-radius: 8px !important;
    background: #fff;
    box-shadow: var(--art-sombra);
}

.art-shell .border.rounded.bg-light,
.art-shell .bg-light {
    background: var(--art-panel) !important;
}

/* Tarjeta resaltada (selección) */
.art-shell .border-primary {
    border-color: var(--art-azul) !important;
    box-shadow: 0 0 0 1px var(--art-azul) inset, var(--art-sombra);
}

/* ---------- Chips / badges suaves ---------- */
.art-shell .badge {
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 999px;
    padding: .32em .7em;
    border: 1px solid transparent;
}
.art-shell .badge.bg-secondary { background: #eef1f3 !important; color: var(--art-tinta2) !important; border-color: #e0e6ea; }
.art-shell .badge.bg-success   { background: #eaf4ea !important; color: #2e7d32 !important; border-color: #cfe6cf; }
.art-shell .badge.bg-info      { background: var(--art-azul-sua) !important; color: var(--art-azul) !important; border-color: #cfe0ef; }
.art-shell .badge.bg-warning   { background: #fbf1dc !important; color: #b5651d !important; border-color: #f0dcb4; }
.art-shell .badge.bg-danger    { background: #fdecec !important; color: #c62828 !important; border-color: #f3cccc; }
.art-shell .badge.bg-dark      { background: #e3e7ea !important; color: #37474f !important; border-color: #d2d9dd; }

/* ---------- Alerts → banda MARN suave ---------- */
.art-shell .alert {
    border-radius: 8px;
    border: 1px solid var(--art-borde);
    box-shadow: var(--art-sombra);
    font-weight: 600;
}
.art-shell .alert-info    { background: var(--art-azul-sua); color: var(--art-azul); border-color: #cfe0ef; }
.art-shell .alert-success { background: #eaf4ea; color: #2e7d32; border-color: #cfe6cf; }
.art-shell .alert-warning { background: #fbf1dc; color: #8a5a17; border-color: #f0dcb4; }
.art-shell .alert-danger  { background: #fdecec; color: #c62828; border-color: #f3cccc; }

/* ---------- Etiquetas de formulario ---------- */
.art-shell .form-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--art-tinta3);
    margin-bottom: 3px;
}
.art-shell .form-label.small { font-size: 10px; }

/* ---------- Texto utilitario ---------- */
.art-shell .text-muted { color: var(--art-tinta3) !important; }
.art-shell .text-success { color: #2e7d32 !important; }
.art-shell .text-danger  { color: #c62828 !important; }

/* ---------- Tablas HTML (.table) ---------- */
.art-shell .table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--art-tinta);
}
.art-shell .table > thead > tr > th {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--art-tinta3);
    background: var(--art-panel);
    border-bottom: 1px solid var(--art-borde);
    padding: 8px 10px;
    white-space: nowrap;
}
.art-shell .table > tbody > tr > td {
    border-top: 1px solid var(--art-borde2);
    padding: 7px 10px;
    vertical-align: middle;
}
.art-shell .table > tbody > tr:hover > td { background: #fafcfd; }
.art-shell .table > tfoot > tr > td {
    border-top: 2px solid var(--art-borde);
    padding: 8px 10px;
    color: var(--art-tinta);
}

/* ---------- RadzenTabs → pestañas MARN ---------- */
.art-shell .rz-tabview { background: transparent; }
.art-shell .rz-tabview-nav {
    border-bottom: 1px solid var(--art-borde);
    gap: 2px;
    background: transparent;
}
.art-shell .rz-tabview-nav li > a,
.art-shell .rz-tabview-nav li .rz-tabview-nav-link {
    color: var(--art-tinta2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    border: none;
    background: transparent;
    padding: 9px 14px;
    border-bottom: 2px solid transparent;
}
.art-shell .rz-tabview-nav li:hover > a { color: var(--art-azul); }
.art-shell .rz-tabview-nav li.rz-state-active > a,
.art-shell .rz-tabview-nav li.rz-tabview-selected > a {
    color: var(--art-azul);
    background: transparent;
    border-bottom-color: var(--art-azul);
}
.art-shell .rz-tabview-panels {
    background: transparent;
    border: none;
    padding: 14px 2px 2px;
}

/* ---------- RadzenDataGrid → grilla MARN ---------- */
.art-shell .rz-datatable,
.art-shell .rz-data-grid {
    border: 1px solid var(--art-borde);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--art-sombra);
    background: #fff;
}
.art-shell .rz-datatable .rz-column-title,
.art-shell .rz-data-grid .rz-column-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--art-tinta3);
}
.art-shell .rz-datatable-thead > tr > th,
.art-shell .rz-grid-table thead > tr > th {
    background: var(--art-panel);
    border-color: var(--art-borde);
}
.art-shell .rz-datatable-data > tr > td,
.art-shell .rz-grid-table tbody > tr > td {
    border-color: var(--art-borde2);
    color: var(--art-tinta);
}
.art-shell .rz-datatable-data > tr:hover > td { background: #fafcfd; }

/* ---------- Mapa de mesas (POS) ---------- */
.art-mesa {
    width: 112px;
    padding: 8px 10px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--art-borde);
    border-left-width: 4px;
    border-radius: 8px;
    box-shadow: var(--art-sombra);
    transition: box-shadow .12s ease, transform .12s ease;
}
.art-mesa:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); transform: translateY(-1px); }

.art-mesa-libre   { border-left-color: #9bbf9d; }
.art-mesa-ocupada { border-left-color: #e0a128; background: #fffdf7; }

.art-mesa-nombre {
    font-weight: 800;
    font-size: 13px;
    color: var(--art-tinta);
    line-height: 1.15;
}
.art-mesa-cap {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--art-tinta3);
    margin-bottom: 2px;
}
.art-mesa-total { font-weight: 800; font-size: 13px; color: #b5651d; }
.art-mesa-hora  { font-size: 11px; color: var(--art-tinta3); }
.art-mesa-estado {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #2e7d32;
    background: #eaf4ea;
    border: 1px solid #cfe6cf;
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 2px;
}

/* Órdenes "para llevar" abiertas (filas clicables) */
.art-llevar {
    background: #fff;
    border: 1px solid var(--art-borde);
    border-left: 4px solid var(--art-azul);
    border-radius: 8px;
    box-shadow: var(--art-sombra);
    padding: 7px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.art-llevar:hover { background: #fafcfd; }

/* ---------- Comandas de cocina ---------- */
.art-comanda {
    width: 300px;
    background: #fff;
    border: 1px solid var(--art-borde);
    border-left: 4px solid var(--art-azul);
    border-radius: 8px;
    box-shadow: var(--art-sombra);
    overflow: hidden;
}
.art-comanda-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--art-panel);
    border-bottom: 1px solid var(--art-borde);
}
.art-comanda-mesa { font-weight: 800; font-size: 13px; color: var(--art-tinta); }
.art-comanda-info { font-size: 11px; color: var(--art-tinta3); white-space: nowrap; }
.art-comanda-body { padding: 6px 12px 8px; }
.art-comanda-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--art-borde2);
}
.art-comanda-item:last-child { border-bottom: none; }
.art-comanda-nota { font-size: 11px; color: #c62828; }

/* Chip de minutos con urgencia */
.art-min {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    background: #eef1f3;
    color: var(--art-tinta2);
    border: 1px solid #e0e6ea;
}
.art-min-alerta  { background: #fbf1dc; color: #b5651d; border-color: #f0dcb4; }  /* >= 15 min */
.art-min-critico { background: #fdecec; color: #c62828; border-color: #f3cccc; }  /* >= 30 min */

/* ---------- Botones: refinado de radio/peso ---------- */
.art-shell .rz-button { border-radius: 6px; font-weight: 700; }

/* Un poco de aire entre filas de controles */
.art-shell .row + .row { margin-top: 2px; }