:root {
  color-scheme: light;
  --primario: #0d9488;
  --primario-oscuro: #0f766e;
  --primario-claro: #ccfbf1;
  --verde: #16a34a;
  --naranja: #f97316;
  --rojo: #dc2626;
  --gris-fondo: #f4f5f7;
  --gris-borde: #d9dce1;
  --gris-texto: #374151;
  --gris-suave: #6b7280;
  --superficie: #fff;
  --texto-fuerte: #1f2937;
  --medidor-fondo: #eef0f3;
}

/* Tema oscuro: se activa poniendo data-tema="oscuro" en el <html>, elegido
   por la persona (botón "Oscuro/Claro") y guardado en este dispositivo. Los
   colores de marca (verde/naranja/rojo, el encabezado y las pastillas de
   estado) quedan igual en los dos temas a propósito: son "colores de
   acento" que se leen bien sobre cualquiera de los dos fondos. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --gris-fondo: #12161c;
  --gris-borde: #2b323c;
  --gris-texto: #d7dbe0;
  --gris-suave: #9aa4b0;
  --superficie: #1b212a;
  --texto-fuerte: #f1f3f5;
  --medidor-fondo: #2b323c;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--gris-fondo);
  color: var(--gris-texto);
  margin: 0;
  padding: 0 0 40px 0;
}

.contenedor { max-width: 640px; margin: 0 auto; padding: 16px; }
.contenedor-ancho { max-width: 1080px; margin: 0 auto; padding: 16px; }

header.encabezado {
  background: var(--primario-oscuro);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
header.encabezado .marca { font-size: 19px; font-weight: 700; letter-spacing: .2px; }
header.encabezado .sub { font-size: 12.5px; opacity: .85; font-weight: 500; }
header.encabezado a.salir { color: #fff; opacity: .85; text-decoration: none; font-size: 14px; font-weight: 600; }
header.encabezado a.salir:hover { opacity: 1; text-decoration: underline; }

/* Encabezado de "Equipos" (activos.html): es la pantalla con más botones en
   el header (RDM, estado de conexión, 3 links y el de tema), así que en el
   celular no entra todo en una sola línea. Separamos el botón de tema
   arriba, a la par del nombre de la empresa, y el resto de los controles
   debajo, agrupados de a dos, con permiso para acomodarse en más de una
   fila si hace falta (en vez de cortarse en el borde de la pantalla). El
   resto de las pantallas no usan estas clases y no se ven afectadas. */
.encabezado-fila-superior {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.encabezado-controles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
  width: 100%;
  margin-top: 6px;
}
.encabezado-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Submarca "RDM" (Registros de Mantenimientos): una etiqueta chiquita que
   acompaña al nombre "Control de Activos" en el encabezado, el login, la
   página de suscripción y los correos. Usa opacity + color heredado en vez
   de un color fijo para que se lea bien tanto sobre el header oscuro como
   sobre el fondo claro/oscuro del resto de las páginas. */
.etiqueta-rdm {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  opacity: .6;
  margin-left: 6px;
  vertical-align: middle;
}

h1 { font-size: 21px; margin: 18px 0 6px; }
h2 { font-size: 17px; margin: 20px 0 8px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}

label { display: block; font-weight: 600; margin: 12px 0 5px; font-size: 13.5px; color: var(--texto-fuerte); }
label .opcional { font-weight: 400; color: var(--gris-suave); }

input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--gris-texto);
  font-family: inherit;
}
textarea { resize: vertical; min-height: 70px; }

