/* ==========================================================================
   App Base / Layout
   ========================================================================== */

:root {
    /* Colors — aligned with Editor de Portal visual language */
    --color-background: #ffffff;
    --color-text: #1e293b;
    --color-muted: #64748b;

    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;

    --color-control: #f1f5f9;
    --color-hover: #f8fafc;
    --color-active: #dbeafe;
    --color-row-alt: #f8fafc;
    --color-hr: #e2e8f0;

    --color-brand: #1d4ed8;
    --color-brand-soft: #dbeafe;
    --color-brand-muted: #bfdbfe;

    /* Dimensions */
    --radius-small: 8px;
    --radius: 10px;

    --control-padding-y: 10px;
    --control-padding-x: 14px;

    /* Typography */
    --font-family: 'Inter', sans-serif;
    --line-height: 1.5;

    /* Focus */
    --focus-width: 0px;
    --focus-offset: 0px;
    --focus-color: #1d4ed8;
}


/* ==========================================================================
   Reset / Base
   ========================================================================== */

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

html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    line-height: var(--line-height);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background-color: var(--color-background);
    color: var(--color-text);

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

/* Prevent text selection on UI controls.
   Normal text remains selectable. */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
[role="button"] {
    user-select: none;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}


img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}


button,
input,
select,
textarea,
dialog {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}


/* ==========================================================================
   Focus
   ========================================================================== */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
list-item:focus-visible,
card-box:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-brand-muted);
}


/* ==========================================================================
   Links
   ========================================================================== */

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


/* ==========================================================================
   Main Application Layout
   ========================================================================== */

body > header,
body > footer {
  width: 100%;
}

body > header,
body > footer,
body > main {
    display: flex;
    flex-direction: row;
    width: 100%;
}

body > main {
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 1.5rem;
}


/* Preserve the original equal-width layout. */

body > header > *,
body > footer > *{
    flex: 1 1 0;
    min-width: 0;
}


/* ==========================================================================
   Quickly Layouts
   ========================================================================== */

left-box,
center-box,
right-box,
justify-box,
top-box,
middle-box,
bottom-box,
top-left-box,
top-center-box,
top-right-box,
middle-left-box,
middle-center-box,
middle-right-box,
bottom-left-box,
bottom-center-box,
bottom-right-box,
justify-middle-box {
    display: flex;
}


/* Horizontal */

left-box {
    justify-content: flex-start;
    text-align: left;
}

center-box {
    justify-content: center;
    text-align: center;
}

right-box {
    justify-content: flex-end;
    text-align: right;
}

justify-box {
    justify-content: space-between;
    text-align: justify;
}


/* Vertical */

top-box {
    align-items: flex-start;
}

middle-box {
    align-items: center;
}

bottom-box {
    align-items: flex-end;
}


/* Top */

