/* Tuinmoia Hub — complementos a Tailwind */
.campo { width: 100%; border: 1px solid #d6d3d1; border-radius: .6rem; padding: .6rem .8rem; background: #fff; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.campo:focus { border-color: #FF5A1F; box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
select.campo { padding-right: 2rem; }
.btn-primario { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: #FF5A1F; color: #fff; font-weight: 600; border-radius: .6rem; padding: .6rem 1.1rem; transition: background .15s, transform .1s; cursor: pointer; }
.btn-primario:hover { background: #E84A10; }
.btn-primario:active { transform: scale(.98); }
.btn-primario:disabled { opacity: .5; cursor: default; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid #d6d3d1; background: #fff; border-radius: .6rem; padding: .5rem .9rem; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; }
.btn:hover { border-color: #FF5A1F; color: #E84A10; }
.btn-chico { padding: .3rem .6rem; font-size: .8rem; }
.error { color: #b91c1c; font-size: .875rem; text-align: center; }
.item-menu { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: .6rem; cursor: pointer; white-space: nowrap; font-weight: 500; transition: background .15s, color .15s; }
.item-menu:hover { background: #2A2724; color: #fff; }
.item-menu.activo { background: #FF5A1F; color: #fff; }
.tarjeta { background: #fff; border-radius: 1rem; border: 1px solid #e7e5e4; padding: 1.25rem; }
.cifra { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: #f5f5f4; color: #57534e; white-space: nowrap; }
.chip-naranja { background: #FFF1EB; color: #C2410C; }
.chip-verde { background: #dcfce7; color: #166534; }
.chip-azul { background: #dbeafe; color: #1e40af; }
.chip-gris { background: #e7e5e4; color: #44403c; }
.chip-rojo { background: #fee2e2; color: #991b1b; }
.chip-violeta { background: #ede9fe; color: #5b21b6; }
.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th { text-align: left; font-weight: 600; color: #78716c; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .6rem .75rem; border-bottom: 1px solid #e7e5e4; }
.tabla td { padding: .65rem .75rem; border-bottom: 1px solid #f5f5f4; vertical-align: top; }
.tabla tbody tr { cursor: pointer; transition: background .1s; }
.tabla tbody tr:hover { background: #FFF7F3; }
.barra { height: .5rem; background: #e7e5e4; border-radius: 999px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: #FF5A1F; border-radius: 999px; transition: width .4s; }
.brillo { position: absolute; width: 640px; height: 640px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -60%); background: radial-gradient(circle, rgba(255, 90, 31, .28), transparent 65%); pointer-events: none; }
.etiqueta { display: block; font-size: .75rem; font-weight: 600; color: #78716c; margin-bottom: .25rem; }
.pulso { animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .35; } }

/* Móvil: todo centrado salvo tablas, formularios y el panel de detalle */
@media (max-width: 1023px) {
  .lateral nav { margin-left: 0; }
  .lateral { flex-direction: column; }
  .cabecera { text-align: center; justify-content: center; }
  .cabecera > * { margin-left: auto; margin-right: auto; }
  .tarjeta.centrable { text-align: center; }
  .acciones { justify-content: center; }
}