/* =========================================================
   RESET & BASE
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
    background: radial-gradient(circle at top, #1f2937 0, #020617 55%);
}

/* Contenedor principal de la app */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Limitar ancho general del contenido (opcional) */
.main-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 16px 32px;
}

/* Utilidades pequeñas */
.muted {
    color: #6b7280;
    font-size: 0.76rem;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(18px);
    background: linear-gradient(
        to right,
        rgba(15, 23, 42, 0.92),
        rgba(30, 64, 175, 0.88)
    );
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.7);
}

.topbar-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Marca / logo */

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 10px;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0, #38bdf8, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #e5e7eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.7);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-title {
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.85);
}

/* Área derecha (estado + logout) */

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pastilla "Conectado" */
.user-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(52, 211, 153, 0.6);
    color: #bbf7d0;
    font-size: 0.78rem;
    gap: 6px;
}

.user-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.32);
}

/* Botón logout */
.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.5);
    color: #e5e7eb;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.logout-btn:hover {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.7);
    box-shadow: 0 8px 22px rgba(127, 29, 29, 0.7);
    transform: translateY(-1px);
}

/* =========================================================
   MAIN & PÁGINAS
========================================================= */

.main {
    flex: 1;
}

/* Cabecera de página (títulos) */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

.page-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #e5e7eb;
}

.badge-live {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.7);
    background: rgba(6, 95, 70, 0.7);
    color: #bbf7d0;
}

.page-subtitle {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* =========================================================
   CARDS / CONTENEDORES
========================================================= */

.card {
    border-radius: 14px;
    background: radial-gradient(circle at top left, #020617, #020617 55%);
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.9);
    padding: 12px 14px 14px;
    margin-bottom: 15px;
}

/* Cabecera de card (título + contador) */

.card-header-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.card-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: #e5e7eb;
}

.card-subtitle {
    margin-top: 2px;
    font-size: 0.78rem;
    color: #9ca3af;
}

.badge-count {
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #e5e7eb;
    white-space: nowrap;
}

.card-body {
    margin-top: 8px;
}

/* Estado vacío */

.empty-state {
    padding: 12px 12px;
    border-radius: 10px;
    background: rgba(30, 64, 175, 0.18);
    border: 1px dashed rgba(96, 165, 250, 0.7);
    font-size: 0.82rem;
    color: #dbeafe;
}

/* =========================================================
   TABLA DE PEDIDOS (ACORDEÓN)
========================================================= */

.table-wrapper {
    overflow-x: auto;
}

/* Tabla base */

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    min-width: 100%;
}

.orders-table thead {
    background: linear-gradient(
        to right,
        rgba(15, 23, 42, 0.95),
        rgba(30, 64, 175, 0.6)
    );
}

.orders-table th,
.orders-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    white-space: nowrap;
}

.orders-table th {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cbd5f5;
    font-weight: 600;
}

.orders-table tbody tr:last-child td {
    border-bottom: none;
}

/* Fila principal (clicable) */

.order-row {
    cursor: pointer;
    background: rgba(15, 23, 42, 0.4);
    transition: background 0.18s ease, transform 0.12s ease;
}

.order-row:hover {
    background: rgba(15, 23, 42, 0.75);
}

.order-row.open {
    background: rgba(30, 64, 175, 0.45);
}

/* ID + chevron */

.order-id {
    font-weight: 600;
    color: #e5e7eb;
}

.order-chevron {
    font-size: 0.72rem;
    margin-left: 6px;
    color: #9ca3af;
    transition: transform 0.16s ease, color 0.16s ease;
}

.order-row:hover .order-chevron {
    color: #e5e7eb;
}

.order-row.open .order-chevron {
    transform: rotate(180deg);
}

/* Anchos de columnas */

.col-id {
    width: 80px;
}

.col-external {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-amount {
    font-weight: 600;
    color: #e5e7eb;
}

.col-status {
    width: 130px;
}

.col-pi {
    max-width: 240px;
}

.col-pi .pi-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    color: #9ca3af;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-date {
    min-width: 135px;
    font-variant-numeric: tabular-nums;
}

/* Badge de estado */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.badge-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

/* Estados específicos */

.badge-status-pending {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(120, 53, 15, 0.6);
}

.badge-status-pending .badge-status-dot {
    background: #fbbf24;
}