top-left-box {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

top-center-box {
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

top-right-box {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: right;
}


/* Middle */

middle-left-box {
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

middle-center-box {
    justify-content: center;
    align-items: center;
    text-align: center;
}

middle-right-box {
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}


/* Bottom */

bottom-left-box {
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
}

bottom-center-box {
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}

bottom-right-box {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}


/* Justify + vertical center */

justify-middle-box {
    justify-content: space-between;
    align-items: center;
    text-align: justify;
}


/* ==========================================================================
   Standard Tags
   ========================================================================== */

hr {
    box-sizing: content-box;
    height: 0.25em;
    margin: 12px 0;
    padding: 0;
    border: 0;
    background-color: var(--color-hr);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 24px 0 16px;
    padding-bottom: 9px;

    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 0.875em;
}

h6 {
    font-size: 0.85em;
}

h1,
h2 {
    border-bottom: 1px solid var(--color-border-light);
}


p {
    margin: 16px 0;
}


blockquote {
    margin: 24px 0;
    padding: 1em;

    border-left: 0.25em solid var(--color-border);

    color: var(--color-muted);
}


/* ==========================================================================
   Dialog
   ========================================================================== */

dialog {
    margin: auto;
    padding: 28px;

    border: 1px solid var(--color-border);

    background-color: var(--color-background);

    box-shadow:
        0 10px 16px rgba(0, 0, 0, 0.20),
        0 6px 20px rgba(0, 0, 0, 0.19);
}

dialog > * {
    margin-left: 0;
    margin-right: 0;
}

dialog > :first-child {
    margin-top: 0;
}

dialog > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Fieldset / Legend
   ========================================================================== */

fieldset,
legend {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

fieldset {
    padding: 18px;
}

legend {
    padding: 9px;
}


/* ==========================================================================
   Forms
   ========================================================================== */

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select,
textarea {
    width: 100%;

    padding: var(--control-padding-y) var(--control-padding-x);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    background-color: var(--color-background);
    color: var(--color-text);

    outline: none;
}


input[type="range"] {
    width: 100%;
}


textarea {
    min-height: 120px;

    padding: 18px;

    overflow-y: auto;

    resize: none;
}


/* Keep the original full-height behavior available when the parent
   establishes a definite height. */

textarea[style*="height"] {
    min-height: 0;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    padding: 9px 16px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background-color: var(--color-control);
    color: var(--color-text);

    font-weight: 500;

    cursor: pointer;
}


/* Disabled controls */

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
select:disabled,
input:disabled,
textarea:disabled {
    cursor: default;
    opacity: 0.6;
}


/* Hover */

button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
    background-color: var(--color-hover);
}


/* Active */

button:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
input[type="button"]:active:not(:disabled),
input[type="reset"]:active:not(:disabled) {
    background-color: var(--color-active);
}


/* ==========================================================================
   Checkbox
   ========================================================================== */

input[type="checkbox"] {
    width: 26px;
    height: 26px;

    margin: 6px;
    margin-left: 0;

    border: 2px solid var(--color-border);
    border-radius: var(--radius);

    cursor: pointer;

    display: inline-block;
    vertical-align: middle;

    appearance: none;
    -webkit-appearance: none;

    position: relative;
    background-color: var(--color-background);
}


input[type="checkbox"]:checked {
    background-color: var(--color-control);
}


input[type="checkbox"]:checked::after {
    content: "";

    position: absolute;

    left: 7px;
    top: 3px;

    width: 8px;
    height: 14px;

    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);

    transform: rotate(45deg);
}


/* ==========================================================================
   Radio
   ========================================================================== */

input[type="radio"] {
    width: 26px;
    height: 26px;

    margin: 6px;
    margin-left: 0;

    border: 2px solid var(--color-border);
    border-radius: 50%;

    cursor: pointer;

    display: inline-block;
    vertical-align: middle;

    appearance: none;
    -webkit-appearance: none;

    position: relative;

    background-color: var(--color-background);
}


input[type="radio"]:checked::after {
    content: "";

    position: absolute;

    top: 5px;
    left: 5px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background-color: var(--color-text);
}


/* ==========================================================================
   Custom Controls
   ========================================================================== */

card-book {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    padding: 0;
}


card-box {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;

    min-width: 0;

    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background-color: var(--color-background);

    cursor: pointer;
}


card-box > :first-child {
    flex: 1 1 auto;
    min-height: 0;
}


card-box > * {
    padding: 9px;
}


card-box > card-label {
    display: flex;

    min-height: 56px;
    padding: 9px;

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

    background-color: var(--color-control);
}


card-box:hover {
    background-color: var(--color-hover);
}


card-box:active,
card-box.selected {
    background-color: var(--color-active);
}


/* ==========================================================================
   List
   ========================================================================== */

list-box {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: fit-content;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius);

}


list-item {
    display: flex;
    align-items: center;

    min-width: 0;

    padding: 8px;

    border-bottom: 1px solid var(--color-border);

    cursor: pointer;
}


list-item:last-child {
    border-bottom: none;
}


list-item > * {
    padding: 4px;
}


list-item:hover {
    background-color: var(--color-hover);
}


list-item:focus {
    background-color: var(--color-active);
}


list-item:active,
list-item.selected {
    background-color: var(--color-active);
}


/* ==========================================================================
   Scroll Containers
   ========================================================================== */

vertical-scroll,
horizontal-scroll {
    display: flex;
    flex: 1 1 0;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

vertical-scroll {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

horizontal-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
}


/* ==========================================================================
   Tables
   ========================================================================== */

table {
    border-collapse: collapse;
    border-spacing: 0;

    margin: 16px 0;

    font-size: 1em;
}


caption {
    caption-side: top;

    padding: 8px;

    text-align: left;
    font-weight: 600;

    color: var(--color-text);
}


th,
td {
    padding: 12px;

    border: 1px solid var(--color-border);

    text-align: left;
    vertical-align: middle;
}


th {
    font-weight: 600;
    background-color: var(--color-hover);
}


thead {
    background-color: var(--color-hover);
}


tr:nth-child(even) {
    background-color: var(--color-row-alt);
}


/* Tables explicitly marked for horizontal scrolling */

table[scroll] {
    display: block;

    max-width: 100%;

    overflow-x: auto;

    white-space: nowrap;
}


/* ==========================================================================
   Selection / States
   ========================================================================== */

.selected {
    background-color: var(--color-active);
}

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



/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}