/* =========================================================
   NONA GRAFIC - SISTEMA DE GESTIÓN
   STYLE.CSS COMPLETO
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --primary: #08698f;
    --primary-dark: #043d5a;
    --primary-deep: #022f47;

    --secondary: #1598b8;
    --secondary-light: #2eb2cf;

    --background: #f3f7fa;
    --white: #ffffff;

    --text: #244b61;
    --text-dark: #082f46;
    --text-soft: #718895;

    --border: #dde7ec;

    --success: #168768;
    --danger: #c65353;
    --warning: #c68b22;

    --sidebar-width: 270px;

    --radius: 14px;
    --radius-lg: 20px;

    --shadow:
        0 10px 30px rgba(4, 58, 86, 0.08);

    --shadow-lg:
        0 18px 50px rgba(4, 58, 86, 0.15);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    width: 100%;
    min-height: 100%;
}


body {
    width: 100%;
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    margin: 0;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
select,
textarea {
    font-family: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   ESTRUCTURA GENERAL
========================================================= */

.app-layout {
    width: 100%;
    min-height: 100vh;

    display: flex;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: fixed;

    left: 0;
    top: 0;

    width: var(--sidebar-width);
    height: 100vh;

    z-index: 1000;

    display: flex;
    flex-direction: column;

    color: white;

    background:
        linear-gradient(
            180deg,
            #043d5a 0%,
            #075e83 48%,
            #064968 100%
        );

    box-shadow:
        7px 0 30px rgba(3, 44, 66, 0.18);

    overflow: hidden;

    transition:
        transform 0.3s ease;
}


/* =========================================================
   LOGO SIDEBAR
========================================================= */

.sidebar-header {
    min-height: 105px;

    padding: 18px 17px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);
}


.sidebar-logo-container {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 14px;

    background: white;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.12);
}


.sidebar-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


.sidebar-brand {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.sidebar-brand strong {
    color: white;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 0.8px;
}


.sidebar-brand span {
    margin-top: 3px;

    color:
        rgba(255,255,255,0.62);

    font-size: 10px;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.sidebar-nav {
    flex: 1;

    padding: 18px 12px;

    overflow-y: auto;

    scrollbar-width: thin;
}


.nav-item {
    width: 100%;
    min-height: 47px;

    padding: 0 14px;

    margin-bottom: 4px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 11px;

    color:
        rgba(255,255,255,0.76);

    font-size: 13px;
    font-weight: 500;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.nav-item i {
    width: 20px;

    flex-shrink: 0;

    text-align: center;

    font-size: 15px;
}


.nav-item:hover {
    color: white;

    background:
        rgba(255,255,255,0.10);

    transform:
        translateX(2px);
}


.nav-item.active {
    color: white;

    font-weight: 650;

    background:
        linear-gradient(
            90deg,
            rgba(39, 177, 207, 0.35),
            rgba(255,255,255,0.11)
        );

    box-shadow:
        inset 3px 0 0 #56d1e8;
}


/* =========================================================
   PIE SIDEBAR
========================================================= */

.sidebar-footer {
    padding: 15px;

    border-top:
        1px solid rgba(255,255,255,0.10);
}


.user-mini {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 14px;
}


.user-avatar,
.topbar-avatar {
    width: 41px;
    height: 41px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #4ac3da,
            #d6f3f8
        );

    color: #034661;

    font-weight: 800;
}


.user-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.user-info strong {
    overflow: hidden;

    color: white;

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.user-info span {
    margin-top: 3px;

    color:
        rgba(255,255,255,0.58);

    font-size: 9px;
}


.logout-btn {
    width: 100%;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 10px;

    color:
        rgba(255,255,255,0.79);

    background:
        rgba(255,255,255,0.07);

    font-size: 11px;

    transition: background 0.2s;
}


.logout-btn:hover {
    color: white;

    background:
        rgba(255,255,255,0.13);
}


/* =========================================================
   CONTENIDO
========================================================= */

.main-content {
    width:
        calc(100% - var(--sidebar-width));

    min-height: 100vh;

    margin-left:
        var(--sidebar-width);
}


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

.topbar {
    position: sticky;

    top: 0;

    z-index: 500;

    width: 100%;
    height: 82px;

    padding: 0 32px;

    display: flex;
    align-items: center;

    background:
        rgba(255,255,255,0.97);

    border-bottom:
        1px solid #e1e9ed;

    box-shadow:
        0 3px 12px rgba(5, 55, 79, 0.025);

    backdrop-filter:
        blur(10px);
}


.topbar-title {
    display: flex;
    flex-direction: column;
}


.topbar-small {
    color: #0a88a9;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.2px;
}


.topbar-title h1 {
    margin-top: 2px;

    color: var(--text-dark);

    font-size: 21px;

    font-weight: 750;
}


.topbar-user {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 12px;
}


.topbar-user-data {
    display: flex;
    flex-direction: column;

    text-align: right;
}


.topbar-user-data strong {
    color: #244d62;

    font-size: 12px;
}


.topbar-user-data span {
    margin-top: 3px;

    color: #899ba5;

    font-size: 9px;
}


.menu-btn {
    width: 42px;
    height: 42px;

    margin-right: 13px;

    display: none;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 10px;

    color: var(--primary);

    background: #eaf4f7;

    font-size: 17px;
}


/* =========================================================
   ÁREA DE PÁGINA
========================================================= */

.page-content {
    width: 100%;

    padding:
        28px
        32px
        45px;
}


/* =========================================================
   ALERTAS
========================================================= */

.flash-container {
    margin-bottom: 18px;
}


.alert {
    min-height: 48px;

    margin-bottom: 10px;

    padding: 11px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-radius: 11px;

    font-size: 12px;
}


.alert-content {
    display: flex;
    align-items: center;

    gap: 10px;
}


.alert-success {
    color: #18664f;

    background: #e9f7f2;

    border: 1px solid #c9eadf;
}


.alert-danger {
    color: #9d4242;

    background: #fdefef;

    border: 1px solid #f1cece;
}


.alert-warning {
    color: #85611a;

    background: #fff7df;

    border: 1px solid #f0e0ad;
}


.alert-close {
    border: 0;

    background: transparent;

    color: inherit;
}


/* =========================================================
   DASHBOARD - BIENVENIDA
========================================================= */

.welcome-card {
    position: relative;

    min-height: 165px;

    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    overflow: hidden;

    border-radius: 20px;

    color: white;

    background:
        linear-gradient(
            110deg,
            #043f5d,
            #086d91 58%,
            #1598b8
        );

    box-shadow:
        var(--shadow-lg);
}


.welcome-card::before {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    right: -100px;
    top: -150px;

    border-radius: 50%;

    border:
        50px solid
        rgba(255,255,255,0.055);
}


.welcome-card > * {
    position: relative;

    z-index: 2;
}


.welcome-label {
    display: block;

    color:
        rgba(255,255,255,0.65);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.welcome-card h2 {
    margin-top: 7px;

    color: white;

    font-size: 29px;

    font-weight: 750;
}


.welcome-card p {
    max-width: 620px;

    margin-top: 8px;

    color:
        rgba(255,255,255,0.75);

    font-size: 13px;

    line-height: 1.6;
}


.welcome-icon {
    width: 90px;
    height: 90px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 23px;

    color: white;

    background:
        rgba(255,255,255,0.11);

    font-size: 36px;
}


/* =========================================================
   DASHBOARD KPI
========================================================= */

.kpi-grid {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 17px;
}


.kpi-card {
    min-height: 120px;

    padding: 20px;

    display: flex;
    align-items: center;

    gap: 15px;

    border:
        1px solid #e5edf1;

    border-radius: 16px;

    background: white;

    box-shadow:
        var(--shadow);
}


.kpi-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--primary);

    background: #e7f4f8;

    font-size: 20px;
}


.kpi-card span {
    color: #81939e;

    font-size: 11px;
}


.kpi-card h3 {
    margin-top: 5px;

    color: var(--text-dark);

    font-size: 22px;
}


/* =========================================================
   DASHBOARD PANELES
========================================================= */

.dashboard-grid {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 20px;
}


.panel-card {
    padding: 22px;

    border:
        1px solid #e4ecef;

    border-radius: 17px;

    background: white;

    box-shadow:
        var(--shadow);
}


.panel-header h3 {
    color: var(--text-dark);

    font-size: 16px;
}


.panel-header p {
    margin-top: 5px;

    color: #8799a4;

    font-size: 11px;
}


/* =========================================================
   ACCIONES RÁPIDAS
========================================================= */

.quick-actions {
    margin-top: 19px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.quick-action {
    min-height: 77px;

    padding: 14px;

    display: flex;
    align-items: center;

    gap: 12px;

    border:
        1px solid #e4ecef;

    border-radius: 12px;

    color: #3f6478;

    background: #fbfdfe;

    font-size: 12px;

    font-weight: 600;

    transition: 0.2s;
}


.quick-action i {
    width: 41px;
    height: 41px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--primary);

    background: #e7f3f7;
}


.quick-action:hover {
    transform: translateY(-2px);

    border-color: #afd4df;

    box-shadow:
        0 8px 20px rgba(5, 80, 110, 0.08);
}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.empty-state {
    min-height: 185px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #92a4ae;

    font-size: 11px;
}


.empty-state i {
    color: #c0d2da;

    font-size: 32px;
}


/* =========================================================
   ENCABEZADO DE PÁGINAS
========================================================= */

.page-actions {
    margin-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}


.page-eyebrow,
.modal-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #0886a7;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.2px;
}


.page-actions h2 {
    color: var(--text-dark);

    font-size: 20px;
}


.page-actions p {
    margin-top: 4px;

    color: #8295a1;

    font-size: 11px;
}


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

.btn-primary,
.btn-secondary {
    min-height: 43px;

    padding: 0 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 650;
}


.btn-primary {
    border: 0;

    color: white;

    background:
        linear-gradient(
            90deg,
            #06698f,
            #1197b7
        );

    box-shadow:
        0 8px 18px rgba(5, 103, 143, 0.19);
}


.btn-primary:hover {
    transform: translateY(-1px);
}


.btn-secondary {
    border:
        1px solid #d6e1e6;

    color: #567383;

    background: white;
}


/* =========================================================
   TABLAS
========================================================= */

.table-responsive {
    width: 100%;

    overflow-x: auto;
}


.data-table {
    width: 100%;

    min-width: 800px;

    border-collapse: collapse;
}


.data-table th {
    padding: 13px 12px;

    text-align: left;

    color: #788d99;

    border-bottom:
        1px solid #dde7eb;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}


.data-table td {
    padding: 14px 12px;

    color: #496a7c;

    border-bottom:
        1px solid #edf2f4;

    font-size: 12px;
}


.data-table tbody tr:hover {
    background: #fbfdfe;
}


/* =========================================================
   USUARIOS
========================================================= */

.table-user {
    display: flex;
    align-items: center;

    gap: 10px;
}


.table-avatar {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: var(--primary);

    background: #e8f4f8;

    font-weight: 800;
}


.table-user strong {
    display: block;

    color: #31576b;

    font-size: 12px;
}


.table-user span {
    display: block;

    margin-top: 2px;

    color: #8a9aa4;

    font-size: 10px;
}


.principal-label {
    display: block;

    margin-top: 3px;

    color: #0984a5;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;
}


.role-badge {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 20px;

    color: #536f80;

    background: #edf3f6;

    font-size: 9px;

    font-weight: 700;

    text-transform: capitalize;
}


.status {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 700;
}


.status.active {
    color: #176f55;

    background: #e8f6f1;
}


.status.inactive {
    color: #a14c4c;

    background: #f9ebeb;
}


.protected-user {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #087d9e;

    font-size: 10px;

    font-weight: 700;
}


.inline-form {
    display: inline-block;
}


.btn-table {
    width: 35px;
    height: 35px;

    border:
        1px solid #d9e4e8;

    border-radius: 9px;

    color: #a85353;

    background: white;
}


/* =========================================================
   PRODUCTOS - KPIS
========================================================= */

.products-kpi-grid {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 16px;
}


.product-kpi {
    min-height: 100px;

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    border:
        1px solid #e5edf1;

    border-radius: 15px;

    background: white;

    box-shadow:
        var(--shadow);
}


.product-kpi-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #087b9e;

    background: #e7f4f8;

    font-size: 19px;
}


.product-kpi-icon.service {
    color: #5475b0;

    background: #edf1fb;
}


.product-kpi-icon.warning {
    color: #b37a1e;

    background: #fff3dc;
}


.product-kpi-icon.inactive {
    color: #ad5151;

    background: #f8eaea;
}


.product-kpi span {
    display: block;

    color: #8396a1;

    font-size: 10px;
}


.product-kpi strong {
    display: block;

    margin-top: 4px;

    color: var(--text-dark);

    font-size: 21px;
}


/* =========================================================
   PRODUCTOS - TOOLBAR
========================================================= */

.products-table-card {
    padding: 0;

    overflow: hidden;
}


.products-toolbar {
    padding: 18px;

    display: flex;
    justify-content: space-between;

    gap: 12px;

    border-bottom:
        1px solid #e5ecef;
}


.products-search {
    width: 100%;
    max-width: 470px;
    height: 43px;

    padding: 0 13px;

    display: flex;
    align-items: center;

    border:
        1px solid #d8e3e8;

    border-radius: 10px;

    background: #f9fbfc;
}


.products-search i {
    margin-right: 9px;

    color: #7e96a3;
}


.products-search input {
    width: 100%;

    border: 0;

    outline: 0;

    color: #31576b;

    background: transparent;
}


.product-filter {
    min-width: 150px;

    padding: 0 12px;

    border:
        1px solid #d8e3e8;

    border-radius: 10px;

    color: #536f80;

    background: white;
}


/* =========================================================
   PRODUCTOS
========================================================= */

.product-code {
    color: #087d9f;

    font-size: 10px;

    font-weight: 800;
}


.product-info-cell {
    display: flex;
    align-items: center;

    gap: 10px;
}


.product-icon-small {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #087b9e;

    background: #e8f4f8;
}


.product-info-cell strong {
    display: block;

    color: #31576b;
}


.product-info-cell small {
    display: block;

    max-width: 230px;

    margin-top: 2px;

    overflow: hidden;

    color: #8d9da6;

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.type-badge,
.stock-badge,
.stock-none {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 700;
}


.type-badge.product {
    color: #087a9b;

    background: #e7f4f8;
}


.type-badge.service {
    color: #5573aa;

    background: #edf0fa;
}


.stock-badge {
    color: #1d7258;

    background: #e9f7f2;
}


.stock-badge.low {
    color: #aa711c;

    background: #fff1dc;
}


.stock-none {
    color: #84969f;

    background: #f1f4f5;
}


.product-actions {
    display: flex;
    align-items: center;

    gap: 5px;
}


.action-button {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #dbe5e9;

    border-radius: 9px;

    color: #557789;

    background: white;
}


.action-button:hover {
    color: var(--primary);

    border-color: #acd1dc;
}


.table-empty {
    height: 250px;

    text-align: center !important;

    color: #8da0aa !important;
}


.table-empty i,
.table-empty strong,
.table-empty span {
    display: block;
}


.table-empty i {
    margin-bottom: 10px;

    color: #bfd0d8;

    font-size: 34px;
}


.table-empty strong {
    color: #5a7483;
}


.table-empty span {
    margin-top: 4px;

    font-size: 10px;
}


/* =========================================================
   MODALES
========================================================= */

.modal-overlay {
    position: fixed;

    inset: 0;

    z-index: 3000;

    padding: 22px;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(2, 35, 51, 0.58);

    backdrop-filter:
        blur(4px);
}


.modal-overlay.show {
    display: flex;
}


.modal-card {
    width: 100%;
    max-width: 650px;

    max-height:
        calc(100vh - 44px);

    overflow-y: auto;

    padding: 25px;

    border-radius: 18px;

    background: white;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.22);
}


.modal-header {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;

    gap: 15px;
}


.modal-header h3 {
    color: var(--text-dark);

    font-size: 18px;
}


.modal-header p {
    margin-top: 4px;

    color: #899ba5;

    font-size: 11px;
}


.modal-close {
    width: 37px;
    height: 37px;

    flex-shrink: 0;

    border: 0;

    border-radius: 9px;

    color: #66808e;

    background: #eef4f6;
}


/* =========================================================
   FORMULARIOS
========================================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


.form-group {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.form-full {
    grid-column:
        1 / -1;
}


.form-group label {
    color: #506f81;

    font-size: 11px;

    font-weight: 650;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    min-height: 44px;

    padding: 0 12px;

    border:
        1px solid #d5e0e5;

    border-radius: 9px;

    outline: none;

    color: #31566a;

    background: #fbfcfd;
}


.form-group textarea {
    min-height: 90px;

    padding: 11px;

    resize: vertical;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #1595b5;

    background: white;

    box-shadow:
        0 0 0 3px rgba(21,149,181,0.08);
}


.money-input {
    display: flex;
    align-items: center;

    overflow: hidden;

    border:
        1px solid #d5e0e5;

    border-radius: 9px;

    background: #fbfcfd;
}


.money-input span {
    padding-left: 12px;

    color: #527385;

    font-size: 12px;

    font-weight: 700;
}


.money-input input {
    border: 0;
}


.modal-footer {
    margin-top: 23px;

    display: flex;
    justify-content: flex-end;

    gap: 9px;
}


/* =========================================================
   STOCK
========================================================= */

.current-stock {
    margin-bottom: 20px;

    padding: 15px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 11px;

    background: #e9f5f8;
}


.current-stock span {
    color: #56788a;

    font-size: 11px;
}


.current-stock strong {
    color: #087d9f;

    font-size: 24px;
}


.product-history-summary {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 15px;
}


.product-history-summary div {
    padding: 18px;

    border:
        1px solid #e4ecef;

    border-radius: 14px;

    background: white;

    box-shadow:
        var(--shadow);
}


.product-history-summary span {
    display: block;

    color: #82949f;

    font-size: 10px;
}


.product-history-summary strong {
    display: block;

    margin-top: 5px;

    color: var(--text-dark);

    font-size: 18px;
}


.movement-badge {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 9px;

    font-weight: 700;
}


.movement-badge.entry {
    color: #176d53;

    background: #e7f6f0;
}


.movement-badge.exit {
    color: #aa4e4e;

    background: #faecec;
}


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

.ng-login {
    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        58% 42%;

    background: #edf5f8;

    overflow: hidden;
}


.ng-login-showcase {
    position: relative;

    min-height: 100vh;

    padding: 50px 7%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fbfdfe,
            #edf6f9 52%,
            #d9edf3
        );
}


