/*
 * ICOS template v0 — base CSS portable, sin Bootstrap ni Tailwind.
 * Origen visual: Examen/wwwroot/app.css y arelo-template.css.
 * Activar con .icos-template y, para el acceso oscuro, .arelo-theme-dark.
 * Tokens y controles comunes aquí; composición y marcas en el CSS de cada app.
 */
.icos-template {
    --bg: #eef1f4;
    --surface: #fff;
    --surface-2: #f7f9fb;
    --ink: #17202a;
    --muted: #6f7a86;
    --line: #d9e0e7;
    --line-strong: #c4ced8;
    --brand: #176b67;
    --brand-strong: #0d504d;
    --brand-soft: #e8f3f1;
    --brand-soft-hover: #d9ebe7;
    --brand-line: #b4d2cd;
    --accent: #c98b2c;
    --danger: #b42318;
    --success: #16794c;
    --warning: #a15c07;
    font: 16px/1.5 Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}
.icos-template, .icos-template *, .icos-template *::before, .icos-template *::after {
    box-sizing: border-box;
}
.icos-template.arelo-theme-dark {
    --arelo-dark-bg: #202124;
    --arelo-dark-surface: #24262b;
    --arelo-dark-surface-raised: #2b2d33;
    --arelo-dark-field: #202124;
    --arelo-dark-field-disabled: #292b30;
    --arelo-dark-text: #f4f5f7;
    --arelo-dark-text-muted: rgba(244, 245, 247, .68);
    --arelo-dark-border: rgba(255, 255, 255, .16);
    --arelo-dark-accent: #f6c85f;
    --arelo-dark-focus: rgba(246, 200, 95, .16);
    color: var(--arelo-dark-text);
    background: var(--arelo-dark-bg);
    color-scheme: dark;
}
.icos-template :where(button, input, select, textarea) { font: inherit; }
.icos-template :where(h1, h2, h3, p) { margin: 0; }
.icos-template :where(a) { color: inherit; text-decoration: none; }
.icos-template :where(button, a, select, input, textarea):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}
.icos-template.arelo-theme-dark :where(button, a, select, input, textarea):focus-visible {
    outline-color: var(--arelo-dark-accent);
}
.icos-template .form-field { display: grid; gap: 8px; }
.icos-template .icos-form-panel { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.icos-template .icos-panel-title { margin: 0 0 16px; font-size: 1rem; font-weight: 750; }
.icos-template .icos-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.icos-template .form-field > label { font-size: .875em; font-weight: 650; }
.icos-template .field {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface);
}
.icos-template .field:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .14);
}
.icos-template .field.valid.modified { outline: none; }
.icos-template.arelo-theme-dark .field {
    border-color: var(--arelo-dark-border);
    color: var(--arelo-dark-text);
    background: var(--arelo-dark-field);
}
.icos-template.arelo-theme-dark .field::placeholder { color: var(--arelo-dark-text-muted); }
.icos-template.arelo-theme-dark .field:disabled {
    color: var(--arelo-dark-text-muted);
    background: var(--arelo-dark-field-disabled);
}
.icos-template.arelo-theme-dark .field:focus {
    border-color: var(--arelo-dark-accent);
    box-shadow: 0 0 0 3px var(--arelo-dark-focus);
}
.icos-template.arelo-theme-dark select.field option {
    color: var(--arelo-dark-text);
    background: var(--arelo-dark-field);
}
.icos-template .primary-button, .icos-template .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}
.icos-template .primary-button {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}
.icos-template .primary-button:hover:not(:disabled) {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}
.icos-template .secondary-button {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
}
.icos-template .secondary-button:hover:not(:disabled) { background: var(--surface-2); }
.icos-template .secondary-button.button-brand {
    color: var(--brand-strong);
    background: var(--brand-soft);
    border-color: var(--brand-line);
}
.icos-template .secondary-button.button-brand:hover:not(:disabled) {
    background: var(--brand-soft-hover);
    border-color: var(--brand);
}
.icos-template.arelo-theme-dark .secondary-button {
    color: var(--arelo-dark-text);
    background: transparent;
    border-color: var(--arelo-dark-border);
}
.icos-template.arelo-theme-dark .secondary-button:hover:not(:disabled) {
    background: var(--arelo-dark-surface-raised);
    border-color: var(--arelo-dark-accent);
}
.icos-template button:disabled { cursor: not-allowed; opacity: .5; }
.icos-template .full { width: 100%; }
.icos-template .validation-message { color: var(--danger); font-size: .8125em; }
.icos-template.arelo-theme-dark .validation-message { color: #ffb4ab; }
.icos-template .arelo-alert {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: .875em;
}
.icos-template .arelo-alert-error { color: var(--danger); background: #fff3f1; border-color: #efc2bc; }
.icos-template.arelo-theme-dark .arelo-alert-error {
    color: #ffb4ab;
    background: rgba(180, 35, 24, .12);
    border-color: rgba(255, 180, 171, .3);
}
.icos-template .icos-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: icos-spin .8s linear infinite;
}
.icos-template.arelo-theme-dark .icos-spinner {
    border-color: var(--arelo-dark-border);
    border-top-color: var(--arelo-dark-accent);
}
.icos-template .icos-skip-link {
    position: absolute;
    left: 16px;
    top: 12px;
    z-index: 10;
    padding: 10px 16px;
    border-radius: 6px;
    color: #202124;
    background: #f6c85f;
    font-weight: 650;
    transform: translateY(-180%);
}
.icos-template .icos-skip-link:focus { transform: translateY(0); }
@keyframes icos-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .icos-template *, .icos-template *::before, .icos-template *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Shared edit pages and small dialogs. */
.icos-edit-page { min-width: 0; }
.icos-edit-page .icos-form-panel > .icos-form-panel { padding: 0; border: 0; box-shadow: none; }
.icos-modal-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgba(16,31,43,.45); }
.icos-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1410; width: min(92vw,640px); max-height: 88dvh; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--line, #dbe4e9); border-radius: 18px; box-shadow: 0 24px 70px rgba(16,31,43,.2); }
.icos-modal.icos-modal-wide { width: min(96vw,1080px); }
.icos-modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line, #dbe4e9); }
.icos-modal-header h2 { margin:0; font-size:1.2rem; }
.icos-modal-body { padding:22px; }
.icos-modal-body .icos-form-panel { border:0; padding:0; box-shadow:none; }
.icos-modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:20px; }
@media (max-width: 600px) { .icos-modal-body, .icos-modal-header { padding:16px; } }