* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: #111;
  color: white;
  display: flex;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  background-color: #1a1a1a;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 22px;
  font-weight: bold;
}

.menu-icon {
  font-size: 26px;
  cursor: pointer;
}

.main-buttons {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.button {
  background-color: #ff3c00;
  border: none;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  color: white;
  transition: 0.2s;
}

.button:hover {
  background-color: #ff5c2b;
}
button {
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border-radius: 6px;
  border: none;
}

/* ====== PANTALLA INICIO ====== */

#mainMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
}

#mainMenu img {
  width: 220px;
  margin-bottom: 40px;
}

#mainMenu .mainBtn {
  width: 260px;
  margin-bottom: 15px;
}

#mainMenu .mainBtn:nth-child(5) {
  margin-top: 200px; /* baja CALIFÍCANOS fuerte */
}
/* ========= DOMICILIO ========= */

.domicilioScreen {
  display: none;
  flex-direction: column;
  padding: 20px;
  min-height: 100vh;
}

.domicilioTop {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 25px;
}

.domicilioTop h2 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #ff6a00;
}

.domicilioTop input,
.domicilioTop select {
  width: 100%;
  padding: 14px;
  margin-bottom: 15px;
  border-radius: 12px;
  border: none;
  background: #111;
  color: white;
  font-size: 14px;
}

.domicilioMiddle {
  flex: 1;
  margin-bottom: 20px;
}

.domicilioBottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


#orderOptions .orderBackBtn,
#tableOptions .orderBackBtn {
  margin-top: 40px;
}

.moneyInput {
  display: flex;
  align-items: center;
  background: #0f0f0f;
  border-radius: 12px;
  padding: 14px;
}

.moneyInput span {
  color: #aaa;
  margin-right: 6px;
  font-size: 16px;
}

.moneyInput input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  width: 100%;
  font-size: 16px;
}

/* Quitar flechas Chrome */
.moneyInput input::-webkit-outer-spin-button,
.moneyInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Quitar flechas Firefox */
.moneyInput input[type=number] {
  -moz-appearance: textfield;
}

.productRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1a1a;
  padding: 14px;
  border-radius: 12px;
  margin: 10px 0;
}

/* ===== CARRITO COLAPSABLE ===== */

#cartBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: #181818;
  border-top: 2px solid #ff6a00;
  box-shadow: 0 -8px 20px rgba(0,0,0,0.6);
  transition: transform 0.3s ease;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
}


/* ===== BARRA COMPACTA ===== */

.cartSummaryBar {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  background: #202020;
  width: 100%;
}

.cartSummaryBar div:first-child {
  flex: 1;
}


.cartArrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

/* ===== PANEL EXPANDIDO ===== */

.cartExpanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.cartOpen .cartExpanded {
  max-height: 45vh;
  pointer-events: auto;
}

.cartOpen .cartArrow {
  transform: rotate(180deg);
}

#cartItems {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 220px;
}

/* ===== ITEM ===== */