.ng-showcase-content {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 730px;
}


.ng-showcase-logo {
    margin-bottom: 42px;
}


.ng-showcase-logo img {
    width: 280px;
    max-width: 65%;

    display: block;

    object-fit: contain;
}


.ng-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #0b83a4;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 6px;
}


.ng-showcase-copy h1 {
    color: #063e5a;

    font-size:
        clamp(40px, 4.5vw, 64px);

    line-height: 0.98;

    letter-spacing: -2px;

    font-weight: 300;
}


.ng-showcase-copy h1 strong {
    font-weight: 800;
}


.ng-showcase-copy h2 {
    margin-top: 10px;

    color: #0783a6;

    font-size:
        clamp(28px, 3vw, 43px);

    font-weight: 300;

    letter-spacing: 5px;
}


.ng-showcase-copy p {
    max-width: 540px;

    margin-top: 23px;

    color: #4d7285;

    font-size: 16px;

    line-height: 1.7;
}


.ng-services {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 21px;
}


.ng-service {
    width: 95px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 8px;
}


.ng-service-icon {
    width: 59px;
    height: 59px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #087da0;

    background:
        linear-gradient(
            145deg,
            #fff,
            #deeff4
        );

    box-shadow:
        0 9px 23px rgba(5,76,105,0.11);

    font-size: 22px;
}


.ng-service span {
    color: #3e6578;

    font-size: 9px;

    font-weight: 800;

    text-align: center;
}


.ng-slogan {
    display: inline-block;

    margin-top: 50px;

    color: #087d9f;

    font-family:
        "Segoe Script",
        cursive;

    font-size: 24px;

    transform: rotate(-3deg);
}


.ng-creative-scene {
    position: absolute;

    right: -20px;
    bottom: 50px;

    width: 260px;
    height: 200px;
}


.scene-card {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #087da0;

    background:
        rgba(255,255,255,0.82);

    box-shadow:
        0 17px 40px rgba(3,66,95,0.13);
}


.scene-card-shirt {
    width: 130px;
    height: 135px;

    right: 0;
    top: 10px;

    border-radius: 23px;

    transform: rotate(7deg);

    font-size: 57px;
}


.scene-card-mug {
    width: 92px;
    height: 92px;

    left: 5px;
    bottom: 3px;

    border-radius: 20px;

    transform: rotate(-8deg);

    font-size: 39px;
}


.scene-circle {
    position: absolute;

    left: 74px;
    top: 7px;

    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #07678e,
            #17a4c3
        );

    font-size: 22px;
}


.ng-decoration {
    position: absolute;

    border-radius: 50%;
}


.ng-decoration-1 {
    width: 500px;
    height: 500px;

    left: -300px;
    top: -270px;

    background:
        rgba(10,138,173,0.05);
}


.ng-decoration-2 {
    width: 620px;
    height: 620px;

    right: -370px;
    bottom: -390px;

    background:
        rgba(5,89,128,0.06);
}


.ng-decoration-3 {
    width: 200px;
    height: 200px;

    right: 110px;
    top: -125px;

    border:
        40px solid
        rgba(10,138,173,0.04);
}


/* =========================================================
   LOGIN DERECHO
========================================================= */

.ng-login-side {
    position: relative;

    min-height: 100vh;

    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 12%,
            rgba(46,181,210,0.42),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #053b56,
            #076588 50%,
            #0795b4
        );
}


.ng-login-shape {
    position: absolute;

    border-radius: 50%;
}


.ng-login-shape-1 {
    width: 550px;
    height: 550px;

    right: -310px;
    top: -280px;

    border:
        75px solid
        rgba(255,255,255,0.05);
}


.ng-login-shape-2 {
    width: 450px;
    height: 450px;

    left: -320px;
    bottom: -290px;

    background:
        rgba(255,255,255,0.04);
}


.ng-login-card {
    position: relative;

    z-index: 10;

    width: 100%;
    max-width: 500px;

    padding:
        40px
        46px
        32px;

    border-radius: 27px;

    background:
        rgba(255,255,255,0.98);

    box-shadow:
        0 32px 80px rgba(0,27,45,0.35);
}


.ng-login-logo {
    display: flex;
    justify-content: center;

    margin-bottom: 10px;
}


.ng-login-logo img {
    width: 180px;
    height: 110px;

    object-fit: contain;
}


.ng-login-heading {
    margin-bottom: 25px;

    text-align: center;
}


.ng-heading-line {
    width: 42px;
    height: 4px;

    display: block;

    margin:
        0 auto
        15px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #087ca0,
            #25aac7
        );
}


.ng-login-heading h2 {
    color: #0b344b;

    font-size: 27px;
}


.ng-login-heading p {
    max-width: 320px;

    margin:
        7px auto
        0;

    color: #83949e;

    font-size: 11px;

    line-height: 1.5;
}


.ng-login-form {
    display: flex;
    flex-direction: column;

    gap: 13px;
}


.ng-field {
    width: 100%;
    height: 58px;

    display: flex;
    align-items: center;

    border:
        1px solid #d5e0e5;

    border-radius: 11px;

    background: #f9fbfc;
}


.ng-field:focus-within {
    border-color: #1496b5;

    background: white;

    box-shadow:
        0 0 0 4px rgba(20,150,181,0.08);
}


.ng-field-icon {
    width: 53px;

    display: flex;
    justify-content: center;

    color: #087c9e;
}


.ng-field input {
    flex: 1;

    min-width: 0;

    height: 100%;

    border: 0;
    outline: 0;

    color: #234d61;

    background: transparent;
}


.ng-password-toggle {
    width: 50px;
    height: 100%;

    border: 0;

    color: #648393;

    background: transparent;
}


.ng-login-submit {
    width: 100%;
    height: 59px;

    margin-top: 3px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 0;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            90deg,
            #07678e,
            #0a8eae
        );

    box-shadow:
        0 11px 25px rgba(4,103,143,0.24);

    font-size: 14px;

    font-weight: 700;
}


.ng-login-divider {
    margin:
        28px 0
        21px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 9px;
}


.ng-login-divider span {
    height: 1px;

    background: #d7e1e6;
}


.ng-login-divider p {
    color: #5b7685;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.ng-login-features {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;
}


.ng-login-features div {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: #788e9a;

    font-size: 9px;

    text-align: center;
}


.ng-login-features i {
    color: #087d9f;

    font-size: 17px;
}


.ng-login-footer {
    margin-top: 24px;

    display: flex;
    flex-direction: column;

    align-items: center;
}


.ng-login-footer span {
    color: #087698;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.ng-login-footer small {
    margin-top: 4px;

    color: #8999a2;

    font-size: 9px;
}


/* =========================================================
   ALERTAS LOGIN
========================================================= */

.ng-alert {
    margin-bottom: 15px;

    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 8px;

    border-radius: 9px;

    font-size: 11px;
}


.ng-alert-danger {
    color: #9c4040;

    background: #fdefef;
}


.ng-alert-warning {
    color: #85621c;

    background: #fff6df;
}


.ng-alert-success {
    color: #17694f;

    background: #eaf7f2;
}


/* =========================================================
   SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: 900;

    display: none;

    background:
        rgba(1, 27, 41, 0.50);
}


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

@media (max-width: 1150px) {

    .kpi-grid,
    .products-kpi-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .ng-login {
        grid-template-columns:
            52% 48%;
    }


    .ng-login-showcase {
        padding: 40px;
    }


    .ng-creative-scene {
        opacity: 0.35;
    }

}


@media (max-width: 900px) {

    .sidebar {
        transform:
            translateX(-100%);
    }


    .sidebar.open {
        transform:
            translateX(0);
    }


    .sidebar-overlay.show {
        display: block;
    }


    .main-content {
        width: 100%;
        margin-left: 0;
    }


    .menu-btn {
        display: flex;
    }


    .dashboard-grid {
        grid-template-columns:
            1fr;
    }


    .product-history-summary {
        grid-template-columns:
            repeat(2,1fr);
    }


    .ng-login {
        display: block;

        background:
            linear-gradient(
                145deg,
                #043c58,
                #087d9f
            );
    }


    .ng-login-showcase {
        display: none;
    }


    .ng-login-side {
        min-height: 100vh;

        padding: 20px;
    }

}


@media (max-width: 600px) {

    .page-content {
        padding:
            19px
            14px
            35px;
    }


    .topbar {
        height: 72px;

        padding: 0 14px;
    }


    .topbar-user-data {
        display: none;
    }


    .welcome-card {
        padding: 22px;
    }


    .welcome-card h2 {
        font-size: 23px;
    }


    .welcome-icon {
        display: none;
    }


    .kpi-grid,
    .products-kpi-grid,
    .product-history-summary {
        grid-template-columns: 1fr;
    }


    .quick-actions {
        grid-template-columns: 1fr;
    }


    .page-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .products-toolbar {
        flex-direction: column;
    }


    .products-search {
        max-width: none;
    }


    .product-filter {
        min-height: 43px;
    }


    .form-grid {
        grid-template-columns: 1fr;
    }


    .form-full {
        grid-column: auto;
    }


    .modal-footer {
        flex-direction: column-reverse;
    }


    .modal-footer button {
        width: 100%;
    }


    .ng-login-card {
        padding:
            30px
            20px
            26px;

        border-radius: 21px;
    }


    .ng-login-logo img {
        width: 150px;
        height: 90px;
    }


    .ng-login-heading h2 {
        font-size: 24px;
    }

}


/* =========================================================
   VENTAS
   Se agrega al CSS original sin modificar lo existente.
========================================================= */

.sales-page {
    width: 100%;
}

.sales-card {
    padding: 0;
    overflow: hidden;
}

.sales-toolbar {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5ecef;
}

.sales-search {
    width: 100%;
    max-width: 520px;
    height: 43px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #d8e3e8;
    border-radius: 10px;
    background: #f9fbfc;
}

.sales-search i {
    color: #7e96a3;
}

.sales-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #31576b;
    background: transparent;
}

.sale-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.sale-main {
    min-width: 0;
    display: grid;
    gap: 20px;
}

.sale-section {
    padding: 22px;
    border: 1px solid #e4ecef;
    border-radius: 17px;
    background: white;
    box-shadow: var(--shadow);
}

.sale-section-title {
    margin-bottom: 18px;
}

.sale-section-title .page-eyebrow {
    margin-bottom: 5px;
}

.sale-section-title h3 {
    color: var(--text-dark);
    font-size: 17px;
}

.sale-section-title p {
    margin-top: 5px;
    color: #8799a4;
    font-size: 11px;
}

.sale-client-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 15px;
}

.sale-items-list {
    display: grid;
    gap: 12px;
}

.sale-item {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        110px
        115px
        120px
        38px;
    gap: 11px;
    align-items: end;
    padding: 14px;
    border: 1px solid #e3ebee;
    border-radius: 13px;
    background: #fbfdfe;
}

.sale-item .form-group {
    min-width: 0;
}

.sale-item select,
.sale-item input {
    width: 100%;
}

.sale-price-box,
.sale-amount-box {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #e1e9ed;
    border-radius: 9px;
    color: #31566a;
    background: #f4f8fa;
    font-size: 12px;
    font-weight: 700;
}

.sale-remove {
    width: 38px;
    height: 38px;
    margin-bottom: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #efd3d3;
    border-radius: 9px;
    color: #b34f4f;
    background: #fff;
}

.sale-remove:hover {
    background: #fdefef;
}

.sale-add-row {
    margin-top: 13px;
}

.sale-summary {
    position: sticky;
    top: 102px;
    padding: 22px;
    border: 1px solid #dfe9ed;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow);
}

.sale-summary h3 {
    color: var(--text-dark);
    font-size: 18px;
}

.sale-summary-text {
    margin-top: 5px;
    margin-bottom: 18px;
    color: #8598a3;
    font-size: 10px;
    line-height: 1.5;
}

.summary-row {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf2f4;
    color: #6b8390;
    font-size: 11px;
}

.summary-row strong {
    color: #365d70;
    font-size: 12px;
}

.summary-discount {
    padding: 14px 0;
}

.summary-total {
    margin: 8px 0 18px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-radius: 12px;
    color: white;
    background:
        linear-gradient(
            100deg,
            #043f5d,
            #08799a
        );
}

.summary-total span {
    font-size: 11px;
}

.summary-total strong {
    font-size: 22px;
}

.sale-info-box {
    margin-top: 14px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 10px;
    color: #557687;
    background: #eef7fa;
    font-size: 9px;
    line-height: 1.45;
}


/* =========================================================
   BOLETA / COMPROBANTE
========================================================= */

.receipt-success {
    margin-bottom: 20px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #cae8dd;
    border-radius: 13px;
    color: #226c55;
    background: #edf9f4;
}

