/* ══════════════════════════════════════════════════════════════════
   CECO FIELD — CAPA DE IDENTIDAD  (v42)
   ──────────────────────────────────────────────────────────────────
   POR QUE EXISTE ESTE ARCHIVO
   La app ya tenia los colores de la web, pero seguia sin parecer de
   la misma empresa. El color es solo una parte de lo que hace que
   reconozcas una marca; el resto es la FORMA DE LAS LETRAS y el
   CANTO de las cosas.

   La web: Barlow Condensed en MAYUSCULAS, lecturas en monoespaciada,
   esquinas a escuadra. Parece una calcomania de maquinaria.
   La app era: tipografia del sistema, en minusculas, todo redondeado.
   Parecia un panel de programador.

   Esto es la capa que las iguala. Va la ULTIMA de todas las hojas de
   estilo, asi que manda sobre lo anterior sin necesidad de trucos.

   ✏️ SI ALGO NO TE GUSTA
   Esta todo aqui. Puedes cambiarlo o incluso borrar el archivo
   entero: la app seguiria funcionando igual, solo con la pinta de
   antes. No hay nada funcional en esta hoja, solo aspecto.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. TITULOS Y ETIQUETAS
   ══════════════════════════════════════════════════════════════════ */

.ceco-app h1,
.ceco-app h2,
.ceco-app h3,
.ceco-app h4,
.ceco-app h5 {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
}

/* El titulo de la vista, bien rotulado. */
.ceco-app #viewTitle {
	font-family: var(--font-brand);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--text);
}

/* Cabecera de cada seccion con una barra naranja delante: ordena la
   pantalla de un vistazo, igual que los numeros de la web. */
.ceco-app .view-head > h3,
.ceco-app .section-title {
	position: relative;
	padding-left: 13px;
	font-size: 16px;
}
.ceco-app .view-head > h3::before,
.ceco-app .section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: .18em;
	bottom: .18em;
	width: 3px;
	background: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════
   2. NUMEROS
   ──────────────────────────────────────────────────────────────────
   Todo lo que sea una lectura va en monoespaciada y con cifras de
   ancho fijo. Dos ventajas reales, no solo estetica:
     - Las columnas de numeros quedan alineadas y se comparan de un
       golpe de vista.
     - Un contador que sube no "baila": el 1 ocupa lo mismo que el 8.
   ══════════════════════════════════════════════════════════════════ */