.cartItemRow {
  background: #222;
  padding: 14px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cartItemLeft {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cartItemName {
  font-weight: bold;
}

.cartItemPrice {
  font-size: 13px;
  color: #aaa;
}

.cartItemRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantityControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantityControls button {
  background: #ff6a00;
  color: black;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.15s ease;
}

.quantityControls button:hover:not(:disabled) {
  background: #ff8124;
}

.quantityControls button:disabled {
  background: #444;
  color: #777;
  cursor: not-allowed;
}


.deleteBtn {
  background: #2a0f0f;
  color: #ff6b6b;
  border: 1px solid #5a1a1a;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deleteBtn:hover {
  background: #3a1414;
}

.deleteBtn:active {
  transform: scale(0.95);
}

.cartSubtotal {
  font-weight: bold;
}

/* ===== FOOTER ===== */

.cartFooter {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cartButtons {
  display: flex;
  gap: 10px;
}

.cartButtons button {
  flex: 1;
}

.cartTotal {
  text-align: right;
  font-weight: bold;
}

.closeCartBtn {
  background: transparent;
  color: #aaa;
  border: none;
}

@keyframes cartBounce {
  0% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(-6px); }
  60% { transform: translateX(-50%) translateY(2px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.cartBounce {
  animation: cartBounce 0.4s ease;
}

.cartCategoryTitle {
  font-size: 13px;
  font-weight: bold;
  margin: 15px 0 8px;
  color: #ff6a00;
  letter-spacing: 1px;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
}

.section {
  display: none;
}

#mainMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* ===== BOTONES PRINCIPALES ===== */

.mainBtn {
  width: 260px;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  background: #ff6a00;
  color: black;
  margin-bottom: 15px;
}

.rateBtn {
  margin-top: 120px;
}

.orderBtn {
  width: 260px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  background: #ff6a00;
  color: black;
}

.orderBackBtn {
  width: 260px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  background: #333;
  color: white;
}

.primary {
  background: #ff6a00;
  color: black;
  padding: 14px;
  border-radius: 12px;
  font-weight: bold;
  width: 100%;
  max-width: 380px;
  border: none;
  cursor: pointer;
}

.secondary {
  background: #333;
  color: white;
  padding: 12px;
  border-radius: 10px;
  font-weight: bold;
  width: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-height: 100vh;
  overflow-y: auto;
}


/* ===== ESTRUCTURA PANTALLA ORDENAR ===== */

#orderOptions,
#tableOptions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  text-align: center;
  min-height: calc(100vh - 40px);
}



/* ===== PASOS ===== */

.stepHeader {
  text-align: center;
  margin-bottom: 25px;
}

.stepIndicator {
  font-size: 12px;
  letter-spacing: 2px;
  color: #b48a4d;
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

/* ===== FORMULARIO ===== */

#summarySection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 20px;
  max-width: 420px;
  margin: 0 auto;
}

.formGroup {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.formGroup label {
  font-size: 13px;
  margin-bottom: 6px;
  opacity: 0.7;
}

#summarySection input,
#summarySection select {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* ===== BOTONES ===== */

.buttonGroup {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== PANTALLA MENÚ ===== */

#menuSection {
  padding-top: 120px;
}

/* ===== TÍTULO MENÚ ESTILO HORARIOS ===== */

#menuSection h1 {
  text-transform: uppercase;
  color: #ff6a00;
  letter-spacing: 2px;
  margin-bottom: 25px;
}

/* ===== TÍTULOS PRINCIPALES DE PANTALLA ===== */

.screenTitle {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #ff6a00;
  text-transform: uppercase;
  margin-bottom: 35px;
}


.cartTotalLine {
  font-weight: bold;
  text-align: right;
}

.reviewButtons {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.reviewButtons button {
  width: 48%;
}

#reviewDataSection {
  background: linear-gradient(145deg, #1a1a1a, #141414);
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}



#reviewDataSection h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #ff6a00;
  letter-spacing: 1px;
}

#reviewDataSection .formGroup {
  margin-bottom: 18px;
}

#reviewDataSection input,
#reviewDataSection select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #111;
  color: white;
  font-size: 14px;
  transition: 0.2s ease;
}

#reviewDataSection input:focus,
#reviewDataSection select:focus {
  outline: none;
  border: 1px solid #ff6a00;
  box-shadow: 0 0 8px rgba(255,106,0,0.5);
}

#orderBreakdown {
  background: #1e1e1e;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* ===== BADGE TIPO DE PEDIDO ===== */

#orderTypeBadge {
  width: 100%;
  max-width: 380px;
  margin-bottom: 20px;
}