.badge-status-paid {
    color: #bbf7d0;
    border-color: rgba(22, 163, 74, 0.6);
    background: rgba(6, 95, 70, 0.7);
}

.badge-status-paid .badge-status-dot {
    background: #4ade80;
}

.badge-status-failed {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(127, 29, 29, 0.8);
}

.badge-status-canceled {
    color: #E5E7EB;
    border-color: rgba(156, 163, 175, 0.6); /* gray-400 */
    background: rgba(31, 41, 55, 0.8);      /* gray-800 */
}

.badge-status-failed .badge-status-dot {
    background: #f97373;
}

.badge-status-canceled .badge-status-dot {
    background: #E5E7EB;
}

/* =========================================================
   FILA DETALLE DEL PEDIDO
========================================================= */

.order-detail-row {
    display: none;
    background: radial-gradient(
        circle at top left,
        rgba(30, 64, 175, 0.35),
        rgba(15, 23, 42, 0.95)
    );
}

.order-detail-row.open {
    display: table-row;
}

.order-detail-row > td {
    padding: 0;
    border-bottom: none;
}

/* Contenedor del detalle */

.order-detail {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(79, 70, 229, 0.55);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.7);
}

/* Cabecera del detalle */

.order-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.order-detail-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e5e7eb;
}

.order-detail-subtitle {
    font-size: 0.78rem;
    color: #9ca3af;
}

.order-detail-total {
    font-size: 0.86rem;
    color: #e5e7eb;
    white-space: nowrap;
}

/* Grid de items */

.order-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

/* Card del item */

.order-item-card {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: radial-gradient(
        circle at top left,
        rgba(59, 130, 246, 0.23),
        rgba(15, 23, 42, 0.95)
    );
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Miniatura */

.order-item-thumb {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(30, 64, 175, 0.8);
    background: #020617;
}

.order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Información del item */

.order-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.order-item-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-meta {
    font-size: 0.75rem;
    color: #9ca3af;
}

.order-item-subtotal {
    font-size: 0.78rem;
    color: #bfdbfe;
    font-weight: 500;
    margin-top: 5px;
}

/* Mensaje de detalle vacío */

.order-detail-empty {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
    .topbar-inner {
        padding-inline: 12px;
    }

    .main-inner {
        padding-inline: 12px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card {
        padding: 10px 10px 12px;
    }

    .card-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .badge-count {
        align-self: flex-start;
    }

    .orders-table th,
    .orders-table td {
        padding: 7px 8px;
        font-size: 0.82rem;
    }

    .order-detail {
        padding: 10px 10px 12px;
    }

    .order-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-detail-total {
        margin-top: 4px;
    }
}

/* Columna de acciones */
.col-actions {
    white-space: nowrap;
    text-align: right;
}

/* Botones pequeños dentro de la tabla */
.btn-xs {
    padding: 4px 8px;
    font-size: 0.75rem;
}

/* Aseguramos que el botón ID no rompa la fila */
.order-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.8);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.8rem;
}

.order-toggle:hover {
    background: rgba(30, 64, 175, 0.7);
    border-color: rgba(59, 130, 246, 0.8);
}

.order-toggle .order-chevron {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Rotar chevron cuando está abierto */
.order-row.open .order-chevron {
    transform: rotate(180deg);
}

/* =========================
   BOTONES GENERALES
   ========================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    padding: 0.45rem 1rem;
    border-radius: 999px;

    border: 1px solid rgba(148, 163, 184, 0.7);
    background: radial-gradient(circle at top left, #1e293b, #020617);
    color: #e5e7eb;

    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;

    cursor: pointer;
    text-decoration: none;
    user-select: none;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.45),
        0 0 0 1px rgba(15, 23, 42, 0.8);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease,
        color 0.18s ease;
}

.btn:hover {
    background: radial-gradient(circle at top left, #1d4ed8, #020617);
    border-color: rgba(59, 130, 246, 0.9);
    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.45),
        0 0 0 1px rgba(37, 99, 235, 0.9);
    transform: translateY(-1px);
    color: #f9fafb;
}

.btn:active {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.6),
        0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Estado deshabilitado */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Tamaños */
.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
}

.btn-xs {
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
}

