/* css/style.css */
/* =====================================================================
   SISTEMA POSTVENTA — CLAYMORPHISM
   Para cambiar el color de marca, edita SOLO --color-primario.
   Todo lo demás (oscuro, claro, fondo, sombras de acento) se deriva
   automáticamente con color-mix().
   ===================================================================== */
:root {
    /* ---- ÚNICA VARIABLE A CAMBIAR ---- */
    --color-primario: #2f5233;   /* verde bosque, serio y profesional */

    /* ---- Derivados automáticos (no tocar) ---- */
    --color-primario-dark:  color-mix(in srgb, var(--color-primario) 78%, black);
    --color-primario-light: color-mix(in srgb, var(--color-primario) 55%, white);
    --color-primario-bg:    color-mix(in srgb, var(--color-primario) 10%, #eef1ec);
    --color-primario-ring:  color-mix(in srgb, var(--color-primario) 35%, transparent);

    --fuente-principal: 'Quicksand', sans-serif;

    /* ---- Base clay (fondo mate, ni blanco puro ni gris frío) ---- */
    --bg-body: #e9edea;
    --bg-card: #eef1ec;
    --bg-card-alt: #e3e8e2;

    --text-primary: #23301f;
    --text-secondary: #5c6b58;
    --text-light: #ffffff;

    --border-radius: 22px;
    --border-radius-sm: 14px;
    --transition: all .25s cubic-bezier(.2,.8,.2,1);

    /* ---- Sombras "clay": luz arriba-izq, sombra abajo-der ---- */
    --clay-raised:
        8px 8px 16px rgba(30, 40, 28, 0.16),
        -8px -8px 16px rgba(255, 255, 255, 0.75);
    --clay-raised-sm:
        4px 4px 10px rgba(30, 40, 28, 0.14),
        -4px -4px 10px rgba(255, 255, 255, 0.7);
    --clay-pressed:
        inset 5px 5px 10px rgba(30, 40, 28, 0.18),
        inset -5px -5px 10px rgba(255, 255, 255, 0.65);
    --clay-hover:
        10px 10px 22px rgba(30, 40, 28, 0.20),
        -10px -10px 22px rgba(255, 255, 255, 0.8);
}

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

body {
    font-family: var(--fuente-principal);
    background: var(--bg-body);
    min-height: 100vh;
    color: var(--text-primary);
    padding: 24px;
}

.app-container { max-width: 1400px; margin: 0 auto; }

/* ===== HEADER ===== */
.app-header {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 18px 26px;
    box-shadow: var(--clay-raised);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    flex-wrap: wrap;
    gap: 12px;
}

.app-header .brand { display: flex; align-items: center; gap: 14px; }

.app-header .brand .logo {
    width: 46px; height: 46px;
    background: var(--color-primario);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-light);
    font-size: 21px; font-weight: 700;
    box-shadow: var(--clay-raised-sm);
}

.app-header .brand h1 { font-size: 21px; font-weight: 700; color: var(--text-primary); }
.app-header .brand span { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

.app-header .header-actions { display: flex; align-items: center; gap: 12px; }

.app-header .header-actions .user {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 16px 5px 5px;
    background: var(--bg-card);
    border-radius: 50px;
    box-shadow: var(--clay-pressed);
}

.app-header .header-actions .user .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-primario); color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    box-shadow: var(--clay-raised-sm);
}

.app-header .header-actions .user .name { font-weight: 700; font-size: 13px; }
.app-header .header-actions .user .role { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }

/* ===== BOTONES (claymorphism) ===== */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-family: var(--fuente-principal);
    font-weight: 700; font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    box-shadow: var(--clay-raised-sm);
}
.btn:active { box-shadow: var(--clay-pressed); transform: translateY(1px); }
.btn:hover:not(:active) { transform: translateY(-2px); box-shadow: var(--clay-hover); }