.receipt-success-icon {
    font-size: 25px;
    color: #168768;
}

.receipt-success h2 {
    margin-top: 3px;
    color: #205d4b;
    font-size: 19px;
}

.receipt-success p {
    margin-top: 4px;
    color: #65857a;
    font-size: 10px;
}

.receipt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.receipt-preview {
    position: relative;
    overflow: hidden;
}

.receipt-watermark {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(-28deg);
    color: rgba(198, 83, 83, 0.07);
    font-size: 92px;
    font-weight: 900;
    pointer-events: none;
}

.receipt-preview > *:not(.receipt-watermark) {
    position: relative;
    z-index: 1;
}

.receipt-brand {
    padding-bottom: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #e5ecef;
}

.receipt-brand img {
    width: 72px;
    height: 64px;
    object-fit: contain;
}

.receipt-brand strong {
    display: block;
    color: #1d536b;
    font-size: 17px;
}

.receipt-brand span {
    display: block;
    margin-top: 3px;
    color: #8296a0;
    font-size: 8px;
    letter-spacing: 1.4px;
}

.receipt-title-row {
    margin: 18px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.receipt-title-row > div > span {
    color: #899ba4;
    font-size: 9px;
}

.receipt-title-row h2 {
    margin-top: 4px;
    color: #087d9f;
    font-size: 21px;
}

.receipt-data {
    margin-bottom: 18px;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    border-radius: 12px;
    background: #f6fafb;
}

.receipt-data span {
    display: block;
    color: #8799a3;
    font-size: 8px;
    text-transform: uppercase;
}

.receipt-data strong {
    display: block;
    margin-top: 4px;
    color: #3d6274;
    font-size: 10px;
}

.receipt-totals {
    width: min(100%, 315px);
    margin: 18px 0 0 auto;
}

.receipt-totals > div {
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #6b818d;
    font-size: 10px;
}

.receipt-total-final {
    margin-top: 5px;
    padding-top: 11px !important;
    border-top: 2px solid #dce7eb;
    color: #087d9f !important;
    font-size: 16px !important;
}

.receipt-note,
.receipt-cancel-info {
    margin-top: 18px;
    padding: 13px;
    border-radius: 10px;
    color: #5f7986;
    background: #f7fafb;
    font-size: 9px;
    line-height: 1.55;
}

.receipt-cancel-info {
    color: #7a4f4f;
    border: 1px solid #efcece;
    background: #fff7f7;
}

.receipt-actions {
    display: grid;
    gap: 13px;
}

.receipt-actions .panel-card h3 {
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 16px;
}

.receipt-actions .panel-card p {
    margin-top: 6px;
    margin-bottom: 14px;
    color: #8598a3;
    font-size: 10px;
    line-height: 1.5;
}

.receipt-format {
    margin-top: 9px;
    padding: 12px;
    display: grid;
    grid-template-columns: 44px 1fr 14px;
    align-items: center;
    gap: 10px;
    border: 1px solid #e0e9ed;
    border-radius: 11px;
    transition: 0.2s;
}

.receipt-format:hover {
    border-color: #b7d9e2;
    background: #f8fcfd;
}

.receipt-format-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #087d9f;
    background: #e8f4f8;
}

.receipt-format strong {
    display: block;
    color: #3f6273;
    font-size: 10px;
}

.receipt-format span {
    display: block;
    margin-top: 3px;
    color: #8e9ea7;
    font-size: 8px;
}

.receipt-action-buttons {
    display: grid;
    gap: 8px;
}

.cancelled-banner {
    margin-bottom: 20px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #efcccc;
    border-radius: 12px;
    color: #934545;
    background: #fff5f5;
}

.cancelled-banner > i {
    font-size: 24px;
}

.cancelled-banner strong {
    display: block;
    font-size: 16px;
}

.cancelled-banner span {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.45;
}


/* =========================================================
   ESTADOS EXTRA
========================================================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
}

.status-badge.success {
    color: #176f55;
    background: #e8f6f1;
}

.status-badge.danger {
    color: #a14c4c;
    background: #f9ebeb;
}

.status-badge.warning {
    color: #986a1c;
    background: #fff2dc;
}


/* =========================================================
   ANULACIÓN DE VENTAS
========================================================= */

.cancel-sale-header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.cancel-sale-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #087d9f;
    background: #e7f4f8;
    font-size: 18px;
}

.cancel-sale-header h3 {
    color: var(--text-dark);
    font-size: 16px;
}

.cancel-sale-header p {
    margin-top: 4px;
    color: #8799a4;
    font-size: 10px;
}

.cancel-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.cancel-search-box {
    height: 43px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8e3e8;
    border-radius: 10px;
    background: #f9fbfc;
}

.cancel-search-box i {
    color: #7e96a3;
}

.cancel-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #31576b;
    background: transparent;
}

.cancel-result-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.cancel-result-header {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cancel-result-header h3 {
    margin-top: 4px;
    color: #24566f;
    font-size: 19px;
}

.cancel-sale-info {
    margin-bottom: 19px;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    border-radius: 11px;
    background: #f5f9fb;
}

.cancel-sale-info span {
    display: block;
    color: #8497a1;
    font-size: 8px;
    text-transform: uppercase;
}

.cancel-sale-info strong {
    display: block;
    margin-top: 4px;
    color: #315c70;
    font-size: 10px;
}

.cancel-total {
    color: #087c9e !important;
    font-size: 16px !important;
}

.sale-total-strip {
    margin-top: 17px;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 22px;
    border-top: 1px solid #e5edef;
}

.sale-total-strip > div {
    min-width: 100px;
    text-align: right;
}

.sale-total-strip span {
    display: block;
    color: #899ca5;
    font-size: 8px;
    text-transform: uppercase;
}

.sale-total-strip strong {
    display: block;
    margin-top: 4px;
    color: #4c6977;
    font-size: 11px;
}

.sale-total-strip .grand strong {
    color: #087d9f;
    font-size: 16px;
}

.cancel-preview-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.cancel-danger-card {
    border-color: #f0d1d1;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff8f8
        );
}

.cancel-warning-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #b44d4d;
    background: #fde9e9;
    font-size: 20px;
}

.cancel-danger-card h3 {
    margin-top: 4px;
    color: #8e3e3e;
    font-size: 16px;
}

.cancel-warning-text {
    margin-top: 10px;
    color: #7e6969;
    font-size: 10px;
    line-height: 1.6;
}

.cancel-effects {
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cancel-effects > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6e777c;
    font-size: 9px;
}

.cancel-effects i {
    width: 20px;
    color: #a65353;
    text-align: center;
}

.btn-danger,
.btn-danger-full {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    color: white;
    background: #b54d4d;
    font-size: 12px;
    font-weight: 650;
}

.btn-danger {
    padding: 0 17px;
}

.btn-danger-full {
    width: 100%;
    padding: 0 17px;
}

.btn-danger:hover,
.btn-danger-full:hover {
    background: #9d4040;
}

.already-cancelled-card {
    text-align: center;
    border-color: #f0dada;
    background: #fffafa;
}

.cancelled-big-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #b45050;
    background: #fbe8e8;
    font-size: 21px;
}

.already-cancelled-card h3 {
    color: #8f4242;
    font-size: 15px;
}

.cancelled-detail {
    margin-top: 18px;
    text-align: left;
}

.cancelled-detail > div {
    padding: 10px 0;
    border-bottom: 1px solid #eee5e5;
}

.cancelled-detail span {
    display: block;
    color: #938181;
    font-size: 8px;
    text-transform: uppercase;
}

.cancelled-detail strong {
    display: block;
    margin-top: 4px;
    color: #654e4e;
    font-size: 10px;
}

.cancel-history {
    margin-top: 20px;
}

.cancel-modal {
    max-width: 520px;
}

.cancel-modal-alert {
    margin-bottom: 18px;
    padding: 13px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 10px;
    color: #845353;
    background: #fff2f2;
}

.cancel-modal-alert i {
    margin-top: 2px;
    color: #b64e4e;
    font-size: 17px;
}

.cancel-modal-alert strong {
    display: block;
    color: #844242;
    font-size: 10px;
}

.cancel-modal-alert p {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.5;
}

.modal-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/* =========================================================
   MEJORAS VISUALES SUAVES - DASHBOARD
   Solo refinan el diseño existente.
========================================================= */

.welcome-card {
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(255,255,255,0.10),
            transparent 22%
        ),
        linear-gradient(
            115deg,
            #033c59,
            #076d91 58%,
            #17a4c3
        );
}

.kpi-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.kpi-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background:
        linear-gradient(
            180deg,
            #0a8cad,
            #34bdd3
        );
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(4,58,86,0.11);
}

.quick-action {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbfc
        );
}


/* =========================================================
   MEJORAS VISUALES SUAVES - PRODUCTOS / STOCK
========================================================= */

.product-kpi {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.product-kpi:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(4,58,86,0.11);
}

.products-table-card {
    border-radius: 17px;
}

.products-toolbar {
    align-items: center;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdfe
        );
}

.product-filter {
    height: 43px;
}

.product-actions .action-button {
    border-color: #d7e4e9;
    box-shadow:
        0 2px 8px rgba(4,58,86,0.04);
}

.product-actions .action-button:hover {
    transform: translateY(-1px);
    background: #f2f9fb;
}

.data-table tbody tr {
    transition: background 0.15s ease;
}


/* =========================================================
   RESPONSIVE - NUEVOS MÓDULOS
========================================================= */

@media (max-width: 1150px) {

    .sale-layout,
    .receipt-layout,
    .cancel-result-grid {
        grid-template-columns: 1fr;
    }

    .sale-summary {
        position: static;
    }

    .sale-item {
        grid-template-columns:
            minmax(220px, 1fr)
            100px
            110px
            110px
            38px;
    }

}

@media (max-width: 800px) {

    .sale-client-grid,
    .receipt-data,
    .cancel-sale-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sale-item {
        grid-template-columns:
            1fr
            1fr;
    }

    .sale-item .form-group:first-child {
        grid-column: 1 / -1;
    }

    .sale-remove {
        align-self: end;
    }

}

@media (max-width: 600px) {

    .sales-toolbar,
    .cancel-search-form {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .sale-client-grid,
    .receipt-data,
    .cancel-sale-info {
        grid-template-columns: 1fr;
    }

    .sale-item {
        grid-template-columns: 1fr;
    }

    .sale-item .form-group:first-child {
        grid-column: auto;
    }

    .sale-remove {
        width: 100%;
    }

    .cancel-preview-actions {
        justify-content: stretch;
    }

    .cancel-preview-actions a {
        width: 100%;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions button {
        width: 100%;
    }

}


/* =========================================================
   PRODUCTOS / STOCK - MEJORA DE INTERFAZ
   Agregado al CSS existente sin modificar módulos previos.
========================================================= */

.products-page {
    width: 100%;
}

.products-toolbar-pro {
    align-items: center;
}

.products-filter-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.products-filter-group .product-filter {
    height: 43px;
    min-width: 145px;
}

.products-table-meta {
    min-height: 44px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e7eef1;
    color: #7d929d;
    background: #fbfdfe;
    font-size: 10px;
}

.products-clear-filter {
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #dce7eb;
    border-radius: 8px;
    color: #64808e;
    background: white;
    font-size: 9px;
}

.products-clear-filter:hover {
    color: var(--primary);
    border-color: #b9d7e0;
    background: #f5fafb;
}

.products-data-table {
    min-width: 1180px;
}

.products-data-table th {
    background: #f7fafb;
}

.products-data-table td {
    vertical-align: middle;
}

.products-actions-column {
    width: 145px;
}

.category-badge {
    display: inline-flex;
    max-width: 145px;
    padding: 5px 8px;
    overflow: hidden;
    border-radius: 20px;
    color: #5d7180;
    background: #eef3f5;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.price-cell strong {
    display: block;
    color: #31576b;
    font-size: 11px;
}

.price-cell small {
    display: block;
    margin-top: 3px;
    color: #94a4ac;
    font-size: 8px;
}

.price-cell.cost strong {
    color: #617986;
}

.stock-badge {
    min-width: 84px;
    justify-content: center;
}

.stock-badge small {
    margin-left: 2px;
    font-size: 7px;
    font-weight: 600;
    opacity: .72;
}

.stock-badge.normal {
    color: #176f55;
    background: #e8f6f1;
}

.stock-badge.low {
    color: #a96f18;
    background: #fff2db;
}

.stock-badge.zero {
    color: #a24b4b;
    background: #f9eaea;
}

.status {
    gap: 6px;
    align-items: center;
}

.status i {
    font-size: 6px;
}

.product-actions {
    justify-content: flex-start;
}

.action-button {
    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}

.action-button:hover {
    transform: translateY(-1px);
}

.action-button.stock {
    color: #087b9e;
    background: #f6fbfc;
}

.action-button.history {
    color: #5b7483;
}

.action-button.deactivate {
    color: #a45353;
}

.action-button.deactivate:hover {
    border-color: #e8bcbc;
    background: #fff5f5;
}

.action-button.activate {
    color: #168768;
}

.action-button.activate:hover {
    border-color: #b9dfd1;
    background: #f4fbf8;
}

.table-empty.compact {
    height: 180px;
}


/* =========================================================
   MODAL PRODUCTO
========================================================= */

.product-modal-card {
    max-width: 720px;
}

.stock-modal-card {
    max-width: 570px;
}

.service-stock-message {
    margin-top: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid #cfe5ec;
    border-radius: 10px;
    color: #557687;
    background: #eef8fa;
    font-size: 10px;
    line-height: 1.5;
}

.service-stock-message i {
    margin-top: 2px;
    color: #087d9f;
}

.stock-current-pro {
    border: 1px solid #d7e8ee;
    background:
        linear-gradient(
            100deg,
            #eff9fb,
            #f7fcfd
        );
}


/* =========================================================
   KPI PRODUCTOS - REFINAMIENTO
========================================================= */

.product-kpi {
    position: relative;
    overflow: hidden;
}

.product-kpi::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 4px;
    background:
        linear-gradient(
            180deg,
            #0b8cad,
            #35bad0
        );
}

.product-kpi:nth-child(2)::after {
    background:
        linear-gradient(
            180deg,
            #6c78b5,
            #8792cf
        );
}

.product-kpi:nth-child(3)::after {
    background:
        linear-gradient(
            180deg,
            #d29a30,
            #efba52
        );
}

.product-kpi:nth-child(4)::after {
    background:
        linear-gradient(
            180deg,
            #b55b5b,
            #d57c7c
        );
}


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

@media (max-width: 1100px) {

    .products-toolbar-pro {
        flex-direction: column;
        align-items: stretch;
    }

    .products-search {
        max-width: none;
    }

    .products-filter-group {
        justify-content: flex-start;
    }

    .products-filter-group .product-filter {
        flex: 1;
        min-width: 180px;
    }

}

@media (max-width: 650px) {

    .products-filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .products-filter-group .product-filter {
        width: 100%;
        min-width: 0;
    }

    .products-table-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-clear-filter {
        width: 100%;
    }

}


/* =========================================================
   MOVIMIENTOS DE STOCK
   Se agrega sin modificar estilos ya existentes.
========================================================= */

.stock-history-page {
    width: 100%;
}

.stock-product-hero {
    margin-bottom: 20px;
    padding: 22px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    border: 1px solid #e4ecef;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f9fcfd
        );
    box-shadow: var(--shadow);
}

.stock-product-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 17px;
}

.stock-product-icon {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #087d9f;
    background:
        linear-gradient(
            145deg,
            #e7f4f8,
            #f6fbfc
        );
    font-size: 27px;
}

.stock-product-data {
    min-width: 0;
}

