/*
 * Asygna Central design system
 * Fuente unica de verdad para marca, estados y acciones de la interfaz.
 */
:root {
    /* Brand — alineada con asygna.cl y la aplicacion Asygna */
    --brand-950: #07120e;
    --brand-900: #0b2119;
    --brand-800: #123b2d;
    --brand-700: #126b50;
    --brand-600: #16875f;
    --brand-500: #1d9e75;
    --brand-400: #2bc893;
    --brand-100: #ddf5ec;
    --brand-50: #effaf5;

    /* Acciones — un color estable por intencion */
    --action-create: #16875f;
    --action-create-dark: #126b50;
    --action-save: #0b2119;
    --action-save-hover: #123b2d;
    --action-edit: #5b4bb7;
    --action-edit-bg: #f0edff;
    --action-edit-border: #dcd5ff;
    --action-approve: #15803d;
    --action-approve-dark: #166534;
    --action-danger: #b42318;
    --action-danger-dark: #8f1d15;
    --action-danger-bg: #fff1f0;
    --action-danger-border: #f7c5c0;

    /* Superficies */
    --bg-page: #f2f7f4;
    --bg-card: #ffffff;
    --bg-subtle: #f7faf8;
    --border: #dde8e3;
    --border-light: #e8f0ec;
    --border-input: #ceddd6;

    /* Texto */
    --text-primary: #17201d;
    --text-secondary: #52625c;
    --text-muted: #64746e;
    --text-faint: #afbbb6;

    /* Semantica */
    --success: #15803d;
    --success-bg: #dcfce7;
    --warning: #9a5b0a;
    --warning-bg: #fff8e7;
    --danger: #b42318;
    --danger-bg: #fff1f0;
    --info: #3659a6;
    --info-bg: #edf2ff;

    /* Forma */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --shadow-card: 0 1px 2px rgba(7, 18, 14, .04), 0 8px 24px rgba(7, 18, 14, .045);
    --sb-width: 220px;
    --sb-mini: 54px;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--bg-page);
    color: var(--text-secondary);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--brand-700);
}

a:hover {
    color: var(--brand-600);
}

/* Logo oficial */
.asygna-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    text-decoration: none;
}

.asygna-mark {
    width: 38px;
    height: 38px;
    overflow: visible;
    flex: none;
}

.asygna-wordmark {
    font-family: "DM Sans", Inter, sans-serif;
    font-size: 30px;
    font-weight: 550;
    letter-spacing: -1.4px;
}

.asygna-logo--dark .asygna-wordmark,
.asygna-logo--light .asygna-wordmark {
    color: #f4faf7;
}

.asygna-logo--onlight .asygna-wordmark {
    color: var(--brand-950);
}

.mark-line {
    fill: none;
    stroke: rgba(43, 200, 147, .62);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: markConnect .75s cubic-bezier(.22, 1, .36, 1) forwards;
}

.mark-line-2 { animation-delay: .12s; }
.mark-line-3 { animation-delay: .2s; }
.mark-line-4 { animation-delay: .3s; }
.mark-line-5 { animation-delay: .38s; }

.mark-node {
    fill: var(--brand-400);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: markNodeIn .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

.mark-node-center {
    fill: #f4faf7;
    stroke: var(--brand-400);
    stroke-width: 2;
}

.n1 { animation-delay: .02s; transform: translate(-8px, -4px) scale(.4); }
.n2 { animation-delay: .08s; transform: translate(0, -10px) scale(.4); }
.n3 { animation-delay: .14s; transform: translate(8px, -4px) scale(.4); }
.n4 { animation-delay: .2s; transform: translate(-9px, 7px) scale(.4); }
.n5 { animation-delay: .26s; transform: translate(9px, 7px) scale(.4); }
.n6 { animation-delay: .34s; transform: translate(0, 10px) scale(.4); }
.mark-node-center { animation-delay: .42s; transform: scale(.3); }

@keyframes markNodeIn {
    to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes markConnect {
    to { stroke-dashoffset: 0; }
}

/* Chrome principal */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sb-width);
    min-width: var(--sb-width);
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, var(--brand-950) 0%, var(--brand-900) 100%);
    border-right: 1px solid rgba(244, 250, 247, .08);
    box-shadow: 8px 0 28px rgba(7, 18, 14, .06);
    transition: width .2s ease, min-width .2s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: 59px;
    border-bottom: 1px solid rgba(244, 250, 247, .09);
    white-space: nowrap;
    text-decoration: none;
}