.btn-primary, .btn-success { background: var(--color-primario); color: var(--text-light); }
.btn-danger  { background: #a13c3c; color: var(--text-light); }
.btn-warning { background: #b8862f; color: var(--text-light); }
.btn-info    { background: #2f6a7a; color: var(--text-light); }
.btn-outline { background: var(--bg-card); color: var(--text-primary); }

.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-xs {
    padding: 6px 9px; font-size: 13px;
    border-radius: 10px;
    box-shadow: var(--clay-raised-sm);
}

/* ===== CARDS ===== */
.card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--clay-raised);
    padding: 22px;
}

/* ===== ESTADÍSTICAS ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 26px; }

.stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 22px 20px;
    box-shadow: var(--clay-raised);
    transition: var(--transition);
    display: flex; align-items: center; gap: 16px;
}
.stat-card:hover { box-shadow: var(--clay-hover); transform: translateY(-3px); }

.stat-card .icon {
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
    box-shadow: var(--clay-pressed);
}
.stat-card .icon.green  { background: var(--color-primario-bg); }
.stat-card .icon.blue   { background: #e3ecec; }
.stat-card .icon.orange { background: #f2ead9; }
.stat-card .icon.red    { background: #f2e1e1; }

.stat-card .info .number { font-size: 28px; font-weight: 700; }
.stat-card .info .label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* ===== MÓDULOS (estilo panel HP Innowater, en clay) ===== */
.modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 26px; }

.module-card {
    background: var(--color-primario);
    border-radius: var(--border-radius);
    padding: 30px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--text-light);
    box-shadow: var(--clay-raised);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.module-card:hover { transform: translateY(-5px); box-shadow: var(--clay-hover); }
.module-card:active { box-shadow: var(--clay-pressed); transform: translateY(0); }

.module-card .icon { font-size: 36px; display: block; margin-bottom: 10px; }
.module-card .name { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.module-card .desc { font-size: 12px; opacity: .85; margin-top: 5px; }

.module-card.logout { background: #a13c3c; }

/* ===== NOTIFICACIONES / ALERTAS ===== */
.notification-item, .alert-item {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 18px;
    background: var(--bg-card-alt);
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
    box-shadow: var(--clay-raised-sm);
    transition: var(--transition);
    cursor: pointer;
}
.notification-item:hover, .alert-item:hover { box-shadow: var(--clay-hover); }
.notification-item.unread { border-left: 4px solid var(--color-primario); }
.alert-item { border-left: 4px solid #b8862f; cursor: default; }

.notification-item .icon, .alert-item .icon { font-size: 18px; }
.notification-item .content, .alert-item .content { flex: 1; }
.notification-item .title, .alert-item .title { font-weight: 700; font-size: 14px; }
.notification-item .message, .alert-item .message { font-size: 13px; color: var(--text-secondary); }
.notification-item .time { font-size: 11px; color: var(--text-secondary); opacity: .7; }

.empty-state { text-align: center; padding: 34px; color: var(--text-secondary); }

.card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 2px solid var(--bg-card-alt);
}
.card-header .title { font-size: 16px; font-weight: 700; }
.card-header .badge {
    background: var(--color-primario-bg); color: var(--color-primario-dark);
    padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 700;
    box-shadow: var(--clay-pressed);
}

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }

/* ===== FILTROS (barra de búsqueda) ===== */
.filters-bar {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--clay-raised);
    padding: 20px 22px;
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
    margin-bottom: 22px;
}
.filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.filter-group label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.filter-actions { display: flex; gap: 10px; align-items: flex-end; }

.input, .select, textarea {
    font-family: var(--fuente-principal);
    padding: 11px 15px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    box-shadow: var(--clay-pressed);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
    width: 100%;
}
.input:focus, .select:focus, textarea:focus {
    outline: none;
    box-shadow: var(--clay-pressed), 0 0 0 3px var(--color-primario-ring);
}

/* ===== TABLA ===== */
.table-wrapper {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--clay-raised);
    padding: 22px;
}
.table-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.table-toolbar .left { display: flex; align-items: center; gap: 12px; }
.table-toolbar .title { font-size: 16px; font-weight: 700; }
.table-toolbar .count {
    font-size: 12px; font-weight: 700; color: var(--color-primario-dark);
    background: var(--color-primario-bg); padding: 3px 12px; border-radius: 50px;
}
.table-toolbar .right { display: flex; align-items: center; gap: 10px; }
.search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); box-shadow: var(--clay-pressed);
    border-radius: 50px; padding: 8px 16px;
}
.search-box input { border: none; background: transparent; font-family: var(--fuente-principal); font-size: 13px; outline: none; width: 180px; }

