/* ==========================================================================
   Carta rediseñada — componentes reutilizables
   ========================================================================== */

/* ---------- Overview: tarjetas de categoría (ya existían, sin cambios) --- */

/* ---------- TIPO A: sidebar + panel (usado en Bocaditos) ---------------- */
.dj-carta-layout-a{
	display: flex;
	gap: 40px;
}
.dj-carta-sidebar{
	flex: 0 0 320px;
	width: 320px;
}
.dj-carta-sidebar-inner{
	position: sticky;
	top: 130px;
}
.dj-carta-subcat-list{
	list-style: none;
	margin: 0 0 24px 0;
	padding: 0;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	overflow: hidden;
}
.dj-carta-subcat-list li{
	border-bottom: 1px solid var(--divider-color);
}
.dj-carta-subcat-list li:last-child{ border-bottom: none; }
.dj-carta-subcat-list button{
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-left: 4px solid transparent;
	padding: 16px 20px;
	font-family: var(--accent-font);
	font-size: 17px;
	color: var(--primary-color);
	cursor: pointer;
	transition: all .2s ease;
}
.dj-carta-subcat-list button:hover{
	background: var(--bg-color);
}
.dj-carta-subcat-list li.active button{
	border-left-color: var(--accent-color);
	background: var(--bg-color);
	color: var(--accent-color);
	font-weight: 700;
}
.dj-carta-main{ flex: 1; min-width: 0; }
.dj-carta-panel{ display: none; }
.dj-carta-panel.active{ display: block; }
.dj-carta-panel-image{
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 16px;
	margin-bottom: 26px;
}

@media (max-width: 991px){
	.dj-carta-layout-a{ flex-direction: column; }
	.dj-carta-sidebar{ flex: 1 1 auto; width: 100%; }
	.dj-carta-sidebar-inner{ position: relative; top: 0; }
}

/* ---------- TIPO B: tabs + grid + modal ---------------------------------- */
.dj-carta-tabs{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 34px;
	border-bottom: 2px solid var(--divider-color);
	padding-bottom: 0;
}
.dj-carta-tabs button{
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 12px 6px;
	margin-bottom: -2px;
	font-family: var(--accent-font);
	font-size: 18px;
	color: var(--text-color);
	cursor: pointer;
	transition: all .2s ease;
}
.dj-carta-tabs button:hover{ color: var(--primary-color); }
.dj-carta-tabs button.active{
	color: var(--accent-color);
	border-bottom-color: var(--accent-color);
	font-weight: 700;
}
.dj-carta-tabpane{ display: none; }
.dj-carta-tabpane.active{ display: block; }

.dj-carta-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (max-width: 991px){ .dj-carta-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px){ .dj-carta-grid{ grid-template-columns: repeat(1, 1fr); } }

.dj-carta-card{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.dj-carta-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(26,18,16,0.10);
}
.dj-carta-card img{
	width: 100%;
	height: 340px;
	object-fit: cover;
	display: block;
}
.dj-carta-card-name{
	padding: 14px 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
}
.dj-carta-card-price{
	display: block;
	font-size: 13px;
	color: var(--accent-color);
	font-weight: 700;
	margin-top: 4px;
}

