html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--surface), 0 0 0 0.25rem var(--focus);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.admin-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-width: 220px;
}

.admin-image-list-modal {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  display: grid;
  gap: 1rem;
}

.admin-image-list-modal img {
  width: 100%;
  height: 120px;
}

.admin-image-list img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: .25rem;
}

.admin-image-list form {
  position: absolute;
  top: -7px;
  right: -7px;
}

.admin-image-list .btn {
  border-radius: 50%;
  line-height: 1;
  padding: .08rem .35rem;
}

.raffle-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
}

.raffle-gallery-item {
  border: 0;
  background: none;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .5rem;
}

.raffle-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}

.raffle-gallery-item:hover img { transform: scale(1.04); }

.assigned-numbers-grid {
  max-width: 100%;
  max-height: 420px;
  overflow: auto;
}

.assigned-numbers-grid table {
  min-width: 460px;
}

.assigned-numbers-grid thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.product-logo { width: 32px; height: 32px; object-fit: contain; }

.company-masthead { display: flex; align-items: center; justify-content: center; gap: 1.25rem; text-align: center; }

.company-masthead img { max-width: 110px; max-height: 90px; object-fit: contain; }

.branding-preview { width: 72px; height: 72px; object-fit: contain; border: 1px solid #dee2e6; border-radius: .375rem; padding: .25rem; }

.participant-grid { max-height: 480px; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.participant-grid table { min-width: 820px; margin-bottom: 0; }
.participant-grid thead { position: sticky; top: 0; z-index: 1; }

/* Identidad visual: móvil primero, limpia y cálida. */
:root { --ink: #18332d; --muted: #687a75; --surface: #ffffff; --canvas: #f5f7f3; --line: #e1e9e4; --brand: #246a59; --brand-dark: #174e41; --accent: #edf6ef; --warm: #f8eee6; --navbar: #ffffff; --placeholder: #b3c9bc; --status-open-background: #e3f3e8; --status-open-text: #16633f; --outline-border: #a8c9b8; --input-border: #d7e2db; --input-focus: #77a995; --winner-background: #e7f4eb; --winner-border: #c4e2cd; --winner-primary: #238355; --winner-date: #397258; --media-background: #edf1ed; --preview-background: #f1f4f1; --focus: #258cfb; }
html { font-size: 16px; }
body.app-body { margin-bottom: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-container { max-width: 1120px; }
.app-navbar { min-height: 70px; background: var(--navbar); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.navbar-brand { color: var(--ink) !important; font-weight: 750; letter-spacing: -.02em; }.brand-name { font-size: 1.1rem; }.navbar .nav-link { color: var(--muted); font-size: .92rem; font-weight: 650; }.navbar .nav-link:hover { color: var(--brand); }
.app-main { padding: 1.75rem 0 3.5rem; }.app-footer { color: var(--muted); font-size: .82rem; padding: 1.25rem 0 2rem; text-align: center; }
.company-masthead { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 0 2rem; text-align: center; }.company-masthead img { max-width: 76px; max-height: 76px; border-radius: 1.25rem; }.company-masthead h1 { margin: .15rem 0 .45rem; font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 750; letter-spacing: -.055em; }.masthead-copy { color: var(--muted); margin: 0; font-size: 1rem; }.eyebrow { margin: 0 0 .45rem; color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.card { border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(29, 58, 48, .05); }.raffle-card { overflow: hidden; background: var(--surface); transition: transform .2s ease, box-shadow .2s ease; }.raffle-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(29, 58, 48, .11); }.raffle-card-image, .raffle-card-placeholder { display: block; width: 100%; height: 168px; object-fit: cover; }.raffle-card-placeholder { display: grid; place-items: center; color: #b3c9bc; background: linear-gradient(135deg, #e8f0e9, #f8eee6); font-size: 2.5rem; }.raffle-card-body { padding: 1.3rem; }.status-badge { flex: 0 0 auto; border-radius: 99px; background: #edf0ef; color: var(--muted); padding: .36rem .6rem; font-size: .7rem; font-weight: 750; }.status-badge.is-open { background: #e3f3e8; color: #16633f; }.raffle-description { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 1rem 0 1.25rem; }.raffle-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; border-top: 1px solid var(--line); padding: .9rem 0; }.raffle-stats div { min-width: 0; }.raffle-stats strong, .raffle-stats span { display: block; }.raffle-stats strong { font-size: .9rem; }.raffle-stats span, .raffle-date { color: var(--muted); font-size: .72rem; }.raffle-date { margin: 0 0 1rem; }.empty-state { max-width: 450px; margin: 2rem auto; padding: 2.5rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; }.empty-state h2 { font-size: 1.2rem; }.empty-state p { color: var(--muted); margin: 0; }.empty-state-icon { color: var(--brand); font-size: 2rem; margin-bottom: .75rem; }
.btn { min-height: 44px; border-radius: .8rem; font-weight: 700; padding: .6rem 1rem; }.btn-primary { background: var(--brand); border-color: var(--brand); }.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }.btn-outline-primary { color: var(--brand); border-color: #a8c9b8; }.btn-outline-primary:hover { background: var(--accent); color: var(--brand-dark); border-color: var(--brand); }.form-control, .form-select { min-height: 46px; border-color: #d7e2db; border-radius: .75rem; }.form-control:focus, .form-select:focus { border-color: #77a995; box-shadow: 0 0 0 .22rem rgba(36,106,89,.12); }
.contact-choice.active, .contact-choice:active { color: #fff !important; background-color: var(--brand) !important; border-color: var(--brand) !important; }
.winner-number-row > * { background: #e7f4eb !important; border-bottom-color: #c4e2cd !important; }.winner-number-row td:first-child { box-shadow: inset 4px 0 0 #238355; }.winner-prize-label { display: inline-block; border-radius: 99px; padding: .26rem .52rem; background: #238355; color: #fff; font-size: .72rem; font-weight: 800; }.winner-date { margin-top: .25rem; color: #397258; font-size: .7rem; }.icon-action-button { display: inline-grid; width: 42px; min-width: 42px; min-height: 42px; padding: .45rem; place-items: center; }.icon-action-button svg { width: 19px; height: 19px; }.participant-grid .icon-action-button { width: 34px; min-width: 34px; min-height: 34px; padding: .3rem; border-radius: .6rem; }.participant-grid .icon-action-button svg { width: 17px; height: 17px; }
.raffle-card-carousel, .raffle-details-carousel { overflow: hidden; background: #edf1ed; }.raffle-card-carousel { border-radius: 1.2rem 1.2rem 0 0; }.raffle-card-carousel .carousel-item, .raffle-details-carousel .carousel-item { aspect-ratio: 16 / 10; }.raffle-card-image, .raffle-details-carousel img { width: 100%; height: 100%; object-fit: cover; object-position: center; }.raffle-details-carousel { border-radius: 1rem; max-width: 100%; }.raffle-details-carousel .carousel-item { aspect-ratio: 4 / 3; }.raffle-carousel-image-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; }.raffle-details-carousel img { object-fit: contain; background: #edf1ed; }.raffle-card-carousel .carousel-control-prev, .raffle-card-carousel .carousel-control-next, .raffle-details-carousel .carousel-control-prev, .raffle-details-carousel .carousel-control-next { width: 14%; opacity: .9; }.raffle-card-carousel .carousel-control-prev-icon, .raffle-card-carousel .carousel-control-next-icon, .raffle-details-carousel .carousel-control-prev-icon, .raffle-details-carousel .carousel-control-next-icon { width: 2rem; height: 2rem; border-radius: 99px; background-color: rgba(24,51,45,.72); background-size: 46%; }.raffle-carousel-indicators { margin-bottom: .35rem; }.raffle-carousel-indicators [data-bs-target] { width: 6px; height: 6px; border: 0; border-radius: 99px; }.preview-image { width: 100%; max-height: 72vh; object-fit: contain; background: #f1f4f1; }
@media (max-width: 575.98px) { .raffle-card-carousel .carousel-item { aspect-ratio: 4 / 3; }.raffle-details-carousel .carousel-item { aspect-ratio: 1 / 1; }.raffle-card-carousel .carousel-control-prev, .raffle-card-carousel .carousel-control-next, .raffle-details-carousel .carousel-control-prev, .raffle-details-carousel .carousel-control-next { width: 18%; } }
.back-link { display: inline-block; color: var(--brand); font-size: .9rem; font-weight: 700; margin-bottom: .65rem; text-decoration: none; }.raffle-detail-description { color: var(--muted); }.detail-progress { max-width: 540px; margin: 1.4rem 0 1.7rem; color: var(--muted); font-size: .86rem; }.detail-progress strong { float: right; color: var(--ink); }.detail-progress .progress { height: .5rem; margin-top: .5rem; border-radius: 99px; background: #e4ece6; }.detail-progress .progress-bar { background: var(--brand); border-radius: inherit; }.participation-card { position: sticky; top: 1rem; background: var(--surface); }.participation-card .card-body { padding: 1.4rem; }.assigned-numbers-grid { border-color: var(--line) !important; border-radius: 1rem !important; }.assigned-numbers-grid .table { font-size: .9rem; }.assigned-numbers-grid th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.admin-heading h1 { font-weight: 750; letter-spacing: -.04em; }.admin-tabs { gap: .5rem; border: 0; }.admin-tabs .nav-link { border: 0; border-radius: .75rem; color: var(--muted); font-weight: 700; }.admin-tabs .nav-link.active { color: var(--brand-dark); background: var(--accent); }.admin-login-card { margin-top: 3rem; }.modal-content { border: 0; border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(17,44,36,.18); }.modal-header, .modal-footer { border-color: var(--line); }.raffles-grid-container, .participant-grid { border-color: var(--line) !important; border-radius: 1rem !important; background: var(--surface); }.table { --bs-table-bg: transparent; }.table thead th { color: var(--muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }.table > :not(caption) > * > * { padding: .85rem .75rem; border-bottom-color: var(--line); }
@media (min-width: 768px) { .app-main { padding-top: 2.5rem; }.company-masthead { flex-direction: row; justify-content: center; text-align: left; padding: 1.4rem 0 3rem; }.company-masthead img { max-width: 92px; max-height: 92px; }.raffle-card-placeholder { height: 190px; }.raffle-card-body { padding: 1.45rem; }.participation-card .card-body { padding: 1.7rem; } }

/* Colores consumidos desde la sección Theme de appsettings.json. */
.raffle-card-placeholder { color: var(--placeholder); background: linear-gradient(135deg, var(--accent), var(--warm)); }
.status-badge { background: var(--accent); }.status-badge.is-open { background: var(--status-open-background); color: var(--status-open-text); }
.btn-outline-primary { border-color: var(--outline-border); }.form-control, .form-select { border-color: var(--input-border); }.form-control:focus, .form-select:focus { border-color: var(--input-focus); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 12%, transparent); }
.winner-number-row > * { background: var(--winner-background) !important; border-bottom-color: var(--winner-border) !important; }.winner-number-row td:first-child { box-shadow: inset 4px 0 0 var(--winner-primary); }.winner-prize-label { background: var(--winner-primary); color: var(--surface); }.winner-date { color: var(--winner-date); }
.raffle-card-carousel, .raffle-details-carousel, .raffle-details-carousel img { background: var(--media-background); }.preview-image { background: var(--preview-background); }
.reservation-sending-modal { border-radius: 1.25rem; }.reservation-sending-spinner { width: 2.5rem; height: 2.5rem; color: var(--brand); border-width: .28rem; }
.draw-modal-content { overflow:hidden; border:1px solid var(--line); background:linear-gradient(155deg, var(--surface) 0%, var(--surface) 62%, var(--accent) 100%); }.draw-prize-progress { margin:0 0 1.5rem; color:var(--muted); font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.draw-prize-progress .progress { height:.5rem; margin-top:.5rem; background:var(--line); border-radius:99px; }.draw-prize-progress .progress-bar { background:var(--brand); border-radius:inherit; }.draw-highlight { display:flex; align-items:center; justify-content:center; gap:1rem; min-height:118px; margin-bottom:1.25rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface); text-align:left; }.draw-highlight-number { color:var(--brand); font-size:3.2rem; font-weight:800; letter-spacing:-.06em; line-height:1; }.draw-highlight span:last-child { color:var(--muted); font-size:.9rem; line-height:1.4; }.draw-copy { margin:0 0 1rem; text-align:center; color:var(--ink); }.draw-method-note { display:flex; gap:.75rem; align-items:flex-start; padding:1rem; border-radius:.85rem; background:color-mix(in srgb, var(--accent) 72%, var(--surface)); color:var(--muted); font-size:.78rem; line-height:1.45; }.draw-method-note > span { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border-radius:50%; background:var(--brand); color:var(--surface); font-size:1.25rem; }.draw-method-note p { margin:0; }.draw-method-note strong { color:var(--ink); }
.draw-submit-form { flex:1 1 auto; }