/* Variantes de color */
.btn-primary {
    background: radial-gradient(circle at top left, #2563eb, #1d4ed8);
    border-color: rgba(59, 130, 246, 0.95);
    color: #f9fafb;
}

.btn-primary:hover {
    background: radial-gradient(circle at top left, #1d4ed8, #1e40af);
}

.btn-secondary {
    background: linear-gradient(135deg, #0f172a, #020617);
    border-color: rgba(51, 65, 85, 0.9);
    color: #e5e7eb;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #111827, #020617);
}

.btn-ghost {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.4);
    color: #e5e7eb;
    box-shadow: none;
}

.btn-ghost:hover {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.9);
}

/* Botón de peligro (por si lo necesitas después) */
.btn-danger {
    background: radial-gradient(circle at top left, #dc2626, #7f1d1d);
    border-color: rgba(239, 68, 68, 0.95);
    color: #fef2f2;
}

.btn-danger:hover {
    background: radial-gradient(circle at top left, #b91c1c, #7f1d1d);
}

/* =========================
   LOGIN / AUTH
   ========================= */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;

    background: radial-gradient(circle at top left,
        rgba(30, 64, 175, 0.16),
        rgba(15, 23, 42, 0.96)
    );
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.82),
        0 0 0 1px rgba(15, 23, 42, 0.9);
    padding: 2.2rem 2rem 2rem;
    color: #e5e7eb;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 1.8rem 1.5rem 1.6rem;
    }
}

/* Cabecera del login */
.auth-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.6rem;
}

.auth-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0,
        #60a5fa,
        #1d4ed8
    );
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 10px 25px rgba(37, 99, 235, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    color: #f9fafb;
    text-transform: uppercase;
}

.auth-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.auth-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
    color: #f9fafb;
}

.auth-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #9ca3af;
}

/* Alert de error */
.auth-alert {
    margin-bottom: 1rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.6);
    color: #fecaca;
    font-size: 0.8rem;
}

/* Formulario */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.auth-field label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #e5e7eb;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.auth-field input {
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    outline: none;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.auth-field input::placeholder {
    color: #6b7280;
    font-size: 0.8rem;
}

.auth-field input:focus {
    border-color: rgba(59, 130, 246, 0.95);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.9),
                0 0 0 4px rgba(37, 99, 235, 0.25);
    background: rgba(15, 23, 42, 1);
}

/* Botón */
.auth-submit {
    width: 100%;
    margin-top: 0.4rem;
}

/* Nota inferior */
.auth-footnote {
    margin: 0;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #9ca3af;
    text-align: center;
}

/* =========================================================
   FORMULARIOS GLOBALES - VMA Pay CRM
   ========================================================= */

/* Contenedor general de formularios */
.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Campos base */
.form-field,
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

/* Etiquetas */
.form-field label,
.auth-field label {
    font-size: 14px;
    font-weight: 500;
    color: #cbd5e1;
}

/* Inputs y selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Focus */
input:focus,
select:focus,
textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
    background: #1e293b;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: #64748b;
}

/* Select visual bonito */
select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

/* Checkbox y radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #3b82f6;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #cbd5e1;
    user-select: none;
}

/* Textarea */
textarea {
    resize: vertical;
    min-height: 80px;
}

/* Acciones del formulario */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* Alertas */
.form-alert {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
}

/* Responsividad */
@media (max-width: 768px) {
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    .btn {
        width: 100%;
    }
}

