/**
 * Menú Manager - Base CSS
 * Paleta negro + dorado envejecido. Tipografía editorial premium.
 * Cards SIN fondo (heredan el fondo de la página).
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
	/* Tipografías */
	--mm-font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	--mm-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Paleta — negro premium con dorado envejecido (Michelin-style) */
	--mm-gold:           #c9a961;
	--mm-gold-light:     #d9c188;
	--mm-gold-dark:      #a88947;
	--mm-gold-muted:     rgba(201, 169, 97, 0.15);

	--mm-bg:             transparent;
	--mm-text:           #e8e6e1;
	--mm-text-soft:      #a8a59f;
	--mm-text-muted:     #6b6862;
	--mm-text-dim:       #4a4845;

	--mm-border:         rgba(232, 230, 225, 0.12);
	--mm-border-strong:  rgba(232, 230, 225, 0.25);
	--mm-border-gold:    rgba(201, 169, 97, 0.35);

	--mm-surface:        rgba(255, 255, 255, 0.03);
	--mm-surface-strong: rgba(255, 255, 255, 0.06);

	--mm-danger:         #c44141;
	--mm-success:        #4a8c4d;

	/* Radios */
	--mm-radius-sm:      4px;
	--mm-radius:         8px;
	--mm-radius-lg:      14px;
	--mm-radius-full:    9999px;

	/* Sombras */
	--mm-shadow-sm:      0 1px 2px rgba(0,0,0,.3);
	--mm-shadow:         0 8px 24px rgba(0,0,0,.35);
	--mm-shadow-lg:      0 24px 48px -12px rgba(0,0,0,.5);
	--mm-shadow-gold:    0 8px 24px rgba(201, 169, 97, .15);

	/* Transiciones */
	--mm-transition:     all .35s cubic-bezier(.4,0,.2,1);
	--mm-transition-slow: all .6s cubic-bezier(.25,.1,.25,1);

	/* Espaciado */
	--mm-space-xs:       4px;
	--mm-space-sm:       8px;
	--mm-space:          16px;
	--mm-space-md:       24px;
	--mm-space-lg:       40px;
	--mm-space-xl:       64px;
}

/* Root container */
.mm-root, .mm-root *,
.mm-modal-overlay, .mm-modal-overlay * {
	box-sizing: border-box;
	font-family: var(--mm-font-sans);
}

.mm-root {
	color: var(--mm-text);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
}

/* === COMPONENTES COMPARTIDOS === */

/* Botones */
.mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--mm-radius-sm);
	font-family: var(--mm-font-sans);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--mm-transition);
	text-decoration: none;
	line-height: 1;
	min-height: 42px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.mm-btn:focus-visible {
	outline: 2px solid var(--mm-gold);
	outline-offset: 2px;
}
.mm-btn--primary {
	background: var(--mm-gold);
	color: #1a1612;
	border-color: var(--mm-gold);
}
.mm-btn--primary:hover {
	background: var(--mm-gold-light);
	border-color: var(--mm-gold-light);
	transform: translateY(-1px);
	box-shadow: var(--mm-shadow-gold);
}
.mm-btn--secondary {
	background: transparent;
	color: var(--mm-text);
	border-color: var(--mm-border-strong);
}
.mm-btn--secondary:hover {
	background: var(--mm-surface);
	border-color: var(--mm-gold);
	color: var(--mm-gold);
}
.mm-btn--danger {
	background: transparent;
	color: var(--mm-danger);
	border-color: rgba(196, 65, 65, 0.4);
}
.mm-btn--danger:hover {
	background: var(--mm-danger);
	color: #fff;
	border-color: var(--mm-danger);
}
.mm-btn--ghost {
	background: transparent;
	color: var(--mm-text-soft);
	border: none;
	text-transform: none;
	letter-spacing: 0;
}
.mm-btn--ghost:hover { color: var(--mm-gold); }
.mm-btn--sm {
	padding: 7px 14px;
	font-size: 12px;
	min-height: 34px;
}
.mm-btn[disabled] {
	opacity: .4;
	cursor: not-allowed;
	transform: none !important;
}