.stock-product-tags {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.stock-product-data h2 {
    color: var(--text-dark);
    font-size: 22px;
}

.stock-product-data > p {
    max-width: 700px;
    margin-top: 6px;
    color: #8397a2;
    font-size: 10px;
    line-height: 1.5;
}

.stock-product-meta {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.stock-product-meta span {
    display: block;
    color: #8a9ca5;
    font-size: 8px;
    text-transform: uppercase;
}

.stock-product-meta strong {
    display: block;
    margin-top: 4px;
    color: #416677;
    font-size: 10px;
}

.stock-current-card {
    width: 180px;
    min-height: 126px;
    flex-shrink: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
}

.stock-current-card span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.stock-current-card strong {
    display: block;
    margin: 4px 0;
    font-size: 31px;
}

.stock-current-card small {
    font-size: 8px;
}

.stock-current-card.success {
    color: #176f55;
    border: 1px solid #cce9de;
    background: #ecf8f3;
}

.stock-current-card.warning {
    color: #a66d18;
    border: 1px solid #efddb6;
    background: #fff7e8;
}

.stock-current-card.danger {
    color: #a24b4b;
    border: 1px solid #ebcccc;
    background: #fff2f2;
}


/* =========================================================
   KPI MOVIMIENTOS
========================================================= */

.stock-history-kpis {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.stock-history-kpi {
    min-height: 100px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #e4ecef;
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.stock-history-kpi-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}

.stock-history-kpi-icon.movements {
    color: #087d9f;
    background: #e7f4f8;
}

.stock-history-kpi-icon.entry {
    color: #168768;
    background: #e7f6f0;
}

.stock-history-kpi-icon.exit {
    color: #b15353;
    background: #f9eaea;
}

.stock-history-kpi-icon.minimum {
    color: #b27a1e;
    background: #fff3dc;
}

.stock-history-kpi span {
    display: block;
    color: #8396a1;
    font-size: 9px;
}

.stock-history-kpi strong {
    display: block;
    margin-top: 3px;
    color: var(--text-dark);
    font-size: 19px;
}

.stock-history-kpi small {
    display: block;
    margin-top: 3px;
    color: #97a5ad;
    font-size: 8px;
}


/* =========================================================
   TABLA MOVIMIENTOS
========================================================= */

.stock-history-card {
    padding: 0;
    overflow: hidden;
}

.stock-history-toolbar {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #e5ecef;
}

.stock-history-toolbar h3 {
    color: var(--text-dark);
    font-size: 16px;
}

.stock-history-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-history-search {
    width: 330px;
    height: 43px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #d8e3e8;
    border-radius: 10px;
    background: #f9fbfc;
}

.stock-history-search i {
    color: #7e96a3;
}

.stock-history-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #31576b;
    background: transparent;
}

.stock-history-table-meta {
    min-height: 44px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e7eef1;
    color: #7d929d;
    background: #fbfdfe;
    font-size: 10px;
}

.stock-history-table {
    min-width: 1050px;
}

.stock-history-table th {
    background: #f7fafb;
}

.stock-history-table td {
    vertical-align: middle;
}

.movement-date strong {
    display: block;
    color: #3c6173;
    font-size: 10px;
}

.movement-date span {
    display: block;
    margin-top: 3px;
    color: #93a3ab;
    font-size: 8px;
}

.movement-quantity {
    font-size: 13px;
}

.movement-quantity.positive {
    color: #168768;
}

.movement-quantity.negative {
    color: #b15353;
}

.stock-number {
    min-width: 38px;
    display: inline-flex;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

.stock-number.previous {
    color: #718792;
    background: #eef3f5;
}

.stock-number.current {
    color: #087d9f;
    background: #e7f4f8;
}

.movement-reason strong {
    display: block;
    max-width: 290px;
    overflow: hidden;
    color: #45697a;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.movement-origin {
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 15px;
    font-size: 7px;
    font-weight: 800;
}

.movement-origin.sale {
    color: #087d9f;
    background: #e7f4f8;
}

.movement-origin.cancel {
    color: #a24b4b;
    background: #f9eaea;
}

.movement-origin.initial {
    color: #6b718d;
    background: #eff0f7;
}

.movement-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.movement-user-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #087d9f;
    background: #e7f4f8;
    font-size: 9px;
    font-weight: 800;
}

.movement-user span {
    color: #587786;
    font-size: 9px;
}


/* =========================================================
   AYUDA MOVIMIENTOS
========================================================= */

.stock-history-help {
    margin-top: 16px;
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #d7e8ee;
    border-radius: 11px;
    color: #597987;
    background: #f2f9fb;
}

.stock-history-help > i {
    margin-top: 2px;
    color: #087d9f;
}

.stock-history-help strong {
    display: block;
    color: #3d6577;
    font-size: 9px;
}

.stock-history-help span {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.5;
}


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

@media (max-width: 1100px) {

    .stock-history-kpis {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .stock-history-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-history-filters {
        width: 100%;
    }

    .stock-history-search {
        width: 100%;
        flex: 1;
    }

}

@media (max-width: 700px) {

    .stock-product-hero {
        flex-direction: column;
    }

    .stock-current-card {
        width: 100%;
        min-height: 105px;
    }

    .stock-history-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .stock-history-filters .product-filter {
        width: 100%;
        min-height: 43px;
    }

    .stock-history-table-meta {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 600px) {

    .stock-product-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .stock-history-kpis {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   PEDIDOS
   Se agrega sin reemplazar estilos existentes.
========================================================= */

.orders-page,
.order-detail-page {
    width: 100%;
}

.orders-kpi-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.order-kpi {
    min-height: 96px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e4ecef;
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.order-kpi-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}

.order-kpi-icon.all {
    color: #087d9f;
    background: #e7f4f8;
}

.order-kpi-icon.pending {
    color: #9b721e;
    background: #fff4dc;
}

.order-kpi-icon.production {
    color: #625da0;
    background: #efeffa;
}

.order-kpi-icon.ready {
    color: #168768;
    background: #e7f6f0;
}

.order-kpi-icon.delivered {
    color: #4e7180;
    background: #edf3f5;
}

.order-kpi span {
    display: block;
    color: #8396a1;
    font-size: 9px;
}

.order-kpi strong {
    display: block;
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 20px;
}


/* =========================================================
   LISTADO PEDIDOS
========================================================= */

.orders-table-card {
    padding: 0;
    overflow: hidden;
}

.orders-toolbar {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5ecef;
}

.orders-search {
    width: 100%;
    max-width: 600px;
    height: 43px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #d8e3e8;
    border-radius: 10px;
    background: #f9fbfc;
}

.orders-search i {
    color: #7e96a3;
}

.orders-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #31576b;
    background: transparent;
}

.orders-table {
    min-width: 1080px;
}

.orders-table th {
    background: #f7fafb;
}

.order-number {
    color: #087d9f;
    font-size: 10px;
}

.order-client strong {
    display: block;
    color: #355d70;
    font-size: 10px;
}

.order-client span {
    display: block;
    margin-top: 3px;
    color: #94a4ac;
    font-size: 8px;
}

.order-total {
    color: #174d66;
    font-size: 11px;
}

.order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.order-status.pending {
    color: #986b1f;
    background: #fff3db;
}

.order-status.production {
    color: #625da0;
    background: #efeffa;
}

.order-status.ready {
    color: #176f55;
    background: #e7f6f0;
}

.order-status.delivered {
    color: #55717e;
    background: #edf3f5;
}


/* =========================================================
   NUEVO PEDIDO
========================================================= */

.order-create-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        340px;
    gap: 20px;
    align-items: start;
}

.order-create-main {
    display: grid;
    gap: 20px;
}

.order-cancel-link {
    margin-top: 8px;
}


/* =========================================================
   DETALLE PEDIDO
========================================================= */

.order-progress-card {
    margin-bottom: 20px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    border: 1px solid #e4ecef;
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow);
}

.order-progress-step {
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #9aa8af;
    text-align: center;
}

.order-progress-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dfe8eb;
    border-radius: 50%;
    background: white;
    font-size: 14px;
}

.order-progress-step span {
    font-size: 8px;
    font-weight: 800;
}

.order-progress-step.done {
    color: #168768;
}

.order-progress-step.done .order-progress-icon {
    color: white;
    border-color: #168768;
    background: #168768;
}

.order-progress-step.current {
    color: #087d9f;
}

.order-progress-step.current .order-progress-icon {
    color: white;
    border-color: #087d9f;
    background: #087d9f;
    box-shadow:
        0 0 0 5px
        rgba(8,125,159,.10);
}

.order-progress-line {
    height: 2px;
    flex: 1;
    min-width: 28px;
    margin: 0 4px 22px;
    background: #dfe8eb;
}

.order-progress-line.done {
    background: #168768;
}

.order-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        320px;
    gap: 20px;
    align-items: start;
}

.order-detail-main {
    min-width: 0;
    display: grid;
    gap: 20px;
}

.order-detail-side {
    display: grid;
    gap: 15px;
}

.order-customer-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.order-customer-grid > div {
    padding: 13px;
    border-radius: 10px;
    background: #f7fafb;
}

.order-customer-grid span {
    display: block;
    color: #8799a3;
    font-size: 8px;
    text-transform: uppercase;
}

.order-customer-grid strong {
    display: block;
    margin-top: 4px;
    color: #3e6374;
    font-size: 10px;
}

.order-observation {
    margin-top: 18px;
    padding: 13px;
    border-radius: 10px;
    color: #5f7986;
    background: #f7fafb;
    font-size: 9px;
    line-height: 1.55;
}

.order-observation strong {
    display: block;
    margin-bottom: 5px;
    color: #446879;
}

.order-state-big {
    margin: 16px 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 13px;
    text-align: center;
}

.order-state-big > i {
    font-size: 25px;
}

.order-state-big strong {
    font-size: 14px;
}

.order-state-big span {
    font-size: 8px;
}

.order-state-big.pending {
    color: #976a1f;
    background: #fff6e5;
}

.order-state-big.production {
    color: #625da0;
    background: #f2f1fb;
}

.order-state-big.ready {
    color: #176f55;
    background: #eaf8f2;
}

.order-state-big.delivered {
    color: #526f7d;
    background: #eef4f6;
}

.order-side-summary > div {
    padding: 10px 0;
    border-bottom: 1px solid #edf2f4;
}

.order-side-summary > div:last-child {
    border-bottom: 0;
}

.order-side-summary span {
    display: block;
    color: #8b9ca5;
    font-size: 8px;
    text-transform: uppercase;
}

.order-side-summary strong {
    display: block;
    margin-top: 4px;
    color: #355d70;
    font-size: 11px;
}


/* =========================================================
   HISTORIAL PEDIDO
========================================================= */

.order-timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.order-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns:
        18px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 20px;
}

.order-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #dce8ec;
}

.order-timeline-dot {
    width: 16px;
    height: 16px;
    z-index: 1;
    border: 4px solid #d9eff4;
    border-radius: 50%;
    background: #087d9f;
}

.order-timeline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.order-timeline-top strong {
    color: #3b6173;
    font-size: 10px;
}

.order-timeline-top span {
    color: #96a5ad;
    font-size: 8px;
}

.order-timeline-content p {
    margin-top: 5px;
    color: #718792;
    font-size: 9px;
}

.order-timeline-content small {
    display: block;
    margin-top: 4px;
    color: #9aa8ae;
    font-size: 8px;
}

.order-next-state {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #d8e8ee;
    border-radius: 11px;
    background: #f1f9fb;
}

.order-next-state span {
    display: block;
    color: #7f949f;
    font-size: 8px;
    text-transform: uppercase;
}

.order-next-state strong {
    display: block;
    margin-top: 4px;
    color: #087d9f;
    font-size: 14px;
}

.order-status-modal {
    max-width: 520px;
}


/* =========================================================
   DASHBOARD PEDIDOS ACTIVO
========================================================= */

.dashboard-orders-live {
    border-style: solid;
    border-color: #cce4ea;
}

.dashboard-orders-live:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 26px
        rgba(4,58,86,.09);
}

.future-badge.live {
    color: #176f55;
    background: #e7f6f0;
}


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

@media (max-width: 1180px) {

    .orders-kpi-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .order-create-layout,
    .order-detail-grid {
        grid-template-columns: 1fr;
    }

    .sale-summary {
        position: static;
    }

}

@media (max-width: 850px) {

    .orders-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .orders-search {
        max-width: none;
    }

    .orders-toolbar .product-filter {
        min-height: 43px;
    }

    .order-progress-step {
        min-width: 64px;
    }

}

@media (max-width: 650px) {

    .orders-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .order-customer-grid {
        grid-template-columns: 1fr;
    }

    .order-progress-card {
        align-items: flex-start;
        overflow-x: auto;
    }

    .order-progress-line {
        min-width: 30px;
    }

}

@media (max-width: 450px) {

    .orders-kpi-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   DASHBOARD ANALÍTICO NONA GRAFIC
   Agregado sin eliminar los estilos existentes.
========================================================= */

.dashboard-pro {
    width: 100%;
}

.dashboard-welcome-pro {
    margin-bottom: 20px;
}

.dashboard-welcome-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-hero-button {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    transition: 0.2s ease;
}

.dashboard-hero-button.primary {
    color: #06415d;
    background: white;
    box-shadow:
        0 8px 20px
        rgba(0, 30, 50, 0.14);
}

.dashboard-hero-button.secondary {
    color: white;
    border:
        1px solid
        rgba(255,255,255,0.24);
    background:
        rgba(255,255,255,0.09);
}

.dashboard-hero-button:hover {
    transform: translateY(-1px);
}

.dashboard-kpi-pro {
    margin-top: 0;
    margin-bottom: 20px;
}

.dashboard-kpi-note {
    display: block;
    margin-top: 6px;
    color: #8a9ba5;
    font-size: 9px;
    line-height: 1.35;
}

.dashboard-kpi-note.positive {
    color: #168768;
}

.dashboard-kpi-note.negative {
    color: #c65353;
}

.kpi-icon-month {
    color: #536fa9;
    background: #eef1fb;
}

.kpi-icon-ticket {
    color: #9a721e;
    background: #fff4dc;
}

.kpi-icon-profit {
    color: #168768;
    background: #e7f6f0;
}


/* =========================================================
   TARJETAS DE ANALÍTICA
========================================================= */

.dashboard-analytics-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(310px, .65fr);
    gap: 20px;
    align-items: stretch;
}

.dashboard-analytics-grid.second-row {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);
}

.dashboard-analytics-card {
    min-width: 0;
    padding: 22px;
    border:
        1px solid #e4ecef;
    border-radius: 17px;
    background: white;
    box-shadow:
        var(--shadow);
}

.dashboard-card-heading {
    min-height: 54px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.dashboard-card-heading h3 {
    color: var(--text-dark);
    font-size: 16px;
}

.dashboard-card-heading p {
    max-width: 530px;
    margin-top: 5px;
    color: #8799a4;
    font-size: 10px;
    line-height: 1.5;
}

.dashboard-heading-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #087d9f;
    background: #e7f4f8;
    font-size: 17px;
}