.orderBadge {
  background: linear-gradient(145deg, #1f1f1f, #161616);
  border: 1px solid #2a2a2a;
  border-left: 4px solid #ff6a00;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.badgeIcon {
  font-size: 20px;
}

.badgeText {
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* ===== RESUMEN POR CATEGORÍAS ===== */

.summaryCategoryTitle {
  margin-top: 25px;
  margin-bottom: 12px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #ff6a00;
}

.summaryProduct {
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: #111;

  width: 100%;
  box-sizing: border-box;
  display: block;
}

#orderBreakdown {
  display: flex;
  flex-direction: column;
}

.summaryTopRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.summaryTopRow div {
  flex: 1;
  min-width: 0;
}

.selectedModifiers {
  width: 100%;
  word-wrap: break-word;
}

.summaryTopRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summaryProduct textarea {
  width: 100%;
  margin-top: 8px;
  background: #222;
  color: white;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px;
}

.summaryTotal {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

.selectedModifiers {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #aaa;
  padding-left: 4px;
}

.selectedModifiers div {
  margin-top: 2px;
}

.selectedModifiers {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selectedModifierItem {
  font-size: 0.82rem;
  color: #9aa0a6;
}

/* ============================= */
/* ESTILO JUVENIL MODERNO RESUMEN */
/* ============================= */

/* Caja donde aparecen QUITAR / AGREGAR */
.modifiers-card {
  background: #1f1f1f;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  margin-top: 12px;
  border: 1px solid #2a2a2a;
}

/* Títulos QUITAR y AGREGAR */
.modifier-group-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.modifier-remove {
  color: #ef4444;
}

.modifier-add {
  color: #10b981;
}

/* Estilo checkboxes */
.modifiers-card input[type="checkbox"] {
  accent-color: #ff6a00;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.modifiers-card label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #e5e7eb;
}

/* Botón Personalizar */
.btn-personalizar {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-personalizar:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* Botón Eliminar */
.btn-eliminar {
  background: #fee2e2;
  color: #ef4444;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-eliminar:hover {
  background: #fecaca;
}

/* Animación ligera para secciones de personalizar */
.customizationPanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.customizationPanel.open {
  max-height: 500px; /* suficiente para contenido */
}

/* ===== BOTÓN ELIMINAR PRODUCTO ===== */

.removeBtn {
  background-color: #f8d7da; /* rojo muy suave */
  color: #842029; /* rojo oscuro elegante */
  border: 1px solid #f5c2c7;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.removeBtn:hover {
  background-color: #f1aeb5;
}

.removeBtn:active {
  transform: scale(0.95);
}

/* ===== BOTÓN ELIMINAR PRODUCTO (RESUMEN FINAL) ===== */

.removeProductBtn {
  background: #2a0f0f;
  color: #ff6b6b;
  border: 1px solid #5a1a1a;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.removeProductBtn:hover {
  background: #3a1414;
}

.removeProductBtn:active {
  transform: scale(0.95);
}

/* ===== BOTÓN PERSONALIZAR (RESUMEN PEDIDO) ===== */

.toggleDetailsBtn {
  background: #0f2a1f;
  color: #4ade80;
  border: 1px solid #1f5136;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.toggleDetailsBtn:hover {
  background: #143726;
}

.noteBtn {
  background: #0f2a1f;
  color: #4ade80;
  border: 1px solid #1f5136;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.noteBtn:hover {
  background: #143726;
}

.noteBtn:active {
  transform: scale(0.95);
}

.toggleDetailsBtn:active {
  transform: scale(0.95);
}

.menuWithCart {
  padding-bottom: 140px;
}

#reviewDataSection .cashInputWrapper {
  position: relative;
  width: 100%;
}

#reviewDataSection .cashInputWrapper input {
  padding-left: 42px !important;
}

#reviewDataSection .currencySymbol {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 14px;
  color: #888;
  pointer-events: none;
}
.deliveryNote {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
}


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin-left: 6px;
}

input[type="number"] {
  appearance: textfield;
}


#reviewDataSection input:not(:placeholder-shown),
#reviewDataSection select:valid {
  border: 1px solid #ff6a00;
  box-shadow: 0 0 8px rgba(255,106,0,0.5);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
  -webkit-text-fill-color: white !important;
  transition: background-color 9999s ease-in-out 0s;
}

.screenLayout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

#storeStatusBar{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  text-align:center;
  padding:10px;
  font-weight:bold;
  font-size:14px;
  z-index:9998;
}

.statusOpen{
  background:#1f8b24;
  color:white;
}

.statusSoon{
  background:#ff9800;
  color:white;
}

.statusClosed{
  background:#b71c1c;
  color:white;
}

body{
  padding-top:40px;
}

.menuInfoBox{
  background:#1e1e1e;
  border-radius:12px;
  padding:12px;
  margin-bottom:20px;
  border:1px solid #333;
}

.menuInfoHeader{
  font-weight:bold;
  color:#ff6a00;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#menuInfoArrow{
  color:white;
  font-size:16px;
}

.menuInfoContent{
  display:none;
  margin-top:10px;
  font-size:13px;
  color:#ccc;
  line-height:1.4;
}

.menuInfoContent div{
  margin-bottom:6px;
}

.menuSlogan{
  text-align:center;
  color:#ccc;
  font-size:14px;
  font-style:italic;
  margin-top:-5px;
  margin-bottom:18px;
  letter-spacing:0.5px;
}

.menuLogo{
  width:183px;
  display:block;
  margin:10px auto 5px auto;
}

.menuSlogan{
  text-align:center;
  color:#ccc;
  font-size:14px;
  margin-bottom:18px;
  letter-spacing:0.5px;
}

/* ========================= */
/* ADMIN PANEL */
/* ========================= */

.adminTitle{
  text-align:center;
  margin-top:20px;
  font-size:26px;
}

.adminLogo{
  width:283px;
  display:block;
  margin:10px auto 30px auto;
}

.adminMenu{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:10px;
}

/* botón abrir / cerrar tienda */

