/* =========================================================
   THEME TOKENS (Brand + Surfaces)
   ========================================================= */

:root, [data-bs-theme="light"] {
    /* Brand */
    --bs-primary:   #61C1EB;
    --bs-secondary: #C080BD;
    --bs-info:      #89A7D9;
    --bs-success:   #74b181;
    --bs-warning:   #eccf72;
    --bs-danger:    #e46b76;
    --bs-accent:    #d893fd;
    --bs-light:     #F7F9FF;

    --bs-primary-rgb:   97,193,235;
    --bs-secondary-rgb: 192,128,189;
    --bs-success-rgb:   116,177,129;
    --bs-warning-rgb:    236,207,114;
    --bs-danger-rgb:     228,107,118;
    --bs-info-rgb:      137,167,217;
    --bs-black-rgb:     22, 22, 22;

    /* Light base */
    --bs-body-bg: #F7F9FF;
    --bs-body-color: #0B1020;
    --bs-border-color: rgb(11,16,32);
    --bs-border-opacity: .14;

    /* Radius */
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: .75rem;
    --bs-border-radius-lg: 1.25rem;

    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-secondary);

    /* Focus */
    --bs-focus-ring-color: rgba(97,193,235,.35);

    /* Custom tokens */
    --tika-surface: rgba(11,16,32,.04);
    --tika-surface-2: rgba(11,16,32,.06);
    --tika-glass: rgba(255,255,255,.55);

    --tika-brand-grad: linear-gradient(90deg,
    rgba(var(--bs-primary-rgb), 1),
    rgba(var(--bs-secondary-rgb), 1)
    );
    --tika-brand-grad-soft: linear-gradient(90deg,
    rgba(var(--bs-primary-rgb), .35),
    rgba(var(--bs-secondary-rgb), .25)
    );

    --tika-border-w: 1px;
    --tika-border-radius-soft: .6rem;

    --tika-gradient-primary: linear-gradient(
            135deg,
            rgba(97,193,235,.85),
            rgba(137,167,217,.75)
    );

    --tika-gradient-secondary: linear-gradient(
            135deg,
            rgba(192,128,189,.85),
            rgba(216,147,253,.75)
    );

    --tika-gradient-success: linear-gradient(
            135deg,
            rgba(51,89,44,.85),
            rgba(116,177,129,.65)
    );

    --tika-gradient-warning: linear-gradient(
            135deg,
            rgba(236,207,114,.9),
            rgba(255,221,145,.7)
    );

    --tika-gradient-danger: linear-gradient(
            135deg,
            rgba(228,107,118,.9),
            rgba(255,140,150,.7)
    );

    --tika-gradient-info: linear-gradient(
            135deg,
            rgba(137,167,217,.85),
            rgba(97,193,235,.75)
    );

    --tika-gradient-dark: linear-gradient(
            135deg,
            rgba(22,22,22,.95),
            rgba(11,16,32,.85)
    );

    --tika-glass-primary: linear-gradient(
            135deg,
            rgba(97,193,235,.22),
            rgba(137,167,217,.18)
    );

    --tika-glass-secondary: linear-gradient(
            135deg,
            rgba(192,128,189,.22),
            rgba(216,147,253,.18)
    );

    --tika-glass-success: linear-gradient(
            135deg,
            rgba(51,89,44,.25),
            rgba(116,177,129,.18)
    );

    --tika-glass-warning: linear-gradient(
            135deg,
            rgba(236,207,114,.25),
            rgba(255,221,145,.18)
    );

    --tika-glass-danger: linear-gradient(
            135deg,
            rgba(228,107,118,.25),
            rgba(255,140,150,.18)
    );

    --tika-glass-info: linear-gradient(
            135deg,
            rgba(137,167,217,.25),
            rgba(97,193,235,.18)
    );
}

/* =========================================================
   DARK THEME (Brand + Surfaces)
   ========================================================= */