/* Form fields */
.mm-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}
.mm-field label {
	font-size: 11px;
	font-weight: 600;
	color: var(--mm-text-soft);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mm-field label .mm-req { color: var(--mm-gold); margin-left: 2px; }

.mm-field input[type="text"],
.mm-field input[type="number"],
.mm-field input[type="search"],
.mm-field input[type="email"],
.mm-field input[type="url"],
.mm-field select,
.mm-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mm-border-strong);
	border-radius: var(--mm-radius-sm);
	background: var(--mm-surface);
	color: var(--mm-text) !important;
	font-size: 14px;
	font-family: var(--mm-font-sans);
	transition: var(--mm-transition);
	-webkit-text-fill-color: var(--mm-text);
	color-scheme: dark;
}
.mm-field textarea {
	min-height: 90px;
	resize: vertical;
	line-height: 1.6;
}
.mm-field select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c9a961' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}
/* Estilos de las opciones del dropdown — fondo oscuro forzado */
.mm-field select option,
.mm-field select optgroup {
	background-color: #1a1612 !important;
	color: var(--mm-text) !important;
}
.mm-field select option:checked,
.mm-field select option:hover {
	background-color: #2a241c !important;
	color: var(--mm-gold-light) !important;
}
.mm-field select option:disabled {
	color: var(--mm-text-muted) !important;
}
/* Quitar las flechas blancas nativas del number input */
.mm-field input[type="number"] {
	-moz-appearance: textfield;
}
.mm-field input[type="number"]::-webkit-outer-spin-button,
.mm-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mm-field input:focus,
.mm-field select:focus,
.mm-field textarea:focus {
	outline: none;
	border-color: var(--mm-gold);
	background: var(--mm-surface-strong);
	box-shadow: 0 0 0 3px var(--mm-gold-muted);
}
.mm-field input::placeholder,
.mm-field textarea::placeholder { color: var(--mm-text-muted); }
/* Autofill (Chrome/Safari): forzar colores oscuros */
.mm-field input:-webkit-autofill,
.mm-field input:-webkit-autofill:hover,
.mm-field input:-webkit-autofill:focus,
.mm-field textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--mm-text) !important;
	-webkit-box-shadow: 0 0 0 30px #1a1612 inset !important;
	caret-color: var(--mm-text);
}

.mm-field.has-error input,
.mm-field.has-error select,
.mm-field.has-error textarea {
	border-color: var(--mm-danger);
	background: rgba(196, 65, 65, 0.05);
}

.mm-field--check {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.mm-field--check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--mm-gold);
}
.mm-field--check label {
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mm-text);
}

/* Mensajes */
.mm-msg {
	padding: 12px 16px;
	border-radius: var(--mm-radius-sm);
	font-size: 13.5px;
	margin: 12px 0;
	border: 1px solid;
}
.mm-msg--success {
	background: rgba(74, 140, 77, 0.1);
	color: #94c897;
	border-color: rgba(74, 140, 77, 0.3);
}
.mm-msg--error {
	background: rgba(196, 65, 65, 0.1);
	color: #e88989;
	border-color: rgba(196, 65, 65, 0.3);
}
.mm-msg--info {
	background: var(--mm-gold-muted);
	color: var(--mm-gold-light);
	border-color: var(--mm-border-gold);
}

/* Loader */
.mm-loader {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,.2);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: mm-spin .8s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* Modal */
.mm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(8px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 20px;
	animation: mm-fade-in .3s ease;
}
.mm-modal-overlay.is-open { display: flex; }

.mm-modal {
	background: #0d0d0d;
	border: 1px solid var(--mm-border-strong);
	border-radius: var(--mm-radius-lg);
	width: 100%;
	max-width: 680px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--mm-shadow-lg);
	animation: mm-slide-up .4s cubic-bezier(.25,.1,.25,1);
}
.mm-modal__head {
	padding: 22px 26px;
	border-bottom: 1px solid var(--mm-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.mm-modal__head h3 {
	margin: 0;
	font-family: var(--mm-font-serif);
	font-size: 22px;
	font-weight: 500;
	color: var(--mm-text);
	letter-spacing: .01em;
}
.mm-modal__close {
	background: transparent;
	border: 1px solid var(--mm-border);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--mm-transition);
	color: var(--mm-text-soft);
	font-size: 18px;
	line-height: 1;
	padding: 0;
}
.mm-modal__close:hover {
	border-color: var(--mm-gold);
	color: var(--mm-gold);
	background: var(--mm-gold-muted);
}
.mm-modal__body { padding: 26px; overflow-y: auto; flex: 1; }
.mm-modal__foot {
	padding: 18px 26px;
	border-top: 1px solid var(--mm-border);
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

@keyframes mm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-slide-up {
	from { opacity: 0; transform: translateY(20px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile */
@media (max-width: 640px) {
	.mm-modal__head, .mm-modal__body, .mm-modal__foot { padding: 18px; }
	.mm-modal__head h3 { font-size: 18px; }
	.mm-btn { font-size: 12px; padding: 9px 16px; }
}