/* communication/shared/brand.css
 *
 * The definitive identity, «La luna en el ocular» (29 September 2026), as CSS: the colours,
 * the typeface and the few pieces every page of the communication section shares. The
 * source is the identity page in the management portal (gestion/abiertas/identidad-definitiva/);
 * the root CLAUDE.md has the summary. Same tokens as the public website
 * (website/static/assets/identidad.css), so a post and the site read as one brand.
 *
 * The whole communication section speaks Spanish - its pages, dialogs, buttons and messages -
 * while the rest of design.ventanaceleste.com is in English.
 *
 * GRADIENTS (the user's request, 29-09-2026): the logo is used in its GRADIENT version by
 * default (logo.js does it; flat only below 48 px and for stamp/embroidery/3D). The posts
 * editor and the video studio have a «Degradé» checkbox, ON by default, that switches on the
 * gradients - the logo's and the system gradients below for solid backgrounds; off, everything
 * goes flat. Gradients are always matt, never glossy; contrast is measured at the weakest point.
 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');

:root {
    /* the logo's own colours */
    --vc-tinta: #152238;
    --vc-celeste: #6CC4EE;
    --vc-blanco: #FFFFFF;
    --vc-papel: #FFF9F0;
    /* action, and one colour per line */
    --vc-naranja: #FF9F43;        /* the main action, Autónomo */
    --vc-amarillo: #FFD04A;       /* Escolar */
    --vc-verde: #4CC38A;          /* Hogar */
    --vc-azul: #3E63DD;           /* Mediado, backgrounds */
    --vc-tostado: #B5501C;        /* stamp ink only */
    /* system gradients: contrast measured at the weakest point */
    --vc-grad-naranja: linear-gradient(180deg, #FFB768, #FF8C2E);
    --vc-grad-amarillo: linear-gradient(180deg, #FFE17E, #FFC61F);
    --vc-grad-verde: linear-gradient(180deg, #79D8AA, #36B479);
    --vc-grad-azul: linear-gradient(180deg, #4A6DE3, #2E49C2);
    /* night */
    --vc-noche: #0E1830;

    /* the page, light; each has its dark pair below */
    --fondo: #FFF9F0;
    --superficie: #FFFFFF;
    --superficie2: #F2EADC;
    --linea: #EDE4D6;
    --campo: #EDE4D6;
    --texto: #152238;
    --texto2: #4A5568;
    --enlace: #152238;
    --rotulo: #4A5568;

    --vc-font: 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', sans-serif;
    color-scheme: light;
}

.dark, :root[data-theme="dark"] {
    --fondo: #0E1830;
    --superficie: #152238;
    --superficie2: #1B2B47;
    --linea: #2A3D60;
    --campo: #5D7BA8;
    --texto: #F4EFE3;
    --texto2: #A9B8CF;
    --enlace: #6CC4EE;
    --rotulo: #6CC4EE;
    color-scheme: dark;
}

/* Section labels: ExtraBold, spaced capitals */
.vc-rotulo {
    font-family: var(--vc-font);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rotulo);
}

/* The main action: orange with ink text, 7.8:1 in both modes. One per screen. */
.vc-btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--vc-naranja);
    border-radius: 999px;
    background: var(--vc-naranja);
    color: var(--vc-tinta);
    font: 800 15px/1 var(--vc-font);
    padding: 11px 20px;
    cursor: pointer;
}
.vc-btn-accion:hover { background: #FF8C2E; border-color: #FF8C2E; }
/* Secondary: celeste outline, no fill */
.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--vc-celeste);
    border-radius: 999px;
    background: transparent;
    color: var(--texto);
    font: 800 15px/1 var(--vc-font);
    padding: 11px 20px;
    cursor: pointer;
}
.vc-btn:focus-visible, .vc-btn-accion:focus-visible { outline: 3px solid var(--vc-celeste); outline-offset: 3px; }