[data-bs-theme="dark"] {
    /* Mantén los brand iguales */
    --bs-primary:   #61C1EB;
    --bs-secondary: #C080BD;
    --bs-info:      #89A7D9;
    --bs-success:   #74b181;
    --bs-warning:   #eccf72;
    --bs-danger:    #e46b76;
    --bs-accent:    #d893fd;
    --bs-black-rgb:     22, 22, 22;

    --bs-primary-rgb:   97,193,235;
    --bs-secondary-rgb: 192,128,189;
    --bs-info-rgb:      137,167,217;

    /* Dark base */
    --bs-body-bg: #070A12;
    --bs-body-color: #EAF0FF;
    --bs-border-color: rgba(255,255,255,.12);

    /* Links */
    --bs-link-color: rgba(var(--bs-primary-rgb), .95);
    --bs-link-hover-color: rgba(var(--bs-secondary-rgb), .95);

    /* Focus */
    --bs-focus-ring-color: rgba(97,193,235,.35);

    /* Custom tokens */
    --tika-surface: rgba(255,255,255,.03);
    --tika-surface-2: rgba(255,255,255,.05);
    --tika-glass: rgba(11,16,32,.68);

    --tika-brand-grad: linear-gradient(90deg,
    rgba(var(--bs-primary-rgb), 1),
    rgba(var(--bs-secondary-rgb), 1)
    );
    --tika-brand-grad-soft: linear-gradient(90deg,
    rgba(var(--bs-primary-rgb), .40),
    rgba(var(--bs-secondary-rgb), .26)
    );

    --tika-border-w: 1px;
    --tika-border-radius-soft: .6rem;
}

/* =========================================================
   Typography – Dynamic Form TIKA
   - Crimson Text: headings (h1–h3)
   - Nunito: body, h4+, UI
   ========================================================= */

/* Base text */
body,
.tika-body {
    font-family: "Nunito", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .1px;
}

/* Headings principales */
h1, h2, h3,
.display-1, .display-2, .display-3 {
    font-family: "Crimson Text", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: .3px;
}

/* Headings secundarios (más UI) */
h4, h5, h6 {
    font-family: "Nunito", system-ui, sans-serif;
    font-weight: 600;
}

/* Ajustes finos */
h1 { font-size: clamp(2.2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); }

p, li, span, label, input, select, textarea {
    font-family: "Nunito", system-ui, sans-serif;
}

/* Botones (primario, warning, con borde y los de icono en tablas) y avisos: en myrakosta.css,
   el sistema de diseño Myra Kosta UI. */

/* Acciones de tabla: nunca saltan de línea (la tabla ya scrollea horizontal si hace falta);
   su forma y color están en myrakosta.css. */
.tika-table td.text-end > .d-flex{ flex-wrap: nowrap !important; }
.tika-table td.text-end .btn .material-symbols-rounded{ font-size: 1.05rem; line-height: 1; }

/* Tags / badges: pill sólido, tipografía y radios afinados */
.badge{
    font-weight: 600;
    letter-spacing: .02em;
    padding: .42em .66em;
    border-radius: .5rem;
}

/* Contenido Markdown renderizado en el detalle de bandeja */
.tika-md > :first-child{ margin-top: 0; }
.tika-md > :last-child{ margin-bottom: 0; }
.tika-md h1, .tika-md h2, .tika-md h3,
.tika-md h4, .tika-md h5, .tika-md h6{ margin: .8rem 0 .4rem; font-weight: 700; line-height: 1.25; }
.tika-md h1{ font-size: 1.35rem; }
.tika-md h2{ font-size: 1.2rem; }
.tika-md h3{ font-size: 1.05rem; }
.tika-md p{ margin: 0 0 .6rem; }
.tika-md ul, .tika-md ol{ margin: 0 0 .6rem 1.25rem; }
.tika-md li{ margin: .15rem 0; }
.tika-md blockquote{
    margin: 0 0 .6rem;
    padding: .25rem .75rem;
    border-left: 3px solid rgba(var(--bs-primary-rgb), .5);
    color: rgba(234,240,255,.75);
}
.tika-md code{
    background: rgba(255,255,255,.08);
    padding: .1rem .35rem;
    border-radius: .35rem;
    font-size: .9em;
}
.tika-md pre{
    background: rgba(255,255,255,.06);
    padding: .6rem .8rem;
    border-radius: .5rem;
    overflow: auto;
}
.tika-md pre code{ background: none; padding: 0; }
.tika-md a{ color: rgba(var(--bs-primary-rgb), .95); }
.tika-md hr{ border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: .8rem 0; }



