/* Estudio ERP: panel. Colores tomados del logotipo: azul marino, azul vivo y naranja.
   Menú claro para que el logotipo luzca, botones grandes y pocas decisiones por pantalla. */

:root {
	--tinta: #061E3F;
	--tinta-2: #4A5368;
	--tinta-3: #6F7889;
	--papel: #F3F4F7;
	--blanco: #FFFFFF;
	--linea: #DDE1E9;
	--linea-fuerte: #C5CBD8;
	--acento: #0060F4;
	--naranja: #FD8B10;
	--verde: #12805C;
	--rojo: #C8443B;
	--sobre-acento: #FFFFFF;
	--peligro: #B93A32;

	--e-prospecto: #0060F4;
	--e-propuesta: #FD8B10;
	--e-activo: #17805A;
	--e-inactivo: #AEB6C5;
	--e-perdido: #C8443B;

	--titulos: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--texto: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--radio: 6px;
	--radio-panel: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.eerp {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 16px;
	line-height: 1.5;
}

.eerp h1, .eerp h2, .eerp h3 { font-family: var(--titulos); margin: 0; line-height: 1.15; }
.eerp h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.eerp h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.eerp h3 { font-size: 14px; font-weight: 700; }
.eerp p { margin: 0 0 12px; }
.eerp a { color: var(--acento); }
.eerp small { font-size: 13px; color: var(--tinta-3); }
.eerp :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.icono { flex: none; vertical-align: -3px; }
.tenue { color: var(--tinta-3); }
.oculto-visual, .trampa {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar { position: absolute; left: -999px; top: 8px; background: var(--blanco); padding: 8px 12px; border-radius: var(--radio); z-index: 50; }
.saltar:focus { left: 8px; }

/* ---------- Estructura ---------- */

.marco { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.cuerpo { min-width: 0; }

.lateral {
	background: var(--blanco);
	border-right: 1px solid var(--linea);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 18px 14px 14px;
	overflow-y: auto;
}
.marca { display: block; padding: 2px 10px 14px; }
.marca img { display: block; width: 100%; max-width: 168px; max-height: 128px; object-fit: contain; object-position: left center; }

.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.eerp .menu-grupo { margin: 10px 0 2px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.menu-item {
	display: flex; align-items: center; gap: 12px;
	min-height: 38px; padding: 6px 12px; border-radius: var(--radio);
	text-decoration: none; font-weight: 600;
}
.eerp .menu-item { color: var(--tinta); }
.menu-item .icono { color: var(--tinta-3); }
.menu-item:hover { background: var(--papel); }
.menu-item.activo { background: var(--acento); }
.eerp .menu-item.activo, .menu-item.activo .icono { color: var(--sobre-acento); }

.lateral-pie { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 12px; }
.cuenta-enlace { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; padding: 4px; border-radius: var(--radio); }
.eerp .cuenta-enlace { color: var(--tinta); }
.cuenta-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cuenta-texto strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
	flex: none; width: 36px; height: 36px; border-radius: 50%;
	background: var(--tinta);
	display: grid; place-items: center; font-weight: 600; font-size: 13px; text-decoration: none;
}
.eerp .avatar { color: #fff; }
.salir { padding: 10px; border-radius: var(--radio); display: grid; place-items: center; }
.eerp .salir { color: var(--tinta-3); }
.salir:hover { background: var(--papel); }

.barra-movil, .barra-inferior { display: none; }

.principal { padding: 32px 40px 64px; max-width: 1240px; width: 100%; }

.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.eerp .apoyo { margin: 6px 0 0; color: var(--tinta-2); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.regreso { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; text-decoration: none; font-weight: 500; }
.eerp .regreso { color: var(--tinta-2); }
.seccion { margin-bottom: 32px; }
.seccion > h2, .columna-ancha > h2 { margin-bottom: 12px; }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.dos-iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.columna-angosta { display: grid; gap: 16px; }

.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-panel); padding: 20px; }
.panel > h2 { margin-bottom: 12px; }
.panel > h3 { margin: 16px 0 6px; }
.eerp .pie-panel { margin: 16px 0 0; font-size: 13px; }

/* ---------- Botones ---------- */

.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 8px 16px;
	border: 1px solid transparent; border-radius: var(--radio);
	font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton-principal { background: var(--acento); }
.eerp .boton-principal { color: var(--sobre-acento); }
.boton-principal:hover { filter: brightness(0.92); }
.boton-suave { background: var(--blanco); border-color: var(--linea-fuerte); }
.eerp .boton-suave { color: var(--tinta); }
.boton-suave:hover { border-color: var(--tinta-3); }
.boton-peligro { background: var(--blanco); border-color: #E3B5B1; }
.eerp .boton-peligro { color: var(--peligro); }
.boton-peligro:hover { background: #FBEDEC; }
.boton-chico { min-height: 36px; padding: 4px 12px; font-size: 14px; }
.boton-grande { min-height: 52px; padding: 10px 22px; font-size: 17px; }
.boton-verde { background: var(--verde); }
.boton-rojo { background: var(--rojo); }
.eerp .boton-verde, .eerp .boton-rojo { color: #fff; }
.boton-ancho { width: 100%; }
.boton-icono {
	display: inline-grid; place-items: center; width: 36px; height: 36px;
	border: 0; background: none; border-radius: var(--radio); cursor: pointer;
}
.eerp .boton-icono { color: var(--tinta-3); }
.boton-icono:hover { background: var(--papel); }
.eerp .boton-icono:hover { color: var(--tinta); }
.enlace-quieto { font-weight: 500; }
.en-linea { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* ---------- Formularios ---------- */

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span, .campo > label { font-weight: 600; font-size: 13px; color: var(--tinta-2); }
.eerp input[type="text"], .eerp input[type="email"], .eerp input[type="tel"], .eerp input[type="url"],
.eerp input[type="password"], .eerp input[type="search"], .eerp input[type="number"], .eerp input[type="date"],
.eerp input[type="datetime-local"], .eerp select, .eerp textarea {
	width: 100%; min-height: 44px; padding: 8px 12px;
	border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
	background: var(--blanco); color: var(--tinta);
	font: inherit; font-size: 16px;
}
.eerp textarea { resize: vertical; line-height: 1.45; }
.eerp input[type="color"] { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco); }
.eerp input[type="file"] { font: inherit; max-width: 100%; }
.eerp input:focus-visible, .eerp select:focus-visible, .eerp textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
.eerp ::placeholder { color: #98A0B0; }

.casilla { display: flex; align-items: flex-start; gap: 8px; }
.casilla input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--acento); }

.pila { display: grid; gap: 14px; }
.formulario { display: grid; gap: 16px; max-width: 880px; }
.formulario-angosto { max-width: 640px; }
.pila-paneles { display: grid; gap: 16px; }
.pila-paneles .panel { display: grid; gap: 12px; justify-items: start; }
.pila-paneles .panel > .campo, .pila-paneles .panel > .rejilla { width: 100%; }
.pila-paneles .panel > h2 { margin: 0; }
.acciones-cuenta { display: grid; gap: 16px; margin-top: 16px; }

.bloque { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-panel); padding: 20px; min-width: 0; }
.bloque legend { font-family: var(--titulos); font-weight: 700; font-size: 16px; padding: 0 6px; margin-left: -6px; }
.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rejilla > .campo { grid-column: span 1; }
.rejilla > .campo-doble { grid-column: span 2; }
.rejilla > .campo-completo { grid-column: 1 / -1; }
.formulario-angosto .rejilla, .pila-paneles .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.barra-guardar { display: flex; gap: 8px; flex-wrap: wrap; }

.filtros { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros .campo { min-width: 170px; }
.filtros .campo-crece { flex: 1 1 260px; }
.filtros .enlace-quieto { padding-bottom: 9px; }

.roles { display: grid; gap: 8px; }
.rol { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; }
.rol input { margin-top: 3px; accent-color: var(--acento); }
.rol span { display: flex; flex-direction: column; }
.rol:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }

.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion span { display: block; padding: 6px 12px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-weight: 500; font-size: 14px; }
.opcion input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

.logo-actual { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-actual img { max-height: 84px; max-width: 200px; background: var(--blanco); border: 1px solid var(--linea); padding: 8px; border-radius: var(--radio); }

/* ---------- Avisos ---------- */

.aviso { padding: 10px 14px; border-radius: var(--radio); border: 1px solid; font-weight: 500; margin: 0 0 16px; }
.aviso-ok { background: #E3F4EC; border-color: #A9DCC4; color: #0F5A3F; }
.aviso-error { background: #FBEDEC; border-color: #E9BDB9; color: #8E2A23; }
.vacio { background: var(--blanco); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-panel); padding: 40px 24px; text-align: center; }
.vacio p { max-width: 46ch; margin: 0 auto 16px; color: var(--tinta-2); }
.eerp .vacio-linea { color: var(--tinta-2); padding: 16px 0; margin: 0; max-width: 60ch; }

/* ---------- Etapas y fechas ---------- */

.etapa { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.etapa-prospecto { background: #E3EFFB; color: #174E86; }
.etapa-propuesta { background: #FBF0D2; color: #6E4B00; }
.etapa-activo { background: #DDF2E9; color: #0F5A3F; }
.etapa-inactivo { background: #E9ECF2; color: #4A5368; }
.etapa-perdido { background: #FADFDD; color: #8E2A23; }

.cuando { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cuando-vencido { color: #A9322A; }
.cuando-hoy { color: #8A5A00; }
.cuando-proximo { color: var(--tinta-2); }
.cuando-hecho { color: #0F6B4A; }

/* ---------- Tira de etapas (inicio) ---------- */

.tira { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: var(--radio-panel); overflow: hidden; }
.tira-bloque { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 104px; padding: 14px 16px; text-decoration: none; }
.tira-bloque:hover { filter: brightness(0.94); }
.tira-bloque:focus-visible { outline-offset: -4px; outline-color: #fff; }
.tira-numero { font-family: var(--titulos); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.tira-nombre { font-weight: 600; font-size: 14px; line-height: 1.2; }
.t-prospecto { background: var(--e-prospecto); }
.t-propuesta { background: var(--e-propuesta); }
.t-activo { background: var(--e-activo); }
.t-inactivo { background: var(--e-inactivo); }
.t-perdido { background: var(--e-perdido); }
.eerp .tira-bloque.t-prospecto, .eerp .tira-bloque.t-activo, .eerp .tira-bloque.t-perdido { color: #fff; }
.eerp .tira-bloque.t-propuesta, .eerp .tira-bloque.t-inactivo { color: var(--tinta); }

/* ---------- Pendientes ---------- */

.titulo-con-filtro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.conmutador { display: inline-flex; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 2px; background: var(--blanco); }
.conmutador a { padding: 4px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13px; }
.eerp .conmutador a { color: var(--tinta-2); }
.conmutador a.activo { background: var(--tinta); }
.eerp .conmutador a.activo { color: #fff; }

.eerp .grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; }
.grupo-titulo span { font-family: var(--texto); font-weight: 600; font-size: 12px; background: var(--linea); border-radius: 999px; padding: 1px 8px; }
.eerp .grupo-vencido { color: #A9322A; }

.pendientes, .lista-simple, .archivos, .linea-tiempo { list-style: none; margin: 0; padding: 0; }
.pendientes { display: grid; gap: 8px; }
.pendiente {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--linea-fuerte);
	border-radius: var(--radio); padding: 12px 14px;
}
.pendiente-vencido { border-left-color: var(--e-perdido); }
.pendiente-hoy { border-left-color: var(--e-propuesta); }
.pendiente-texto { display: flex; flex-direction: column; min-width: 0; }
.pendiente-texto strong { font-weight: 600; }

.lista-simple li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); }
.lista-simple li:first-child { border-top: 0; padding-top: 0; }
.lista-simple a { font-weight: 500; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.lista-actividad li { flex-direction: column; align-items: flex-start; gap: 2px; }
.lista-actividad strong { font-weight: 600; }
.lista-actividad + .enlace-quieto { display: inline-block; margin-top: 12px; }

/* ---------- Tablas ---------- */

.tabla-caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-panel); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 13px; font-weight: 600; color: var(--tinta-2); padding: 10px 16px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 12px 16px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:first-child td { border-top: 0; }
.tabla td small { display: block; }
.fila-titulo { font-weight: 600; text-decoration: none; }
.eerp span.fila-titulo { color: var(--tinta); }
.paginas { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; color: var(--tinta-2); }

/* ---------- Ficha del cliente ---------- */

.ficha-estado { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: -8px 0 28px; }
.eerp select.select-chico { min-height: 32px; padding: 4px 8px; font-size: 14px; width: auto; }

.formulario-seg { display: grid; gap: 14px; margin-bottom: 24px; justify-items: start; }
.formulario-seg > .campo, .formulario-seg > .rejilla { width: 100%; }

.linea-tiempo { border-left: 2px solid var(--linea-fuerte); margin-left: 6px; display: grid; gap: 4px; }
.evento { position: relative; padding: 2px 44px 18px 22px; }
.evento::before {
	content: ""; position: absolute; left: -7px; top: 7px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--papel); border: 2px solid var(--tinta);
}
.evento-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.evento-tipo { font-weight: 700; font-family: var(--titulos); }
.evento-cabeza .tenue { font-size: 13px; }
.eerp .evento-nota { margin: 4px 0 0; max-width: 68ch; overflow-wrap: anywhere; }
.evento-proxima { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; padding: 8px 12px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.evento-borrar { position: absolute; right: 0; top: -4px; margin: 0; }

.datos { margin: 0; display: grid; gap: 10px; }
.datos div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.datos dt { color: var(--tinta-3); font-size: 13px; padding-top: 1px; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos-acceso div { grid-template-columns: 160px minmax(0, 1fr); }
.clave { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; background: var(--papel); padding: 4px 10px; border-radius: var(--radio); }
.datos-acceso + .tenue { margin: 16px 0; }
.eerp .notas { margin: 0; overflow-wrap: anywhere; }

.archivos { display: grid; gap: 4px; margin-bottom: 16px; }
.archivo-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.archivo-ext {
	flex: none; width: 40px; height: 40px; border-radius: var(--radio);
	background: var(--papel); border: 1px solid var(--linea);
	display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--tinta-2);
}
.archivo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.archivo-texto a { font-weight: 500; overflow-wrap: anywhere; }
.subir { display: grid; gap: 10px; justify-items: start; border-top: 1px solid var(--linea); padding-top: 14px; }
.subir .campo { width: 100%; }
.zona-borrar { margin: 0; }

/* ---------- Acceso ---------- */

body.eerp-simple { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--tinta); }
.acceso-cuerpo { border-top: 6px solid var(--naranja); }
.tarjeta-acceso { width: 100%; max-width: 400px; background: var(--blanco); border-radius: var(--radio-panel); overflow: hidden; }
.acceso-cuerpo { padding: 32px 28px 28px; }
.acceso-cuerpo h1 { font-size: 26px; margin-bottom: 20px; }
.acceso-logo { max-height: 150px; max-width: 200px; display: block; margin: 0 auto 20px; }
.eerp .acceso-estudio { font-family: var(--titulos); font-weight: 700; font-size: 16px; color: var(--tinta-2); margin: 0 0 20px; }
.eerp .nota { margin: 20px 0 0; font-size: 13px; color: var(--tinta-3); }

/* ---------- Inicio: accesos directos y cifras ---------- */

.atajos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.atajo {
	display: flex; flex-direction: column; gap: 2px; min-height: 116px;
	padding: 16px; border-radius: var(--radio-panel); text-decoration: none;
}
.eerp .atajo, .eerp .atajo small { color: #fff; }
.atajo .icono { width: 28px; height: 28px; margin-bottom: auto; }
.atajo strong { font-family: var(--titulos); font-size: 19px; line-height: 1.15; }
.atajo small { opacity: 0.92; }
.atajo:hover { filter: brightness(0.93); }
.atajo:focus-visible { outline-offset: 3px; }
.atajo-venta { background: var(--acento); }
.eerp .atajo-venta, .eerp .atajo-venta small { color: var(--sobre-acento); }
.atajo-ingreso { background: var(--verde); }
.atajo-egreso { background: var(--rojo); }
.atajo-cliente { background: var(--tinta); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 28px; }
.cifra {
	display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
	background: var(--blanco); border: 1px solid var(--linea); border-left: 5px solid var(--linea-fuerte);
	border-radius: var(--radio); text-decoration: none;
}
.eerp .cifra { color: var(--tinta); }
.cifra span { font-size: 14px; color: var(--tinta-2); font-weight: 500; }
.cifra strong { font-family: var(--titulos); font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cifras-grandes .cifra strong { font-size: 30px; }
.cifra-verde { border-left-color: var(--verde); }
.cifra-roja { border-left-color: var(--rojo); }
.cifra-azul { border-left-color: var(--acento); }
a.cifra:hover { border-color: var(--tinta-3); }

.trabajos .pendiente small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.pendiente-proximo { border-left-color: var(--acento); }
.debe { color: #A9322A; font-weight: 600; }

.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mosaico-item {
	display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; min-height: 96px;
	background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-panel);
	text-decoration: none; font-weight: 600;
}
.eerp .mosaico-item { color: var(--tinta); }
.mosaico-item .icono { width: 26px; height: 26px; color: var(--acento); }
.mosaico-item:hover { border-color: var(--acento); }

/* ---------- Ventas ---------- */

.derecha { text-align: right; }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pestanas a { padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--blanco); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.eerp .pestanas a { color: var(--tinta-2); }
.pestanas a.activo { background: var(--tinta); border-color: var(--tinta); }
.eerp .pestanas a.activo { color: #fff; }

.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.estado-pendiente { background: #E9ECF2; color: #3A4458; }
.estado-produccion { background: #FFEBD2; color: #7A4300; }
.estado-listo { background: #DCE9FF; color: #063E9E; }
.estado-entregado { background: #DDF2E9; color: #0F5A3F; }
.estado-cancelada { background: #FADFDD; color: #8E2A23; }

.venta-form { display: grid; gap: 20px; max-width: 980px; }
.paso { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-panel); padding: 20px; display: grid; gap: 16px; justify-items: start; }
.paso > * { width: 100%; }
.paso > .boton { width: auto; }
.paso > h2 { display: flex; align-items: center; gap: 10px; }
.paso-numero { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--naranja); color: var(--tinta); display: grid; place-items: center; font-size: 16px; }

.productos-rapidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.producto-rapido {
	display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 60px;
	padding: 10px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
	background: var(--papel); color: var(--tinta); font: inherit; cursor: pointer;
}
.producto-rapido strong { font-weight: 600; line-height: 1.2; }
.producto-rapido:hover { border-color: var(--acento); background: #E8F0FE; }

.renglones { display: grid; gap: 10px; }
.renglon { display: grid; grid-template-columns: minmax(0, 1fr) 176px 96px 110px 110px 40px; gap: 8px; align-items: end; }
.renglon.con-medidas { grid-template-columns: minmax(0, 1fr) 176px 78px 78px 78px 110px 110px 40px; }
.renglon [data-medida] { display: none; }
.renglon.con-medidas [data-medida] { display: flex; }
.renglon:not(:first-child) .campo > span, .renglon:not(:first-child) .renglon-importe > span {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.renglon-importe { text-align: right; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.renglon-importe > span { font-weight: 600; font-size: 13px; color: var(--tinta-2); }
.renglon-importe strong { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; font-weight: 600; }
.renglon-quitar { width: 40px; height: 44px; }

.cobro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; }
.cobro-campos { display: grid; gap: 14px; justify-items: start; }
.cobro-campos > .campo { width: 100%; max-width: 320px; }
.totales { margin: 0; display: grid; gap: 8px; background: var(--papel); border-radius: var(--radio); padding: 16px; }
.totales div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.totales dt { color: var(--tinta-2); }
.totales dd { margin: 0; font-weight: 600; }
.totales .totales-total { border-top: 1px solid var(--linea-fuerte); padding-top: 8px; }
.totales .totales-total dt { color: var(--tinta); font-weight: 600; }
.totales .totales-total dd { font-family: var(--titulos); font-size: 28px; line-height: 1.1; }
.panel > .totales { margin-bottom: 16px; }
.barra-fija .boton-principal { min-width: 220px; }

.avance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: -8px 0 28px; }
.avance-paso {
	min-height: 48px; padding: 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
	background: var(--blanco); color: var(--tinta-2); font: inherit; font-weight: 600; cursor: pointer;
}
.avance-paso:hover { border-color: var(--acento); }
.avance-paso.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.datos-venta { margin-top: 20px; }

.eerp .saldo { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radio); font-weight: 500; }
.saldo strong { font-family: var(--titulos); font-size: 22px; display: block; }
.saldo-debe { background: #FFF1DE; color: #6B3B00; }
.saldo-pagada { background: #DDF2E9; color: #0F5A3F; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lista-pagos li > span { display: flex; flex-direction: column; }
.anulado .fila-titulo, .anulado .monto, .anulado > span > strong { text-decoration: line-through; }
.anulado { color: var(--tinta-3); }
.eerp .motivo { color: #A9322A; }

.mini-cancelar > summary { list-style: none; }
.mini-cancelar > summary::-webkit-details-marker { display: none; }
.mini-cancelar[open] > summary { margin-bottom: 10px; }
.mini-cancelar .pila { text-align: left; min-width: 220px; }
.zona-borrar-suelta { margin-top: 16px; }

.desplegable { margin-bottom: 20px; }
.desplegable > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; color: var(--acento); }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable[open] > summary { margin-bottom: 16px; }

/* ---------- Finanzas ---------- */

.meses { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.meses strong { font-family: var(--titulos); font-size: 20px; min-width: 150px; text-align: center; }
.meses-sig .icono { transform: rotate(180deg); }
.campo-monto input { font-family: var(--titulos); font-size: 30px !important; font-weight: 700; min-height: 64px !important; }
.tabla-compacta { margin-top: 12px; }
.tabla-compacta th, .tabla-compacta td { padding: 8px 4px; }

.grafica { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; height: 180px; align-items: end; border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 28px; position: relative; }
.grafica-mes { display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; }
.grafica-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.grafica-barras i { display: block; width: 38%; max-width: 34px; min-height: 2px; border-radius: 3px 3px 0 0; }
.grafica-mes > span { position: absolute; bottom: -24px; font-size: 13px; color: var(--tinta-2); }
.barra-ingreso { background: var(--verde); }
.barra-egreso { background: var(--rojo); background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, 0.35) 5px 7px); }
.eerp .leyenda { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 14px; color: var(--tinta-2); }
.punto { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.punto-ingreso { background: var(--verde); }
.punto-egreso { background: var(--rojo); margin-left: 12px; }

.reparto { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reparto-texto { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.reparto-barra { height: 8px; background: var(--papel); border-radius: 4px; overflow: hidden; }
.reparto-barra i { display: block; height: 100%; min-width: 2px; }

/* ---------- Nota de venta ---------- */

body.eerp-nota { background: var(--papel); padding: 20px 12px 40px; }
.nota-acciones { max-width: 760px; margin: 0 auto 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.nota-hoja { max-width: 760px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--linea); padding: 40px; }
.nota-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 3px solid var(--naranja); padding-bottom: 20px; margin-bottom: 20px; }
.nota-cabeza img { max-height: 110px; max-width: 190px; object-fit: contain; }
.nota-folio { text-align: right; }
.eerp .nota-folio p { margin: 2px 0 0; }
.eerp .nota-numero { font-family: var(--titulos); font-size: 22px; font-weight: 700; color: var(--acento); }
.nota-partes { display: flex; gap: 40px; margin-bottom: 20px; }
.nota-partes h2 { font-size: 13px; color: var(--tinta-3); font-family: var(--texto); margin-bottom: 2px; }
.nota-tabla th, .nota-tabla td { padding: 10px 8px; }
.nota-tabla thead th { border-bottom: 2px solid var(--tinta); }
.nota-totales { max-width: 300px; margin: 20px 0 0 auto; background: none; padding: 0; }
.eerp .nota-notas { margin-top: 24px; }
.nota-pie { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linea); text-align: center; color: var(--tinta-2); font-size: 14px; }
.eerp .nota-pie p { margin: 0 0 4px; }

@media print {
	body.eerp-nota { background: #fff; padding: 0; }
	.nota-hoja { border: 0; padding: 0; max-width: none; }
}

/* ---------- Ventana de mensaje al cliente ---------- */

.ventana { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: var(--radio-panel); padding: 24px; color: var(--tinta); background: var(--blanco); border-top: 6px solid var(--naranja); }
.ventana::backdrop { background: rgba(6, 30, 63, 0.6); }
.ventana h2 { margin-bottom: 16px; }
.ventana .campo { margin-bottom: 16px; }
.ventana textarea { min-height: 170px; }
.eerp .avance-titulo { margin: -8px 0 8px; font-size: 14px; color: var(--tinta-2); }
.avance-titulo + .avance { margin-top: 0; }
.separado { margin-top: 8px; }
.atajos-monto { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Presupuestos y proyectos ---------- */

.estado-pre-pendiente, .estado-pro-activo { background: #DCE9FF; color: #063E9E; }
.estado-pre-aceptado, .estado-pro-terminado { background: #DDF2E9; color: #0F5A3F; }
.estado-pre-rechazado, .estado-pro-cancelado { background: #FADFDD; color: #8E2A23; }
.estado-pre-vencido, .estado-pro-pausa { background: #FFEBD2; color: #7A4300; }

.prioridad { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.prioridad-baja { background: #EEF0F4; color: #4A5368; }
.prioridad-media { background: #E8F0FE; color: #0A45A8; }
.prioridad-alta { background: #FFEBD2; color: #7A4300; border-color: #F5C27F; }
.prioridad-urgente { background: var(--rojo); color: #fff; }
.fila-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }

.barra-avance { display: inline-block; vertical-align: middle; width: 84px; height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra-avance i { display: block; height: 100%; background: var(--acento); }
.barra-avance + small { display: inline; margin-left: 6px; }
.barra-avance-grande { width: min(320px, 50vw); height: 12px; border-radius: 6px; }
.avance-proyecto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -12px 0 28px; }
.avance-proyecto strong { font-family: var(--titulos); font-size: 20px; }

.atajos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.atajo-proyecto { background: var(--naranja); }
.eerp .atajo-proyecto, .eerp .atajo-proyecto small { color: var(--tinta); }

.fase { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-left: 5px solid var(--linea-fuerte); border-radius: var(--radio); padding: 16px; margin-bottom: 12px; }
.fase-en_curso { border-left-color: var(--acento); }
.fase-hecha { border-left-color: var(--verde); }
.fase-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-right: 40px; }
.fase-cabeza h3 { font-size: 17px; }
.fase-estados { display: inline-flex; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 2px; background: var(--blanco); margin: 0; }
.fase-estados button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta-2); cursor: pointer; }
.fase-estados button:hover { background: var(--papel); }
.fase-estados button.activo { background: var(--tinta); color: #fff; }
.fase-hecha .fase-estados button.activo { background: var(--verde); }
.fase-en_curso .fase-estados button.activo { background: var(--acento); color: var(--sobre-acento); }
.fase-borrar { position: absolute; top: 10px; right: 8px; margin: 0; }

.tareas { list-style: none; margin: 12px 0 0; padding: 0; }
.tarea { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); }
.tarea-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tarea-titulo { font-weight: 500; overflow-wrap: anywhere; }
.marca-tarea { width: 28px; height: 28px; border: 2px solid var(--linea-fuerte); border-radius: 7px; background: var(--blanco); display: grid; place-items: center; cursor: pointer; color: #fff; padding: 0; margin-top: 2px; }
.marca-tarea:hover { border-color: var(--verde); }
.tarea-hecha .marca-tarea { background: var(--verde); border-color: var(--verde); }
.tarea-hecha .tarea-titulo { text-decoration: line-through; color: var(--tinta-3); }

.agregar-tarea { margin-top: 10px; border-top: 1px solid var(--linea); padding-top: 10px; }
.agregar-tarea > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acento); min-height: 32px; }
.agregar-tarea > summary::-webkit-details-marker { display: none; }
.rejilla-tarea { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; margin-top: 10px; align-items: end; }
.campo-boton { justify-content: flex-end; }
.nueva-etapa { margin-top: 16px; }

/* ---------- Tableta ---------- */

@media (max-width: 1080px) {
	.principal { padding: 28px 24px 56px; }
	.atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.renglon, .renglon.con-medidas { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio-panel); }
	.renglon .campo > span, .renglon-importe > span, .renglon:not(:first-child) .campo > span, .renglon:not(:first-child) .renglon-importe > span { position: static; width: auto; height: auto; clip: auto; }
	.renglon-desc { grid-column: 1 / -1; }
	.renglon-unidad { grid-column: span 2; }
	.dos-columnas { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Celular: logotipo arriba, secciones al alcance del pulgar ---------- */

@media (max-width: 820px) {
	.marco { display: block; }
	.lateral { display: none; }
	.barra-movil {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		background: var(--blanco); border-bottom: 1px solid var(--linea);
		padding: 8px 16px; position: sticky; top: 0; z-index: 30;
	}
	.barra-movil-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulos); font-weight: 700; font-size: 18px; min-width: 0; }
	.eerp .barra-movil-marca { color: var(--tinta); }
	.barra-movil-marca img { height: 36px; width: auto; max-width: 96px; object-fit: contain; }
	.barra-inferior {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		background: var(--blanco); border-top: 1px solid var(--linea);
		padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
	}
	.barra-item {
		flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
		padding: 7px 2px; border-radius: var(--radio); text-decoration: none; font-size: 11px; font-weight: 600;
	}
	.eerp .barra-item { color: var(--tinta-2); }
	.barra-item .icono { width: 22px; height: 22px; }
	.eerp .barra-item.activo { color: var(--acento); }
	.barra-item.activo { background: #E8F0FE; }
	.principal { padding: 20px 16px 104px; }
	.eerp h1 { font-size: 25px; }
	.encabezado { align-items: flex-start; }

	.tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tira-bloque { min-height: 84px; gap: 10px; }
	.tira-bloque:first-child { grid-column: 1 / -1; }
	.tira-numero { font-size: 32px; }

	.tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td { display: block; width: 100%; }
	.tabla-apilable tr { padding: 12px 14px; border-top: 1px solid var(--linea); }
	.tabla-apilable tbody tr:first-child { border-top: 0; }
	.tabla-apilable td { padding: 2px 0; border: 0; text-align: left; }
	.tabla-apilable td[data-titulo]:not([data-titulo=""]):not(:first-child)::before { content: attr(data-titulo) ": "; color: var(--tinta-3); font-size: 13px; }

	.filtros .campo { flex: 1 1 100%; }
	.rejilla-seg { grid-template-columns: minmax(0, 1fr); }
	.pendiente { align-items: flex-start; flex-wrap: wrap; }
	.datos div, .datos-acceso div { grid-template-columns: minmax(0, 1fr); gap: 0; }

	.atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cifras .cifra:first-child { grid-column: 1 / -1; }
	.dos-iguales { grid-template-columns: minmax(0, 1fr); }
	.rejilla-tarea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ventana { padding: 18px; }
	.ventana .barra-guardar .boton { flex: 1 1 100%; }
	.fase-cabeza { padding-right: 36px; }
	.cobro { grid-template-columns: minmax(0, 1fr); }
	.renglon, .renglon.con-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.renglon-desc, .renglon-unidad { grid-column: 1 / -1; }
	.renglon-importe { text-align: left; }
	.renglon-quitar { justify-self: end; }
	.barra-fija { position: sticky; bottom: 76px; background: var(--papel); padding: 10px 0; z-index: 5; }
	.barra-fija .boton { flex: 1 1 auto; }
	.avance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pestanas { flex-wrap: nowrap; overflow-x: auto; }
	.nota-hoja { padding: 24px 18px; }
	.nota-cabeza, .nota-partes { flex-direction: column; }
	.nota-folio { text-align: left; }
}

@media (max-width: 560px) {
	.rejilla, .formulario-angosto .rejilla, .pila-paneles .rejilla { grid-template-columns: minmax(0, 1fr); }
	.rejilla > .campo-doble { grid-column: span 1; }
	.bloque, .panel { padding: 16px; }
	.acciones, .acciones .boton { width: 100%; }
	.barra-guardar .boton { flex: 1 1 auto; }
}

@media print {
	.lateral, .barra-movil, .barra-inferior, .nota-acciones, .acciones, .filtros, .boton, .boton-icono, .formulario-seg, .subir, .zona-borrar { display: none !important; }
	.marco { display: block; }
	body.eerp { background: #fff; }
}