.table-scroll { overflow-x: auto; border-radius: var(--border-radius-sm); }
.table-datatable { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.table-datatable thead th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-secondary); font-weight: 700; padding: 0 16px 8px;
}
.table-datatable tbody tr {
    background: var(--bg-card-alt);
    box-shadow: var(--clay-raised-sm);
}
.table-datatable tbody td {
    padding: 14px 16px; font-size: 13.5px;
    border-top: none;
}
.table-datatable tbody tr td:first-child { border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); }
.table-datatable tbody tr td:last-child { border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0; }

.badge-status {
    display: inline-block; padding: 4px 12px; border-radius: 50px;
    font-size: 11px; font-weight: 700;
    background: var(--color-primario-bg); color: var(--color-primario-dark);
}
.badge-status.pendiente { background: #f2ead9; color: #8a6414; }
.badge-status.inactivo, .badge-status.anulado { background: #f2e1e1; color: #8a3a3a; }

.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

.table-footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; margin-top: 18px; padding-top: 16px;
    border-top: 2px solid var(--bg-card-alt);
}
.table-footer .info { font-size: 12.5px; color: var(--text-secondary); }
.pagination { display: flex; gap: 6px; }
.page-btn {
    min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--bg-card); box-shadow: var(--clay-raised-sm);
    text-decoration: none; color: var(--text-primary); font-size: 12.5px; font-weight: 700;
    transition: var(--transition);
}
.page-btn.active { background: var(--color-primario); color: var(--text-light); box-shadow: var(--clay-pressed); }
.page-btn.disabled { opacity: .4; pointer-events: none; }
.page-btn:hover:not(.disabled):not(.active) { box-shadow: var(--clay-hover); }

/* ===== FORMULARIO SERVICIO ===== */
.form-section { margin-bottom: 24px; }
.form-section .section-title {
    font-size: 15px; font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px; color: var(--color-primario-dark);
}
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }

.autocomplete-wrap { position: relative; }
.autocomplete-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
    background: var(--bg-card); border-radius: var(--border-radius-sm);
    box-shadow: var(--clay-hover); max-height: 220px; overflow-y: auto; display: none;
}
.autocomplete-list.show { display: block; }
.autocomplete-list .item { padding: 10px 16px; cursor: pointer; font-size: 13px; }
.autocomplete-list .item:hover { background: var(--color-primario-bg); }
.autocomplete-list .item small { display: block; color: var(--text-secondary); }

.detalle-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.detalle-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-secondary); padding: 0 10px 6px; }
.detalle-table td { background: var(--bg-card-alt); padding: 8px 10px; box-shadow: var(--clay-raised-sm); }
.detalle-table td:first-child { border-radius: 10px 0 0 10px; }
.detalle-table td:last-child { border-radius: 0 10px 10px 0; }
.detalle-table input { padding: 8px 10px; font-size: 12.5px; }

.totales-box {
    margin-top: 14px; display: flex; justify-content: flex-end;
}
.totales-box .inner {
    background: var(--bg-card-alt); border-radius: var(--border-radius-sm);
    box-shadow: var(--clay-pressed); padding: 16px 22px; min-width: 260px;
}
.totales-box .row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; }
.totales-box .row.total { font-weight: 700; font-size: 16px; color: var(--color-primario-dark); border-top: 2px solid var(--bg-body); margin-top: 6px; padding-top: 10px; }

.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .app-header { flex-direction: column; text-align: center; }
    .app-header .header-actions { justify-content: center; flex-wrap: wrap; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    body { padding: 12px; }
    .stats-grid { grid-template-columns: 1fr; }
    .modules-grid { grid-template-columns: 1fr; }
    .app-header .brand h1 { font-size: 17px; }
}