/* =========================================================
   INPUTS – TIKA style (Bootstrap friendly)
   ========================================================= */

/* Base inputs */
.form-control,
.form-select,
.form-control-plaintext {
    background: rgba(255,255,255,.03);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-weight: 500;
    letter-spacing: .15px;

    /* transición material */
    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            background-color .2s ease;
}

/* Placeholder */
.form-control::placeholder,
.form-select::placeholder {
    color: rgba(234,240,255,.55);
    font-weight: 400;
}

/* Hover (muy sutil) */
.form-control:hover,
.form-select:hover {
    background: rgba(255,255,255,.045);
}

/* Focus (brand aura, NO azul bootstrap) */
.form-control:focus,
.form-select:focus {
    background: rgba(255,255,255,.05);
    color: var(--bs-body-color);
    border-color: rgba(var(--bs-secondary-rgb), .55);

    /* glow TIKA */
    box-shadow:
            0 0 0 .25rem rgba(var(--bs-secondary-rgb), .22);
}

/* Input sizes feel */
.form-control-lg {
    padding: .75rem 1rem;
    font-size: 1rem;
}

.form-control-sm {
    padding: .35rem .6rem;
    font-size: .875rem;
}

/* Disabled & readonly */
.form-control:disabled,
.form-select:disabled {
    background: rgba(255,255,255,.02);
    color: rgba(234,240,255,.45);
    border-color: rgba(255,255,255,.08);
}

.form-control[readonly] {
    background: rgba(255,255,255,.025);
    color: rgba(234,240,255,.65);
}

/* =========================================================
   INPUT GROUP – iconos / botones integrados
   ========================================================= */

.input-group-text {
    background: rgba(255,255,255,.035);
    color: rgba(234,240,255,.75);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-weight: 500;
}

/* Unir input + icono sin doble borde */
.input-group .form-control,
.input-group .form-select {
    border-left: 0;
}

.input-group .input-group-text:first-child {
    border-right: 0;
}

.input-group:focus-within .input-group-text {
    border-color: rgba(var(--bs-secondary-rgb), .55);
    color: rgba(var(--bs-secondary-rgb), .95);
}

/* Botones dentro del input-group (ej: mostrar password) */
.input-group .btn {
    border-color: var(--bs-border-color);
    color: rgba(234,240,255,.75);
}

.input-group .btn:hover {
    background: rgba(255,255,255,.06);
    color: var(--bs-body-color);
}

.input-group:focus-within .btn {
    border-color: rgba(var(--bs-secondary-rgb), .55);
}

/* =========================================================
   VALIDATION – success / error / warning
   ========================================================= */

/* Error */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: rgba(var(--bs-danger-rgb, 228,107,118), .65);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(228,107,118,.20);
}

/* Success */
.form-control.is-valid,
.form-select.is-valid {
    border-color: rgba(116,177,129,.65);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 .25rem rgba(116,177,129,.20);
}

/* =========================================================
   CHECKBOX & RADIO – material-ish
   ========================================================= */

.form-check-input {
    background-color: rgba(255,255,255,.06);
    border-color: var(--bs-border-color);
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}

/* Labels */
.form-label {
    font-weight: 600;
    letter-spacing: .15px;
    color: rgba(234,240,255,.85);
}

.border-primary {
    --bs-border-opacity: .4;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}
.border-secondary {
    --bs-border-opacity: .4;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}
.border-success {
    --bs-border-opacity: .4;
    border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}
.border-info {
    --bs-border-opacity: .4;
    border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}
.border-warning {
    --bs-border-opacity: .4;
    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
}
.border-danger {
    --bs-border-opacity: .4;
    border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}
.border-light {
    border-color: rgba(255,255,255,.08) !important;
}
.border-dark {
    border-color: rgba(0,0,0,.45) !important;
}

.border-opacity-10{ --bs-border-opacity: .10 }
.border-opacity-25{ --bs-border-opacity: .25 }
.border-opacity-50{ --bs-border-opacity: .50 }
.border-opacity-75{ --bs-border-opacity: .75 }
.border-opacity-100{ --bs-border-opacity: 1 }

.border-radius-none{ border-radius: 0 !important }