/* Modal de detalle de producto */
.dj-product-modal .modal-content{
	border-radius: 16px;
	border: none;
	overflow: hidden;
}
.dj-product-modal .modal-body{
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.dj-product-modal .dj-modal-image{
	flex: 1 1 320px;
	min-height: 480px;
	background-size: cover;
	background-position: center;
}
.dj-product-modal .dj-modal-info{
	flex: 1 1 780px;
	padding: 32px;
}
.dj-product-modal .dj-modal-info h3{
	font-family: var(--accent-font);
	font-size: 26px;
	color: var(--primary-color);
	margin-bottom: 14px;
}
.dj-product-modal .dj-modal-info p{
	color: var(--text-color);
	margin-bottom: 18px;
}
.dj-product-modal .dj-modal-price{
	font-size: 18px;
	color: var(--accent-color);
	font-weight: 700;
    line-height: 26px;
}
.dj-product-modal .btn-close{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	background-color: var(--accent-color);
	opacity: 1;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	background-image: none;
}
.dj-product-modal .btn-close::before{
	content: "\f00d";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #fff;
	font-size: 15px;
}

/* ---------- TIPO C: grid plano (Tortas) ---------------------------------- */
.dj-carta-grid-plain{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 991px){ .dj-carta-grid-plain{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px){ .dj-carta-grid-plain{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- TIPO C: bloques combo (Variados) ----------------------------- */
.dj-combo-block{
	margin-bottom: 50px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	overflow: hidden;
}
.dj-combo-image{
	width: 100%;
	height: 540px;
	object-fit: cover;
	display: block;
}
.dj-combo-items{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	padding: 28px;
}
@media (max-width: 767px){ .dj-combo-items{ grid-template-columns: 1fr; } }
.dj-combo-item h4{
	font-family: var(--default-font);
	font-size: 18px;
	color: var(--primary-color);
	margin-bottom: 6px;
}
.dj-combo-item p{
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 6px;
}
.dj-combo-item .dj-combo-price{
	font-weight: 700;
	color: var(--accent-color);
	font-size: 14px;
}

/* Nota "referencial / a confirmar" */
.dj-pending-note{
	display: inline-block;
	background: var(--bg-color);
	border-left: 3px solid var(--gold-color);
	padding: 3px 10px;
	font-size: 12px;
	color: var(--text-color);
	border-radius: 0 6px 6px 0;
	margin-left: 8px;
}

/* Tabla de tamaños y precios (Tortas) */
.dj-size-table-wrap{
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 12px;
}
table.dj-size-table{
	width: 100%;
	min-width: 980px;
	border-collapse: collapse;
	font-size: 14px;
}
table.dj-size-table th,
table.dj-size-table td{
	padding: 12px 14px;
	text-align: center;
	border-bottom: 1px solid var(--divider-color);
	border-right: 1px solid var(--divider-color);
	white-space: nowrap;
}
table.dj-size-table th:last-child,
table.dj-size-table td:last-child{ border-right: none; }
table.dj-size-table thead tr.dj-size-table-group th{
	background: var(--primary-color);
	color: #fff;
	font-family: var(--accent-font);
	font-size: 15px;
	font-weight: 700;
	border-right: 2px solid var(--white-color);
}
table.dj-size-table thead tr.dj-size-table-cols th{
	background: var(--accent-color);
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .3px;
	white-space: normal;
	vertical-align: middle;
}
table.dj-size-table tbody td.dj-size-label{
	text-align: left;
	font-weight: 700;
	color: var(--primary-color);
	white-space: nowrap;
}
table.dj-size-table tbody tr:nth-child(even){ background: var(--bg-color); }
table.dj-size-table tbody td.dj-has-price{
	color: var(--accent-color);
	font-weight: 700;
}
table.dj-size-table tbody td.dj-no-price{ color: var(--divider-color); }
.dj-size-table-note{
	margin-top: 14px;
	font-size: 13px;
	color: var(--text-color);
	font-style: italic;
}

/* Columnas fijas (Medidas / Forma) al desplazar horizontalmente */
table.dj-size-table th.dj-sticky-col-1,
table.dj-size-table td.dj-sticky-col-1{
	position: sticky;
	left: 0;
	min-width: 90px;
	z-index: 2;
}
table.dj-size-table th.dj-sticky-col-2,
table.dj-size-table td.dj-sticky-col-2{
	position: sticky;
	left: 90px;
	min-width: 112px;
	z-index: 2;
	border-right: 2px solid var(--divider-color);
	box-shadow: 4px 0 6px -4px rgba(26,18,16,0.25);
}
table.dj-size-table th.dj-sticky-group{
	position: sticky;
	left: 0;
	min-width: 202px;
	z-index: 3;
}
/* Fondo solido en las celdas fijas para que no se transparente el contenido al deslizar */
table.dj-size-table td.dj-sticky-col-1,
table.dj-size-table td.dj-sticky-col-2{
	background: var(--white-color);
}
table.dj-size-table tbody tr:nth-child(even) td.dj-sticky-col-1,
table.dj-size-table tbody tr:nth-child(even) td.dj-sticky-col-2{
	background: var(--bg-color);
}
table.dj-size-table thead th.dj-sticky-col-1,
table.dj-size-table thead th.dj-sticky-col-2{
	background: var(--accent-color);
}
table.dj-size-table thead th.dj-sticky-group{
	background: var(--primary-color);
}

@media (max-width: 767px){
	table.dj-size-table{ font-size: 12.5px; }
	table.dj-size-table th,
	table.dj-size-table td{ padding: 10px 10px; }
}

/* Tabla simple de 3 columnas dentro de cada acordeón de base (Tortas) */
table.dj-size-table-simple{
	min-width: 0;
	width: 100%;
}
table.dj-size-table-simple thead th{
	background: var(--accent-color);
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
table.dj-size-table-simple td,
table.dj-size-table-simple th{ white-space: normal; }