* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #14181c; color: #e8edf2; }
header { display: flex; gap: 1.5rem; align-items: center; padding: .5rem 1rem; background: #1c232a; }
#marca { font-weight: 700; letter-spacing: 1px; }
#estadoLinea { font-size: .85rem; color: #9ab; }
#estadoLinea.ok { color: #5d5; }
#estadoLinea.demo { color: #fa5; }
#reloj { margin-left: auto; font-variant-numeric: tabular-nums; }
main { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; padding: .8rem; }
.camaras { display: grid; gap: .8rem; }
figure { position: relative; }
figure img { width: 100%; background: #000; aspect-ratio: 4/3; object-fit: cover; }
figcaption { position: absolute; left: 0; bottom: 0; background: #000a; padding: .2rem .5rem; font-size: .8rem; }
.columna { display: grid; gap: .8rem; align-content: start; }
section h2 { font-size: .95rem; margin-bottom: .4rem; color: #9cd; }
kbd { background: #334; padding: 0 .35rem; border-radius: 0; font-size: .8em; }
input { width: 100%; padding: .55rem; margin-bottom: .4rem; background: #232b33; border: 1px solid #3a4650; color: #fff; }
input:focus { outline: 2px solid #2a7; }
button { padding: .55rem .9rem; background: #2a7; border: 0; color: #fff; font-weight: 600; cursor: pointer; }
button:hover { background: #3b8; }
#formMsg, .cod { font-size: .85rem; color: #9ab; margin-top: .3rem; }
.ok { color: #5d5; }
#lista { list-style: none; max-height: 220px; overflow: auto; }
#lista li { padding: .3rem .2rem; border-bottom: 1px solid #2a333c; font-size: .9rem; }
#lista .cod { float: right; color: #6ac; }
#tarjeta { margin-top: .5rem; }


/* cámara del móvil */
.btn-foto { display: inline-block; padding: .55rem .9rem; margin-bottom: .4rem;
  background: #2a4a5a; color: #cfe; border: 1px dashed #5a8; cursor: pointer; font-weight: 600; }
.btn-foto:hover { background: #2a7a5a; }
.preview:not([hidden]) { display: block; max-height: 96px; max-width: 130px;
  margin: .2rem 0 .5rem; border: 1px solid #3a4650; }
@media (max-width: 820px) {
  main { grid-template-columns: 1fr; }
  .camaras { grid-template-columns: 1fr 1fr; }
  #lista { max-height: 130px; }
}


/* pestañas PAQUETES / INQUILINOS */
.tabs { display: flex; gap: 0; background: #1c232a; padding: 0 1rem; }
.tab { padding: .6rem 1.2rem; background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: #9ab; font-weight: 700; cursor: pointer; }
.tab.activa { color: #fff; border-bottom-color: #2a7; }
#vInquilinos .bandeja ul { max-height: 180px; }
.fila-inq { display: flex; gap: .5rem; align-items: center; }
.fila-inq .nom { flex: 1; }
.btn-baja { background: #7a3030; padding: .2rem .5rem; font-size: .8rem; }
.btn-alta { background: #2a7a4a; padding: .2rem .5rem; font-size: .8rem; }