.sidebar-brand .asygna-mark {
    width: 30px;
    height: 30px;
}

.sidebar-brand .asygna-wordmark {
    color: #f4faf7;
    font-size: 20px;
}

.sidebar-brand:hover .asygna-mark {
    filter: drop-shadow(0 0 8px rgba(43, 200, 147, .45));
}

.sidebar-name {
    color: #f4faf7;
    font-size: 15px;
    font-weight: 700;
    transition: opacity .15s;
}

.sidebar-name .central-label {
    color: rgba(244, 250, 247, .55) !important;
}

.sidebar-nav {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-group-label {
    padding: 12px 8px 4px;
    color: rgba(244, 250, 247, .5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .15s;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-left: 2px solid transparent;
    border-radius: 7px;
    color: rgba(244, 250, 247, .68);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.sidebar-link:hover {
    color: #f4faf7;
    background: rgba(244, 250, 247, .065);
}

.sidebar-link.active {
    color: #f4faf7;
    background: rgba(43, 200, 147, .14);
    border-left-color: var(--brand-400);
    font-weight: 650;
}

.sidebar-link .nav-icon {
    min-width: 18px;
    color: rgba(244, 250, 247, .5);
    font-size: 14px;
    text-align: center;
    filter: saturate(.8);
}

.sidebar-link:hover .nav-icon,
.sidebar-link.active .nav-icon {
    color: var(--brand-400);
    filter: none;
}

.nav-label { transition: opacity .15s; }

.sidebar-footer {
    padding: 8px;
    border-top: 1px solid rgba(244, 250, 247, .09);
}

.sb-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(244, 250, 247, .09);
    border-radius: 7px;
    background: none;
    color: rgba(244, 250, 247, .5);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.sb-toggle:hover {
    color: var(--brand-400);
    background: rgba(244, 250, 247, .05);
}

.sb-toggle-label { transition: opacity .15s; }

.sidebar-collapsed .sidebar {
    width: var(--sb-mini);
    min-width: var(--sb-mini);
}

.sidebar-collapsed .sidebar-name,
.sidebar-collapsed .nav-group-label,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sb-toggle-label {
    width: 0;
    overflow: hidden;
    opacity: 0;
}

.sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sb-toggle { justify-content: center; }

.sidebar-collapsed .sidebar-link:hover::after {
    content: attr(data-label);
    position: fixed;
    left: calc(var(--sb-mini) + 8px);
    z-index: 9999;
    padding: 5px 9px;
    border: 1px solid rgba(244, 250, 247, .08);
    border-radius: 5px;
    background: var(--brand-950);
    color: #fff;
    box-shadow: 0 8px 24px rgba(7, 18, 14, .18);
    font-size: 11px;
    pointer-events: none;
    white-space: nowrap;
}

.main-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(7, 18, 14, .025);
    backdrop-filter: blur(12px);
}

.topbar-user {
    border-color: var(--border) !important;
    background: #fff !important;
    color: var(--text-primary) !important;
}

.topbar-user:hover,
.topbar-user[aria-expanded="true"] {
    background: var(--brand-50) !important;
    border-color: #afc3ba !important;
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 750;
}

.topbar-dropdown {
    min-width: 190px;
    padding: 6px;
    border-color: var(--border) !important;
    border-radius: var(--radius-md);
    box-shadow: 0 14px 36px rgba(7, 18, 14, .12), 0 2px 8px rgba(7, 18, 14, .06) !important;
}

.topbar-dropdown .dropdown-item {
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 13px;
}

.topbar-dropdown .dropdown-item:hover,
.topbar-dropdown .dropdown-item:focus {
    background: var(--brand-50);
    color: var(--brand-700);
}

.topbar-dropdown .dropdown-item.text-danger:hover,
.topbar-dropdown .dropdown-item.text-danger:focus {
    background: var(--danger-bg);
    color: var(--danger) !important;
}

.page-content {
    flex: 1;
    padding: 28px;
}

/* Componentes Bootstrap alineados a la marca */
.card,
.modal-content,
.dropdown-menu {
    border-color: var(--border);
    border-radius: var(--radius-lg);
}

.card.shadow-sm {
    box-shadow: var(--shadow-card) !important;
}

.card-header,
.table-light,
.bg-light {
    background-color: var(--bg-subtle) !important;
}

.card-header {
    border-bottom-color: var(--border-light);
}

.table {
    --bs-table-color: var(--text-secondary);
    --bs-table-border-color: var(--border-light);
    --bs-table-hover-bg: var(--brand-50);
    margin-bottom: 0;
}

.table thead th {
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    letter-spacing: .055em;
    white-space: nowrap;
}

.table tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--brand-700) !important; }
.bg-primary { background-color: var(--brand-600) !important; }
.border-primary { border-color: var(--brand-500) !important; }
.bg-primary-subtle { background-color: var(--brand-100) !important; }
.border-primary-subtle { border-color: #bce2d4 !important; }

code.text-primary,
code.slug-code {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}

.form-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
}