.dashboard-heading-link {
    min-height: 35px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border:
        1px solid #dce6ea;
    border-radius: 9px;
    color: #567787;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   GRÁFICO 7 DÍAS
========================================================= */

.sales-week-chart {
    height: 260px;
    padding: 6px 4px 0;
    display: grid;
    grid-template-columns:
        repeat(7, minmax(45px, 1fr));
    gap: 10px;
    align-items: end;
}

.sales-day-column {
    height: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows:
        22px 1fr 18px 16px;
    align-items: end;
    text-align: center;
}

.sales-day-value {
    color: #607b89;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.sales-bar-area {
    width: 100%;
    height: 185px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom:
        1px solid #dfe8ec;
    background:
        repeating-linear-gradient(
            to top,
            transparent,
            transparent 45px,
            rgba(222,232,236,.45) 46px
        );
}

.sales-bar {
    width: 58%;
    min-height: 2px;
    border-radius:
        8px 8px 2px 2px;
    background:
        linear-gradient(
            180deg,
            #28b0c8,
            #087293
        );
    box-shadow:
        0 6px 14px
        rgba(8, 105, 143, .15);
    transition:
        height .3s ease,
        transform .2s ease;
}

.sales-day-column:hover .sales-bar {
    transform: scaleX(1.07);
}

.sales-day-column strong {
    margin-top: 7px;
    color: #3f6476;
    font-size: 9px;
}

.sales-day-column > span {
    color: #94a4ac;
    font-size: 7px;
}


/* =========================================================
   MEDIOS DE PAGO
========================================================= */

.payment-ranking {
    display: grid;
    gap: 16px;
}

.payment-row-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.payment-row-top strong {
    color: #395f71;
    font-size: 10px;
}

.payment-row-top span {
    color: #087d9f;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-progress-track {
    width: 100%;
    height: 8px;
    margin: 7px 0 5px;
    overflow: hidden;
    border-radius: 30px;
    background: #edf3f5;
}

.dashboard-progress-fill {
    height: 100%;
    min-width: 4px;
    border-radius: 30px;
    background:
        linear-gradient(
            90deg,
            #087294,
            #20abc3
        );
}

.payment-row small {
    color: #95a5ad;
    font-size: 8px;
}


/* =========================================================
   TOP PRODUCTOS
========================================================= */

.dashboard-ranking-list {
    display: grid;
}

.dashboard-ranking-item {
    min-width: 0;
    padding: 12px 0;
    display: grid;
    grid-template-columns:
        34px minmax(0, 1fr)
        70px 95px;
    align-items: center;
    gap: 10px;
    border-bottom:
        1px solid #edf2f4;
}

.dashboard-ranking-item:last-child {
    border-bottom: 0;
}

.ranking-position {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #087d9f;
    background: #e8f4f8;
    font-size: 10px;
    font-weight: 800;
}

.ranking-product {
    min-width: 0;
}

.ranking-product strong {
    display: block;
    overflow: hidden;
    color: #31576b;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ranking-product span,
.ranking-qty span {
    display: block;
    margin-top: 3px;
    color: #93a3ab;
    font-size: 8px;
}

.ranking-qty {
    text-align: center;
}

.ranking-qty strong {
    color: #31576b;
    font-size: 13px;
}

.ranking-money {
    color: #087d9f;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}


/* =========================================================
   STOCK BAJO
========================================================= */

.stock-alert-list {
    display: grid;
}

.stock-alert-row {
    padding: 11px 0;
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr) 65px;
    align-items: center;
    gap: 10px;
    border-bottom:
        1px solid #edf2f4;
}

.stock-alert-row:last-child {
    border-bottom: 0;
}

.stock-alert-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #b37a1e;
    background: #fff3dc;
    font-size: 13px;
}

.stock-alert-product {
    min-width: 0;
}

.stock-alert-product strong {
    display: block;
    overflow: hidden;
    color: #355d70;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stock-alert-product span {
    display: block;
    margin-top: 3px;
    color: #95a5ad;
    font-size: 8px;
}

.stock-alert-value {
    text-align: right;
}

.stock-alert-value strong {
    display: block;
    color: #b36d18;
    font-size: 15px;
}

.stock-alert-value span {
    display: block;
    margin-top: 2px;
    color: #96a5ad;
    font-size: 8px;
}


/* =========================================================
   ESTADO DEL NEGOCIO
========================================================= */

.dashboard-business-summary {
    margin-bottom: 20px;
    padding: 22px;
    border:
        1px solid #e4ecef;
    border-radius: 17px;
    background: white;
    box-shadow:
        var(--shadow);
}

.dashboard-summary-heading {
    margin-bottom: 16px;
}

.dashboard-summary-heading h3 {
    color: var(--text-dark);
    font-size: 16px;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-summary-item {
    min-height: 82px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border:
        1px solid #e5edef;
    border-radius: 12px;
    background: #fbfdfe;
}

.dashboard-summary-item > i {
    width: 41px;
    height: 41px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #087d9f;
    background: #e7f4f8;
}

.dashboard-summary-item span {
    display: block;
    color: #82959f;
    font-size: 8px;
    text-transform: uppercase;
}

.dashboard-summary-item strong {
    display: block;
    margin-top: 4px;
    color: #174d66;
    font-size: 18px;
}

.dashboard-summary-item.warning > i {
    color: #b37a1e;
    background: #fff3dc;
}

.dashboard-summary-item.warning strong {
    color: #a66d18;
}


/* =========================================================
   FUTUROS MÓDULOS
========================================================= */

.dashboard-future-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-future-card {
    position: relative;
    min-height: 112px;
    padding: 18px;
    display: grid;
    grid-template-columns:
        48px 1fr auto;
    align-items: center;
    gap: 14px;
    border:
        1px dashed #cbdde4;
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            #fbfdfe,
            #f5fafb
        );
}

.future-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #6b8794;
    background: #e9f1f4;
    font-size: 18px;
}

.dashboard-future-card h3 {
    color: #466878;
    font-size: 13px;
}

.dashboard-future-card p {
    max-width: 470px;
    margin-top: 5px;
    color: #8799a3;
    font-size: 9px;
    line-height: 1.5;
}

.future-badge {
    padding: 5px 8px;
    border-radius: 20px;
    color: #8b6b2c;
    background: #fff3d6;
    font-size: 7px;
    font-weight: 800;
}


/* =========================================================
   ESTADO VACÍO PEQUEÑO
========================================================= */

.dashboard-mini-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #91a2aa;
    text-align: center;
}

.dashboard-mini-empty > i {
    color: #bfd0d8;
    font-size: 27px;
}

.dashboard-mini-empty strong {
    color: #577787;
    font-size: 10px;
}

.dashboard-mini-empty span {
    max-width: 250px;
    font-size: 8px;
    line-height: 1.45;
}

.dashboard-mini-empty.success > i {
    color: #58a98b;
}


/* =========================================================
   RESPONSIVE DASHBOARD ANALÍTICO
========================================================= */

@media (max-width: 1180px) {

    .dashboard-analytics-grid,
    .dashboard-analytics-grid.second-row {
        grid-template-columns: 1fr;
    }

    .dashboard-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 800px) {

    .dashboard-future-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-ranking-item {
        grid-template-columns:
            34px minmax(0, 1fr) 62px;
    }

    .ranking-money {
        display: none;
    }

}

@media (max-width: 600px) {

    .sales-week-chart {
        height: 220px;
        gap: 4px;
    }

    .sales-bar-area {
        height: 150px;
    }

    .sales-day-value {
        font-size: 6px;
    }

    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-future-card {
        grid-template-columns:
            44px 1fr;
    }

    .future-badge {
        grid-column:
            1 / -1;
        justify-self: start;
    }

}


/* =========================================================
   VENTAS - ENTREGA PROGRAMADA Y ABONOS
========================================================= */

.form-help {
    margin-top: 3px;
    color: #8a9da6;
    font-size: 9px;
    line-height: 1.4;
}

.payment-choice-grid {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payment-choice {
    position: relative;
    min-height: 120px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid #dfe9ed;
    border-radius: 13px;
    background: #fbfdfe;
    cursor: pointer;
    transition: .18s ease;
}

.payment-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-choice > i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #6d8794;
    background: #edf3f5;
}

.payment-choice strong {
    color: #416676;
    font-size: 10px;
}

.payment-choice span {
    color: #8b9ca5;
    font-size: 8px;
    line-height: 1.4;
}

.payment-choice.active {
    border-color: #8cc8d6;
    background: #f1fafc;
    box-shadow:
        0 0 0 3px
        rgba(21,152,184,.07);
}

.payment-choice.active > i {
    color: white;
    background:
        linear-gradient(
            135deg,
            #087294,
            #18a2bd
        );
}

.payment-fields {
    margin-top: 5px;
}

.payment-summary-box {
    margin-bottom: 16px;
    padding: 13px;
    display: grid;
    gap: 9px;
    border: 1px solid #e0e9ed;
    border-radius: 11px;
    background: #f8fbfc;
}

.payment-summary-box > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.payment-summary-box span {
    color: #7f949f;
    font-size: 9px;
}

.payment-summary-box strong {
    color: #345d70;
    font-size: 10px;
}

.delivery-summary-box {
    margin-bottom: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 11px;
    color: #466979;
    background: #eef7fa;
}

.delivery-summary-box > i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    color: #087d9f;
    background: white;
}

.delivery-summary-box strong {
    display: block;
    font-size: 9px;
}

.delivery-summary-box span {
    display: block;
    margin-top: 3px;
    color: #8196a1;
    font-size: 8px;
}

.sale-cancel-link {
    margin-top: 8px;
}


/* =========================================================
   HISTORIAL VENTAS / ESTADO PAGO
========================================================= */

.sales-toolbar-payment {
    align-items: center;
}

.sales-payment-table {
    min-width: 1180px;
}

.payment-status,
.delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.payment-status.paid {
    color: #176f55;
    background: #e8f6f1;
}

.payment-status.partial {
    color: #9a721e;
    background: #fff3dc;
}

.payment-status.pending {
    color: #a14c4c;
    background: #f9ebeb;
}

.delivery-badge.immediate {
    color: #087d9f;
    background: #e7f4f8;
}

.delivery-badge.scheduled {
    color: #625da0;
    background: #efeffa;
}

.payment-paid {
    color: #168768;
}

.payment-debt {
    color: #b15353;
}

.payment-zero {
    color: #607b88;
}


/* =========================================================
   DETALLE DE VENTA / ABONOS
========================================================= */

.sale-detail-header {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.sale-detail-header h2 {
    color: var(--text-dark);
    font-size: 22px;
}

.sale-detail-header p {
    margin-top: 5px;
    color: #8195a0;
    font-size: 10px;
}

.sale-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sale-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        330px;
    gap: 20px;
    align-items: start;
}

.sale-detail-main,
.sale-detail-side {
    display: grid;
    gap: 20px;
}

.inline-link {
    color: #087d9f;
    font-weight: 800;
}

.payment-state-card {
    text-align: center;
}

.payment-state-icon {
    width: 60px;
    height: 60px;
    margin: 14px auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 23px;
}

.payment-state-icon.paid {
    color: #168768;
    background: #e7f6f0;
}

.payment-state-icon.partial {
    color: #a7741f;
    background: #fff3dc;
}

.payment-state-icon.pending {
    color: #b15353;
    background: #f9eaea;
}

.payment-state-card h3 {
    color: var(--text-dark);
    font-size: 17px;
}

.payment-state-summary {
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid #e2eaed;
    border-radius: 11px;
}

.payment-state-summary > div {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf2f4;
}

.payment-state-summary > div:last-child {
    border-bottom: 0;
}

.payment-state-summary span {
    color: #8296a0;
    font-size: 9px;
}

.payment-state-summary strong {
    color: #355d70;
    font-size: 10px;
}

.payment-state-summary .balance {
    background: #fff8f8;
}

.payment-state-summary .balance strong {
    color: #b15353;
    font-size: 14px;
}

.payment-history-list {
    display: grid;
}

.payment-history-row {
    padding: 12px 0;
    display: grid;
    grid-template-columns:
        40px minmax(0, 1fr)
        100px 36px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf2f4;
}

.payment-history-row:last-child {
    border-bottom: 0;
}

.payment-history-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #168768;
    background: #e7f6f0;
}

.payment-history-main strong {
    display: block;
    color: #3c6173;
    font-size: 10px;
}

.payment-history-main span,
.payment-history-main small {
    display: block;
    margin-top: 3px;
    color: #92a2aa;
    font-size: 8px;
}

.payment-history-amount {
    color: #168768;
    text-align: right;
    font-size: 12px;
}

.payment-modal {
    max-width: 540px;
}

.linked-order-number {
    margin-top: 5px;
    color: #087d9f;
    font-size: 16px;
}

.linked-order-text {
    margin: 7px 0 14px;
    color: #8296a0;
    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   PEDIDO VINCULADO A VENTA
========================================================= */

.linked-sale-card h3 {
    margin-top: 5px;
    color: #087d9f;
    font-size: 16px;
}

.linked-sale-summary {
    margin: 14px 0;
    overflow: hidden;
    border: 1px solid #e3ebee;
    border-radius: 10px;
}

.linked-sale-summary > div {
    padding: 9px 11px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf2f4;
}

.linked-sale-summary > div:last-child {
    border-bottom: 0;
}

.linked-sale-summary span {
    color: #8296a0;
    font-size: 8px;
}

.linked-sale-summary strong {
    color: #355d70;
    font-size: 9px;
}


/* =========================================================
   DASHBOARD COBRANZA
========================================================= */

.collection-kpi-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.collection-kpi-card {
    min-height: 105px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e4ecef;
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.collection-kpi-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    font-size: 19px;
}

.collection-kpi-card.collected .collection-kpi-icon {
    color: #168768;
    background: #e7f6f0;
}

.collection-kpi-card.receivable .collection-kpi-icon {
    color: #b15353;
    background: #f9eaea;
}

.collection-kpi-card span {
    display: block;
    color: #8296a0;
    font-size: 9px;
    text-transform: uppercase;
}

.collection-kpi-card strong {
    display: block;
    margin-top: 4px;
    color: var(--text-dark);
    font-size: 20px;
}

.collection-kpi-card small {
    display: block;
    margin-top: 4px;
    color: #94a4ac;
    font-size: 8px;
}


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

@media (max-width: 1100px) {

    .sale-detail-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 800px) {

    .payment-choice-grid {
        grid-template-columns: 1fr;
    }

    .collection-kpi-grid {
        grid-template-columns: 1fr;
    }

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

}

@media (max-width: 600px) {

    .payment-history-row {
        grid-template-columns:
            38px minmax(0, 1fr) 36px;
    }

    .payment-history-amount {
        grid-column:
            2 / 3;
        text-align: left;
    }

}


/* =========================================================
   DEVOLUCIONES DE VENTAS
========================================================= */

.refund-search-header,
.refund-result-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.refund-result-header {
    justify-content: space-between;
}

.refund-search-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #0b7f9f;
    background: #e9f6f9;
}

.refund-search-header h3,
.refund-result-header h3 {
    color: var(--text-dark);
}

.refund-search-header p {
    margin-top: 3px;
    color: #879aa4;
    font-size: 9px;
}

.refund-search-form {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

.refund-search-box {
    min-width: 0;
    flex: 1;
    position: relative;
}

.refund-search-box > i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #93a5ae;
    transform: translateY(-50%);
}

.refund-search-box input {
    width: 100%;
    height: 42px;
    padding: 0 13px 0 38px;
    border: 1px solid #dfe8ec;
    border-radius: 10px;
    outline: none;
    background: #fbfdfe;
}

.refund-layout {
    margin-top: 20px;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        330px;
    gap: 20px;
    align-items: start;
}

.refund-main,
.refund-side {
    display: grid;
    gap: 20px;
}

