/* =============================================================================
   Óptica Lens Configurator — Estilosbackground
   ============================================================================= */

.olc-modal {
	--p   : #2563eb;
	--p2  : #1d4ed8;
	--ok  : #16a34a;
	--bg  : #f8fafc;
	--brd : #e2e8f0;
	--txt : #1e293b;
	--mut : #64748b;
	--r   : 12px;
	--t   : .18s ease;
}

/* Botón de apertura */
button.olc-open-wizard {
	width        : 100%;
	background-color: #166bd8;
}

/* Overlay y diálogo */
.olc-modal {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.olc-modal[hidden] { display: none; }

.olc-overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}

.olc-dialog {
	position: relative; z-index: 1;
	background: #fff; border-radius: var(--r);
	box-shadow: 0 24px 64px rgba(0,0,0,.26);
	width: min(680px, 100%); max-height: 90vh;
	display: flex; flex-direction: column; overflow: hidden; outline: none;
}

/* Cerrar */
.olc-close {
	position: absolute; top: 12px; right: 14px;
	background: none; border: none; font-size: 1.5rem; line-height: 1;
	cursor: pointer; color: var(--mut); padding: 4px 8px; border-radius: 6px; z-index: 2;
	text-transform: uppercase;
}
.olc-close:hover { background: var(--bg); color: var(--txt); }

/* Header */
.olc-header { padding: 22px 50px 0 22px; flex-shrink: 0; }
.olc-header h2 { margin: 0 0 14px; font-size: 1.15rem; color: var(--txt); }

/* Steps */
.olc-steps { display: flex; position: relative; gap: 0; }
.olc-steps::before {
	content: ''; position: absolute;
	top: 14px; left: 40px; right: 40px; height: 2px; background: var(--brd);
}
.olc-step {
	flex: 1; display: flex; flex-direction: column; align-items: center;
	gap: 5px; position: relative; z-index: 1; padding: 0 4px;
}
.olc-step-num {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--brd); color: var(--mut);
	display: flex; align-items: center; justify-content: center;
	font-size: .8rem; font-weight: 700;
	transition: background var(--t), color var(--t);
}
.olc-step-lbl { font-size: .65rem; color: var(--mut); white-space: nowrap; }