.toggleStoreButton{
  width:100%;
  padding:20px;
  font-size:20px;
  font-weight:bold;
  border:none;
  border-radius:14px;
  cursor:pointer;
}

.adminMenu{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-top:10px;
}

.adminProductRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(145deg,#1a1a1a,#141414);
  border:1px solid #2a2a2a;
  padding:16px;
  border-radius:14px;
  margin-bottom:12px;
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}

.adminPriceInput{
  width:90px;
  padding:8px;
  border-radius:8px;
  border:none;
  background:#111;
  color:white;
  text-align:center;
  font-weight:bold;
}

#pricesContainer{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.adminSaveBtn{
  background:#ff6a00;
  color:black;
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
  margin-left:8px;
  transition:all .2s ease;
}

.adminSaveBtn:hover{
  opacity:0.9;
}

.adminSaveBtn.saved{
  background:#2ecc71;
  color:white;
}

.adminBackBtn{
  display:block;
  margin:40px auto 0 auto;
}

.moneyInput:focus-within{
  border:1px solid #ff6a00;
  box-shadow:0 0 8px rgba(255,106,0,0.6);
}

.moneyInput.changed{
  border:1px solid #ff6a00;
  box-shadow:0 0 8px rgba(255,106,0,0.9);
}

.adminDeleteBtn{
background:#e53935;
border:none;
color:white;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.adminDeleteBtn:hover{
background:#ff5252;
}

.adminBlock{

background:#1e1e1e;
padding:20px;
border-radius:12px;
margin-top:30px;

box-shadow:0 0 10px rgba(0,0,0,0.4);

}

/* ===== FORMULARIO AGREGAR PRODUCTO ===== */

.productFormBlock{
display:flex;
flex-direction:column;
gap:18px;
}

.formField{
display:flex;
flex-direction:column;
}

.formField label{
font-size:13px;
color:#bbb;
margin-bottom:6px;
font-weight:bold;
letter-spacing:0.3px;
}

.adminInput{
background:#111;
border:1px solid #333;
color:white;
padding:12px;
border-radius:10px;
font-size:14px;
transition:all .2s ease;
}

.adminInput:focus{
outline:none;
border:1px solid #ff6a00;
box-shadow:0 0 8px rgba(255,106,0,0.5);
}

/* ============================= */
/* EXISTENCIA DE PRODUCTOS */
/* ============================= */

.existenceRow{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:12px;
background:linear-gradient(145deg,#1a1a1a,#141414);
padding:16px;
border-radius:14px;
border:1px solid #2a2a2a;
box-shadow:0 6px 14px rgba(0,0,0,0.35);
}

.existenceInfo{
display:flex;
flex-direction:column;
gap:4px;
}

.existenceName{
font-weight:bold;
font-size:15px;
}

.existenceStatus{
font-size:12px;
font-weight:bold;
letter-spacing:0.5px;
}

.inStock{
color:#4ade80;
}

.outStock{
color:#ff6a00;
}

/* ===== SWITCH ===== */

.switch{
position:relative;
display:inline-block;
width:46px;
height:24px;
}

.switch input{
opacity:0;
width:0;
height:0;
}

.slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#444;
transition:.25s;
border-radius:34px;
}

.slider:before{
position:absolute;
content:"";
height:18px;
width:18px;
left:3px;
bottom:3px;
background:white;
transition:.25s;
border-radius:50%;
}

input:checked + .slider{
background:#4ade80;
}

input:checked + .slider:before{
transform:translateX(22px);
}

/* ============================= */
/* ANUNCIOS */
/* ============================= */

.adminSectionTitle{
color:#ff6a00;
margin-bottom:15px;
letter-spacing:1px;
}

.announcementStatusText{
font-weight:bold;
font-size:14px;
color:#bbb;
}

.announcementCard{

background:linear-gradient(145deg,#1a1a1a,#141414);
border:1px solid #2a2a2a;

border-radius:14px;
padding:18px;

margin-top:15px;

box-shadow:0 6px 14px rgba(0,0,0,0.35);

display:flex;
flex-direction:column;
gap:12px;

}

.announcementCardHeader{

display:flex;
justify-content:space-between;
align-items:center;

}

.announcementTitle{

font-size:16px;
font-weight:bold;

}

.announcementMessage{

font-size:13px;
color:#bbb;
line-height:1.4;

}

.announcementButtons{

display:flex;
gap:10px;

margin-top:6px;

}

.announcementCard.active{
border:1px solid #ff6a00;
box-shadow:0 0 12px rgba(255,106,0,0.6);
}