.form-control,
.form-select {
    border-color: var(--border-input);
    color: var(--text-primary);
    border-radius: var(--radius);
}

.form-control:hover,
.form-select:hover {
    border-color: #afc3ba;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 .2rem rgba(29, 158, 117, .16);
}

.form-check-input:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}

.form-text {
    color: var(--text-muted);
}

.page-link {
    color: var(--brand-700);
    border-color: var(--border);
}

.page-link:hover {
    color: var(--brand-700);
    background: var(--brand-50);
    border-color: #bce2d4;
}

.active > .page-link,
.page-link.active {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
    box-shadow: 0 4px 18px rgba(7, 18, 14, .04);
}

/* Base Bootstrap primaria: verde Asygna */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-focus-shadow-rgb: 29, 158, 117;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-700);
    --bs-btn-border-color: rgba(18, 107, 80, .42);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-focus-shadow-rgb: 29, 158, 117;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
}

/* Botones por intencion */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .14s;
}

.action-btn:hover { transform: translateY(-1px); }
.action-btn:active { transform: translateY(0); }

.action-btn:focus-visible {
    outline: 3px solid rgba(43, 200, 147, .24);
    outline-offset: 2px;
}

.action-btn:disabled,
.action-btn.disabled {
    opacity: .52;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.action-btn--sm {
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 11px;
}

.action-btn--full { width: 100%; }

.action-btn--create {
    color: #fff;
    background: var(--action-create);
    border-color: var(--action-create);
    box-shadow: 0 5px 14px rgba(22, 135, 95, .18);
}

.action-btn--create:hover {
    color: #fff;
    background: var(--action-create-dark);
    border-color: var(--action-create-dark);
    box-shadow: 0 8px 18px rgba(18, 107, 80, .22);
}

.action-btn--save {
    color: #f4faf7;
    background: var(--action-save);
    border-color: var(--action-save);
    box-shadow: 0 5px 14px rgba(7, 18, 14, .18);
}

.action-btn--save:hover {
    color: #fff;
    background: var(--action-save-hover);
    border-color: var(--action-save-hover);
    box-shadow: 0 8px 18px rgba(7, 18, 14, .22);
}

.action-btn--edit {
    color: var(--action-edit);
    background: var(--action-edit-bg);
    border-color: var(--action-edit-border);
}

.action-btn--edit:hover {
    color: #fff;
    background: var(--action-edit);
    border-color: var(--action-edit);
    box-shadow: 0 7px 16px rgba(91, 75, 183, .18);
}

.action-btn--approve {
    color: #fff;
    background: var(--action-approve);
    border-color: var(--action-approve);
    box-shadow: 0 5px 14px rgba(21, 128, 61, .16);
}

.action-btn--approve:hover {
    color: #fff;
    background: var(--action-approve-dark);
    border-color: var(--action-approve-dark);
}

.action-btn--danger {
    color: var(--action-danger);
    background: var(--action-danger-bg);
    border-color: var(--action-danger-border);
}

.action-btn--danger:hover {
    color: #fff;
    background: var(--action-danger);
    border-color: var(--action-danger);
    box-shadow: 0 7px 16px rgba(180, 35, 24, .18);
}

.action-btn--secondary {
    color: var(--text-secondary);
    background: #fff;
    border-color: var(--border-input);
    box-shadow: 0 1px 2px rgba(7, 18, 14, .035);
}

.action-btn--secondary:hover {
    color: var(--text-primary);
    background: var(--brand-50);
    border-color: #afc3ba;
}

.action-btn--navigation {
    color: var(--brand-700);
    background: var(--brand-50);
    border-color: #bce2d4;
}

.action-btn--navigation:hover {
    color: #fff;
    background: var(--brand-700);
    border-color: var(--brand-700);
}

/* Patrones de pagina */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.page-title {
    color: var(--text-primary);
}

.form-shell { width: 100%; }
.form-shell--sm { max-width: 560px; }
.form-shell--md { max-width: 680px; }
.form-shell--lg { max-width: 860px; }

.form-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    padding-bottom: 8px;
}