.olc-step.is-active .olc-step-num { background: var(--p); color: #fff; }
.olc-step.is-active .olc-step-lbl { color: var(--p); font-weight: 600; }
.olc-step.is-done .olc-step-num   { background: var(--ok); color: #fff; font-size: 0; }
.olc-step.is-done .olc-step-num::after { content: '✓'; font-size: .85rem; }
.olc-step.is-done .olc-step-lbl   { color: var(--ok); }

/* Paneles */
.olc-panel { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.olc-panel[hidden] { display: none; }
.olc-panel h3 { margin: 0 0 14px; font-size: .95rem; color: var(--txt); }
.olc-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.olc-panel-heading h3 { margin-bottom: 0; }
.olc-crystal-help { margin: 0; color: var(--mut); font-size: .78rem; text-align: right; }

/* Grids de tarjetas */
.olc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }

.olc-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 12px 14px; background: var(--bg);
	border: 2px solid var(--brd); border-radius: 9px;
	cursor: pointer; text-align: left; position: relative;
	transition: border-color var(--t), background var(--t), transform var(--t);
}
.olc-card:hover { border-color: var(--p); transform: translateY(-2px); }
.olc-card.is-selected { border-color: var(--p); background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.olc-card-label { font-weight: 600; font-size: .85rem; color: var(--txt); }
.olc-card-description { font-size: .75rem; line-height: 1.35; color: var(--mut); text-transform: none; }
.olc-card-price { font-size: .76rem; color: var(--mut); }
.olc-card-price--free { color: var(--ok); }

.olc-card-check {
	position: absolute; top: 8px; right: 9px;
	font-size: .8rem; color: var(--p); opacity: 0; transition: opacity var(--t);
}
.olc-card.is-selected .olc-card-check { opacity: 1; }

/* Receta: tabs */
.olc-rx-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.olc-rx-tab {
	padding: 7px 16px; border: 2px solid var(--brd); border-radius: 7px;
	background: var(--bg); cursor: pointer; font-size: .87rem; color: var(--mut);
	transition: all var(--t);
}
.olc-rx-tab.is-active { border-color: var(--p); background: #eff6ff; color: var(--p); font-weight: 600; }

[data-rx-panel][hidden] { display: none; }

/* Subida de archivo */
.olc-upload-label {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 32px 20px; border: 2px dashed var(--brd); border-radius: 9px;
	cursor: pointer; text-align: center; background: var(--bg); position: relative;
	transition: border-color var(--t), background var(--t);
}
.olc-upload-label:hover,
.olc-upload-label.is-over { border-color: var(--p); background: #eff6ff; }
.olc-upload-label span { font-size: 2rem; }
.olc-upload-label strong { font-size: .9rem; color: var(--txt); }
.olc-upload-label small { font-size: .78rem; color: var(--mut); }
#olc-upload-status { margin-top: 8px; font-size: .87rem; min-height: 1.2em; }

/* Tabla de receta manual */
.olc-rx-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.olc-rx-table th, .olc-rx-table td { padding: 8px 5px; border-bottom: 1px solid var(--brd); text-align: center; }
.olc-rx-table thead th { font-size: .72rem; text-transform: uppercase; color: var(--mut); letter-spacing: .04em; }
.olc-rx-table tbody th { text-align: left; padding-right: 12px; white-space: nowrap; font-weight: 600; }
.olc-rx-input {
	width: 64px; padding: 5px; border: 1px solid var(--brd); border-radius: 5px;
	text-align: center; font-size: .85rem; -moz-appearance: textfield;
}
.olc-rx-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.olc-rx-input:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* Resumen */
.olc-summary { background: var(--bg); border-radius: 9px; padding: 14px; }
.olc-sum-row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 9px 0; border-bottom: 1px solid var(--brd); font-size: .88rem; gap: 10px;
}
.olc-sum-row:last-child { border-bottom: none; }
.olc-sum-label { color: var(--mut); flex-shrink: 0; }
.olc-sum-value { font-weight: 600; color: var(--txt); text-align: right; }
.olc-sum-price { color: var(--mut); margin-left: 6px; font-size: .8rem; font-weight: 400; }

.olc-summary-total {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--brd);
	font-size: 1.05rem; font-weight: 700; color: var(--txt);
}
.olc-summary-note { margin: 14px 0 0; color: var(--mut); font-size: .78rem; line-height: 1.5; }

/* Barra de precio */
.olc-price-bar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 9px 22px; background: var(--bg); border-top: 1px solid var(--brd);
	flex-shrink: 0; font-size: .88rem;
}
.olc-price-bar span { color: var(--mut); }
.olc-price-bar strong { font-size: 1.1rem; font-weight: 700; color: var(--p); }

/* Footer de navegación */
.olc-footer {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 12px 22px 18px; border-top: 1px solid var(--brd); flex-shrink: 0;
}

.olc-btn {
	padding: 10px 20px; border-radius: 7px; font-size: .92rem; font-weight: 600;
	cursor: pointer; border: none; transition: background var(--t), opacity var(--t);
}
.olc-btn[hidden] { display: none; }
.olc-btn:disabled { opacity: .55; cursor: not-allowed; }

.olc-btn--sec { background: none; border: 2px solid var(--brd); color: var(--txt); }
.olc-btn--sec:hover:not(:disabled) { background: var(--bg); }

.olc-btn--pri  { background: var(--p);  color: #fff; margin-left: auto; }
.olc-btn--cart { background: #16a34a;   color: #fff; margin-left: auto; }
.olc-btn--pri:hover:not(:disabled)  { background: var(--p2); }
.olc-btn--cart:hover:not(:disabled) { background: #15803d; }

/* Toast de error */
.olc-toast {
	flex: 1 1 100%; order: -1; margin: 0; padding: 7px 12px;
	font-size: .83rem; color: #dc2626; background: #fef2f2;
	border: 1px solid #fecaca; border-radius: 6px; display: none;
}
.olc-toast.is-visible { display: block; }

/* Carrito WC */
.olc-cart-meta { display: block; margin-top: 3px; color: #6b7280; font-size: .8em; }

/* Responsive */
@media (max-width: 580px) {
	.olc-modal { padding: 0; align-items: flex-end; }
	.olc-dialog { border-radius: var(--r) var(--r) 0 0; max-height: 92vh; width: 100%; }
	.olc-grid { grid-template-columns: repeat(2, 1fr); }
	.olc-step-lbl { display: none; }
	.olc-rx-input { width: 52px; }
	.olc-panel-heading { display: block; }
	.olc-panel-heading h3 { margin-bottom: 6px; }
	.olc-crystal-help { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.olc-card, .olc-btn, button.olc-open-wizard { transition: none; }
}


/* =============================================================================
   Guía de receta — popup "¿Cómo leer mi receta?"  (.olc-rxg-*)
   ============================================================================= */

/* ── Botón disparador ── */
.olc-how-rx-btn {
	display          : inline-flex;
	align-items      : center;
	gap              : 6px;
	padding          : 7px 14px;
	margin           : 0 0 12px;
	background       : #eff6ff;
	border           : 1.5px solid #bfdbfe;
	border-radius    : 7px;
	color            : #2563eb;
	font-size        : .84rem;
	font-weight      : 600;
	font-family      : inherit;
	cursor           : pointer;
	transition       : background .18s ease, border-color .18s ease;
}
.olc-how-rx-btn:hover {
	background   : #dbeafe;
	border-color : #93c5fd;
}

/* ── Overlay del popup ── */
.olc-rxg {
	position   : fixed;
	inset      : 0;
	z-index    : 100002;          /* encima del wizard (100000) */
	display    : flex;
	align-items: center;
	justify-content: center;
	padding    : 12px;
}
.olc-rxg[hidden] { display: none; }

.olc-rxg__overlay {
	position   : absolute;
	inset      : 0;
	background : rgba(0,0,0,.62);
	backdrop-filter: blur(3px);
}

/* ── Diálogo ── */
.olc-rxg__dialog {
	position              : relative;
	z-index               : 1;
	background            : #f4f5f8;
	border-radius         : 16px;
	width                 : min(480px, 100%);
	max-height            : 90vh;
	overflow-y            : auto;
	-webkit-overflow-scrolling: touch;
	box-shadow            : 0 20px 60px rgba(0,0,0,.32);
}

/* ── Botón cerrar (sticky flotante) ── */
.olc-rxg__close-wrap {
	position        : sticky;
	top             : 0;
	height          : 0;             /* no ocupa espacio en el flujo */
	display         : flex;
	justify-content : flex-end;
	z-index         : 3;
	pointer-events  : none;
}
.olc-rxg__close {
	pointer-events : auto;
	margin         : 10px 10px 0 0;
	background     : rgba(255,255,255,.88);
	border         : none;
	border-radius  : 50% !important;
	width          : 30px;
	height         : 30px;
	font-size      : 1rem;
	cursor         : pointer;
	color          : #64748b;
	display        : flex;
	align-items    : center;
	justify-content: center;
	box-shadow     : 0 2px 8px rgba(0,0,0,.18);
	transition     : background .15s, color .15s;
	flex-shrink    : 0;
}
.olc-rxg__close:hover { background: #fff; color: #1e293b; }

/* ── Header azul oscuro ── */
.olc-rxg__header {
	background : #1b3358;
	color      : #fff;
	padding    : 28px 22px 22px;
	text-align : center;
}
.olc-rxg__brand {
	font-size       : 10px;
	letter-spacing  : 3px;
	text-transform  : uppercase;
	color           : #92aec8;
	margin-bottom   : 8px;
}
.olc-rxg__title {
	font-size    : clamp(20px, 5vw, 26px);
	font-weight  : 700;
	margin       : 0 0 10px;
	color        : #fff;
	line-height  : 1.15;
}
.olc-rxg__sub {
	font-size    : 12.5px;
	color        : #c0d3e8;
	line-height  : 1.5;
	margin-bottom: 14px;
}
.olc-rxg__info-box {
	background   : #243f62;
	border-radius: 8px;
	padding      : 12px 14px;
	font-size    : 12px;
	line-height  : 1.55;
	color        : #c8ddf0;
	text-align   : left;
}
.olc-rxg__info-box strong { color: #fff; display: block; margin-bottom: 3px; }

/* ── Cuerpo ── */
.olc-rxg__body { padding: 18px 16px; }

.olc-rxg__section-lbl {
	text-align     : center;
	font-size      : 9.5px;
	letter-spacing : 3px;
	text-transform : uppercase;
	color          : #8898aa;
	margin-bottom  : 11px;
}

/* ── Tarjeta de receta ejemplo ── */
.olc-rxg__rx-card {
	background   : #fff;
	border       : 1px solid #dde3ec;
	border-radius: 10px;
	overflow     : hidden;
	margin-bottom: 16px;
}
.olc-rxg__rx-doctor {
	background   : #f7f8fb;
	text-align   : center;
	padding      : 11px 14px;
	border-bottom: 1px solid #e4e8ef;
}
.olc-rxg__rx-name {
	font-style  : italic;
	font-weight : 700;
	font-size   : 13px;
	color       : #1b3358;
	margin-bottom: 2px;
}
.olc-rxg__rx-title {
	font-size      : 9px;
	letter-spacing : 2px;
	text-transform : uppercase;
	color          : #7a8ea6;
	margin-bottom  : 3px;
}
.olc-rxg__rx-reg { font-size: 9.5px; color: #9aaabb; }

.olc-rxg__rx-bar {
	background    : #1b3358;
	color         : #fff;
	text-align    : center;
	font-size     : 9px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	padding       : 7px 0;
}

.olc-rxg__rx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.olc-rxg__rx-tbl { width: 100%; border-collapse: collapse; min-width: 270px; }
.olc-rxg__rx-tbl thead th {
	background    : #f7f8fb;
	padding       : 8px 5px;
	font-size     : 10px;
	font-weight   : 700;
	color         : #1b3358;
	text-align    : center;
	border-bottom : 1px solid #e4e8ef;
	white-space   : nowrap;
}
.olc-rxg__rx-tbl thead th:first-child { text-align: left; padding-left: 11px; }
.olc-rxg__rx-tbl tbody td {
	padding       : 12px 5px;
	text-align    : center;
	font-size     : 15px;
	font-weight   : 700;
	color         : #1b3358;
	border-bottom : 1px solid #eef0f4;
}
.olc-rxg__rx-tbl tbody tr:last-child td { border-bottom: none; }
.olc-rxg__rx-tbl tbody td:first-child {
	text-align : left;
	padding-left: 11px;
	font-size  : 11.5px;
	white-space: nowrap;
}

/* Badges numerados */
.olc-rxg__badge {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	background     : #2563eb;
	color          : #fff;
	border-radius  : 50%;
	width          : 15px;
	height         : 15px;
	font-size      : 8.5px;
	font-weight    : 700;
	flex-shrink    : 0;
	vertical-align : middle;
}

/* ── ADD ── */
.olc-rxg__add {
	background  : #f7f8fb;
	border-top  : 1px solid #e4e8ef;
	padding     : 11px 14px;
	text-align  : center;
}
.olc-rxg__add-lbl {
	font-size      : 9px;
	letter-spacing : 2px;
	text-transform : uppercase;
	color          : #5a7a9a;
	margin-bottom  : 8px;
}
.olc-rxg__add-vals {
	display        : flex;
	justify-content: center;
	gap            : 28px;
}
.olc-rxg__add-eye-name { font-size: 10px; color: #8898aa; margin-bottom: 2px; }
.olc-rxg__add-val      { font-size: 19px; font-weight: 700; color: #1b3358; }

/* ── Leyenda de 6 ítems ── */
.olc-rxg__legend {
	display               : grid;
	grid-template-columns : 1fr 1fr;
	gap                   : 9px;
	margin-bottom         : 14px;
}
.olc-rxg__legend-item {
	background   : #fff;
	border       : 1px solid #dde3ec;
	border-radius: 9px;
	padding      : 11px;
}
.olc-rxg__legend-title-row {
	display      : flex;
	align-items  : center;
	gap          : 6px;
	margin-bottom: 4px;
}
.olc-rxg__legend-num {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	background     : #2563eb;
	color          : #fff;
	border-radius  : 50%;
	width          : 19px;
	height         : 19px;
	font-size      : 10px;
	font-weight    : 700;
	flex-shrink    : 0;
}
.olc-rxg__legend-name { font-size: 11.5px; font-weight: 700; color: #1b3358; }
.olc-rxg__legend-desc { font-size: 10.5px; color: #607080; line-height: 1.45; margin-bottom: 4px; }
.olc-rxg__legend-ex   { font-size: 11px; font-weight: 700; color: #2563eb; }
.olc-rxg__legend-ex--dark { color: #1b3358; }

/* ── Cajas inferiores ── */
.olc-rxg__bottom {
	display               : grid;
	grid-template-columns : 1fr 1fr;
	gap                   : 9px;
	margin-bottom         : 13px;
}
.olc-rxg__tip-box {
	background   : #1b3358;
	border-radius: 9px;
	padding      : 13px;
}
.olc-rxg__tip-title { font-size: 11.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.olc-rxg__tip-title::before { content: "★ "; color: #f5c842; }
.olc-rxg__tip-text  { font-size: 10.5px; color: #b8cfe8; line-height: 1.5; }

.olc-rxg__neutral-box {
	background   : #fff;
	border       : 1px solid #dde3ec;
	border-radius: 9px;
	padding      : 13px;
}
.olc-rxg__neutral-title { font-size: 12px; font-weight: 700; color: #1b3358; margin-bottom: 6px; }
.olc-rxg__neutral-text  { font-size: 10.5px; color: #607080; line-height: 1.5; }
.olc-rxg__neutral-text strong { color: #1b3358; }

/* ── Nota informativa ── */
.olc-rxg__note {
	background   : #eef3fb;
	border-radius: 9px;
	padding      : 11px 13px;
	display      : flex;
	gap          : 8px;
	align-items  : flex-start;
	margin-bottom: 14px;
}
.olc-rxg__note-icon {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	background     : #2563eb;
	color          : #fff;
	border-radius  : 50%;
	width          : 17px;
	height         : 17px;
	font-size      : 10px;
	font-weight    : 700;
	flex-shrink    : 0;
	margin-top     : 1px;
}
.olc-rxg__note-text         { font-size: 10.5px; color: #3a5070; line-height: 1.55; }
.olc-rxg__note-text strong  { color: #1b3358; }

.olc-rxg__footer-text {
	text-align     : center;
	font-size      : 9px;
	letter-spacing : 1.5px;
	text-transform : uppercase;
	color          : #8898aa;
	padding-bottom : 14px;
}

/* ── Responsive del popup ── */
@media (max-width: 400px) {
	.olc-rxg__legend,
	.olc-rxg__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
	.olc-rxg         { padding: 0; align-items: flex-end; }
	.olc-rxg__dialog { border-radius: 16px 16px 0 0; max-height: 93vh; width: 100%; }
}