/* ============================================================ LIGAMANIA 26 — App Styles Basado en los mockups de diseño (docs/04_UX/Mockups/) ============================================================ */ /* ─── Variables ──────────────────────────────────────────── */ :root { --primary: #0F1C3F; --primary-mid: #1a2e5e; --primary-light: #243c7a; --accent: #C8963E; --accent-light: #e0b060; --admin: #6f42c1; --admin-bg: #f3effe; --bg: #F0F3F8; --surface: #FFFFFF; --text: #1a1a2e; --text-muted: #6c757d; --success: #1e7e34; --success-bg: #d4edda; --warning: #856404; --warning-bg: #fff3cd; --danger: #c82333; --danger-bg: #f8d7da; --info: #0c5460; --info-bg: #d1ecf1; --border: #dde3ef; --shadow-sm: 0 1px 4px rgba(15,28,63,.08); --shadow: 0 4px 16px rgba(15,28,63,.12); --shadow-lg: 0 8px 32px rgba(15,28,63,.18); --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --table-header-bg: var(--primary); --table-header-text: white; --jugador-eliminado-text: #dc2626; --jugador-preeliminado-text: #f59e0b; } /* ─── Dark mode overrides ───────────────────────────────── MudBlazor 9 adds data-mud-color-scheme="dark" to . Redefine custom vars so card-header, links, and text remain readable on the dark card backgrounds. */ [data-mud-color-scheme="dark"] { --text-muted: #a0aec0; --text: #e2e8f0; --border: rgba(255,255,255,0.12); --primary: #7b9cff; --bg: #1a1f2e; --surface: #252d3d; --admin-bg: #2d2040; --warning-bg: #3d2e00; --danger-bg: #3d0a0a; --success-bg: #0a2e14; --info-bg: #0a2030; --table-header-bg: var(--primary); --table-header-text: #1a1f2e; --jugador-eliminado-text: #f87171; --jugador-preeliminado-text: #fb923c; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; } /* ─── Layout ─────────────────────────────────────────────── */ .app-layout { display: flex; flex-direction: column; min-height: 100vh; } .app-body { display: flex; flex: 1; min-height: 0; } .app-main { flex: 1; overflow-y: auto; min-height: 0; } /* ─── Page Layout ─────────────────────────────────────────── */ .page-content { max-width: 1100px; margin: 0 auto; padding: 28px 20px; } .page-content-wide { max-width: 1400px; margin: 0 auto; padding: 24px 20px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .page-header-title { font-size: 22px; font-weight: 800; color: var(--primary); } .page-header-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; } .page-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } /* ─── Cards ──────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-header-title { display: flex; align-items: center; gap: 8px; } .card-body { padding: 20px; } /* ─── KPI Cards ───────────────────────────────────────────── */ .kpi-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .kpi-card.primary::before { background: var(--primary); } .kpi-card.success::before { background: var(--success); } .kpi-card.warning::before { background: #ffc107; } .kpi-card.danger::before { background: var(--danger); } .kpi-card.accent::before { background: var(--accent); } .kpi-card.admin::before { background: var(--admin); } .kpi-icon { font-size: 28px; margin-bottom: 6px; } .kpi-value { font-size: 32px; font-weight: 800; color: var(--primary); line-height: 1; } .kpi-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ─── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; text-decoration: none; white-space: nowrap; } .btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-light); } .btn-accent { background: var(--accent); color: var(--primary); } .btn-accent:hover { background: var(--accent-light); } .btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: white; } .btn-success { background: var(--success); color: white; } .btn-success:hover { background: #155724; } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: #a71d2a; } .btn-warning { background: #ffc107; color: #333; } .btn-warning:hover { background: #e0a800; } .btn-admin { background: var(--admin); color: white; } .btn-admin:hover { background: #5a32a3; } .btn-ghost { background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.3); } .btn-ghost:hover { background: rgba(255,255,255,0.1); color: white; } .btn-secondary { background: #6c757d; color: white; } .btn-secondary:hover { background: #5a6268; } .btn-outline-secondary { background: transparent; color: #6c757d; border: 1px solid #6c757d; } .btn-outline-secondary:hover { background: #6c757d; color: white; } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-lg { padding: 13px 28px; font-size: 16px; } .btn-full { width: 100%; } /* ─── Forms ──────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; } .form-label { font-size: 13px; font-weight: 600; color: var(--text); } .form-group label { font-size: 13px; font-weight: 600; color: var(--text); } .form-input, .form-select, .form-textarea, .form-control { padding: 10px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: white; transition: border 0.15s; outline: none; width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus, .form-control:focus { border-color: var(--primary); box-shadow: none; } .form-textarea { min-height: 80px; resize: vertical; } .form-hint { font-size: 12px; color: var(--text-muted); } .form-error { font-size: 12px; color: var(--danger); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .validation-message { font-size: 12px; color: var(--danger); margin-top: 2px; } /* ─── Badges / Pills ─────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-primary { background: var(--primary); color: white; } .badge-accent { background: var(--accent); color: var(--primary); font-weight: 800; } .badge-admin { background: var(--admin-bg); color: var(--admin); } .badge-muted { background: #e9ecef; color: var(--text-muted); } /* ─── Alerts ─────────────────────────────────────────────── */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .alert-warning { background: var(--warning-bg); color: var(--warning); border-left: 3px solid #ffc107; } .alert-success { background: var(--success-bg); color: var(--success); border-left: 3px solid #28a745; } .alert-danger { background: var(--danger-bg); color: var(--danger); border-left: 3px solid #dc3545; } .alert-info { background: var(--info-bg); color: var(--info); border-left: 3px solid #17a2b8; } .alert-admin { background: var(--admin-bg); color: var(--admin); border-left: 3px solid var(--admin); } .alert-error { background: var(--danger-bg); color: var(--danger); border-left: 3px solid #dc3545; } /* ─── Grid ───────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .col-span-2, .col-span-3 { grid-column: span 1; } } /* ─── Tables ─────────────────────────────────────────────── */ .table-wrap, .table-responsive { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } .table { width: 100%; border-collapse: collapse; font-size: 14px; } table:not(.mud-table-root) thead tr { background: var(--table-header-bg); color: var(--table-header-text); } table:not(.mud-table-root) thead th { padding: 11px 14px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--border); } tbody tr:last-child { border-bottom: none; } tbody td { padding: 11px 14px; vertical-align: middle; } tbody tr:hover { background: #f8f9ff; } [data-mud-color-scheme="dark"] tbody tr:hover { background: rgba(123, 156, 255, 0.1); } tbody tr.highlight, tbody tr.table-success { background: #e8f5e9; } .rank-number { font-weight: 800; font-size: 15px; color: var(--text-muted); } .rank-top { color: var(--accent); } .table-sm td, .table-sm th { padding: 7px 10px; font-size: 13px; } /* MudBlazor table headers (MudSimpleTable, MudDataGrid, etc.) Force high-specificity rules to override MudBlazor defaults. */ .mud-table thead { background: var(--table-header-bg) !important; } .mud-table thead th { background: var(--table-header-bg) !important; color: var(--table-header-text) !important; font-weight: 700 !important; border-color: var(--border) !important; } .mud-table-head { background: var(--table-header-bg) !important; } .mud-table-head .mud-table-cell { color: var(--table-header-text) !important; font-weight: 700 !important; background: var(--table-header-bg) !important; } /* ─── Utility ────────────────────────────────────────────── */ .text-muted { color: var(--text-muted) !important; } .text-center { text-align: center; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .ms-2 { margin-left: 8px; } .me-1 { margin-right: 4px; } .d-flex { display: flex; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; } .list-unstyled { list-style: none; padding: 0; margin: 0; } h1, h2, h3, h4, h5 { color: var(--primary); margin-bottom: 12px; line-height: 1.3; } h1 { font-size: 24px; font-weight: 800; } h2 { font-size: 20px; font-weight: 700; } h3 { font-size: 16px; font-weight: 700; } h4 { font-size: 14px; font-weight: 700; } p { margin-bottom: 12px; } a { color: var(--primary); } .link { color: var(--primary); font-weight: 600; text-decoration: none; } .link:hover { text-decoration: underline; } /* ─── Alineación: Campo de Fútbol (Pitch) ───────────────── */ .lineup-layout { display: grid; grid-template-columns: 1fr 310px; gap: 16px; align-items: start; } @media (max-width: 900px) { .lineup-layout { grid-template-columns: 1fr; } } .formation-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; } .pitch-outer { background: #1b5e20; border-radius: var(--radius); padding: 10px; box-shadow: inset 0 0 20px rgba(0,0,0,0.3); max-width: 460px; margin: 0 auto; } .pitch { position: relative; width: 100%; padding-bottom: 140%; background: repeating-linear-gradient( to bottom, #2e7d32 0px, #2e7d32 32px, #338a39 32px, #338a39 64px ); border: 2px solid rgba(255,255,255,0.5); border-radius: 4px; overflow: hidden; } .pitch-line { position: absolute; background: rgba(255,255,255,0.45); } .pitch-line.halfway { top: 50%; left: 0; right: 0; height: 1px; } .pitch-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22%; padding-bottom: 22%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); } .pitch-area-top, .pitch-area-bottom { position: absolute; left: 22%; right: 22%; height: 15%; border: 1px solid rgba(255,255,255,0.45); } .pitch-area-top { top: 0; border-top: none; } .pitch-area-bottom { bottom: 0; border-bottom: none; } .pitch-center-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5px; height: 5px; background: rgba(255,255,255,0.6); border-radius: 50%; } .player-spot { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer; z-index: 2; } .player-circle { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; font-size: 12px; font-weight: 700; transition: all 0.2s; position: relative; overflow: hidden; } .player-circle.filled { background: var(--primary); border: 2px solid var(--accent); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .player-circle.filled.duplicate { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,0.6), 0 0 0 5px rgba(239,68,68,0.42), 0 2px 8px rgba(0,0,0,0.45); } .player-circle.filled.no-disponible { background: rgba(0, 0, 0, 0.65) !important; border-style: solid; border-color: #dc2626; border-width: 3px; } .player-circle.filled.no-disponible::before { content: ''; position: absolute; width: 65%; height: 5px; background: #dc2626; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; z-index: 3; } .player-circle.filled.no-disponible::after { content: ''; position: absolute; width: 65%; height: 5px; background: #dc2626; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 2px; z-index: 3; } .player-circle.filled.preeliminado { background: rgba(180, 83, 9, 0.5) !important; border-style: solid; border-color: #f59e0b; border-width: 3px; } .player-circle.filled.preeliminado::before { content: '!'; position: absolute; width: auto; height: auto; background: none; top: 50%; left: 50%; transform: translate(-50%, -55%); font-size: 28px; font-weight: 900; color: #f59e0b; z-index: 3; line-height: 1; } .no-disponible-dot { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary, #0b1836); z-index: 4; } .player-circle.filled:hover { transform: scale(1.08); } .player-circle.active { border-color: #fff !important; box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(0,0,0,0.4) !important; transform: scale(1.12); } .player-circle.empty { background: rgba(0,0,0,0.25); border: 2px dashed rgba(255,255,255,0.5); color: rgba(255,255,255,0.6); } .player-circle.empty:hover, .player-circle.empty.active { border-color: var(--accent); background: rgba(200,150,62,0.3); } .player-flag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .flag-inline { display: inline-block; vertical-align: middle; border-radius: 2px; border: 1px solid rgba(0,0,0,0.12); object-fit: cover; flex-shrink: 0; } .escudo-inline { display: inline-block; vertical-align: middle; border-radius: 3px; object-fit: contain; flex-shrink: 0; } .player-escudo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; object-fit: contain; pointer-events: none; } .pos-badge { position: absolute; top: -2px; right: -2px; background: var(--accent); color: var(--primary); z-index: 3; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 3px; } .player-name-pitch { font-size: 11px; color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .player-selection-pitch { margin: 2px auto 0; display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; color: #fff; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(8,22,56,0.8); border: 1px solid rgba(255,255,255,0.25); } .player-selection-pitch.duplicate { background: rgba(127,29,29,0.88); border-color: rgba(248,113,113,0.95); } /* Counter bar */ .counter-bar { background: var(--primary); border-radius: var(--radius-sm); padding: 10px 14px; color: white; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .counter-item { display: flex; align-items: center; gap: 5px; font-size: 12px; } .counter-num { font-weight: 800; font-size: 14px; min-width: 14px; text-align: center; } .counter-num.ok { color: #4ade80; } .counter-num.warn { color: #fbbf24; } .counter-num.error { color: #f87171; } .counter-divider { height: 20px; width: 1px; background: rgba(255,255,255,0.2); } /* Save bar */ .save-bar { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; display: flex; align-items: center; gap: 16px; margin-top: 10px; } .save-progress { flex: 1; } .save-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; } .save-progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .save-progress-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; } /* Player selector panel */ .player-panel { display: flex; flex-direction: column; gap: 10px; } .players-scroll { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; } .players-scroll::-webkit-scrollbar { width: 4px; } .players-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .player-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); cursor: pointer; transition: all 0.15s; background: var(--surface); } .player-item:hover { border-color: var(--primary); background: var(--bg); } .player-item-name { font-weight: 600; font-size: 13px; flex: 1; color: var(--text); } .player-item-country { font-size: 12px; font-weight: 600; color: var(--text-muted); } .player-item-duplicate { border-color: var(--danger); background: var(--danger-bg); } .player-item-duplicate:hover { border-color: var(--danger); background: var(--danger-bg); } .player-item-disabled { cursor: not-allowed; opacity: 0.5; background: var(--bg); } .player-item-disabled:hover { border-color: var(--border); background: var(--bg); } .collapsible-header { cursor: pointer; -webkit-user-select: none; user-select: none; } .collapsible-chevron { font-size: 12px; color: var(--text-muted); transition: transform 0.15s; } .duplicate-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid #fca5a5; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; } .player-current-selection { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; font-weight: 700; color: #27324a; } .player-current-selection.duplicate { color: #7f1d1d; } .player-section-header { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; padding: 8px 4px 4px; border-top: 1px solid var(--border); margin-top: 4px; } .player-section-header:first-child { border-top: none; margin-top: 0; } /* Copy jornada bar */ .copy-jornada-bar { background: #f8f9ff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; } /* ─── Modal Overlay ──────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px; background: rgba(15, 28, 63, 0.55); overflow-y: auto; outline: none; } .modal-panel { position: relative; z-index: 201; width: 100%; max-width: 560px; max-height: calc(100vh - 96px); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .modal-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-panel-title { font-size: 16px; font-weight: 700; color: var(--primary); margin: 0; } .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: 18px; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .modal-close:hover { background: var(--bg); color: var(--text); } .modal-panel-body { padding: 20px; overflow-y: auto; flex: 1; } /* ─── Environment Banner ─────────────────────────────────── */ /* Fixed at the very top, above MudBlazor's fixed MudAppBar (mud-zindex-appbar). .mud-appbar-fixed-top, .mud-main-content and .mud-drawer-clipped-always all anchor to the viewport top / --mud-appbar-height, so when either top banner is shown (.has-top-banner) they get pushed down via --top-banners-height (D6 composition, below). */ :root { --environment-banner-height: 28px; --announcement-banner-height: 32px; } /* On narrow viewports the banner sits directly above the app bar's hamburger toggle with zero gap, right at the top edge where mobile browser chrome (address bar collapse, pull-to-refresh) makes taps unreliable. Every consumer below (.mud-appbar-fixed-top, #main-drawer, .mud-main-content) derives its offset from --top-banners-height, so bumping these here pushes the whole app bar — and the toggle inside it — further from that dead zone without touching the offset math itself. */ @media (max-width: 768px) { :root { --environment-banner-height: 44px; --announcement-banner-height: 44px; } } .environment-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--environment-banner-height); line-height: var(--environment-banner-height); z-index: 999999; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: white; } .environment-banner-qa { background: #f57c00; } .environment-banner-dev { background: #1976d2; } /* ─── Announcement Banner (active platform-wide Noticia) ──────────────────── Static single-line banner (no marquee, D7) with a "Ver más"
overlay for the full body (D5). Stacks BELOW .environment-banner when both are present (D6) — environment identity always outranks content, and both keep their own fixed slot instead of sharing/overlaying one. */ .announcement-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--announcement-banner-height); line-height: var(--announcement-banner-height); z-index: 999998; background: var(--success); color: white; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; } .has-environment-banner.has-announcement-banner .announcement-banner { top: var(--environment-banner-height); } .announcement-banner-title { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .announcement-banner-details { flex-shrink: 0; position: relative; line-height: normal; } .announcement-banner-summary { cursor: pointer; font-size: 12px; font-weight: 700; text-decoration: underline; list-style: none; } .announcement-banner-summary::-webkit-details-marker { display: none; } .announcement-banner-panel { position: absolute; top: calc(var(--announcement-banner-height) + 4px); right: 0; z-index: 999998; width: min(420px, 90vw); max-height: 60vh; overflow-y: auto; background: var(--surface, white); color: var(--text, #212121); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); padding: 16px; } .announcement-banner-panel-title { font-weight: 700; margin: 0 0 8px; } .announcement-banner-panel-body { margin: 0; white-space: pre-wrap; word-break: break-word; } /* ─── Top banner slot composition (D6) ─────────────────────────────────── MainLayout always wraps its content in .has-top-banner and independently adds .has-environment-banner / .has-announcement-banner per active banner, so both can coexist without a shared/overlaid slot. IMPORTANT: the "both banners" rule below (a 2-class compound selector, specificity 0,2,0) MUST stay strictly more specific than the two 1-class rules above it (each 0,1,0) — that is what makes it win and sum both heights when an element carries all three classes, regardless of source order. Do not flatten it to an equally-specific single-class selector (e.g. a combined "has-both-banners" class alone) or rely on declaring it last instead — that would make the composition depend on source order instead of specificity, which is fragile if these rules are ever reordered or a new banner-state rule is inserted between them. */ .has-top-banner { --top-banners-height: 0px; } .has-environment-banner { --top-banners-height: var(--environment-banner-height); } .has-announcement-banner { --top-banners-height: var(--announcement-banner-height); } .has-environment-banner.has-announcement-banner { --top-banners-height: calc(var(--environment-banner-height) + var(--announcement-banner-height)); } .has-top-banner .mud-appbar-fixed-top { top: var(--top-banners-height); } .has-top-banner .mud-main-content { padding-top: calc(var(--mud-appbar-height) + var(--top-banners-height)); } /* Targets #main-drawer by id (MainLayout.razor), not .mud-drawer-clipped-always: MudBlazor's own drawer rule is a 3-class compound selector (.mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always), so a 2-class override loses regardless of stylesheet order. An id selector outranks any number of classes. NOTE: do NOT try to fix this by redefining --mud-appbar-height itself on .has-top-banner (calc(var(--mud-appbar-height) + ...)) — that was tried against --environment-banner-height (same failure mode) and reverted. CSS custom properties aren't lexically scoped like Sass variables: var(--mud-appbar-height) inside that same property's own declaration resolves against the value being computed for THIS element, not the inherited one, which is a genuine cycle. Per spec a cyclic custom property becomes guaranteed-invalid and that invalidity is inherited by every descendant, which broke --mud-appbar-height (and therefore top/height/ padding-top) for the app bar, drawer AND main content all at once — worse than the original bug, confirmed via DevTools Computed (top resolved to 0px). */ .has-top-banner #main-drawer { top: calc(var(--mud-appbar-height) + var(--top-banners-height)); height: calc(100% - var(--mud-appbar-height) - var(--top-banners-height)); } /* ─── AppBar competition switcher ──────────────────────────── MudBlazor sets color:currentColor on div.mud-input-slot.mud-input-root via a high-specificity selector. We mirror that selector prefixed with .appbar-switcher to win the cascade and force white text in both themes. */ .appbar-switcher { color: white !important; } .mud-input > .appbar-switcher div.mud-input-slot.mud-input-root, .appbar-switcher .mud-input > div.mud-input-slot.mud-input-root, .appbar-switcher div.mud-input-slot.mud-input-root { color: white !important; } .appbar-switcher .mud-input-outlined-border { border-color: rgba(255,255,255,0.5) !important; } .appbar-switcher:hover .mud-input-outlined-border { border-color: white !important; } /* ─── Vista Pública (competiciones-publicas) ──────────────── Additive, scoped visual treatment for the anonymous /publico/* pages (design.md D7). Explicitly excludes team crests (Domain has no escudo/logo field) and position-change arrows (would need historical standings => a new query => a proposal deviation; not built here). */ .publico-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%); color: white; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; } .publico-hero-liga { font-size: 18px; font-weight: 800; } .publico-hero-temporada { font-size: 13px; color: var(--accent-light); margin-top: 2px; } /* Top-3 standings rows (Publico/Clasificacion.razor) */ tbody tr.publico-podio { background: rgba(200, 150, 62, 0.08); } .publico-podio-medal { margin-right: 4px; } /* Jornada estado chips (Publico/Calendario.razor) */ .publico-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .publico-chip-finalizada { background: var(--success-bg); color: var(--success); } .publico-chip-en-juego { background: var(--warning-bg); color: var(--warning); } .publico-chip-pendiente { background: #e9ecef; color: var(--text-muted); } .publico-empty-copy { font-style: italic; color: var(--text-muted); } /* ─── Historia ─────────────────────────────────────────── */ .historia-lista-temporadas { display: flex; flex-direction: column; gap: 8px; } .historia-card-temporada { transition: box-shadow .15s ease; } .historia-card-temporada:hover { box-shadow: var(--shadow); } .historia-link-temporada { text-decoration: none; color: inherit; display: block; } .historia-link-volver { text-decoration: none; color: var(--primary); } .historia-link-volver:hover { text-decoration: underline; } .historia-link-clasificacion { text-decoration: none; } .historia-nav-secundaria { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .appbar-switcher .mud-input-root { background: rgba(255,255,255,0.08); } /* ─── AppBar mobile overflow fix ────────────────────────────────────── On narrow viewports (≤ 599 px) three groups of elements push the dark-mode toggle and logout icon off-screen. .appbar-info-item — low-priority informational: season name text, active-competition chip, renewal-status banner. Reachable via the drawer context on mobile. .appbar-secondary-item — secondary controls: help icon, username/webmaster identity chips. .appbar-switcher — competition switcher (max-width:180px) takes too much horizontal space at narrow widths. All three are hidden so only the hamburger, logo, dark-mode toggle and logout icon remain — the minimum viable chrome that must be reachable on any device. The drawer provides "Cambiar tema" and "Cerrar sesión" fallbacks for both primary controls that also disappear from the app bar at this width. */ @media (max-width: 599px) { .appbar-info-item { display: none; } .appbar-secondary-item { display: none; } .appbar-switcher { display: none; } } /* Player name state coloring — kept in sync with .player-circle.filled.no-disponible / .preeliminado on the pitch view (same red/orange semantics, see CompeticionAlineacionTab). */ .jugador-nombre-eliminado { color: var(--jugador-eliminado-text); font-weight: 700; } .jugador-nombre-preeliminado { color: var(--jugador-preeliminado-text); font-weight: 700; } .jugador-nombre-cambio { color: var(--text); font-weight: 700; }