button, .boton {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}
.boton-primario { background: var(--primario); color: #fff; }
.boton-primario:hover { background: var(--primario-oscuro); }
.boton-primario:disabled { background: #9cc9c3; cursor: not-allowed; }
.boton-secundario { background: var(--superficie); color: var(--primario); border: 2px solid var(--primario); }
.boton-peligro { background: var(--rojo); color: #fff; }
.boton-texto { background: none; color: var(--primario); padding: 6px 8px; font-weight: 600; }
.boton-ancho { width: 100%; margin-top: 8px; }
.boton-chico { padding: 7px 12px; font-size: 13px; }
button:disabled, .boton:disabled { opacity: .5; cursor: not-allowed; }

.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }

.oculto { display: none !important; }

.aviso-error {
  background: #fee2e2; color: #991b1b; padding: 11px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px;
}
.aviso-exito {
  background: #dcfce7; color: #166534; padding: 11px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px;
}
.aviso-info {
  background: var(--primario-claro); color: var(--primario-oscuro); padding: 11px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px;
}
.aviso-alerta {
  background: #fef3c7; color: #92400e; padding: 11px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px;
}

.texto-chico { font-size: 13px; color: var(--gris-suave); }

.pastilla {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.pastilla-activo { background: #dcfce7; color: #166534; }
.pastilla-inactivo { background: #f3f4f6; color: #6b7280; }
.pastilla-pendiente { background: #fef3c7; color: #92400e; }
.pastilla-offline { background: #fef3c7; color: #92400e; }
.pastilla-vencido { background: #fee2e2; color: #991b1b; }
.pastilla-por-vencer { background: #fef3c7; color: #92400e; }
.pastilla-pausado { background: #f3f4f6; color: #6b7280; }

/* Lista de tarjetas (activos, empleados, empresas) */
.lista { display: flex; flex-direction: column; gap: 10px; }
.fila-item {
  display: flex; align-items: center; gap: 14px; background: var(--superficie); border: 1px solid var(--gris-borde);
  border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit;
}
.fila-item:hover { border-color: var(--primario); }
.fila-item .icono {
  width: 44px; height: 44px; border-radius: 10px; background: var(--primario-claro); color: var(--primario-oscuro);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex: none;
}
.fila-item .info { flex: 1; min-width: 0; }
.fila-item .info .t1 { font-weight: 700; font-size: 15.5px; }
.fila-item .info .t2 { font-size: 13px; color: var(--gris-suave); margin-top: 2px; }
.fila-item .extra { flex: none; }

.buscador { margin: 10px 0 16px; }

.fab {
  position: fixed; right: 20px; bottom: 24px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--primario); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 30px; box-shadow: 0 8px 20px rgba(13,148,136,.4); text-decoration: none; z-index: 60;
}

/* Campos personalizados: bloque con el botón "+" para agregar uno nuevo */
.bloque-personalizados { border-top: 1px dashed var(--gris-borde); margin-top: 18px; padding-top: 10px; }
.boton-agregar-campo {
  display: flex; align-items: center; gap: 8px; background: none; border: 2px dashed var(--gris-borde);
  color: var(--primario-oscuro); border-radius: 8px; padding: 12px; width: 100%; font-weight: 600; font-size: 14px;
  justify-content: center; margin-top: 8px;
}
.boton-agregar-campo:hover { border-color: var(--primario); background: var(--primario-claro); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal { background: var(--superficie); border-radius: 14px; padding: 22px; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.modal h2 { margin-top: 0; }

table.tabla-simple { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
table.tabla-simple th, table.tabla-simple td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--gris-borde); }

.tarjeta-qr { text-align: center; }
.tarjeta-qr img { width: 160px; height: 160px; }

.medidor { background: var(--medidor-fondo); border-radius: 999px; height: 8px; overflow: hidden; margin-top: 4px; }
.medidor .relleno { height: 100%; background: var(--primario); border-radius: 999px; }
.medidor .relleno.al-limite { background: var(--naranja); }
.medidor .relleno.excedido { background: var(--rojo); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.centrado { text-align: center; }
.espaciador-fab { height: 70px; }

.badge-nube {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}
.badge-nube.online { background: #dcfce7; color: #166534; }
.badge-nube.offline { background: #fef3c7; color: #92400e; }

/* Botón para elegir tema claro/oscuro. Versión "en el encabezado" (fondo
   verde oscuro de header.encabezado) y versión "flotante" para las
   pantallas que no tienen encabezado, como login.html. */
.boton-tema {
  background: none; border: 1px solid rgba(255,255,255,.55); color: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.boton-tema:hover { background: rgba(255,255,255,.12); }
.boton-tema-flotante {
  position: fixed; top: 14px; right: 14px; background: var(--superficie); border: 1px solid var(--gris-borde);
  color: var(--gris-texto); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}