/* Las reglas del modelo viejo (.contenedor 10000px, .ventana flotante,
   cabezal interno, esquinas de resize) se eliminaron: el layout de
   .ventana/.ventana_contenedor vive ahora en css/app_topbar.css
   (#app_shell .ventana). Aca quedan solo los helpers internos de las
   ventanas (v_cont*, v_subVentana*). */

/*=================================================================================================================*/
/*=================================================================================================================*/
/*=================================================================================================================*/
/*Facilitador de orden*/

.v_cont, .v_cont_span_input
{
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.v_cont_columnas, .v_cont_span_input
{
	display: flex;
	flex-direction: column;
}

.v_cont_centrado
{
	display: flex;
	justify-content: center;
	align-items: center;
}


.v_cont_left_centrado
{
	display: flex;
	justify-content: left;
	align-items: center;
}

.v_cont_right_centrado
{
	display: flex;
	justify-content: right;
	align-items: center;
}


.v_cont_span_input
{
	justify-content: center;
}

.v_cont_span_input > span
{
	margin-bottom: 8px;
	font-weight: 600;
}

/*==================================================================*/
/* SubVentana */

.v_subVentana_capaOscura
{
	display: flex;
	position: absolute;
	z-index: 2;
	top:0;
	left: 0;
	background-color: #000;
	opacity: 0.3;
	width: 100%;
	height: 100%;
}

.v_subVentana
{
	display: flex;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color: #cbd1b8;

	border: 1px solid #929292;
	border-radius: 5px;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	box-sizing: border-box;
	padding: 0 3%;


	width: 80%;
	height: 90%;
	z-index: 3;
	overflow: hidden;
}

/* ===== Estructura modo-app de subVentana (portada de gussi, ago 2026) =====
   Se usa con .v_subVentana_pantalla dentro de una .v_subVentana: la pantalla
   llena el padding-box y pinta su propio fondo, así que el estilo viejo de
   .v_subVentana (fondo/padding) no la afecta. */

.v_subVentana_pantalla
{
	position: absolute;
	display: flex;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background-color: #eef2f5;
}

.v_subVentana_header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 22px;
	background: #f1f5f8;
	flex-shrink: 0;
}

.v_subVentana_titulo_text
{
	font-size: 15px;
	font-weight: 700;
	color: #2c3e50;
}

.v_subVentana_close
{
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	color: #5b7d8f;
	font-size: 12px;
	transition: background .15s, color .15s, transform .1s;
}
.v_subVentana_close:hover { background: #e2e9ee; color: #2c3e50; }
.v_subVentana_close:active { transform: scale(.94); }

.v_subVentana_separador
{
	height: 1px;
	background: #e2e9ee;
	margin: 0 22px;
	flex-shrink: 0;
}

.v_subVentana_body
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: auto;
	box-sizing: border-box;
	width: 100%;
	padding: 18px 22px;
	gap: 14px;
}

.v_subVentana_pie
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 22px;
	background: #f6f8fa;
	border-top: 1px solid #e2e9ee;
	flex-shrink: 0;
}

/*=============================================================================================*/

.v_input_text_titulo
{
	width: 80%;
	height: max-content;

	flex-direction: column;
}

.v_input_text_titulo > span
{
	margin-bottom: 5px;
}

.v_input_text_titulo > input, select
{
	width: 100%;
}
/*=============================================================================================*/

.v_subVentana_cabezal
{
	display: flex;
	height: 40px;
	min-height: 40px;
	align-items: center;
	margin: 5px 5px;
	padding: 0px 10px;
	width: calc(100% - 10px);
	box-sizing: border-box;
	justify-content: space-between;
	border-bottom: 1px solid #777777 !important;
}

.v_subVentana_cabezal > span
{
	font-size: 20px;
}

.v_subVentana_cabezal > span:nth-child(1)
{
	font-weight: bold;
}

.v_subVentana_cabezal > span:nth-child(2)
{
	cursor: pointer;
}

.v_subVentana_cabezal > span:nth-child(2):hover
{
	opacity: 0.7;
}

.v_subVentana_cabezal > span:nth-child(2):active
{
	transform: scale(0.95);
}

