/* ===== Variables e identidad ===== */
:root{
  --brand-red:#e53935;
  --dark:#232b3a;
  --warn:#ff9800;
  --err:#e53935;
  --ok:#2e7d32;
  --info:#1976d2;
  --ftv-primary:#0a5bd3;
  --ftv-primary-600:#0849a9;
  --ftv-bg:#f7f9fc;
  --ftv-border:#e0e6ef;
  --ftv-text:#223044;
}

/* ===== Reset + tipografía ===== */
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:#fafafa;color:#222}

/* ===== Topbar / Layout base ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--dark);color:#fff}
.topbar .brand{font-weight:800;letter-spacing:.5px}
.topbar .brand span{color:var(--brand-red)}
.topbar nav a{color:#fff;margin-left:16px;text-decoration:none}
.topbar nav a.logout{color:#ffdddd}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.foot{padding:20px;text-align:center;color:#777}

/* ===== Login ===== */
.login-card{max-width:420px;margin:48px auto;background:#fff;padding:24px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.login-card h1{margin-top:0}
.login-card label{display:block;margin:.5rem 0 .25rem}
.login-card input{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
.login-card button{margin-top:12px;width:100%;padding:12px;background:var(--brand-red);border:0;border-radius:8px;color:#fff;font-weight:700;cursor:pointer}
.alert{background:#ffe9e9;color:#8a0000;border:1px solid #ffb3b3;padding:10px;border-radius:8px;margin-bottom:12px}

/* ===== Cards clásicas (tus estilos) ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card .metric{font-size:32px;font-weight:800}
.card .label{color:#666}
.card.warn .metric{color:var(--warn)}
.card.error .metric{color:var(--err)}
.card.ok .metric{color:var(--ok)}
.card.info .metric{color:var(--info)}

/* ===== Cards modernas (glass) — opcional, convive con las clásicas ===== */
.card.glass{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:16px;padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card.glass:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.16)}
.card.glass .metric{font-size:2.2em;font-weight:bold;margin:8px 0;color:var(--ftv-primary)}
.card.blue{background:linear-gradient(145deg,#0a5bd3,#0849a9);color:#fff}
.card.green{background:linear-gradient(145deg,#28a745,#1e7e34);color:#fff}
.card.red{background:linear-gradient(145deg,#dc3545,#a71d2a);color:#fff}
.card.orange{background:linear-gradient(145deg,#fd7e14,#c35a02);color:#fff}
.card.grey{background:linear-gradient(145deg,#e0e0e0,#b0b0b0);color:#222}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}

/* ===== Buscador ===== */
.searchbar{display:flex;gap:8px;margin-bottom:12px}
.searchbar input{flex:1;padding:10px;border:1px solid #ddd;border-radius:8px}
.searchbar button{padding:10px 16px;background:var(--brand-red);border:0;border-radius:8px;color:#fff;font-weight:700;cursor:pointer}

/* ===== Tablas ===== */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.table th{background:#f9f9f9}
.muted{color:#888;text-align:center}
.state.online{color:var(--ok);font-weight:700}
.state.offline{color:var(--err);font-weight:700}
.state.degraded{color:var(--warn);font-weight:700}

/* ===== Tabs “pill” elegantes ===== */
.tabs{position:relative;display:inline-flex;gap:8px;padding:6px;border-radius:12px;background:var(--ftv-bg);border:1px solid var(--ftv-border);margin:8px 0 16px;isolation:isolate}
.tabs .tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:10px 16px;border-radius:10px;text-decoration:none;color:var(--ftv-text);font-weight:600;line-height:1;transition:color .2s ease, transform .12s ease}
.tabs .tab:hover{transform:translateY(-1px);color:var(--ftv-primary)}
.tabs .tab__label{position:relative;z-index:2}
.tabs .tab.active{color:#fff}
.tabs .tab__indicator{position:absolute;inset:6px auto auto 6px;width:120px;height:36px;border-radius:10px;background:linear-gradient(180deg,var(--ftv-primary),var(--ftv-primary-600));box-shadow:0 6px 14px rgba(10,91,211,.25);transition:transform .25s cubic-bezier(.22,.61,.36,1), width .2s ease;z-index:0}
/* Indicador (2 pestañas). Si agregas más, duplica reglas nth-child */
.tabs .tab:nth-child(1).active ~ .tab__indicator{transform:translateX(0)}
.tabs .tab:nth-child(2).active ~ .tab__indicator{transform:translateX(calc(120px + 8px))}
@media (max-width:480px){
  .tabs .tab{min-width:104px;padding:9px 12px}
  .tabs .tab__indicator{width:104px;height:34px}
  .tabs .tab:nth-child(2).active ~ .tab__indicator{transform:translateX(calc(104px + 8px))}
}

/* Contenedor de tabla dentro de card: evita que se “salga” */
.card .table-wrap {
  width: 100%;
  overflow-x: auto;   /* scroll horizontal si hace falta */
  overflow-y: auto;   /* opcional: scroll vertical si la haces alta */
  max-height: 360px;  /* limita altura para que no crezca infinito */
  border-radius: 8px;
}

/* Tablas compactas dentro de cards */
.table.compact th,
.table.compact td {
  padding: 8px;
  white-space: nowrap;          /* evita saltos raros */
  text-overflow: ellipsis;      /* … si se corta */
  overflow: hidden;
}

.table.fixed {
  table-layout: fixed;          /* columnas de ancho estable */
}

.table.compact th:nth-child(1){min-width: 120px;} /* OLT */
.table.compact th:nth-child(2){min-width: 60px;}  /* Slot */
.table.compact th:nth-child(3){min-width: 60px;}  /* PON  */
.table.compact th:nth-child(4){min-width: 90px;}  /* Abonados */
.table.compact th:nth-child(5){min-width: 90px;}  /* RXavg */
.table.compact th:nth-child(6){min-width: 90px;}  /* TXavg */
.table.compact th:nth-child(7){min-width: 140px;} /* Último */

/* Opcional: que la card no “rebote” */
.card { overflow: hidden; }

/* Título resaltado dentro de cards (para widgets importantes) */
.card .label.important{
  font-weight:800;
  font-size:1.05rem;
  color:#0a5bd3;        /* azul destacado */
  letter-spacing:.2px;
  margin-bottom:8px;
}

/* Card que ocupa todo el ancho del grid */
.fullwidth{
  grid-column:1 / -1;
}

/* Contenedor de tabla en modo “full” (sin recorte vertical) */
.card .table-wrap.full{
  width:100%;
  overflow-x:auto;      /* scroll horizontal si hace falta */
  overflow-y:visible;   /* muestra todas las filas */
  max-height:none;      /* sin límite de altura */
  border-radius:8px;
}

/* Tabla compacta en modo “full” (mostrar texto completo) */
.table.compact.full th,
.table.compact.full td{
  padding:10px;
  white-space:normal;   /* permite saltos de línea */
  word-break:break-word;
  text-overflow:clip;
  overflow:visible;
}

/* Cabecera con banda azul para destacar */
.table .thead-accent th{
  background:#e8f1ff;
  color:#0a5bd3;
  font-weight:700;
}

/* Mantén la serial en una sola línea; lo demás puede envolver */
td.col-serial { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
td.col-olt    { white-space: nowrap; }   /* OLT compacto, como lo tienes OK */
td.col-pon    { white-space: nowrap; }   /* PON tipo 2/4 */
td.col-estado { white-space: nowrap; font-weight: 700; }

/* Si quieres alinear RX/TX a la derecha */
td.col-rx, td.col-tx { text-align: right; }

.metric-link { text-decoration: none; color: inherit; display: inline-block; }
.metric-link .metric:hover { opacity: .85; transform: scale(1.02); transition: .12s ease; }

/* ===== Formulario Colonias ===== */
.form-card { padding: 18px; }
.form-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.form-title h1{ margin:0 0 6px 0; font-size:1.25rem; font-weight:800; }
.form-actions-top .btn{ margin-left:8px; }

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

.field label{ display:block; margin:.5rem 0 .25rem; }
.field input[type="text"]{ width:100%; padding:10px; border:1px solid #ddd; border-radius:8px; background:#fff; }
.field .help{ color:#777; font-size:.85rem; }

.pon-split{ display:flex; align-items:center; gap:8px; }
.pon-split input{ width:100%; }
.pon-split .slash{ padding:0 4px; color:#555; font-weight:700; }

.switch{ position:relative; display:inline-block; width:48px; height:26px; vertical-align:middle; }
.switch input{ display:none; }
.switch .slider{
  position:absolute; cursor:pointer; inset:0;
  background:#e0e6ef; border-radius:26px; transition:.2s;
}
.switch .slider:before{
  content:""; position:absolute; height:20px; width:20px; left:3px; top:3px;
  background:white; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider{ background:linear-gradient(145deg, var(--ftv-primary), var(--ftv-primary-600)); }
.switch input:checked + .slider:before{ transform:translateX(22px); }

.form-actions{ display:flex; gap:10px; margin-top:12px; }

/* ===== Buttons (refuerzo) ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:8px; text-decoration:none; border:0; cursor:pointer; font-weight:700; }
.btn-primary{ background:var(--brand-red); color:#fff; }
.btn-ghost{ background:#f5f7fb; color:#223; border:1px solid #e0e6ef; }
.btn-danger{ background:#e53935; color:#fff; }
.btn:hover{ filter:brightness(0.98); }

/* ===== Badges ===== */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:.85rem; font-weight:700; }
.badge.ok{ background:#e8f5e9; color:var(--ok); border:1px solid #c8e6c9; }
.badge.warn{ background:#fff3e0; color:var(--warn); border:1px solid #ffe0b2; }


/* Forzar texto oscuro en tablas dentro de cards de color */
.card.blue .table th,
.card.blue .table td,
.card.green .table th,
.card.green .table td,
.card.red .table th,
.card.red .table td,
.card.orange .table th,
.card.orange .table td,
.card.grey .table th,
.card.grey .table td {
  color: #222 !important;
}

/* Encabezados de tabla también con fondo claro y borde */
.card.blue .table th,
.card.green .table th,
.card.red .table th,
.card.orange .table th,
.card.grey .table th {
  background: #f9f9f9 !important;
  border-bottom: 1px solid #eee;
}

/* Si tienes links dentro de la tabla, que sean visibles */
.card.blue .table a,
.card.green .table a,
.card.red .table a,
.card.orange .table a,
.card.grey .table a {
  color: #0a5bd3 !important;
  text-decoration: none;
}
.card.blue .table a:hover,
.card.green .table a:hover,
.card.red .table a:hover,
.card.orange .table a:hover,
.card.grey .table a:hover {
  text-decoration: underline;
}


/* Ajustes solo para la lista de colonias (evitar truncado) */
.list-card .table.fixed { 
  table-layout: auto; 
}

.list-card .table th:nth-child(1),
.list-card .table td:nth-child(1) { min-width: 180px; } /* OLT */
.list-card .table th:nth-child(2),
.list-card .table td:nth-child(2) { min-width: 120px; } /* PON */
.list-card .table th:nth-child(3),
.list-card .table td:nth-child(3) { min-width: 200px; } /* Colonia */

.list-card .table td.actions {
  min-width: 240px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.actions form.inline { display:inline; margin:0 4px 0 0; }
.actions a.btn { margin-right:4px; }

.btn{
  display:inline-block;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  background:#eee;
  color:#222;
}
.btn.sm{ padding:6px 10px; font-size:12px; }
.btn.blue{ background:var(--info); color:#fff; }
.btn.grey{ background:#e0e0e0; color:#222; }
.btn.orange{ background:var(--warn); color:#fff; }
.btn.red{ background:var(--err); color:#fff; }
.btn.ok{ background:var(--ok); color:#fff; }

.table .state.offline{ color:#e53935; font-weight:700; }

.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.actions form{display:inline}
.btn{display:inline-block;padding:6px 10px;border-radius:8px;text-decoration:none;border:0;cursor:pointer}
.btn-small{padding:4px 8px;font-size:.9em}
.btn-primary{background:var(--ftv-primary);color:#fff}
.btn-warn{background:var(--warn);color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-danger{background:var(--err);color:#fff}

.state.online{ color: var(--ok); font-weight:700 }
.state.degraded{ color: var(--warn); font-weight:700 }
.state.offline{ color: var(--err); font-weight:700 }