.refund-sale-info {
    margin-top: 17px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.refund-sale-info > div {
    padding: 11px 12px;
    border: 1px solid #e4ebee;
    border-radius: 10px;
    background: #fbfdfe;
}

.refund-sale-info span {
    display: block;
    color: #8b9da6;
    font-size: 8px;
    text-transform: uppercase;
}

.refund-sale-info strong {
    display: block;
    margin-top: 4px;
    color: #3c6172;
    font-size: 10px;
}

.refund-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.refund-status.partial {
    color: #9c7119;
    background: #fff2d7;
}

.refund-status.total {
    color: #9f4848;
    background: #f9e8e8;
}

.refund-money {
    color: #b65353 !important;
}

.refund-items-table {
    min-width: 850px;
}

.refund-qty {
    width: 84px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid #dce6ea;
    border-radius: 8px;
    outline: none;
    text-align: center;
}

.refund-stock-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.refund-stock-check input {
    width: 15px;
    height: 15px;
}

.refund-form-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.refund-form-grid .form-full {
    grid-column: 1 / -1;
}

.refund-confirm-card {
    display: flex;
    align-items: center;
    gap: 18px;
}

.refund-warning {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.refund-warning > i {
    margin-top: 2px;
    color: #0b83a5;
}

.refund-warning strong,
.refund-warning span {
    display: block;
}

.refund-warning strong {
    color: #3c6172;
    font-size: 10px;
}

.refund-warning span {
    margin-top: 4px;
    color: #889ba5;
    font-size: 8px;
    line-height: 1.5;
}

.refund-estimate {
    min-width: 150px;
    text-align: right;
}

.refund-estimate span,
.refund-estimate small {
    display: block;
    color: #8b9da6;
    font-size: 8px;
}

.refund-estimate strong {
    display: block;
    margin: 3px 0;
    color: #b65353;
    font-size: 18px;
}

.refund-submit {
    white-space: nowrap;
}

.refund-summary {
    margin: 15px 0;
    overflow: hidden;
    border: 1px solid #e2eaed;
    border-radius: 11px;
}

.refund-summary > div {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf2f4;
}

.refund-summary > div:last-child {
    border-bottom: 0;
}

.refund-summary span {
    color: #8498a2;
    font-size: 9px;
}

.refund-summary strong {
    color: #375e70;
    font-size: 10px;
}

.refund-summary .balance {
    background: #fff8f8;
}

.refund-history-card {
    margin-top: 20px;
}

.refund-inline {
    margin-top: 3px;
    color: #9b6b6b;
    font-size: 7px;
}

.sale-refund-summary {
    margin: 14px 0;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #efdede;
    border-radius: 11px;
    background: #fffafa;
}

.sale-refund-summary > div {
    padding: 10px 12px;
    border-right: 1px solid #f0e1e1;
}

.sale-refund-summary > div:last-child {
    border-right: 0;
}

.sale-refund-summary span {
    display: block;
    color: #987f7f;
    font-size: 8px;
    text-transform: uppercase;
}

.sale-refund-summary strong {
    display: block;
    margin-top: 4px;
    color: #455f6c;
    font-size: 10px;
}

.sale-refund-summary .net {
    background: #fff5f5;
}

.payment-history-icon.refund {
    color: #b65353;
    background: #faeaea;
}

@media (max-width: 1100px) {

    .refund-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {

    .refund-search-form,
    .refund-confirm-card {
        align-items: stretch;
        flex-direction: column;
    }

    .refund-sale-info,
    .refund-form-grid,
    .sale-refund-summary {
        grid-template-columns: 1fr;
    }

    .refund-form-grid .form-full {
        grid-column: auto;
    }

    .refund-estimate {
        text-align: left;
    }

}


/* =========================================================
   VENTAS - TIPO DE COBRO Y ENTREGA
========================================================= */

.collection-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.collection-type.full {
    color: #176f55;
    background: #e8f6f1;
}

.collection-type.installment {
    color: #9a721e;
    background: #fff3dc;
}

.collection-type.pending {
    color: #a14c4c;
    background: #f9ebeb;
}

.delivery-date-mini {
    margin-top: 4px;
    color: #879aa4;
    font-size: 7px;
    white-space: nowrap;
}


/* =========================================================
   DASHBOARD - CONTADORES DE PEDIDOS
========================================================= */

.pedido-dashboard-stats {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pedido-dashboard-stats span {
    padding: 7px 6px;
    border: 1px solid #e3ebee;
    border-radius: 8px;
    background: #f8fbfc;
    color: #879aa4;
    font-size: 7px;
    text-align: center;
}

.pedido-dashboard-stats strong {
    display: block;
    margin-bottom: 2px;
    color: #315b6d;
    font-size: 12px;
}

@media (max-width: 700px) {
    .pedido-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   DASHBOARD - DIFERENCIA ENTRE VENTA Y COBRO
========================================================= */

.dashboard-kpi-pro .dashboard-kpi-note {
    line-height: 1.45;
}

.payment-choice span {
    line-height: 1.45;
}


/* =========================================================
   GASTOS
========================================================= */

.page-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.expense-summary-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.expense-summary-card {
    padding: 17px;
    border: 1px solid #e4ecef;
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow);
}

.expense-summary-card span,
.expense-summary-card small {
    display: block;
    color: #879aa4;
}

.expense-summary-card span {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.expense-summary-card strong {
    display: block;
    margin: 5px 0;
    color: #405f6d;
    font-size: 20px;
}

.expense-summary-card small {
    font-size: 8px;
}

.expense-toolbar {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.expense-toolbar .sales-search {
    min-width: 260px;
    flex: 1;
}

.expense-table {
    min-width: 1250px;
}

.expense-category-badge {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 20px;
    color: #336d7e;
    background: #eaf5f7;
    font-size: 8px;
    font-weight: 800;
}

.expense-money {
    color: #b65353;
}

.expense-row-cancelled {
    opacity: .64;
}

.expense-form-layout {
    max-width: 950px;
    margin: 0 auto;
}

.expense-form-card .form-grid {
    margin-top: 15px;
}

.expense-form-alert {
    margin-top: 18px;
    padding: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #d8eaee;
    border-radius: 11px;
    color: #466d7d;
    background: #f0f8fa;
}

.expense-form-alert > i {
    margin-top: 2px;
    color: #0c86a7;
}

.expense-form-alert strong,
.expense-form-alert span {
    display: block;
}

.expense-form-alert strong {
    font-size: 9px;
}

.expense-form-alert span {
    margin-top: 3px;
    color: #80959f;
    font-size: 8px;
    line-height: 1.45;
}

.category-expense-layout {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns:
        330px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.expense-category-list {
    display: grid;
}

.expense-category-row {
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf2f4;
}

.expense-category-row:last-child {
    border-bottom: 0;
}

.expense-category-row strong,
.expense-category-row span {
    display: block;
}

.expense-category-row strong {
    color: #3d6273;
    font-size: 9px;
}

.expense-category-row span {
    margin-top: 3px;
    color: #8da0a9;
    font-size: 8px;
}


/* =========================================================
   DASHBOARD - GASTOS Y FLUJO
========================================================= */

.expense-kpi-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.expense-kpi-card {
    min-height: 110px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #e4ecef;
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.expense-kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    color: #b65353;
    background: #faebeb;
}

.expense-kpi-card.flow .expense-kpi-icon {
    color: #168768;
    background: #e7f6f0;
}

.expense-kpi-card.flow.negative .expense-kpi-icon {
    color: #b65353;
    background: #faebeb;
}

.expense-kpi-card span,
.expense-kpi-card small {
    display: block;
}

.expense-kpi-card span {
    color: #8498a2;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.expense-kpi-card strong {
    display: block;
    margin: 5px 0;
    color: #3e6070;
    font-size: 18px;
}

.expense-kpi-card small {
    color: #91a2aa;
    font-size: 7px;
    line-height: 1.4;
}

@media (max-width: 1100px) {

    .expense-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .category-expense-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {

    .expense-summary-grid,
    .expense-kpi-grid {
        grid-template-columns: 1fr;
    }

    .expense-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .expense-toolbar .sales-search {
        min-width: 0;
    }

}


/* =========================================================
   MOVIMIENTOS DE CAJA
========================================================= */

.movement-summary-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.movement-summary-card {
    min-height: 112px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #e4ecef;
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.movement-summary-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
}

.movement-summary-card.income
.movement-summary-icon {
    color: #168768;
    background: #e7f6f0;
}

.movement-summary-card.expense
.movement-summary-icon {
    color: #b65353;
    background: #faebeb;
}

.movement-summary-card.net
.movement-summary-icon {
    color: #496d7d;
    background: #eaf2f5;
}

.movement-summary-card.balance
.movement-summary-icon {
    color: #177e93;
    background: #e7f4f7;
}

.movement-summary-card span,
.movement-summary-card small {
    display: block;
}

.movement-summary-card span {
    color: #8498a2;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.movement-summary-card strong {
    display: block;
    margin: 5px 0;
    color: #3e6070;
    font-size: 18px;
}

.movement-summary-card small {
    color: #91a2aa;
    font-size: 7px;
    line-height: 1.4;
}

.negative-text {
    color: #b65353 !important;
}

.movement-filter-form {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns:
        minmax(210px, 1.4fr)
        repeat(3, minmax(125px, .7fr))
        minmax(130px, .65fr)
        minmax(130px, .65fr)
        auto
        auto;
    gap: 8px;
    align-items: end;
}

.movement-search {
    min-width: 0;
}

.movement-date-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.movement-date-filter label {
    color: #7f949e;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.movement-date-filter input {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe8eb;
    border-radius: 9px;
    color: #456574;
    background: white;
    outline: none;
}

.movement-result-bar {
    margin-bottom: 12px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #8ba0aa;
    font-size: 8px;
}

.movement-result-bar span:first-child {
    color: #4d7180;
    font-weight: 700;
}

.movement-table {
    min-width: 1350px;
}

.movement-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 18px;
    font-size: 8px;
    font-weight: 800;
}

.movement-type.income {
    color: #16775d;
    background: #e7f6f0;
}

.movement-type.expense {
    color: #a64949;
    background: #faebeb;
}

.movement-origin {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 18px;
    color: #4b7281;
    background: #eef4f6;
    font-size: 8px;
    font-weight: 700;
}

.movement-reference {
    color: #406574;
    font-size: 8px;
}

.movement-description {
    max-width: 280px;
    color: #6e858f;
    line-height: 1.4;
}

.movement-amount,
.movement-balance {
    white-space: nowrap;
}

.movement-amount.income {
    color: #168768;
}

.movement-amount.expense {
    color: #b65353;
}

.movement-balance {
    color: #3f6271;
}

@media (max-width: 1180px) {

    .movement-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .movement-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    .movement-summary-grid,
    .movement-filter-form {
        grid-template-columns: 1fr;
    }

    .movement-result-bar {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   REPORTES
========================================================= */

.report-filter-card {
    margin-bottom: 18px;
}

.report-filter-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.report-filter-form .form-group {
    min-width: 180px;
    margin: 0;
}

.report-kpi-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.report-kpi-card {
    min-height: 116px;
    padding: 18px;
    border: 1px solid #e3ecef;
    border-radius: 15px;
    background: white;
    box-shadow: var(--shadow);
}

.report-kpi-card span,
.report-kpi-card small {
    display: block;
}

.report-kpi-card span {
    color: #8498a2;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-kpi-card strong {
    display: block;
    margin: 7px 0;
    color: #3d6070;
    font-size: 21px;
}

.report-kpi-card small {
    color: #91a2aa;
    font-size: 8px;
    line-height: 1.45;
}

.report-kpi-card.income {
    border-left: 4px solid #46a382;
}

.report-kpi-card.expense,
.report-kpi-card.refund {
    border-left: 4px solid #c96f6f;
}

.report-kpi-card.pending {
    border-left: 4px solid #d5a448;
}

.report-kpi-card.flow {
    border-left: 4px solid #23849b;
}

.report-grid-2 {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.report-grid-2 > .panel-card {
    margin: 0;
}

.report-ranking {
    display: grid;
}

.report-ranking-row {
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf2f4;
}

.report-ranking-row:last-child {
    border-bottom: 0;
}

.report-ranking-row span {
    color: #647d88;
    font-size: 9px;
}

.report-ranking-row strong {
    color: #3f6271;
    white-space: nowrap;
}

.report-empty {
    padding: 22px 0;
    color: #94a5ad;
    font-size: 9px;
    text-align: center;
}

.financial-readout {
    display: grid;
    gap: 2px;
}

.financial-readout > div {
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf2f4;
}

.financial-readout span {
    color: #728994;
    font-size: 9px;
}

.financial-readout strong {
    color: #3e6271;
    font-size: 12px;
}

.financial-readout-total {
    margin-top: 5px;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 11px;
    background: #eef7f8;
}

.financial-readout-total span,
.financial-readout-total strong {
    font-weight: 800;
}

.report-information {
    margin-top: 14px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 10px;
    color: #557784;
    background: #f2f7f8;
}

.report-information i {
    margin-top: 2px;
    color: #27879b;
}

.report-information p {
    margin: 0;
    font-size: 8px;
    line-height: 1.5;
}

.report-sales-table {
    min-width: 1050px;
}

@media (max-width: 1050px) {

    .report-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .report-grid-2 {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .report-kpi-grid {
        grid-template-columns: 1fr;
    }

    .report-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .report-filter-form .form-group {
        min-width: 0;
        width: 100%;
    }

}


/* =========================================================
   CAJA - DISEÑO PROFESIONAL V2
========================================================= */

.cash-page {
    max-width: 1540px;
    margin: 0 auto;
}

.cash-hero {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.cash-hero-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    color: #0c8fb1;
    background:
        linear-gradient(
            145deg,
            #edfaff,
            #dff4fa
        );
    border: 1px solid #cfe7ee;
    box-shadow:
        0 10px 22px rgba(26, 93, 113, .10);
    font-size: 25px;
}

.cash-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #0b8bac;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.cash-hero h2 {
    margin: 0;
    color: #173e4d;
    font-size: 25px;
    line-height: 1.1;
}

.cash-hero p {
    margin: 5px 0 0;
    color: #7c939d;
    font-size: 10px;
}

.cash-kpi-grid-pro {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.cash-kpi-pro {
    min-height: 118px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 15px;
    border: 1px solid #dce7eb;
    background: #ffffff;
    box-shadow:
        0 8px 22px rgba(32, 72, 88, .07);
}

.cash-kpi-pro.balance {
    color: #ffffff;
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            #087aa4 0%,
            #0ea0c9 100%
        );
    box-shadow:
        0 12px 28px rgba(13, 137, 174, .22);
}

.cash-kpi-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 18px;
}

.cash-kpi-pro.balance .cash-kpi-icon {
    color: white;
    background: rgba(255, 255, 255, .16);
}

.cash-kpi-pro.income .cash-kpi-icon {
    color: #159162;
    background: #e3f7ef;
}

.cash-kpi-pro.expense .cash-kpi-icon {
    color: #cf515d;
    background: #feecef;
}

.cash-kpi-pro.net .cash-kpi-icon {
    color: #c88d14;
    background: #fff5d9;
}

.cash-kpi-pro.count .cash-kpi-icon {
    color: #536f7b;
    background: #edf3f5;
}

.cash-kpi-copy {
    min-width: 0;
}

.cash-kpi-copy span,
.cash-kpi-copy small {
    display: block;
}

.cash-kpi-copy span {
    margin-bottom: 5px;
    color: #637e89;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.cash-kpi-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #193f4e;
    font-size: 18px;
    white-space: nowrap;
}

.cash-kpi-copy small {
    color: #8fa2aa;
    font-size: 7.5px;
    line-height: 1.4;
}

.cash-kpi-pro.balance .cash-kpi-copy span,
.cash-kpi-pro.balance .cash-kpi-copy strong,
.cash-kpi-pro.balance .cash-kpi-copy small {
    color: #ffffff;
}

.cash-kpi-decoration {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: rgba(255, 255, 255, .13);
    font-size: 48px;
}

.cash-overview-grid {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 1fr);
    gap: 18px;
}

.cash-panel-pro {
    margin: 0;
    padding: 18px;
    border: 1px solid #dce7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 8px 22px rgba(32, 72, 88, .06);
}

.cash-panel-title {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cash-panel-title h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #173d4c;
    font-size: 13px;
}

.cash-panel-title h3 i {
    color: #138aab;
}

.cash-panel-title p {
    margin: 4px 0 0;
    color: #889ca5;
    font-size: 8px;
    line-height: 1.45;
}

.cash-link-button {
    min-height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    border: 1px solid #d8e6eb;
    border-radius: 10px;
    color: #2f6274;
    background: #ffffff;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s ease;
}

.cash-link-button:hover {
    transform: translateY(-1px);
    border-color: #9ecbd7;
    color: #0b8baa;
    box-shadow:
        0 6px 15px rgba(31, 91, 110, .08);
}

.cash-method-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.cash-method-card {
    min-height: 118px;
    padding: 14px;
    border: 1px solid #e1eaed;
    border-radius: 13px;
    background: #fbfdfe;
}

.cash-method-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.cash-method-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    color: #ffffff;
    font-size: 16px;
}

.cash-method-card.cash .cash-method-icon {
    background:
        linear-gradient(
            135deg,
            #21a467,
            #41bf83
        );
}

.cash-method-card.yape .cash-method-icon {
    background:
        linear-gradient(
            135deg,
            #6832b7,
            #8753d1
        );
}

.cash-method-card.plin .cash-method-icon {
    background:
        linear-gradient(
            135deg,
            #139dc0,
            #35c0dc
        );
}

.cash-method-card.transfer .cash-method-icon {
    background:
        linear-gradient(
            135deg,
            #447999,
            #6598b5
        );
}

.cash-method-card.card .cash-method-icon {
    background:
        linear-gradient(
            135deg,
            #d48124,
            #e9a84a
        );
}

.cash-method-card.other .cash-method-icon {
    background:
        linear-gradient(
            135deg,
            #647b85,
            #8ea0a8
        );
}

.cash-method-top span,
.cash-method-top strong {
    display: block;
}

.cash-method-top span {
    margin-bottom: 3px;
    color: #718893;
    font-size: 8px;
    font-weight: 700;
}

.cash-method-top strong {
    color: #173d4c;
    font-size: 13px;
}

.cash-method-meta {
    margin: 10px 0 6px;
    color: #94a4ab;
    font-size: 7px;
}

.cash-method-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eff2;
}

.cash-method-progress span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #1792af;
}

.cash-method-card.cash .cash-method-progress span {
    background: #2dae73;
}

.cash-method-card.yape .cash-method-progress span {
    background: #7a48c8;
}

.cash-method-card.plin .cash-method-progress span {
    background: #1eaecf;
}

.cash-mini-chart {
    height: 205px;
    padding: 10px 6px 0;
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    border-bottom: 1px solid #dfe8eb;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 47px,
            #edf2f4 48px
        );
}

.cash-chart-day {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.cash-chart-bars {
    width: 100%;
    height: 165px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
}

.cash-chart-bar {
    width: 11px;
    min-height: 0;
    border-radius: 5px 5px 2px 2px;
    transition: .2s ease;
}

.cash-chart-bar:hover {
    filter: brightness(.95);
}

.cash-chart-bar.income {
    background:
        linear-gradient(
            180deg,
            #20aa7b,
            #138d67
        );
}

.cash-chart-bar.expense {
    background:
        linear-gradient(
            180deg,
            #ed6d79,
            #cf4f5b
        );
}

.cash-chart-day > span {
    color: #788d96;
    font-size: 7px;
    white-space: nowrap;
}

.cash-chart-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6c848e;
    font-size: 7px;
    white-space: nowrap;
}

.cash-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cash-chart-legend i {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
}

.cash-chart-legend .income i {
    background: #179d71;
}

.cash-chart-legend .expense i {
    background: #de5d69;
}

.cash-lower-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);
    gap: 18px;
    align-items: start;
}

.cash-form-row {
    display: grid;
    gap: 10px;
}

.cash-form-row-3 {
    grid-template-columns:
        1fr
        1fr
        .75fr;
}

.cash-form-row-2 {
    margin-top: 10px;
    grid-template-columns:
        1.15fr
        .85fr;
}

.cash-manual-form .form-group {
    margin: 0;
}

.cash-manual-form label {
    margin-bottom: 5px;
    color: #365f6e;
    font-size: 8px;
    font-weight: 800;
}

.cash-manual-form input,
.cash-manual-form select {
    min-height: 42px;
    border: 1px solid #d5e2e7;
    border-radius: 9px;
    color: #456674;
    background: #fbfdfe;
    font-size: 9px;
}

.cash-manual-form input:focus,
.cash-manual-form select:focus {
    border-color: #5fb4c9;
    box-shadow:
        0 0 0 3px rgba(32, 152, 184, .08);
}

.cash-money-input {
    min-height: 42px;
    border: 1px solid #d5e2e7;
    border-radius: 9px;
    background: #fbfdfe;
}

.cash-money-input span {
    color: #365e6e;
    font-weight: 800;
}

.cash-money-input input {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.cash-info-box {
    margin-top: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #b9dfea;
    border-radius: 9px;
    color: #357083;
    background: #edf9fc;
    font-size: 7.5px;
    line-height: 1.45;
}

.cash-info-box i {
    margin-top: 1px;
    color: #168eac;
}

.cash-form-actions {
    margin-top: 12px;
}

.cash-primary-button {
    min-height: 38px;
    padding: 0 17px;
    border-radius: 9px;
    box-shadow:
        0 7px 16px rgba(15, 143, 176, .17);
}

.cash-table-pro {
    min-width: 760px;
}

.cash-table-pro thead th {
    padding-top: 9px;
    padding-bottom: 9px;
    color: #597480;
    background: #f3f7f8;
    font-size: 7px;
}

.cash-table-pro tbody td {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 8px;
}

.cash-date-cell strong,
.cash-date-cell span,
.cash-concept-cell strong,
.cash-concept-cell span {
    display: block;
}

.cash-date-cell strong {
    color: #3d6170;
    font-size: 8px;
}

.cash-date-cell span {
    margin-top: 2px;
    color: #9aabb2;
    font-size: 7px;
}

.cash-concept-cell strong {
    color: #365d6d;
    font-size: 8px;
}

.cash-concept-cell span {
    max-width: 190px;
    margin-top: 2px;
    overflow: hidden;
    color: #8da0a8;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cash-type-badge {
    padding: 5px 8px;
    display: inline-flex;
    border-radius: 6px;
    font-size: 7px;
    font-weight: 800;
}

.cash-type-badge.income {
    color: #14815c;
    background: #ddf4ea;
}

.cash-type-badge.expense {
    color: #b6424e;
    background: #fde5e8;
}

.cash-method-pill {
    padding: 5px 7px;
    display: inline-flex;
    border-radius: 6px;
    color: #436b79;
    background: #edf4f6;
    font-size: 7px;
    font-weight: 700;
}

.cash-money {
    white-space: nowrap;
}

.cash-money.income {
    color: #159466;
}

.cash-money.expense {
    color: #cf4d59;
}

@media (max-width: 1320px) {

    .cash-kpi-grid-pro {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .cash-overview-grid,
    .cash-lower-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 900px) {

    .cash-kpi-grid-pro {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cash-method-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cash-form-row-3,
    .cash-form-row-2 {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 620px) {

    .cash-kpi-grid-pro,
    .cash-method-grid {
        grid-template-columns: 1fr;
    }

    .cash-panel-title {
        flex-direction: column;
    }

    .cash-link-button {
        width: 100%;
    }

    .cash-mini-chart {
        min-width: 520px;
    }

    .cash-panel-pro {
        overflow-x: auto;
    }

}


/* =========================================================
   NONA GRAFIC - ESTILO PROFESIONAL UNIFICADO V3
   Dashboard / Gastos / Movimientos / Reportes
========================================================= */

.module-hero {
    margin-bottom: 18px;
    padding: 0;
    align-items: center;
}

.module-hero-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.module-hero-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #cfe5eb;
    border-radius: 16px;
    color: #108ba9;
    background:
        linear-gradient(
            145deg,
            #f0fbfd,
            #e2f4f8
        );
    box-shadow:
        0 9px 22px rgba(36, 102, 123, .09);
    font-size: 22px;
}

.module-hero h2 {
    margin: 1px 0 3px;
    color: #173d4c;
    font-size: 24px;
    line-height: 1.15;
}

.module-hero p {
    max-width: 720px;
    margin: 0;
    color: #8499a2;
    font-size: 9px;
    line-height: 1.5;
}

.module-hero .page-actions-buttons {
    display: flex;
    gap: 8px;
}

/* ---------------------------------------------------------
   Tarjetas generales
--------------------------------------------------------- */

.dashboard-pro .dashboard-analytics-card,
.dashboard-pro .dashboard-future-card,
.dashboard-pro .dashboard-business-summary,
.panel-card,
.expense-summary-card,
.movement-summary-card,
.report-kpi-card {
    border: 1px solid #dce7eb;
    box-shadow:
        0 8px 22px rgba(31, 72, 88, .06);
}

.panel-card {
    border-radius: 16px;
}

.panel-header h3 {
    color: #173d4c;
    font-size: 13px;
}

.panel-header p {
    color: #899da6;
}

/* ---------------------------------------------------------
   DASHBOARD V3
--------------------------------------------------------- */

.dashboard-welcome-v3 {
    overflow: hidden;
    position: relative;
    border: 0 !important;
    background:
        linear-gradient(
            128deg,
            #073f58 0%,
            #087794 58%,
            #11a1bd 100%
        ) !important;
    box-shadow:
        0 16px 34px rgba(5, 87, 113, .18) !important;
}

.dashboard-welcome-v3::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -95px;
    top: -130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.dashboard-welcome-v3::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: 135px;
    bottom: -125px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.dashboard-welcome-v3 > * {
    position: relative;
    z-index: 1;
}

.dashboard-welcome-v3 .welcome-label,
.dashboard-welcome-v3 h2,
.dashboard-welcome-v3 p {
    color: #ffffff;
}

.dashboard-welcome-v3 .welcome-label {
    opacity: .78;
}

.dashboard-welcome-v3 p {
    opacity: .83;
}

.dashboard-welcome-v3 .dashboard-hero-button.primary {
    color: #087d9b;
    background: #ffffff;
    box-shadow:
        0 8px 18px rgba(0, 44, 61, .15);
}

.dashboard-welcome-v3 .dashboard-hero-button.secondary {
    color: #ffffff;
    border-color: rgba(255,255,255,.36);
    background: rgba(255,255,255,.10);
}

.dashboard-kpi-pro .kpi-card,
.collection-kpi-card,
.expense-kpi-card {
    border-radius: 15px;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.dashboard-kpi-pro .kpi-card:hover,
.collection-kpi-card:hover,
.expense-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 26px rgba(31, 72, 88, .09);
}

.dashboard-card-heading h3,
.dashboard-summary-heading h3 {
    color: #173d4c;
}

.dashboard-heading-icon {
    box-shadow:
        inset 0 0 0 1px rgba(18, 142, 170, .06);
}

.dashboard-ranking-item {
    transition: background .16s ease;
}

.dashboard-ranking-item:hover {
    background: #f8fbfc;
}

/* ---------------------------------------------------------
   GASTOS V3
--------------------------------------------------------- */

.module-hero-expenses .module-hero-icon {
    color: #be5660;
    border-color: #f1d8db;
    background:
        linear-gradient(
            145deg,
            #fff8f8,
            #fdebed
        );
}

.expense-summary-grid {
    gap: 12px;
}

.expense-summary-card {
    min-height: 108px;
    padding: 16px 17px;
    border-radius: 15px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfe 100%
        );
}

.expense-summary-card span {
    color: #81959e;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.expense-summary-card strong {
    margin-top: 5px;
    color: #173e4d;
    font-size: 20px;
}

.expense-toolbar {
    padding: 13px;
    border: 1px solid #e0eaed;
    border-radius: 12px;
    background: #f8fbfc;
}

.expense-category-badge {
    border-radius: 7px;
    color: #466b79;
    background: #edf4f6;
}

.expense-money {
    color: #bd4f59;
    font-size: 10px;
}

.expense-table thead th {
    background: #f4f8f9;
}

.expense-table tbody tr {
    transition: background .16s ease;
}

.expense-table tbody tr:hover {
    background: #fbfdfe;
}

/* ---------------------------------------------------------
   MOVIMIENTOS V3
--------------------------------------------------------- */

.module-hero-movements .module-hero-icon {
    color: #197f99;
    background:
        linear-gradient(
            145deg,
            #effafd,
            #def2f7
        );
}

.movement-summary-grid {
    gap: 12px;
}

.movement-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 16px;
    border-radius: 15px;
}

.movement-summary-card::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    right: -24px;
    bottom: -30px;
    border-radius: 50%;
    background: rgba(20, 118, 146, .045);
}

.movement-summary-card.income {
    border-left: 4px solid #2ba77a;
}

.movement-summary-card.expense {
    border-left: 4px solid #d7656f;
}

.movement-summary-card.net {
    border-left: 4px solid #d0a245;
}

.movement-summary-card.balance {
    border-left: 4px solid #188eaa;
}

.movement-summary-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
}

.movement-filter-form {
    padding: 13px;
    border: 1px solid #dfe9ec;
    border-radius: 12px;
    background: #f8fbfc;
}

.movement-result-bar {
    margin: 1px 0 10px;
    padding: 8px 2px;
}

.movement-table thead th {
    color: #56727e;
    background: #f3f8f9;
}

.movement-table tbody tr {
    transition: background .16s ease;
}

.movement-table tbody tr:hover {
    background: #fbfdfe;
}

/* ---------------------------------------------------------
   REPORTES V3
--------------------------------------------------------- */

.module-hero-reports .module-hero-icon {
    color: #5c6fb5;
    border-color: #dfe3f4;
    background:
        linear-gradient(
            145deg,
            #f8f9ff,
            #edf0fb
        );
}

.report-filter-card {
    padding: 14px 16px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafcfd
        );
}