/* Estados operativos (pedido) */
.badge-status-hold      { background: #FFF3B0; color:#9a3412; border:1px solid #fed7aa; }
.badge-status-progress  { background: #eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.badge-status-prepared  { background: #ecfdf5; color:#065f46; border:1px solid #a7f3d0; }

/* Estados (solo cambia el punto) */
.badge-status-hold   .badge-status-dot{ background:#9a3412; } /* amber */
.badge-status-prepared      .badge-status-dot{ background:#22c55e; } /* green */
.badge-status-progress .badge-status-dot{ background:#3b82f6; } /* blue */

/* ===== Utilidad: grid fijo 4 columnas (responsive) ===== */
.grid-4{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:1200px){ .grid-4{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){  .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){  .grid-4{ grid-template-columns:1fr; } }

/* Encabezado pequeño de sección y separador fino */
.section-title{
  font-size:13px;
  font-weight:600;
  color:var(--ink-700);
  margin:4px 0 12px;
}
.section-sep{
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0 20px;
}

/* (Reutiliza tus estilos existentes) 
   order-items-grid ya lo usas en otras pantallas */
.order-items-grid{ /* fallback si no existiera */
  display:grid;
  gap:16px;
}

/* ====== KPI / Resumen ====== */
.kpi-card { padding:16px; }

.kpi-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:12px;
}
.kpi-title{ font-size:14px; font-weight:700; color:var(--ink-900); }
.kpi-subtitle{ font-size:12px; color:var(--ink-500); }

.kpi-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width:640px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

.kpi-box {
  background: radial-gradient( circle at top left, rgba(59, 130, 246, 0.23), rgba(15, 23, 42, 0.95) );
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
}
.kpi-box-title{ font-size:12px; color:var(--ink-600); font-weight:600; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }
.kpi-box-value{ font-size:22px; line-height:1.1; font-weight:700; color:var(--ink-900); }
.kpi-box-foot{ margin-top:6px; font-size:12px; }

/* ====== Filtros ====== */
.filters-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
}
.form-input--sm{ height:34px; padding:6px 10px; font-size:13px; }
.filters-custom{
  display:flex; align-items:center; gap:6px;
}
.filters-custom[data-visible="0"]{ display:none; }
.filters-sep{ color:var(--ink-400); }

/* Botón pequeño si no lo tuvieras */
.btn-sm{ height:34px; padding:6px 12px; font-size:13px; }

/* (Si aún no tienes variables) 
:root{
  --ink-900:#0f172a; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-400:#94a3b8;
  --bg-soft:#f8fafc; --border:#e5e7eb;
}
*/

.is-loading .orders-table,
.is-loading .kpi-card {
  opacity: .6;
  transition: opacity .15s ease;
  pointer-events: none;
}

/* Modal mínimo (no interfiere con tu CSS existente) */
    .ec-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000
    }

    .ec-modal-overlay[aria-hidden="false"] {
        display: flex
    }

    .ec-modal {
        background: radial-gradient(circle at top left, rgba(59, 130, 246, 1), rgba(15, 23, 42, 1));
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 10px;
        max-width: 480px;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
    }

    .ec-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    }

    .ec-modal-title {
        font-weight: 600
    }

    .ec-modal-close {
        background: transparent;
        border: 0;
        font-size: 20px;
        line-height: 1;
        cursor: pointer
    }

    .ec-modal-body {
        padding: 16px
    }

    .ec-modal-row {
        margin-bottom: 12px
    }

    .ec-label {
        display: block;
        font-size: 12px;
        color: #fff;
        margin-bottom: 6px
    }

    .ec-input-group {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .ec-input-suffix {
        display: inline-block;
        min-width: 46px;
        text-align: center;
        font-size: 12px;
        color: #000;
        background: #f3f4f6;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 6px;
        padding: 8px
    }

    .ec-hint {
        font-size: 12px;
        color: #fff;
        margin-top: 6px
    }

    .ec-text-muted {
        color: #fff
    }

    .ec-error {
        color: #b91c1c;
        font-size: 13px;
        min-height: 18px;
        margin-top: 6px
    }

    .ec-modal-foot {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding: 12px 16px;
        border-top: 1px solid rgba(148, 163, 184, 0.35);
    }

    .alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 10px 0;
  font-weight: 500;
}
.alert-success {
  background: #e6f7e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}
.alert-error {
  background: #fdecea;
  color: #b71c1c;
  border: 1px solid #f5c6cb;
}

/* Sub-sección dentro de la card */
.card-subsection {
  margin-top: 12px;
  padding: 16px 18px;
  background: radial-gradient( circle at top left, rgba(59, 130, 246, 0.23), rgba(15, 23, 42, 0.95) );
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
}

/* Grid responsive 2 columnas (1 en móvil) */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 18px;
}
@media (min-width: 720px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}

.info-item .info-label {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #bfdbfe);
  margin-bottom: 4px;
}

.info-item .info-value {
  font-weight: 600;
  color: var(--text, #ffffff);
  line-height: 1.35;
  word-break: break-word;
}

.info-item .info-value a {
  color: var(--primary, #ffffff);
  text-decoration: none;
  border-bottom: 1px dashed rgba(17,24,39,.25);
}
.info-item .info-value a:hover {
  border-bottom-style: solid;
}

/* Opcional: separador más sutil si la card-subsection va justo tras el header */
.card + .card-subsection,
.card-subsection + .card-subsection {
  margin-top: 14px;
}

/* Igualar altura de las dos columnas (Cliente / Pedido) */
.info-columns{
  display: grid;
  grid-template-columns: minmax(280px,1fr) minmax(260px,1fr);
  gap: 16px;
  align-items: stretch; /* antes: start */
}

/* Forzar que cada bloque estire a 100% de alto dentro de la fila */
.info-columns > .card-subsection,
.info-columns > .order-info{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Si dentro usas .info-grid, que pueda crecer para rellenar */
.info-columns .info-grid{
  flex: 1 1 auto;
}

.pi-code.pi-blur{
    background-color: #ffffff2b;
    filter: blur(5px);
    user-select: none;
}

/* ===== Extra Charges · Pill Pedido (modo oscuro) ===== */
.orders-table .charge-order-pill {
  display: inline-flex;           /* NO ocupar todo el ancho */
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;

  /* fondo y borde pensados para bg #0B1224 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #E6ECFF;

  /* evita ocupar todo el ancho en celdas flex/tabla */
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;

  /* sutil relieve + transición */
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
  transition: .15s border-color, .15s box-shadow, .15s transform, .15s background-color, .15s color;
}

.orders-table .charge-order-pill:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.18); /* usa tu var(--ring) si la tienes */
  transform: translateY(-1px);
}

/* contenedor columna: sin cambios de layout, solo coherencia visual */
.orders-table .charge-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* subtítulos debajo del pill (cliente/concepto) */
.orders-table .charge-sub {
  font-size: 12px;
  color: rgba(230, 236, 255, 0.8);
}

.orders-table .charge-desc {
  font-size: 12px;
  color: #E6ECFF;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 6px 8px;
  word-break: break-word;
}

/* (opcional) recortar en una línea con "..." */
.orders-table .charge-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;    /* cambia a 2 si quieres dos líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==== Dropdown de Pedidos: look & feel oscuro como el topbar ==== */
.menu-group { position: relative; }
.menu-trigger .caret { margin-left: 6px; font-size: 10px; opacity: .75; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #0B1224; /* mismo tono dark del dashboard */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    padding: 8px;
    z-index: 60;
    display: none;
    backdrop-filter: saturate(1.2);
}
.menu-group.open .dropdown-menu { display: block; }

/* Ítems: mismo “botón fantasma” que en el topbar */
.dropdown-menu .btn.submenu-link {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    text-decoration: none;
    background: transparent;
    color: #E5E7EB;           /* texto claro sobre fondo oscuro */
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 12px;
    transition: background .15s, color .15s, border-color .15s;
}

.dropdown-menu .btn.submenu-link:hover {
    background: rgba(255,255,255,0.06);
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.08);
}

/* Activo (tu azul) */
.dropdown-menu .btn.submenu-link.is-active{
  background:#1a3795;
  color:#FFFFFF;
  border-color:#667ecc;
}

/* Hover del activo: un toque más claro */
.dropdown-menu .btn.submenu-link.is-active:hover{
  background:#2242b3;
  border-color:#7f96e6;
}

/* Focus accesible (tecla Tab) */
.dropdown-menu .btn.submenu-link:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(102,126,204,.35);
}

/* Hover para los no activos (mantiene look ghost oscuro) */
.dropdown-menu .btn.submenu-link:not(.is-active):hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  color:#FFFFFF;
}

/* Feedback visual del trigger y caret */
.menu-group .caret{ transition: transform .15s ease; }
.menu-group.open .caret{ transform: rotate(180deg); }
.menu-group.open .menu-trigger{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
}

/* Mejor tap en móviles */
.dropdown-menu .btn.submenu-link{ -webkit-tap-highlight-color: transparent; }

.submenu-link i {
    width: 16px;
    text-align: center;
    opacity: .9;
}

/* Estado abierto del trigger (opcional, pequeño feedback) */
.menu-group.open .menu-trigger {
    background: rgba(255,255,255,0.06);
}

.badge-discount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;       /* verde muy claro */
    color: #047857;            /* verde texto */
    font-size: 12px;
    font-weight: 500;
}

.badge-discount-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #059669;
}

.badge-discount-amount {
    font-weight: 600;
}

.badge-discount-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
}

.tag-muted-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
}

/* === Recuperador - Email Form === */

.vars-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.var-pill {
    background: rgba(0,0,0,0.07);
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.var-pill code {
    font-family: monospace;
}

.code-editor {
    font-family: monospace;
    min-height: 260px;
}