/* Estilos de la pantalla de Inventario/Presupuestos */
:root{ --accent:#000; --accent-2:#1abc1a; --muted:#e9e9e9; }
body{ background:#000; color:#000; }
.presupuesto-container{ max-width:1200px; margin:120px auto 40px; padding:0 18px; }
.presupuesto-container h1{ color:#fff; margin-bottom:12px; }
.toolbar{ display:flex; gap:10px; align-items:center; margin:10px 0 18px; flex-wrap:wrap; }
.toolbar .spacer{ flex:1; }
.toolbar .btn{
	background:#fff; color:#000; border-radius:12px; border:2px solid #000;
	padding:10px 16px; cursor:pointer; font-weight:800; letter-spacing:.15px;
	box-shadow:0 6px 16px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	display:inline-flex; align-items:center; gap:8px;
}
.toolbar .btn:hover{ background:#000; color:#fff; transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.25); }
.toolbar .btn.btn-outline{ background:#fff; color:#000; border-color:#000; box-shadow:none; }
.toolbar .btn.btn-outline:hover{ background:#000; color:#fff; }
.movilidad-ctrl{ color:#fff; display:flex; align-items:center; gap:8px; font-weight:600; background:#111; padding:8px 10px; border-radius:10px; border:1px solid #2a2a2a; }
.movilidad-ctrl input{ width:84px; padding:6px 8px; border-radius:8px; border:1px solid #444; background:#fff; color:#000; }
.session-badge{ background:#fff; color:#000; border-radius:999px; padding:6px 12px; font-weight:700; border:2px solid #000; }

.table-wrapper{ background:#fff; border-radius:16px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,.25); -webkit-overflow-scrolling:touch; }
.tabla-inventario{ width:100%; border-collapse:collapse; min-width:900px; }
.tabla-inventario thead th{ position:sticky; top:0; background:#111; color:#fff; padding:12px 8px; text-align:left; font-size:14px; z-index:1; }
.tabla-inventario tbody td{ padding:10px 8px; border-bottom:1px solid #eeeeee; font-size:14px; }
.tabla-inventario tbody tr:hover{ background:#f7fff7; }
.tabla-inventario input[type="number"],
.tabla-inventario input[type="text"],
.cliente-form input, .cliente-form select, .picker input{
	width:100%; padding:10px 12px; border:1.5px solid #d8d8d8; border-radius:12px; background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease; outline:none;
}
.tabla-inventario input:focus,
.cliente-form input:focus, .cliente-form select:focus, .picker input:focus{
	border-color:#1abc1a; box-shadow:0 0 0 3px rgba(26,188,26,.18);
}
.tabla-inventario .readonly{ background:#f5f5f5; color:#555; }
.legend{ margin:12px 6px; color:#eaeaea; }
.tabla-inventario.compact thead th{ padding:8px; }
.tabla-inventario.compact tbody td{ padding:6px 8px; }
.mt{ margin-top:18px; }

/* Cinta de permisos */
.permiso-hint{ font-size:12px; color:#666; }

@media (max-width: 900px){
	.presupuesto-container{ margin-top:100px; }
}

/* Modal Crear Presupuesto */
.budget-modal{ position:fixed; inset:0; display:none; z-index:10004; }
.budget-modal.open{ display:block; }
.budget-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }
.budget-modal__dialog{ position:relative; margin:5vh auto; max-width:1100px; background:#fff; color:#000; border-radius:18px; padding:18px; box-shadow:0 16px 40px rgba(0,0,0,.35); max-height:90vh; overflow:auto; }
.budget-modal__close{ position:absolute; top:10px; right:12px; font-size:28px; background:transparent; border:none; color:#000; cursor:pointer; }
.cliente-form .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cliente-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.cliente-form input, .cliente-form select{ padding:10px 12px; border:1px solid #ccc; border-radius:10px; }
.picker{ display:flex; align-items:center; gap:10px; margin:10px 0; flex-wrap:wrap; }
/* Solo el buscador de materiales necesita ancho mínimo amplio */
#matPicker{ min-width:320px; }
/* En los modales, que los campos se adapten y no generen scroll lateral */
.budget-modal .picker label{ flex:1 1 180px; min-width:160px; }
.budget-modal .picker button{ flex:0 0 auto; }
.budget-modal .picker input{ min-width:0; }
.suggestions{ background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.12); margin-top:6px; max-height:220px; overflow:auto; display:none; position:relative; }
.suggestions.show{ display:block; }
.suggestions .sugg-item{ padding:10px 12px; cursor:pointer; display:flex; justify-content:space-between; gap:14px; }
.suggestions .sugg-item:hover{ background:#f0fff0; }
.sugg-name{ font-weight:600; }
.sugg-meta{ color:#444; font-weight:700; }
.totales{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:start; margin-top:14px; }
.totales label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.totales input{ padding:8px 10px; border:1px solid #ccc; border-radius:8px; }
.totales .precio-venta{ grid-column:1/-1; }
.subtotales{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:start; margin:14px 0; }
.subtotales label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.subtotales input{ padding:8px 10px; border:1px solid #ccc; border-radius:8px; }
.subtotales .total-sub{ grid-column:1/-1; }
.acciones{ display:flex; gap:10px; align-items:center; margin-top:14px; }
.acciones .nota{ flex:1; display:flex; flex-direction:column; gap:6px; }
.acciones textarea{ width:100%; border:1px solid #ccc; border-radius:10px; padding:8px 10px; }
.acciones .grow{ flex:1; }
.budget-modal [hidden]{ display:none !important; }

/* Botones secundarios (dentro de tablas del modal) */
.btn{ background:#000; color:#fff; border:2px solid #000; border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; }
.btn:hover{ background:#111; }
.btn.btn-outline{ background:#fff; color:#000; border-color:#000; }
.btn.btn-outline:hover{ background:#f3f3f3; }
.btn.btn-ghost{ background:transparent; color:#000; border:1px dashed #aaa; }
.btn.btn-danger{ background:#d92b2b; border-color:#d92b2b; color:#fff; }
.btn.btn-danger:hover{ background:#c32020; }

/* Medidas inputs agrupados */
.medidas{ display:inline-flex; align-items:center; gap:6px; }
.medidas input{ width:110px; }
.badge{ display:inline-block; padding:3px 8px; border-radius:999px; background:#f5f5f5; border:1px solid #e1e1e1; color:#222; font-size:12px; font-weight:700; }

/* Responsive: móviles y tablets */
@media (max-width: 768px){
	.presupuesto-container{ margin:20px auto 24px; padding:0 12px; }

	/* Toolbar apilada y botones de ancho completo */
	.toolbar{ flex-direction:column; align-items:stretch; gap:8px; }
	.toolbar .spacer{ display:none; }
	.toolbar .btn{ width:100%; justify-content:center; font-size:14px; padding:12px; min-height:44px; }
	.session-badge{ width:100%; text-align:center; }
	.movilidad-ctrl{ width:100%; justify-content:space-between; }
	.movilidad-ctrl input{ width:100px; }

	/* Tablas: ocupa todo el ancho SIN scroll horizontal */
	.table-wrapper{ border-radius:12px; }
	.tabla-inventario{ min-width:0; width:100%; table-layout:fixed; }
	.tabla-inventario thead th, .tabla-inventario tbody td{ padding:4px 3px; font-size:11px; line-height:1.15; letter-spacing:0; }
	.tabla-inventario thead th{ font-size:10px; line-height:1.15; }
	/* Anchos por columna (8 columnas) */
	.tabla-inventario thead th:nth-child(1),
	.tabla-inventario tbody td:nth-child(1){ width:5%; }
	.tabla-inventario thead th:nth-child(2),
	.tabla-inventario tbody td:nth-child(2){ width:16%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
	.tabla-inventario thead th:nth-child(3),
	.tabla-inventario tbody td:nth-child(3){ width:21%; }
	.tabla-inventario thead th:nth-child(4),
	.tabla-inventario tbody td:nth-child(4){ width:13%; }
	.tabla-inventario thead th:nth-child(5),
	.tabla-inventario tbody td:nth-child(5){ width:8%; }
	.tabla-inventario thead th:nth-child(6),
	.tabla-inventario tbody td:nth-child(6){ width:17%; }
	.tabla-inventario thead th:nth-child(7),
	.tabla-inventario tbody td:nth-child(7){ width:8%; }
	.tabla-inventario thead th:nth-child(8),
	.tabla-inventario tbody td:nth-child(8){ width:12%; }

	/* Inputs más compactos solo en Costo $ (col 5) y % Movilidad (col 7) */
	.tabla-inventario tbody td:nth-child(5) input,
	.tabla-inventario tbody td:nth-child(7) input{
		padding:2px 4px; font-size:10px; line-height:1.1; height:auto; text-align:center; border-radius:8px; min-width:0;
	}

	/* Columnas numéricas más compactas */
	.tabla-inventario tbody td:nth-child(3),
	.tabla-inventario tbody td:nth-child(4),
	.tabla-inventario tbody td:nth-child(5),
	.tabla-inventario tbody td:nth-child(6),
	.tabla-inventario tbody td:nth-child(7),
	.tabla-inventario tbody td:nth-child(8){
		font-size:10px; text-align:center; font-variant-numeric:tabular-nums;
	}
	/* Evitar desbordes en celdas numéricas */
	.tabla-inventario tbody td:not(:nth-child(2)){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

	/* ===== Modal: tablas internas (#itemsTabla, #servTabla, #clientItems) ===== */
	/* Alinear valores centrados donde aplique y definir anchos por columna */
	/* itemsTabla: 5 columnas => [Nombre, Medidas, Total M², A pagar, Acciones] */
	#itemsTabla{ table-layout:fixed; width:100%; }
	#itemsTabla thead th, #itemsTabla tbody td{ padding:4px 3px; }
	#itemsTabla thead th:nth-child(1), #itemsTabla tbody td:nth-child(1){ width:40%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; text-align:left; }
	#itemsTabla thead th:nth-child(2), #itemsTabla tbody td:nth-child(2){ width:27%; text-align:center; }
	#itemsTabla thead th:nth-child(3), #itemsTabla tbody td:nth-child(3){ width:13%; text-align:center; }
	#itemsTabla thead th:nth-child(4), #itemsTabla tbody td:nth-child(4){ width:12%; text-align:center; }
	#itemsTabla thead th:nth-child(5), #itemsTabla tbody td:nth-child(5){ width:8%; text-align:center; }

	/* servTabla: 5 columnas => [Servicio, P.V.P, Cantidad, A pagar, Acciones] */
	#servTabla{ table-layout:fixed; width:100%; }
	#servTabla thead th, #servTabla tbody td{ padding:4px 3px; }
	#servTabla thead th:nth-child(1), #servTabla tbody td:nth-child(1){ width:46%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; text-align:left; }
	#servTabla thead th:nth-child(2), #servTabla tbody td:nth-child(2){ width:18%; text-align:center; }
	#servTabla thead th:nth-child(3), #servTabla tbody td:nth-child(3){ width:16%; text-align:center; }
	#servTabla thead th:nth-child(4), #servTabla tbody td:nth-child(4){ width:12%; text-align:center; }
	#servTabla thead th:nth-child(5), #servTabla tbody td:nth-child(5){ width:8%; text-align:center; }

	/* clientItems: 6 columnas => [#, Descripción, Cantidad, Monto, Total, Acciones] */
	#clientItems{ table-layout:fixed; width:100%; }
	#clientItems thead th, #clientItems tbody td{ padding:4px 3px; }
	#clientItems thead th:nth-child(1), #clientItems tbody td:nth-child(1){ width:6%; text-align:center; }
	#clientItems thead th:nth-child(2), #clientItems tbody td:nth-child(2){ width:42%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; text-align:left; }
	#clientItems thead th:nth-child(3), #clientItems tbody td:nth-child(3){ width:14%; text-align:center; }
	#clientItems thead th:nth-child(4), #clientItems tbody td:nth-child(4){ width:14%; text-align:center; }
	#clientItems thead th:nth-child(5), #clientItems tbody td:nth-child(5){ width:14%; text-align:center; }
	#clientItems thead th:nth-child(6), #clientItems tbody td:nth-child(6){ width:10%; text-align:center; }

	/* Inputs centrados y sin recortes en las tablas del modal */
	#itemsTabla tbody td, #servTabla tbody td, #clientItems tbody td{ white-space:normal; overflow:visible; text-overflow:clip; }
	#itemsTabla tbody td input,
	#servTabla tbody td input,
	#clientItems tbody td input{ text-align:center; padding:2px 4px; box-sizing:border-box; min-width:0; }

	/* Inputs de "A pagar" con ancho justo para 8 dígitos */
	#itemsTabla tbody td:nth-child(4) input,
	#servTabla tbody td:nth-child(4) input{
		width:9.5ch; max-width:100%; font-variant-numeric:tabular-nums;
	}

	/* Modal: más estrecho, con paddings reducidos */
	.budget-modal__dialog{ width:95%; margin:4vh auto; padding:14px; }
	.budget-modal__close{ top:8px; right:10px; }

	/* Formularios: 1 columna */
	.cliente-form .grid-2{ grid-template-columns:1fr; }

	/* Pickers: columna y controles fluidos */
	.picker{ flex-direction:column; align-items:stretch; }
	.budget-modal .picker label{ flex:1 1 auto; min-width:0; width:100%; }
	.budget-modal .picker input{ min-width:0; width:100%; }
	.budget-modal .picker button{ width:100%; }
	#matPicker{ min-width:0; }

	/* Grillas de totales y subtotales más legibles */
	.totales, .subtotales{ grid-template-columns:1fr 1fr; }

	/* Acciones apiladas y botones full-width */
	.acciones{ flex-direction:column; align-items:stretch; }
	.acciones .grow{ display:none; }
	.acciones .btn{ width:100%; }

	/* Botones Crear visibles y clickeables al final del modal */
	.acciones #crearPresupuesto,
	.acciones #cCrearPresupuesto{
		display:block; width:100%; min-height:44px; position:relative; z-index:3;
	}
	/* Espacio inferior seguro para que no quede tapado por UI móvil */
	.budget-modal__dialog{ padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom:80px; }
	/* Un poco de relleno en el bloque de acciones para permitir el último scroll */
	.acciones{ padding-bottom:10px; }
	.acciones:last-child{ margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

	/* Asegurar visibilidad del botón Agregar Servicio en el modal */
	#addServicioBtn{
		display:block; width:100%; min-height:44px; position:relative; z-index:3;
	}

	/* Asegurar visibilidad del botón Agregar (modal cliente) en móviles */
	#cAddItem{
		display:block; width:100%; min-height:44px; position:relative; z-index:3;
	}
	/* Evitar superposición de sugerencias (si existieran) sobre el botón en el modal cliente */
	#clientBudgetModal .suggestions{ position:relative; z-index:1; }
	/* Evitar superposición de sugerencias sobre el botón */
	#srvSuggestions{ position:relative; z-index:1; }
}

/* Responsive: móviles pequeños (<=480px) */
@media (max-width: 480px){
	.presupuesto-container h1{ font-size:20px; }

	/* Tabla compacta sin scroll y tipografía reducida */
	.tabla-inventario{ min-width:0; }
	.tabla-inventario thead th, .tabla-inventario tbody td{ padding:3px 2px; line-height:1.1; }
	.tabla-inventario thead th{ font-size:9.5px; }
	.tabla-inventario tbody td{ font-size:9.5px; }
	/* Ajuste fino de anchos en móviles pequeños */
	.tabla-inventario thead th:nth-child(1),
	.tabla-inventario tbody td:nth-child(1){ width:4%; }
	.tabla-inventario thead th:nth-child(2),
	.tabla-inventario tbody td:nth-child(2){ width:18%; }
	.tabla-inventario thead th:nth-child(3),
	.tabla-inventario tbody td:nth-child(3){ width:19%; }
	.tabla-inventario thead th:nth-child(4),
	.tabla-inventario tbody td:nth-child(4){ width:13%; }
	.tabla-inventario thead th:nth-child(5),
	.tabla-inventario tbody td:nth-child(5){ width:8%; }
	.tabla-inventario thead th:nth-child(6),
	.tabla-inventario tbody td:nth-child(6){ width:18%; }
	.tabla-inventario thead th:nth-child(7),
	.tabla-inventario tbody td:nth-child(7){ width:8%; }
	.tabla-inventario thead th:nth-child(8),
	.tabla-inventario tbody td:nth-child(8){ width:12%; }
	/* Columnas numéricas aún más compactas */
	.tabla-inventario tbody td:nth-child(3),
	.tabla-inventario tbody td:nth-child(4),
	.tabla-inventario tbody td:nth-child(5),
	.tabla-inventario tbody td:nth-child(6),
	.tabla-inventario tbody td:nth-child(7),
	.tabla-inventario tbody td:nth-child(8){ font-size:9.25px; text-align:center; }

	/* Inputs aún más compactos en móviles pequeños para col 5 y 7 */
	.tabla-inventario tbody td:nth-child(5) input,
	.tabla-inventario tbody td:nth-child(7) input{
		padding:1px 3px; font-size:8.75px; line-height:1.05; border-radius:6px; text-align:center;
	}

	/* Modal a pantalla completa tipo app con viewport dinámico y scroll suave */
	.budget-modal__dialog{
		margin:0; border-radius:0; max-width:none; width:100%;
		height:100vh; /* fallback */
		height:100dvh; /* usa viewport dinámico para evitar cortes bajo barras */
		max-height:none; overflow:auto; -webkit-overflow-scrolling:touch; scroll-padding-bottom:96px;
	}
	.budget-modal__close{ font-size:28px; }

	/* Totales en una columna para evitar zoom lateral */
	.totales, .subtotales{ grid-template-columns:1fr; }

	/* Entradas de medidas más compactas */
	.medidas input{ width:100px; }

	/* Botón Agregar Servicio visible y clickeable también en móviles pequeños */
	#addServicioBtn{ min-height:44px; }

	/* Botones Crear con altura adecuada en móviles pequeños */
	.acciones #crearPresupuesto,
	.acciones #cCrearPresupuesto{ min-height:48px; }
	/* Más espacio inferior del modal y del bloque de acciones en pantallas muy bajas */
	.budget-modal__dialog{ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
	.acciones{ padding-bottom:12px; }
	.acciones:last-child{ margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

	/* Botón Agregar (modal cliente) visible y clickeable en móviles pequeños */
	#cAddItem{ min-height:44px; }

	/* ===== Modal: tablas internas en móviles pequeños ===== */
	#itemsTabla thead th, #itemsTabla tbody td,
	#servTabla thead th, #servTabla tbody td,
	#clientItems thead th, #clientItems tbody td{ padding:3px 2px; }

	/* Mantener los mismos anchos que en <=768px para consistencia */
	#itemsTabla thead th:nth-child(1), #itemsTabla tbody td:nth-child(1){ width:40%; }
	#itemsTabla thead th:nth-child(2), #itemsTabla tbody td:nth-child(2){ width:28%; }
	#itemsTabla thead th:nth-child(3), #itemsTabla tbody td:nth-child(3){ width:12%; }
	#itemsTabla thead th:nth-child(4), #itemsTabla tbody td:nth-child(4){ width:12%; }
	#itemsTabla thead th:nth-child(5), #itemsTabla tbody td:nth-child(5){ width:8%; }

	#servTabla thead th:nth-child(1), #servTabla tbody td:nth-child(1){ width:46%; }
	#servTabla thead th:nth-child(2), #servTabla tbody td:nth-child(2){ width:18%; }
	#servTabla thead th:nth-child(3), #servTabla tbody td:nth-child(3){ width:16%; }
	#servTabla thead th:nth-child(4), #servTabla tbody td:nth-child(4){ width:12%; }
	#servTabla thead th:nth-child(5), #servTabla tbody td:nth-child(5){ width:8%; }

	/* Inputs de "A pagar" con ancho justo también en móviles pequeños */
	#itemsTabla tbody td:nth-child(4) input,
	#servTabla tbody td:nth-child(4) input{
		width:9ch; max-width:100%; font-variant-numeric:tabular-nums;
	}

	#clientItems thead th:nth-child(1), #clientItems tbody td:nth-child(1){ width:6%; }
	#clientItems thead th:nth-child(2), #clientItems tbody td:nth-child(2){ width:42%; }
	#clientItems thead th:nth-child(3), #clientItems tbody td:nth-child(3){ width:14%; }
	#clientItems thead th:nth-child(4), #clientItems tbody td:nth-child(4){ width:14%; }
	#clientItems thead th:nth-child(5), #clientItems tbody td:nth-child(5){ width:14%; }
	#clientItems thead th:nth-child(6), #clientItems tbody td:nth-child(6){ width:10%; }

	/* Inputs centrados y sin recortes también en móviles pequeños */
	#itemsTabla tbody td, #servTabla tbody td, #clientItems tbody td{ white-space:normal; overflow:visible; text-overflow:clip; }
	#itemsTabla tbody td input,
	#servTabla tbody td input,
	#clientItems tbody td input{ text-align:center; padding:1px 3px; box-sizing:border-box; min-width:0; }
}