/* ---- the Claude dialogs (shared/claude.js): «Pídeselo a Claude», «Exportar cambios para Claude» */
dialog.vc-dialog {
    border: 0; border-radius: 24px; padding: 26px 28px 22px;
    width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box;
    background: var(--superficie); color: var(--texto); box-shadow: 0 18px 50px rgba(14, 24, 48, 0.35);
    font-family: var(--vc-font); font-size: 15px; line-height: 1.5;
}
dialog.vc-dialog::backdrop { background: rgba(14, 24, 48, 0.55); }
.vc-dialog h2 { margin: 4px 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.vc-dialog h3 { font-size: 15px; margin: 18px 0 8px; font-weight: 800; }
.vc-dialog .vc-rotulo { margin: 0; }
.vc-lede { color: var(--texto2); margin: 0 0 14px; font-size: 15px; }
.vc-field { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--texto2); margin: 8px 0 6px; }
.vc-ask-input {
    width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical;
    font: 500 16px/1.5 var(--vc-font); color: var(--texto); background: var(--fondo);
    border: 2px solid var(--vc-celeste); border-radius: 14px; padding: 12px 14px;
}
.vc-ask-input:focus { outline: 3px solid var(--vc-celeste); outline-offset: 2px; }
.vc-sub, .vc-hint { font-size: 13px; color: var(--texto2); margin: 12px 0 6px; }
.vc-hint.vc-kept { margin: 0 0 8px; }
.vc-kept .vc-link { font-size: 13px; }
.vc-chipsets { display: flex; flex-direction: column; gap: 10px; }
.vc-chipset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vc-chipset legend, .vc-chipset-l { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--texto2); padding: 0; margin-bottom: 6px; }
/* a long set of choices (the series of the posts): a list to type into, shared/ui/combobox.js */
.vc-chipset-find .vc-cb { max-width: 460px; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip {
    font: 800 13px/1 var(--vc-font); color: var(--texto); background: transparent; cursor: pointer;
    border: 2px solid var(--campo); border-radius: 999px; padding: 7px 12px;
}
.vc-chip:hover { border-color: var(--vc-celeste); }
.vc-chip[aria-checked="true"] { background: var(--vc-tinta); border-color: var(--vc-tinta); color: var(--vc-papel); }
.dark .vc-chip[aria-checked="true"], :root[data-theme="dark"] .vc-chip[aria-checked="true"] { background: var(--vc-papel); border-color: var(--vc-papel); color: var(--vc-tinta); }
.vc-instr-box { margin-top: 14px; }
.vc-instr-box summary { cursor: pointer; font-weight: 800; font-size: 13px; }
pre.vc-instr {
    white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; max-height: 280px; overflow: auto;
    font: 12.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    background: var(--superficie2); color: var(--texto); border-radius: 12px; padding: 12px 14px;
}
.vc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.vc-grow { flex: 1; }
.vc-link { background: none; border: 0; padding: 0; font: 800 14px var(--vc-font); color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vc-fallback { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--texto2); }
.vc-ask-status { min-height: 1.4em; font-weight: 800; font-size: 14px; margin: 10px 0 0; }
.vc-note { font-size: 13px; color: var(--texto2); margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--superficie2); }
.vc-summary { margin: 0; padding-left: 20px; font-size: 14px; max-height: 220px; overflow: auto; }
.vc-summary li { margin: 3px 0; }
.vc-summary .vc-more { list-style: none; color: var(--texto2); }
.vc-warn { background: rgba(255, 159, 67, 0.18); padding: 10px 12px; border-radius: 12px; font-size: 14px; margin: 12px 0 0; }
.vc-toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.vc-toast { background: var(--vc-tinta); color: var(--vc-papel); padding: 10px 18px; border-radius: 999px; font: 500 14px/1.4 var(--vc-font); box-shadow: 0 10px 30px rgba(21, 34, 56, 0.25); transition: opacity 0.4s; max-width: 80vw; }
.dark .vc-toast, :root[data-theme="dark"] .vc-toast { background: var(--vc-papel); color: var(--vc-tinta); }
.vc-toast.error { background: #E05A4E; color: #fff; border-radius: 14px; }
.vc-toast.warn { background: #FF9F43; color: #152238; }
.vc-toast.out { opacity: 0; }
@media (max-width: 600px) { dialog.vc-dialog { padding: 20px 16px 16px; } .vc-dialog h2 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .vc-toast { transition: none; } }

/* The logo and its name */
.vc-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--texto); }
.vc-logo svg { flex-shrink: 0; display: block; }
.vc-marca {
    display: inline-flex;
    flex-direction: column;
    font-family: var(--vc-font);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    white-space: nowrap;
}