.choice-card {
    cursor: pointer;
    border-color: var(--border-input) !important;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.choice-card:hover {
    background: var(--brand-50);
    border-color: #afc3ba !important;
}

.choice-card.is-selected,
.choice-card:has(.form-check-input:checked) {
    background: var(--brand-50) !important;
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px rgba(29, 158, 117, .1);
}

.status-toggle {
    cursor: pointer;
}

.metric-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--brand-100);
}

.metric-icon--success { background: var(--success-bg); }
.metric-icon--neutral { background: #eef3f1; }

.admin-avatar {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 750;
}

.issue-message {
    max-width: 320px;
    white-space: normal;
}

/* Tarjetas móviles — alternativa a una tabla ancha bajo el breakpoint md.
   Reutilizable en cualquier listado (Tenants, Planes, etc.): una .mobile-card
   por fila, con bloques etiqueta+valor y acciones de ancho completo al final. */
.mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
}

.mc-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--text-primary);
}

.mc-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.mc-block {
    margin-top: 10px;
}

.mc-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.mc-rows {
    border-top: 1px solid var(--border-light);
    margin-top: 12px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.mc-row .mc-label {
    margin-bottom: 0;
    flex-shrink: 0;
}

.mc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mc-actions > form,
.mc-actions > a,
.mc-actions > button {
    flex: 1 1 0;
    min-width: 100px;
}

.mc-actions .action-btn {
    width: 100%;
}

/* Login */
.login-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(43, 200, 147, .12), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(29, 158, 117, .09), transparent 32%),
        var(--bg-page);
}

.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image: linear-gradient(rgba(18, 107, 80, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 107, 80, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
}

.login-brand {
    justify-content: center;
}

.login-brand .asygna-wordmark {
    color: var(--brand-950);
    font-size: 27px;
}

.login-brand-meta {
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-card {
    overflow: hidden;
    border: 1px solid var(--border) !important;
    box-shadow: 0 22px 60px rgba(7, 18, 14, .11), 0 3px 12px rgba(7, 18, 14, .05) !important;
}

.login-card::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600), var(--brand-800));
}

.login-footer {
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .sidebar {
        width: var(--sb-mini) !important;
        min-width: var(--sb-mini) !important;
    }

    .sidebar-name,
    .nav-group-label,
    .nav-label,
    .sb-toggle-label {
        width: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    .sidebar-link { justify-content: center !important; padding-inline: 0 !important; }
    .sb-toggle { justify-content: center !important; }
}

@media (max-width: 720px) {
    .page-content { padding: 20px 16px; }
    .app-topbar { padding: 0 16px; }

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

    .page-header .action-btn {
        width: 100%;
    }

    .table td,
    .table th {
        white-space: nowrap;
    }

    .form-actions .action-btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}