.report-filter-form {
    align-items: end;
}

.report-kpi-grid {
    gap: 12px;
}

.report-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 17px;
    border-radius: 15px;
    background: #ffffff;
}

.report-kpi-card::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    right: -28px;
    bottom: -31px;
    border-radius: 50%;
    background: rgba(22, 118, 145, .045);
}

.report-kpi-card strong {
    font-size: 21px;
}

.report-grid-2 .panel-card {
    min-height: 100%;
}

.report-ranking-row {
    padding: 12px 1px;
}

.report-ranking-row:hover {
    background: #fbfdfe;
}

.financial-readout-total {
    border: 1px solid #d3e8ee !important;
    background:
        linear-gradient(
            135deg,
            #edf9fb,
            #f5fbfc
        );
}

.report-information {
    border: 1px solid #d8eaf0;
}

.report-sales-table thead th {
    background: #f3f8f9;
}

.report-sales-table tbody tr:hover {
    background: #fbfdfe;
}

/* ---------------------------------------------------------
   Botones / formularios compartidos
--------------------------------------------------------- */

.module-hero .btn-primary,
.module-hero .btn-secondary,
.report-filter-card .btn-primary,
.expense-toolbar .btn-primary,
.expense-toolbar .btn-secondary,
.movement-filter-form .btn-primary,
.movement-filter-form .btn-secondary {
    min-height: 38px;
    border-radius: 9px;
    font-weight: 800;
}

.btn-primary {
    box-shadow:
        0 7px 16px rgba(18, 141, 171, .14);
}

.sales-search,
.product-filter,
.movement-date-filter input,
.report-filter-form input {
    border-color: #d8e4e8 !important;
    background: #fbfdfe !important;
}