.ceco-app .stat b,
.ceco-app .kpi b,
.ceco-app .kpi-val,
.ceco-app .mms b,
.ceco-app .count,
.ceco-app .fc-meta,
.ceco-app .mt-remain,
.ceco-app .mt-last,
.ceco-app .svc-meta span,
.ceco-app .spec b,
.ceco-app .it-badge.money,
.ceco-app .clk-time {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* Los contadores grandes del tablero. Son lo primero que miras al
   abrir la app: cifras de ancho fijo para compararlas de un golpe
   de vista, y el rotulo debajo como el de un tablero de mandos. */
.ceco-app .stat-card b,
.ceco-app .hbar-val,
.ceco-app .mini-stat b {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.02em;
}

.ceco-app .stat-label,
.ceco-app .hbar-label,
.ceco-app .mini-stat span {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* El codigo de la maquina es su matricula: siempre igual, siempre
   monoespaciado, siempre reconocible. */
.ceco-app .fc-body h4,
.ceco-app .mm-hero-text h3,
.ceco-app .m-code {
	font-family: var(--font-mono);
	font-weight: 700;
	letter-spacing: .04em;
}


/* ══════════════════════════════════════════════════════════════════
   3. MICRO-ETIQUETAS
   Los rotulitos de debajo de cada dato, como los de un tablero de
   instrumentos.
   ══════════════════════════════════════════════════════════════════ */

.ceco-app .stat span,
.ceco-app .spec span,
.ceco-app .kpi span,
.ceco-app .mms span,
.ceco-app .field > label,
.ceco-app .hint,
.ceco-app .field-hint {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* La ayuda larga se lee, no se descifra: esa se queda normal. */
.ceco-app .hint,
.ceco-app .field-hint {
	font-family: var(--font);
	font-size: 11.5px;
	letter-spacing: .01em;
	text-transform: none;
	line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════════
   4. BARRA LATERAL
   ══════════════════════════════════════════════════════════════════ */

.ceco-app .sidebar-head h3 {
	font-family: var(--font-brand);
	font-weight: 400;
	font-size: 17px;
	letter-spacing: .01em;
}
.ceco-app .sidebar-head span {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.ceco-app .sidebar-logo { border-radius: 2px; }

.ceco-app .nav-btn {
	font-family: var(--font-head);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: 0;
}
/* La activa se marca con una barra naranja a la izquierda, como la
   pestaña de una carpeta de obra. */
.ceco-app .nav-btn.active {
	background: var(--accent-soft);
	color: var(--accent);
	box-shadow: inset 3px 0 0 var(--accent);
}
.ceco-app .nav-btn .nav-badge {
	font-family: var(--font-mono);
	border-radius: 0;
	letter-spacing: .04em;
}

.ceco-app .sidebar-user b { font-family: var(--font-head); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.ceco-app .sidebar-user small,
.ceco-app .sidebar-foot {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.ceco-app .user-avatar { font-family: var(--font-mono); letter-spacing: .02em; }


/* ══════════════════════════════════════════════════════════════════
   5. BOTONES
   ══════════════════════════════════════════════════════════════════ */

.ceco-app .btn {
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* La esquina cortada del boton principal es la firma de la web.
   Es lo que hace que el boton se reconozca aunque lo veas solo. */
.ceco-app .btn-primary {
	clip-path: polygon(0 0, 100% 0, 100% 66%, 93% 100%, 0 100%);
}

.ceco-app .chip-btn,
.ceco-app .tab-btn,
.ceco-app .mm-tab {
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ceco-app .qa-label {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════
   6. ESTADOS
   ──────────────────────────────────────────────────────────────────
   ⚠️ El SIGNIFICADO no cambia: verde bien, ambar pronto, rojo
   vencido. Lo que cambia es que ahora se leen como una etiqueta de
   obra y no como una pegatina.
   ══════════════════════════════════════════════════════════════════ */

.ceco-app .fc-status,
.ceco-app .mm-badge,
.ceco-app .it-badge,
.ceco-app .badge {
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 0;
}

/* Rayas de peligro en lo que esta fuera de servicio. Es la señal que
   ya conoce cualquiera que trabaje en obra. */
.ceco-app .fleet-card.critical .fc-img::after,
.ceco-app .fleet-card.out .fc-img::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: repeating-linear-gradient(
		45deg,
		var(--red) 0 9px,
		#1a1209 9px 18px
	);
}


/* ══════════════════════════════════════════════════════════════════
   7. TARJETAS DE MAQUINA
   ══════════════════════════════════════════════════════════════════ */

/* Una franja de color a la izquierda con el estado. Se ve de lejos,
   sin tener que leer nada: es lo que buscas al abrir la Flota. */
.ceco-app .fleet-card {
	border-left: 3px solid var(--stroke-2);
}
.ceco-app .fleet-card.ok { border-left-color: var(--emerald); }
.ceco-app .fleet-card.soon { border-left-color: var(--amber); }
.ceco-app .fleet-card.critical { border-left-color: var(--red); }
.ceco-app .fleet-card.out { border-left-color: var(--muted); }

.ceco-app .fc-body h4 { font-size: 16px; color: var(--text); }
.ceco-app .fc-body p {
	font-family: var(--font-head);
	font-size: 12.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--muted);
}


/* ══════════════════════════════════════════════════════════════════
   8. VENTANAS Y FORMULARIOS
   ══════════════════════════════════════════════════════════════════ */

.ceco-app .modal-head h3 { font-size: 19px; }

.ceco-app input,
.ceco-app select,
.ceco-app textarea {
	font-family: var(--font);
	border-radius: 2px;
}
/* En los campos de numero, cifras de ancho fijo: escribir un
   odometro de seis cifras y que no se muevan ayuda a no equivocarse. */
.ceco-app input[type="number"],
.ceco-app input[type="date"],
.ceco-app input[inputmode="decimal"] {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.ceco-app .search-box input { font-family: var(--font); }


/* ══════════════════════════════════════════════════════════════════
   9. BUSCADOR Y TABLAS
   ══════════════════════════════════════════════════════════════════ */

.ceco-app table th {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.ceco-app table td { font-family: var(--font); }


/* ══════════════════════════════════════════════════════════════════
   10. REMATES
   ══════════════════════════════════════════════════════════════════ */

/* Una cinta de peligro finita bajo la cabecera. Es el mismo detalle
   que separa las secciones en la web. */
.ceco-app .app-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: repeating-linear-gradient(
		45deg,
		var(--accent) 0 10px,
		transparent 10px 20px
	);
	opacity: .35;
	pointer-events: none;
}
.ceco-app .app-header { position: sticky; }

/* El boton del chat tambien a escuadra, con una esquina cortada. */
.ceco-app .chat-fab {
	border-radius: 2px;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 78% 100%, 0 100%);
}

/* ⚠️ Lo que SIGUE siendo redondo a proposito: los avatares y los
   puntos de estado. Un avatar cuadrado parece un error, y un punto
   de estado redondo se distingue mejor de una etiqueta. */
.ceco-app .user-avatar,
.ceco-app .op-avatar,
.ceco-app .dot,
.ceco-app .live .dot { border-radius: 50%; }


/* ══════════════════════════════════════════════════════════════════
   11. EN EL TELEFONO
   ──────────────────────────────────────────────────────────────────
   ⚠️ Los rotulos tecnicos se agrandan un punto en pantalla chica.
   9 px con mucho espaciado queda muy fino en un movil a pleno sol,
   que es justo donde se usa esta app.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
	.ceco-app .stat-label,
	.ceco-app .hbar-label,
	.ceco-app .mini-stat span,
	.ceco-app .stat span,
	.ceco-app .spec span,
	.ceco-app .kpi span,
	.ceco-app .mms span,
	.ceco-app .field > label {
		font-size: 10.5px;
		letter-spacing: .12em;
	}

	.ceco-app .fc-status,
	.ceco-app .mm-badge,
	.ceco-app .it-badge,
	.ceco-app .badge { font-size: 10px; letter-spacing: .09em; }

	/* El menu, mas grande: se toca con el dedo con guante. */
	.ceco-app .nav-btn { font-size: 16px; padding: 13px 12px; }

	.ceco-app #viewTitle { font-size: 17px; }
}