/*=============================================================================================*/
/*=============================================================================================*/
/* Kit de formulario (sep 2026). Un solo lenguaje para todas las ventanas: tarjetas blancas sobre el
   fondo de la ventana, titulo de tarjeta, campos con la etiqueta ARRIBA (12px, semibold, gris) y el
   control global de todo.css debajo, valores de solo lectura como "dato", y la fila de acciones a la
   derecha con la principal (.myButton) al final. Nacio en la 18 (ven18_form / ven18_card...) y se
   promovio aca cuando ya lo copiaban la 13, la 15, la 16 y la 17. */

.v_form { display: flex; flex-direction: column; gap: 16px; max-width: 680px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.v_form_ancha { max-width: 900px; }
.v_form_llena { max-width: none; margin: 0; }   /* paneles master-detail: ocupa el ancho del panel */

.v_card
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid #dbe2e8;
	border-radius: 8px;
	padding: 14px 18px 16px 18px;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(30, 50, 70, 0.05);
}

.v_card_titulo
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: bold;
	font-size: 14px;
	color: #2a2a2a;
	padding-bottom: 9px;
	border-bottom: 1px solid #edf1f5;
}

.v_card p { margin: 0; font-size: 13px; color: #667; line-height: 1.5; }

.v_campo { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.v_campo > label, .v_label { font-size: 12px; font-weight: 600; color: #55606a; }
.v_campo > input, .v_campo > select, .v_campo > textarea { width: 100%; box-sizing: border-box; }
.v_campo > textarea { height: auto; min-height: 70px; resize: vertical; margin: 0; font-family: inherit; }
/* select multiple: el atributo size fija cuantas opciones se ven; el alto global de 30px lo cortaria */
.v_campo > select[multiple] { height: auto; padding: 4px; }
.v_campo > select[multiple] option { padding: 4px 6px; }
.v_campo_fijo { flex: 0 0 120px; }   /* campos cortos (paginas, prioridad) */

.v_fila { display: flex; gap: 14px; }
.v_col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* en una columna los campos van a su alto natural: sin esto flex:1 los estira para repartir el alto
   de la fila (p. ej. al lado de una lista de locales) y quedan separados de mas */
.v_col > .v_campo { flex: 0 0 auto; }

/* valor de solo lectura: texto sobre gris suave, no parece un input */
.v_dato
{
	font-size: 13px;
	color: #2a2a2a;
	background: #f2f5f8;
	border-radius: 5px;
	padding: 6px 9px;
	min-height: 17px;
	word-break: break-all;
}
/* un input readonly dentro de un campo se ve como un dato (mismo gris, sin sombra ni borde) */
.v_campo > input[readonly]
{
	background: #f2f5f8;
	border-color: #f2f5f8;
	box-shadow: none;
	color: #2a2a2a;
	font-size: 13px;
	cursor: default;
}

.v_form_acciones { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding-top: 2px; }

/* cabecera de un formulario: titulo y, opcionalmente, una accion a la derecha (Volver) */
.v_form_header { display: flex; align-items: center; gap: 10px; }
.v_form_titulo { font-weight: bold; font-size: 16px; }

/* aviso previo a un flujo */
.v_nota { background: #fdf7e2; border: 1px solid #efe2ae; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #5f5122; line-height: 1.6; }

/* checkbox con su etiqueta al lado; varios en una fila que envuelve; lista con scroll (locales) */
.v_check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.v_check input[type="checkbox"] { flex-shrink: 0; }
.v_checks_fila { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.v_check_lista
{
	max-height: 150px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid #dbe2e8;
	border-radius: 5px;
	padding: 8px 10px;
	font-size: 13px;
}

/* Chip de estado (pildora de color). Un solo estilo para todas las ventanas: listas y fichas de
   16/17/19. Variantes por significado, no por ventana. */
.v_chip { display: inline-block; font-size: 11px; font-weight: bold; color: #fff; padding: 2px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.5; }
.v_chip_ok       { background-color: #4caf50; }   /* publicado / al dia */
.v_chip_pausado  { background-color: #e0a800; }   /* pausado */
.v_chip_error    { background-color: #d9534f; }   /* con error */
.v_chip_subiendo { background-color: #4a90c2; }   /* cambios en camino */
.v_chip_preventa { background-color: #8a63b8; }   /* preventa / consulte: se vende sin stock */
.v_chip_oscuro   { background-color: #5b7d8f; }   /* no se sube (marcado a mano) */
.v_chip_gris     { background-color: #9aa5ae; }   /* no publicado / inactivo */