.sales-search:focus-within,
.product-filter:focus,
.movement-date-filter input:focus,
.report-filter-form input:focus {
    border-color: #68b6c9 !important;
    box-shadow:
        0 0 0 3px rgba(33, 150, 181, .07) !important;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 900px) {

    .module-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .module-hero .page-actions-buttons {
        width: 100%;
        flex-wrap: wrap;
    }

}

@media (max-width: 620px) {

    .module-hero-main {
        align-items: flex-start;
    }

    .module-hero-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 18px;
    }

    .module-hero h2 {
        font-size: 20px;
    }

}


/* =========================================================
   USUARIOS - PROFESIONAL
========================================================= */

.module-hero-users .module-hero-icon {
    color: #5f6ab1;
    border-color: #e0e3f3;
    background:
        linear-gradient(
            145deg,
            #fafaff,
            #eef0fa
        );
}

.users-kpi-grid {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.users-kpi-card {
    min-height: 105px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #dce7eb;
    border-radius: 15px;
    background: #ffffff;
    box-shadow:
        0 8px 22px rgba(31, 72, 88, .06);
}

.users-kpi-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 17px;
}

.users-kpi-card.total .users-kpi-icon {
    color: #178ba7;
    background: #e7f5f8;
}

.users-kpi-card.active .users-kpi-icon {
    color: #238c65;
    background: #e6f5ef;
}

.users-kpi-card.admin .users-kpi-icon {
    color: #665db3;
    background: #efedfa;
}

.users-kpi-card.inactive .users-kpi-icon {
    color: #b85d65;
    background: #faebed;
}

.users-kpi-card span,
.users-kpi-card small {
    display: block;
}

.users-kpi-card span {
    color: #81959e;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.users-kpi-card strong {
    display: block;
    margin: 4px 0;
    color: #173e4d;
    font-size: 21px;
}

.users-kpi-card small {
    color: #93a4ab;
    font-size: 7px;
}

.users-panel {
    overflow: hidden;
}

.users-table {
    min-width: 1150px;
}

.users-table thead th {
    color: #56727e;
    background: #f3f8f9;
}

.users-table tbody tr {
    transition: background .16s ease;
}

.users-table tbody tr:hover {
    background: #fbfdfe;
}

.user-profile-cell {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-pro {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #126f8a,
            #1ca3c1
        );
    font-size: 11px;
    font-weight: 800;
}

.user-profile-cell strong {
    display: block;
    color: #355d6c;
    font-size: 8px;
}

.principal-label {
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #7869b3;
    font-size: 6.5px;
    font-weight: 800;
}

.user-account {
    color: #416b7a;
    font-size: 8px;
}

.role-badge,
.user-state {
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 7px;
    font-size: 7px;
    font-weight: 800;
}

.role-principal,
.role-administrador {
    color: #695bb2;
    background: #efedfa;
}

.role-supervisor {
    color: #336f9a;
    background: #e6f0f7;
}

.role-vendedor {
    color: #27856a;
    background: #e5f5ef;
}

.role-caja {
    color: #a07027;
    background: #fbf1dd;
}

.role-consulta {
    color: #647b85;
    background: #edf2f4;
}

.user-state.active {
    color: #21815e;
    background: #e4f4ec;
}

.user-state.inactive {
    color: #ae515a;
    background: #f9e9eb;
}

.users-date strong,
.users-date span {
    display: block;
}

.users-date strong {
    color: #4a6c79;
    font-size: 8px;
}

.users-date span {
    margin-top: 2px;
    color: #97a6ad;
    font-size: 7px;
}

.users-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.users-actions form {
    margin: 0;
}

.icon-action {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: .18s ease;
}

.icon-action.edit {
    color: #277d96;
    background: #e9f5f8;
}

.icon-action.disable {
    color: #b4515a;
    background: #fae9eb;
}

.icon-action.enable {
    color: #23825f;
    background: #e5f4ed;
}

.icon-action.protected {
    color: #7c8e96;
    background: #edf2f4;
    cursor: default;
}

.icon-action:not(.protected):hover {
    transform: translateY(-1px);
    filter: brightness(.97);
}

.app-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    padding: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 39, 52, .46);
    backdrop-filter: blur(5px);
}

.app-modal.show {
    display: flex;
}

.app-modal-card {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #d9e6ea;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 24px 60px rgba(5, 43, 58, .22);
}

.app-modal-header {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.app-modal-header h3 {
    margin: 2px 0 0;
    color: #173d4c;
    font-size: 18px;
}

.modal-close {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: #6f858f;
    background: #edf3f5;
    cursor: pointer;
}

.app-modal-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.users-protected-note {
    margin-top: 12px;
    padding: 10px 12px;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #d9d6ef;
    border-radius: 9px;
    color: #675d9e;
    background: #f4f2fb;
    font-size: 8px;
    line-height: 1.45;
}

/* =========================================================
   CONFIGURACIÓN - PROFESIONAL
========================================================= */

.module-hero-settings .module-hero-icon {
    color: #4f7787;
    border-color: #dae7eb;
    background:
        linear-gradient(
            145deg,
            #f4f9fa,
            #e7f1f4
        );
}

.settings-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, .62fr);
    gap: 18px;
    align-items: start;
}

.settings-main {
    display: grid;
    gap: 18px;
}

.settings-side {
    display: grid;
    gap: 14px;
}

.settings-card {
    margin: 0;
}

.settings-section-title {
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.settings-section-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    color: #1c829c;
    background: #e8f5f8;
}

.settings-section-icon.money {
    color: #9a792f;
    background: #faf1dd;
}

.settings-section-icon.image {
    color: #685eaf;
    background: #efedfa;
}

.settings-section-title h3 {
    margin: 0;
    color: #173d4c;
    font-size: 13px;
}

.settings-section-title p {
    margin: 3px 0 0;
    color: #8b9da5;
    font-size: 8px;
}

.settings-card textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8e4e8;
    border-radius: 9px;
    color: #456674;
    background: #fbfdfe;
    resize: vertical;
    outline: none;
    font-family: inherit;
}

.settings-card textarea:focus {
    border-color: #68b6c9;
    box-shadow:
        0 0 0 3px rgba(33, 150, 181, .07);
}

.settings-logo-preview {
    min-height: 190px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cddde2;
    border-radius: 13px;
    background: #f8fbfc;
}

.settings-logo-preview img {
    max-width: 100%;
    max-height: 155px;
    object-fit: contain;
}

.settings-logo-placeholder {
    color: #91a3aa;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 8px;
}

.settings-logo-placeholder i {
    font-size: 25px;
}

.settings-upload-button {
    margin-top: 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d4e3e7;
    border-radius: 9px;
    color: #3e7080;
    background: #f8fbfc;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.settings-upload-button input {
    display: none;
}

.settings-file-help {
    display: block;
    margin-top: 7px;
    color: #98a8ae;
    font-size: 7px;
    text-align: center;
}

.settings-status-card {
    margin: 0;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-color: #d7e6ea;
    background:
        linear-gradient(
            145deg,
            #f8fcfd,
            #eef7f9
        );
}

.settings-status-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    color: #277f97;
    background: #dff1f5;
}

.settings-status-card strong {
    display: block;
    color: #345e6d;
    font-size: 9px;
}

.settings-status-card p {
    margin: 4px 0 0;
    color: #78909a;
    font-size: 7.5px;
    line-height: 1.5;
}

.settings-save-button {
    width: 100%;
    min-height: 44px;
}

@media (max-width: 1050px) {

    .users-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 620px) {

    .users-kpi-grid {
        grid-template-columns: 1fr;
    }

    .app-modal {
        padding: 10px;
    }

    .app-modal-card {
        padding: 16px;
    }

}


/* =========================================================
   MÓDULOS COMERCIALES - DISEÑO PROFESIONAL V4
   Ventas / Anulaciones / Devoluciones / Pedidos / Productos
========================================================= */

.module-hero-sales .module-hero-icon {
    color: #087fa2;
    border-color: #cfe8ef;
    background: linear-gradient(145deg, #effbfe, #dff4f9);
}

.module-hero-cancel .module-hero-icon {
    color: #c44c58;
    border-color: #f0d5d9;
    background: linear-gradient(145deg, #fff8f9, #fdebed);
}

.module-hero-refunds .module-hero-icon {
    color: #b8782c;
    border-color: #f0dfc8;
    background: linear-gradient(145deg, #fffaf3, #fbf0df);
}

.module-hero-orders .module-hero-icon {
    color: #5d67b2;
    border-color: #dfe1f3;
    background: linear-gradient(145deg, #fafaff, #eef0fa);
}

.module-hero-products .module-hero-icon {
    color: #238568;
    border-color: #d3eade;
    background: linear-gradient(145deg, #f3fcf8, #e5f6ee);
}

/* KPIs comerciales */

.commerce-kpi-grid {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.commerce-kpi-card {
    min-height: 108px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #dce7eb;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,72,88,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.commerce-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(31,72,88,.09);
}

.commerce-kpi-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 17px;
}

.commerce-kpi-card span,
.commerce-kpi-card small {
    display: block;
}

.commerce-kpi-card span {
    color: #81959e;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.commerce-kpi-card strong {
    display: block;
    margin: 4px 0;
    color: #173e4d;
    font-size: 19px;
    white-space: nowrap;
}

.commerce-kpi-card small {
    color: #93a4ab;
    font-size: 7px;
}

.commerce-kpi-card.primary .commerce-kpi-icon {
    color: #0e86a7;
    background: #e4f4f8;
}

.commerce-kpi-card.success .commerce-kpi-icon {
    color: #218b63;
    background: #e5f5ed;
}

.commerce-kpi-card.warning .commerce-kpi-icon {
    color: #b07d22;
    background: #fbf1dc;
}

.commerce-kpi-card.money .commerce-kpi-icon {
    color: #5e68ad;
    background: #efedfa;
}

.commerce-kpi-card.cash .commerce-kpi-icon {
    color: #267a96;
    background: #e8f2f6;
}

.commerce-kpi-card.debt .commerce-kpi-icon {
    color: #ba555e;
    background: #fae9ec;
}

/* VENTAS */

.sales-card-pro {
    overflow: hidden;
}

.sales-card-pro .sales-toolbar {
    padding: 13px;
    border: 1px solid #e0eaed;
    border-radius: 12px;
    background: #f8fbfc;
}

.sales-payment-table thead th {
    color: #56727e;
    background: #f3f8f9;
}

.sales-payment-table tbody tr {
    transition: background .16s ease;
}

.sales-payment-table tbody tr:hover {
    background: #fbfdfe;
}

.order-number {
    color: #187d99 !important;
}

.order-total {
    color: #173e4d;
    font-size: 10px;
}

.payment-paid {
    color: #23885f;
}

.payment-debt {
    color: #c0505b;
}

.payment-zero {
    color: #5f7883;
}

/* BUSCADORES ANULACIONES / DEVOLUCIONES */

.operation-search-card {
    margin-bottom: 18px;
    overflow: hidden;
    border-top: 3px solid #1689a7;
}

.cancel-sale-header,
.refund-search-header {
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f4;
}

.cancel-search-form,
.refund-search-form {
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #dfe9ec;
    border-radius: 12px;
    background: #f8fbfc;
}

.cancel-search-box,
.refund-search-box {
    border-color: #d5e3e7;
    background: #fff;
}

.cancel-result-grid,
.refund-layout {
    gap: 18px;
}

.cancel-result-grid > .panel-card,
.refund-main > .panel-card,
.cancel-danger-card,
.already-cancelled-card {
    border: 1px solid #dce7eb;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(31,72,88,.06);
}

.cancel-result-header,
.refund-result-header {
    padding-bottom: 13px;
    border-bottom: 1px solid #edf2f4;
}

.cancel-sale-info,
.refund-sale-info {
    gap: 10px;
}

.cancel-sale-info > div,
.refund-sale-info > div {
    padding: 12px;
    border: 1px solid #e3ebee;
    border-radius: 11px;
    background: #fbfdfe;
}

.cancel-danger-card {
    border-top: 3px solid #d35661;
    background: linear-gradient(180deg, #fff, #fffafb);
}

.already-cancelled-card {
    border-top: 3px solid #98a7ad;
}

.cancel-history {
    overflow: hidden;
}

.cancel-history thead th,
.refund-items-table thead th {
    background: #f3f8f9;
}

/* PEDIDOS */

.orders-kpi-grid-pro {
    gap: 12px;
}

.order-kpi-pro {
    min-height: 105px;
    border: 1px solid #dce7eb;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,72,88,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.order-kpi-pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(31,72,88,.09);
}

.order-kpi-pro .order-kpi-icon {
    width: 43px;
    height: 43px;
    border-radius: 12px;
}

.orders-table-card-pro {
    overflow: hidden;
}

.orders-table-card-pro .orders-toolbar {
    padding: 13px;
    border: 1px solid #e0eaed;
    border-radius: 12px;
    background: #f8fbfc;
}

.orders-table thead th {
    color: #56727e;
    background: #f3f8f9;
}

.orders-table tbody tr {
    transition: background .16s ease;
}

.orders-table tbody tr:hover {
    background: #fbfdfe;
}

/* PRODUCTOS / SERVICIOS */

.products-kpi-grid-pro {
    gap: 12px;
}

.product-kpi-pro {
    min-height: 105px;
    border: 1px solid #dce7eb;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,72,88,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-kpi-pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(31,72,88,.09);
}

.product-kpi-pro .product-kpi-icon {
    width: 43px;
    height: 43px;
    border-radius: 12px;
}

.products-table-card-pro {
    overflow: hidden;
}

.products-toolbar-pro {
    padding: 13px;
    border: 1px solid #e0eaed;
    border-radius: 12px;
    background: #f8fbfc;
}

.products-data-table thead th {
    color: #56727e;
    background: #f3f8f9;
}

.products-data-table tbody tr {
    transition: background .16s ease;
}

.products-data-table tbody tr:hover {
    background: #fbfdfe;
}

.product-icon-small {
    box-shadow: inset 0 0 0 1px rgba(18, 126, 153, .05);
}

.category-badge,
.type-badge,
.stock-badge,
.status {
    border-radius: 7px !important;
}

/* NUEVA VENTA / NUEVO PEDIDO */

.sale-layout-pro,
.order-create-layout-pro {
    gap: 18px;
}

.sale-layout-pro .sale-section,
.order-create-layout-pro .sale-section {
    border: 1px solid #dce7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,72,88,.055);
}

.sale-layout-pro .sale-section-title,
.order-create-layout-pro .sale-section-title {
    padding-bottom: 13px;
    border-bottom: 1px solid #edf2f4;
}

.sale-layout-pro .sale-section-title h3,
.order-create-layout-pro .sale-section-title h3 {
    color: #173d4c;
}

.sale-layout-pro .sale-summary,
.order-create-layout-pro .sale-summary {
    border: 1px solid #d5e6eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f7fbfc);
    box-shadow: 0 10px 25px rgba(31,72,88,.07);
}

.payment-choice {
    border-radius: 12px;
    border-color: #dce7eb;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.payment-choice:hover {
    transform: translateY(-1px);
    border-color: #8dc8d6;
}

.payment-choice.active {
    border-color: #2c9cb7;
    box-shadow: 0 7px 16px rgba(24,139,166,.09);
}

/* DETALLE PEDIDO */

.order-progress-card {
    border: 1px solid #dce7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31,72,88,.06);
}

.order-detail-page .panel-card {
    border: 1px solid #dce7eb;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(31,72,88,.055);
}

/* Responsive */

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

@media (max-width: 680px) {
    .commerce-kpi-grid {
        grid-template-columns: 1fr;
    }
}