.bg-gradient-primary { background: var(--tika-gradient-primary) !important; }
.bg-gradient-secondary { background: var(--tika-gradient-secondary) !important; }
.bg-gradient-success { background: var(--tika-gradient-success) !important; }
.bg-gradient-warning { background: var(--tika-gradient-warning) !important; }
.bg-gradient-danger { background: var(--tika-gradient-danger) !important; }
.bg-gradient-info { background: var(--tika-gradient-info) !important; }
.bg-gradient-dark { background: var(--tika-gradient-dark) !important; }

.bg-glass-primary { background: var(--tika-glass-primary) !important; }
.bg-glass-secondary { background: var(--tika-glass-secondary) !important; }
.bg-glass-success { background: var(--tika-glass-success) !important; }
.bg-glass-warning { background: var(--tika-glass-warning) !important; }
.bg-glass-danger { background: var(--tika-glass-danger) !important; }
.bg-glass-info { background: var(--tika-glass-info) !important; }


/* Card: usa tus tokens, no bg-black */
.tika-table-card{
    background: var(--tika-glass) !important;
    border-color: rgba(255,255,255,.12) !important; /* consistente con dark */
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 38px rgba(0,0,0,.25);
}

/* Wrapper: scroll horizontal en mobile */
.tika-table-wrap{
    overflow: auto;
    border-radius: unset;
}

/* Tabla: evita table-dark para no sobreescribir tu theme */
.tika-table{
    --tika-divider: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity));
    --tika-row: transparent;
    --tika-row-alt: rgba(255,255,255,.04);
    --tika-hover: rgba(var(--bs-primary-rgb), .10);
    margin: 0;
}

.tika-table td,
.tika-table th{
    border-color: var(--tika-divider) !important;
    vertical-align: middle;
}

/* Header sticky */
.tika-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;

    background: transparent;
    backdrop-filter: blur(0px);

    border-bottom: 1px solid var(--tika-divider) !important;
    color: rgba(234,240,255,.78);

    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 800;

    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* Zebra + hover aura */
.tika-table tbody tr{ background: var(--tika-row); }
.tika-table tbody tr:nth-child(even){ background: var(--tika-row-alt); }
.tika-table tbody tr:hover{ background: rgba(var(--bs-secondary-rgb), .10); }

/* Guard como pill (sin cambiar el layout) */
/* BASE */
.tika-guard-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.tika-guard-pill::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

/* DEFAULT */
.tika-guard-pill--default {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(234,240,255,.88);
}
.tika-guard-pill--default::before {
    background: linear-gradient(135deg, #a78bfa, #818cf8);
}

/* INFO */
.tika-guard-pill--info {
    border: 1px solid rgba(56,189,248,.25);
    background: rgba(14,165,233,.12);
    color: rgba(186,230,253,.9);
}
.tika-guard-pill--info::before {
    background: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56,189,248,.15);
}

/* SUCCESS */
.tika-guard-pill--success {
    border: 1px solid rgba(52,211,153,.25);
    background: rgba(16,185,129,.12);
    color: rgba(167,243,208,.9);
}
.tika-guard-pill--success::before {
    background: #34d399;
    box-shadow: 0 0 0 2px rgba(52,211,153,.15);
}

/* WARNING */
.tika-guard-pill--warning {
    border: 1px solid rgba(251,191,36,.25);
    background: rgba(245,158,11,.12);
    color: rgba(253,230,138,.9);
}
.tika-guard-pill--warning::before {
    background: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,.15);
}

/* DANGER */
.tika-guard-pill--danger {
    border: 1px solid rgba(248,113,113,.25);
    background: rgba(239,68,68,.12);
    color: rgba(254,202,202,.9);
}
.tika-guard-pill--danger::before {
    background: #f87171;
    box-shadow: 0 0 0 2px rgba(248,113,113,.15);
}

/* NEUTRAL */
.tika-guard-pill--neutral {
    border: 1px solid rgba(148,163,184,.2);
    background: rgba(100,116,139,.1);
    color: rgba(203,213,225,.85);
}
.tika-guard-pill--neutral::before {
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148,163,184,.12);
}

.table > :not(caption) > * > * {
    background: transparent;
}