:root{
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1B1B1B;

  /* Paleta inicial (ajustable a la corporativa ASORAPA) */
  --brand: #00C901;     /* verde ASORAPA */
  --brand2: #1B1B1B;    /* negro ( para header/texto */
  --accent: #F9D82A;    /* dorado/amarillo */
  --danger: #EA1B33;    /* rojo contorno */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header{
  background:#003366;
  color:#fff;
  padding:15px;
  border-bottom:0;
}

.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
}

.brand img{
  height:46px;
  width:auto;
  border-radius:6px;
  background:#fff;
  padding:2px;
}

.brand .title{
  font-weight:800;
  letter-spacing:0.5px;
  line-height:1.1;
}
.brand .subtitle{
  font-size:12px;
  opacity:0.9;
}

nav{
  margin-left:auto;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  opacity:0.95;
}
nav a:hover{ opacity:1; text-decoration:underline; }

.box{
  background: var(--card);
  padding: 20px;
  max-width: 1100px;
  margin: 18px auto;
  border-radius: 10px;
}

button{
  background: var(--brand);
  color:#111;
  border:0;
  border-radius:8px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
button:hover{ filter: brightness(1.05); }

.ok{ color: var(--brand); font-weight:800; }
.warn{ color: var(--danger); font-weight:800; }

/* ==================================================
   Administración
   ================================================== */

.muted{
  color:#666;
  font-size:13px;
}

.err{
  color:#b00020;
  font-weight:800;
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}

.btn.primary{
  background:#e9f2ff;
  border-color:#cfe0ff;
}

.btn.ghost{
  background:#f6f6f6;
}

.btn:disabled{
  cursor:not-allowed;
  opacity:.55;
}

.admin-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.admin-heading h1{
  margin:0;
}

.admin-heading p{
  margin:7px 0 0;
}

.admin-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:24px;
}

.admin-card{
  display:block;
  padding:22px;
  min-height:210px;
  border:1px solid #e5e5e5;
  border-radius:14px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}

.admin-card:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(0,0,0,.10);
}

.admin-card h2{
  margin:16px 0 8px;
}

.admin-card p{
  margin:0;
  color:#666;
  line-height:1.5;
}

.admin-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:42px;
  padding:0 12px;
  border-radius:10px;
  background:#003366;
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.5px;
}

.admin-two-columns{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr);
  gap:18px;
  align-items:start;
}

.card{
  border:1px solid #eee;
  border-radius:12px;
  padding:18px;
  background:#fff;
}

.card h2{
  margin:0;
}

.row{
  margin-top:14px;
}

.rowline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.rowline.between{
  justify-content:space-between;
}

.form-row{
  margin-top:16px;
}

.form-row label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}

.form-row input[type="text"],
.form-row input[type="password"]{
  width:100%;
  max-width:520px;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:16px;
}

.form-row input:disabled{
  background:#eee;
  color:#555;
}

.checkbox-row label{
  display:flex;
  gap:9px;
  align-items:center;
  font-weight:700;
}

.checkbox-row input{
  width:18px;
  height:18px;
}

.table-wrapper{
  width:100%;
  overflow-x:auto;
  margin-top:14px;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
}

.admin-table th,
.admin-table td{
  padding:11px 9px;
  border-bottom:1px solid #eee;
  text-align:left;
  white-space:nowrap;
}

.admin-table th{
  background:#fafafa;
  font-size:13px;
  font-weight:900;
}

.actions-cell{
  text-align:right !important;
}

.status-badge{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.status-badge.success{
  background:#e6ffed;
  color:#146c2e;
}

.status-badge.online{
  background:#dfffe0;
  color:#087a08;
}

.status-badge.inactive{
  background:#eee;
  color:#555;
}

@media (max-width:900px){
  .admin-grid{
    grid-template-columns:1fr;
  }

  .admin-two-columns{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .header-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  nav{
    margin-left:0;
  }

  .box{
    margin:10px;
    padding:16px;
  }
}


/* ==================================================
   Panel privado del operador
   ================================================== */

.operator-page{
  max-width:1100px;
}

.operator-login-card{
  max-width:520px;
  margin:10px auto;
  padding:24px;
  border:1px solid #e4e4e4;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.operator-login-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.operator-login-header h1{
  margin:0;
}

.operator-login-header p{
  margin:7px 0 0;
  line-height:1.5;
}

.operator-login-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:52px;
  padding:8px 12px;
  border-radius:10px;
  background:#d90000;
  color:#fff;
  font-weight:900;
  letter-spacing:.7px;
  box-shadow:0 0 0 4px rgba(217,0,0,.10);
}

.operator-login-actions,
.operator-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.operator-title-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.operator-title-line h1{
  margin:0;
}

.operator-layout{
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
  margin-top:20px;
}

.operator-status-card{
  position:sticky;
  top:14px;
}

.operator-offline-box{
  display:flex;
  gap:13px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid #e2e2e2;
  border-radius:12px;
  background:#fafafa;
}

.operator-status-dot{
  flex:0 0 auto;
  width:15px;
  height:15px;
  border-radius:50%;
}

.operator-status-dot.offline{
  background:#999;
  box-shadow:0 0 0 5px rgba(153,153,153,.15);
}

.operator-status-dot.online{
  background:#00ad18;
  box-shadow:0 0 0 5px rgba(0,173,24,.16);
}

.operator-online-heading{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:20px;
  padding:16px;
  border:1px solid #bfe6c5;
  border-radius:12px;
  background:#edfff0;
}

.operator-online-label{
  color:#087a17;
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
}

.operator-online-callsign{
  margin-top:2px;
  font-size:24px;
  font-weight:900;
}

.operator-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0;
}

.operator-status-grid > div{
  padding:12px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
}

.operator-status-grid dt{
  color:#666;
  font-size:12px;
  font-weight:700;
}

.operator-status-grid dd{
  margin:5px 0 0;
  font-size:16px;
  font-weight:900;
}

.operator-comment{
  margin-bottom:18px;
  padding:13px;
  border-left:4px solid #003366;
  border-radius:6px;
  background:#f4f8fc;
  line-height:1.45;
}

.operator-comment strong{
  display:block;
  margin-bottom:5px;
}

.operator-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.operator-page select,
.operator-page textarea,
.operator-page input[type="text"],
.operator-page input[type="password"]{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  font:inherit;
}

.operator-page textarea{
  min-height:100px;
  resize:vertical;
}

.btn.danger{
  background:#fff0f0;
  border-color:#ffcaca;
  color:#9b0000;
}

@media (max-width:850px){
  .operator-layout{
    grid-template-columns:1fr;
  }

  .operator-status-card{
    position:static;
  }
}

@media (max-width:560px){
  .operator-login-header{
    flex-direction:column;
  }

  .operator-form-grid,
  .operator-status-grid{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Panel privado del operador
   ================================================== */

.operator-page{
  max-width:1100px;
}

.operator-login-card{
  max-width:520px;
  margin:10px auto;
  padding:24px;
  border:1px solid #e4e4e4;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.operator-login-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.operator-login-header h1{
  margin:0;
}

.operator-login-header p{
  margin:7px 0 0;
  line-height:1.5;
}

.operator-login-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:52px;
  padding:8px 12px;
  border-radius:10px;
  background:#d90000;
  color:#fff;
  font-weight:900;
  letter-spacing:.7px;
  box-shadow:0 0 0 4px rgba(217,0,0,.10);
}

.operator-login-actions,
.operator-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.operator-title-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.operator-title-line h1{
  margin:0;
}

.operator-layout{
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
  margin-top:20px;
}

.operator-status-card{
  position:sticky;
  top:14px;
}

.operator-offline-box{
  display:flex;
  gap:13px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid #e2e2e2;
  border-radius:12px;
  background:#fafafa;
}

.operator-status-dot{
  flex:0 0 auto;
  width:15px;
  height:15px;
  border-radius:50%;
}

.operator-status-dot.offline{
  background:#999;
  box-shadow:0 0 0 5px rgba(153,153,153,.15);
}

.operator-status-dot.online{
  background:#00ad18;
  box-shadow:0 0 0 5px rgba(0,173,24,.16);
}

.operator-online-heading{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:20px;
  padding:16px;
  border:1px solid #bfe6c5;
  border-radius:12px;
  background:#edfff0;
}

.operator-online-label{
  color:#087a17;
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
}

.operator-online-callsign{
  margin-top:2px;
  font-size:24px;
  font-weight:900;
}

.operator-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0;
}

.operator-status-grid > div{
  padding:12px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
}

.operator-status-grid dt{
  color:#666;
  font-size:12px;
  font-weight:700;
}

.operator-status-grid dd{
  margin:5px 0 0;
  font-size:16px;
  font-weight:900;
}

.operator-comment{
  margin-bottom:18px;
  padding:13px;
  border-left:4px solid #003366;
  border-radius:6px;
  background:#f4f8fc;
  line-height:1.45;
}

.operator-comment strong{
  display:block;
  margin-bottom:5px;
}

.operator-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.operator-page select,
.operator-page textarea,
.operator-page input[type="text"],
.operator-page input[type="password"]{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  font:inherit;
}

.operator-page textarea{
  min-height:100px;
  resize:vertical;
}

.btn.danger{
  background:#fff0f0;
  border-color:#ffcaca;
  color:#9b0000;
}

@media (max-width:850px){
  .operator-layout{
    grid-template-columns:1fr;
  }

  .operator-status-card{
    position:static;
  }
}

@media (max-width:560px){
  .operator-login-header{
    flex-direction:column;
  }

  .operator-form-grid,
  .operator-status-grid{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Panel privado del operador
   ================================================== */

.operator-page{
  max-width:1100px;
}

.operator-login-card{
  max-width:520px;
  margin:10px auto;
  padding:24px;
  border:1px solid #e4e4e4;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.operator-login-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.operator-login-header h1{
  margin:0;
}

.operator-login-header p{
  margin:7px 0 0;
  line-height:1.5;
}

.operator-login-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:52px;
  padding:8px 12px;
  border-radius:10px;
  background:#d90000;
  color:#fff;
  font-weight:900;
  letter-spacing:.7px;
  box-shadow:0 0 0 4px rgba(217,0,0,.10);
}

.operator-login-actions,
.operator-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.operator-title-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.operator-title-line h1{
  margin:0;
}

.operator-layout{
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
  margin-top:20px;
}

.operator-status-card{
  position:sticky;
  top:14px;
}

.operator-offline-box{
  display:flex;
  gap:13px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid #e2e2e2;
  border-radius:12px;
  background:#fafafa;
}

.operator-status-dot{
  flex:0 0 auto;
  width:15px;
  height:15px;
  border-radius:50%;
}

.operator-status-dot.offline{
  background:#999;
  box-shadow:0 0 0 5px rgba(153,153,153,.15);
}

.operator-status-dot.online{
  background:#00ad18;
  box-shadow:0 0 0 5px rgba(0,173,24,.16);
}

.operator-online-heading{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:20px;
  padding:16px;
  border:1px solid #bfe6c5;
  border-radius:12px;
  background:#edfff0;
}

.operator-online-label{
  color:#087a17;
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
}

.operator-online-callsign{
  margin-top:2px;
  font-size:24px;
  font-weight:900;
}

.operator-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0;
}

.operator-status-grid > div{
  padding:12px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
}

.operator-status-grid dt{
  color:#666;
  font-size:12px;
  font-weight:700;
}

.operator-status-grid dd{
  margin:5px 0 0;
  font-size:16px;
  font-weight:900;
}

.operator-comment{
  margin-bottom:18px;
  padding:13px;
  border-left:4px solid #003366;
  border-radius:6px;
  background:#f4f8fc;
  line-height:1.45;
}

.operator-comment strong{
  display:block;
  margin-bottom:5px;
}

.operator-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.operator-page select,
.operator-page textarea,
.operator-page input[type="text"],
.operator-page input[type="password"]{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  font:inherit;
}

.operator-page textarea{
  min-height:100px;
  resize:vertical;
}

.btn.danger{
  background:#fff0f0;
  border-color:#ffcaca;
  color:#9b0000;
}

@media (max-width:850px){
  .operator-layout{
    grid-template-columns:1fr;
  }

  .operator-status-card{
    position:static;
  }
}

@media (max-width:560px){
  .operator-login-header{
    flex-direction:column;
  }

  .operator-form-grid,
  .operator-status-grid{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Panel privado del operador
   ================================================== */

.operator-page{
  max-width:1100px;
}

.operator-login-card{
  max-width:520px;
  margin:10px auto;
  padding:24px;
  border:1px solid #e4e4e4;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.operator-login-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.operator-login-header h1{
  margin:0;
}

.operator-login-header p{
  margin:7px 0 0;
  line-height:1.5;
}

.operator-login-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:52px;
  padding:8px 12px;
  border-radius:10px;
  background:#d90000;
  color:#fff;
  font-weight:900;
  letter-spacing:.7px;
  box-shadow:0 0 0 4px rgba(217,0,0,.10);
}

.operator-login-actions,
.operator-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.operator-title-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.operator-title-line h1{
  margin:0;
}

.operator-layout{
  display:grid;
  grid-template-columns:minmax(320px, .8fr) minmax(0, 1.2fr);
  gap:18px;
  align-items:start;
  margin-top:20px;
}

.operator-status-card{
  position:sticky;
  top:14px;
}

.operator-offline-box{
  display:flex;
  gap:13px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid #e2e2e2;
  border-radius:12px;
  background:#fafafa;
}

.operator-status-dot{
  flex:0 0 auto;
  width:15px;
  height:15px;
  border-radius:50%;
}

.operator-status-dot.offline{
  background:#999;
  box-shadow:0 0 0 5px rgba(153,153,153,.15);
}

.operator-status-dot.online{
  background:#00ad18;
  box-shadow:0 0 0 5px rgba(0,173,24,.16);
}

.operator-online-heading{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:20px;
  padding:16px;
  border:1px solid #bfe6c5;
  border-radius:12px;
  background:#edfff0;
}

.operator-online-label{
  color:#087a17;
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
}

.operator-online-callsign{
  margin-top:2px;
  font-size:24px;
  font-weight:900;
}

.operator-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0;
}

.operator-status-grid > div{
  padding:12px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
}

.operator-status-grid dt{
  color:#666;
  font-size:12px;
  font-weight:700;
}

.operator-status-grid dd{
  margin:5px 0 0;
  font-size:16px;
  font-weight:900;
}

.operator-comment{
  margin-bottom:18px;
  padding:13px;
  border-left:4px solid #003366;
  border-radius:6px;
  background:#f4f8fc;
  line-height:1.45;
}

.operator-comment strong{
  display:block;
  margin-bottom:5px;
}

.operator-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.operator-page select,
.operator-page textarea,
.operator-page input[type="text"],
.operator-page input[type="password"]{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  font:inherit;
}

.operator-page textarea{
  min-height:100px;
  resize:vertical;
}

.btn.danger{
  background:#fff0f0;
  border-color:#ffcaca;
  color:#9b0000;
}

@media (max-width:850px){
  .operator-layout{
    grid-template-columns:1fr;
  }

  .operator-status-card{
    position:static;
  }
}

@media (max-width:560px){
  .operator-login-header{
    flex-direction:column;
  }

  .operator-form-grid,
  .operator-status-grid{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Activadores públicos en el aire
   ================================================== */

.activators-page{
  max-width:1180px;
}

.activators-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:22px;
  padding:24px;
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      #071d33 0%,
      #003d70 100%
    );
  color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.16);
}

.activators-hero h1{
  margin:4px 0 8px;
  font-size:clamp(28px, 5vw, 44px);
  line-height:1.05;
}

.activators-hero p{
  max-width:660px;
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:16px;
  line-height:1.5;
}

.activators-eyebrow{
  color:#7edcff;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.4px;
}

.activators-live-panel{
  display:flex;
  min-width:220px;
  gap:13px;
  align-items:center;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:13px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(5px);
}

.activators-live-panel strong,
.activators-live-panel span{
  display:block;
}

.activators-live-panel strong{
  font-size:16px;
}

.activators-live-panel span{
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:12px;
}

.activators-live-dot{
  display:inline-block;
  width:13px;
  height:13px;
  flex:0 0 auto;
  border-radius:50%;
  background:#12d537;
  box-shadow:
    0 0 0 5px rgba(18,213,55,.18),
    0 0 16px rgba(18,213,55,.65);
  animation:activators-pulse 1.8s infinite;
}

@keyframes activators-pulse{
  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(.83);
    opacity:.68;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}

.activators-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit, minmax(340px, 1fr));
  gap:18px;
}

.activator-card{
  overflow:hidden;
  border:1px solid #dfe5e9;
  border-radius:15px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.07);
  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

.activator-card:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 25px rgba(0,0,0,.11);
}

.activator-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:20px;
  border-bottom:1px solid #e7ecef;
  background:
    linear-gradient(
      145deg,
      #f8fbfd,
      #eef5f9
    );
}

.activator-identity{
  min-width:0;
}

.activator-on-air{
  display:flex;
  gap:9px;
  align-items:center;
  color:#078222;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
}

.activator-on-air .activators-live-dot{
  width:9px;
  height:9px;
  box-shadow:
    0 0 0 4px rgba(18,213,55,.14);
}

.activator-callsign{
  margin:8px 0 2px;
  color:#002f56;
  font-size:30px;
  line-height:1;
  letter-spacing:.4px;
}

.activator-name{
  overflow:hidden;
  color:#49545b;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.activator-frequency-box{
  flex:0 0 auto;
  min-width:135px;
  padding:13px 15px;
  border-radius:11px;
  background:#003d70;
  color:#fff;
  text-align:right;
}

.activator-frequency-box span,
.activator-frequency-box strong{
  display:block;
}

.activator-frequency-box span{
  color:rgba(255,255,255,.70);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}

.activator-frequency-box strong{
  margin-top:3px;
  font-size:18px;
  white-space:nowrap;
}

.activator-activity{
  padding:16px 20px;
  border-bottom:1px solid #edf0f2;
}

.activator-activity span,
.activator-activity strong{
  display:block;
}

.activator-activity span{
  color:#6b747a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.activator-activity strong{
  margin-top:5px;
  color:#1f2a31;
  font-size:17px;
}

.activator-data-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin:0;
  background:#e8ecef;
  border-bottom:1px solid #e8ecef;
}

.activator-data-grid > div{
  padding:14px 20px;
  background:#fff;
}

.activator-data-grid dt{
  color:#737d84;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.activator-data-grid dd{
  margin:5px 0 0;
  color:#17242c;
  font-size:15px;
  font-weight:900;
}

.activator-comment-box{
  min-height:76px;
  padding:16px 20px 19px;
  border-left:4px solid #0074bd;
  background:#f5faff;
}

.activator-comment-box span{
  display:block;
  color:#68747c;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.activator-comment{
  margin-top:6px;
  color:#26343c;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.activator-comment-box.is-empty{
  border-left-color:#c4cbd0;
  background:#fafafa;
}

.activator-comment-box.is-empty .activator-comment{
  color:#899197;
  font-style:italic;
}

.activators-empty-state{
  padding:52px 24px;
  border:1px dashed #cfd7dc;
  border-radius:15px;
  background:#fafcfd;
  text-align:center;
}

.activators-empty-state h2{
  margin:17px 0 7px;
}

.activators-empty-state p{
  margin:0 0 20px;
  color:#68747c;
}

.activators-empty-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:105px;
  min-height:55px;
  padding:10px 15px;
  border-radius:10px;
  background:#d6dadd;
  color:#4e575d;
  font-weight:900;
  letter-spacing:1px;
}

.activators-spinner{
  width:42px;
  height:42px;
  margin:auto;
  border:4px solid #d7e3eb;
  border-top-color:#0063a3;
  border-radius:50%;
  animation:activators-spin .8s linear infinite;
}

@keyframes activators-spin{
  to{
    transform:rotate(360deg);
  }
}

.activators-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid #e4e8eb;
  color:#6e777d;
  font-size:13px;
}

@media (max-width:760px){
  .activators-hero{
    flex-direction:column;
    align-items:stretch;
  }

  .activators-live-panel{
    min-width:0;
  }

  .activators-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  .activators-hero{
    padding:20px;
  }

  .activator-card-head{
    flex-direction:column;
  }

  .activator-frequency-box{
    width:100%;
    box-sizing:border-box;
    text-align:left;
  }

  .activator-data-grid{
    grid-template-columns:1fr;
  }

  .activators-footer{
    flex-direction:column;
    align-items:stretch;
  }
}


/* ==================================================
   Administración de operadores
   ================================================== */

.admin-operators-page{
  max-width:1450px;
}

.admin-operators-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(330px, .7fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.admin-operators-summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(130px, 1fr));
  gap:12px;
  margin-top:18px;
}

.admin-summary-item{
  padding:15px 17px;
  border:1px solid #e0e5e8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
}

.admin-summary-item span,
.admin-summary-item strong{
  display:block;
}

.admin-summary-item span{
  color:#69747b;
  font-size:12px;
  font-weight:700;
}

.admin-summary-item strong{
  margin-top:5px;
  color:#003d70;
  font-size:25px;
}

.admin-operator-form-card{
  position:sticky;
  top:14px;
}

.operators-table{
  min-width:1050px;
}

.operators-table td{
  vertical-align:middle;
}

.operator-online-row{
  background:#f3fff5;
}

.operator-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-width:235px;
}

.btn.compact{
  padding:6px 9px;
  font-size:12px;
}

.password-field-line{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.operator-form-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:19px;
}

.small-text{
  margin-top:4px;
  font-size:11px;
}

@media (max-width:1100px){
  .admin-operators-layout{
    grid-template-columns:1fr;
  }

  .admin-operator-form-card{
    position:static;
  }
}

@media (max-width:720px){
  .admin-operators-summary{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:440px){
  .admin-operators-summary{
    grid-template-columns:1fr;
  }

  .password-field-line{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Administración de actividades
   ================================================== */

.admin-activities-page{
  max-width:1450px;
}

.admin-activities-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(390px, .85fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.admin-activities-summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(130px, 1fr));
  gap:12px;
  margin-top:18px;
}

.admin-activity-form-card{
  position:sticky;
  top:14px;
}

.activities-table{
  min-width:900px;
}

.activities-table td{
  vertical-align:middle;
}

.activity-active-row{
  background:#f3fff5;
}

.activity-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-width:140px;
}

.status-badge.upcoming{
  background:#fff4d8;
  color:#7b5700;
}

.activity-date-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.activity-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:22px;
  margin-bottom:10px;
}

.activity-section-heading h3{
  margin:0;
}

.activity-tier-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 110px auto;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}

.activity-tier-row input{
  width:100%;
}

.activity-advanced{
  margin-top:20px;
  padding:12px 14px;
  border:1px solid #e1e5e8;
  border-radius:10px;
  background:#fafbfc;
}

.activity-advanced summary{
  cursor:pointer;
  font-weight:800;
}

.activity-advanced[open] summary{
  margin-bottom:14px;
}

@media (max-width:1150px){
  .admin-activities-layout{
    grid-template-columns:1fr;
  }

  .admin-activity-form-card{
    position:static;
  }
}

@media (max-width:720px){
  .admin-activities-summary{
    grid-template-columns:1fr 1fr;
  }

  .activity-date-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:520px){
  .admin-activities-summary{
    grid-template-columns:1fr;
  }

  .activity-tier-row{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Menú principal moderno
   ================================================== */

.header-inner{
  max-width:1280px;
  gap:24px;
}

nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.15px;
  white-space:nowrap;
  opacity:1;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

nav a:hover{
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.45);
  text-decoration:none;
  transform:translateY(-1px);
}

nav a.is-active{
  background:#111827;
  border-color:#111827;
  color:#fff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.20),
    0 4px 12px rgba(0,0,0,.25);
}

nav a.is-active:hover{
  background:#111827;
  border-color:#111827;
  transform:none;
}

@media (max-width:1050px){
  .header-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  nav{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  header{
    padding:13px;
  }

  .header-inner{
    gap:14px;
  }

  .brand img{
    height:42px;
  }

  nav{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  nav a{
    width:100%;
    min-height:40px;
    padding:9px 8px;
    font-size:11px;
    text-align:center;
    white-space:normal;
    line-height:1.15;
  }
}

@media (max-width:380px){
  nav{
    grid-template-columns:1fr;
  }
}


/* ==================================================
   Iconos del menú principal
   ================================================== */

nav a{
  gap:7px;
}

.nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
}

.nav-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

nav a.is-active .nav-icon{
  transform:scale(1.05);
}

@media (max-width:640px){
  nav a{
    gap:6px;
  }

  .nav-icon,
  .nav-icon svg{
    width:17px;
    height:17px;
  }
}


/* Diploma tier image management */

.activity-tier-row{
  grid-template-columns:
    minmax(130px, .8fr)
    110px
    minmax(240px, 1.4fr)
    auto;
  align-items:start;
  padding:12px;
  border:1px solid #e1e5e8;
  border-radius:10px;
  background:#fafbfc;
}

.tier-image-area{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 110px;
  gap:8px 12px;
  align-items:start;
}

.tier-image-file{
  min-width:0;
}

.tier-image-preview{
  width:110px;
  height:78px;
  object-fit:cover;
  border:1px solid #d5dadd;
  border-radius:7px;
  background:#fff;
}

.tier-image-status{
  grid-column:1 / -1;
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  .activity-tier-row{
    grid-template-columns:
      minmax(0, 1fr)
      100px;
  }

  .tier-image-area{
    grid-column:1 / -1;
  }

  .activity-tier-row > .btn{
    grid-column:1 / -1;
    justify-self:start;
  }
}

@media (max-width:520px){
  .activity-tier-row{
    grid-template-columns:1fr;
  }

  .tier-image-area{
    grid-column:auto;
    grid-template-columns:1fr;
  }

  .tier-image-preview{
    width:100%;
    max-width:240px;
    height:auto;
    aspect-ratio:1.414 / 1;
  }

  .tier-image-status{
    grid-column:auto;
  }

  .activity-tier-row > .btn{
    grid-column:auto;
  }
}


/* ==========================================================
   Editor visual de posición del indicativo
   ========================================================== */

.diploma-editor-section{
  margin-top:22px;
  padding:18px;
  border:1px solid #dce3e8;
  border-radius:13px;
  background:#fafcfd;
}

.diploma-editor-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(270px, .75fr);
  gap:20px;
  align-items:start;
}

.diploma-preview-wrap{
  min-width:0;
}

.diploma-position-preview{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  overflow:hidden;
  border:1px solid #cfd8de;
  border-radius:10px;
  background:
    linear-gradient(45deg, #eef2f4 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f4 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f4 75%);
  background-size:20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  touch-action:none;
}

.diploma-position-preview img{
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.diploma-preview-empty{
  max-width:360px;
  padding:35px 25px;
  color:#748089;
  text-align:center;
  line-height:1.45;
}

.diploma-preview-callsign{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  padding:2px 5px;
  border:1px dashed rgba(0,0,0,.35);
  border-radius:4px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:grab;
  user-select:none;
  touch-action:none;
  text-shadow:
    0 1px 2px rgba(255,255,255,.7);
}

.diploma-preview-callsign:active{
  cursor:grabbing;
}

.diploma-preview-callsign:focus{
  outline:2px solid #0074bd;
  outline-offset:3px;
}

.diploma-editor-controls{
  display:grid;
  gap:14px;
}

@media (max-width:900px){
  .diploma-editor-layout{
    grid-template-columns:1fr;
  }

  .diploma-position-preview{
    min-height:210px;
  }
}



/* ==================================================
   Administración de fuentes de diplomas
   ================================================== */

.admin-fonts-page{
  max-width:1280px;
}

.admin-fonts-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) minmax(320px, .75fr);
  gap:18px;
  margin-top:18px;
  align-items:start;
}

.admin-font-upload-card{
  position:sticky;
  top:14px;
}

.fonts-table{
  min-width:720px;
}

.fonts-table td{
  vertical-align:middle;
}

.font-preview-box{
  margin:18px 0;
  padding:18px;
  border:1px solid #dfe4e8;
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      #fafafa,
      #f1f4f6
    );
  text-align:center;
}

.font-preview-text{
  min-height:80px;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size:58px;
  line-height:1;
  color:#202a30;
  overflow-wrap:anywhere;
}

@media (max-width:1000px){
  .admin-fonts-layout{
    grid-template-columns:1fr;
  }

  .admin-font-upload-card{
    position:static;
  }
}

@media (max-width:520px){
  .font-preview-text{
    font-size:42px;
  }
}

/* =========================================================
   ASORAPA · Editor visual del indicativo del diploma
   ========================================================= */

.diploma-visual-toolbar {
  margin:0 0 14px;
  padding:13px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fafafa;
}

.diploma-visual-toolbar-heading {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:11px;
}

.diploma-visual-status {
  padding:6px 10px;
  border-radius:999px;
  background:#222;
  color:#fff;
  font-family:monospace;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.diploma-visual-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.diploma-visual-button {
  min-width:42px;
}

.diploma-preview-callsign {
  outline:1px dashed rgba(232,117,20,.85);
  outline-offset:7px;
  user-select:none;
  touch-action:none;
}

.diploma-preview-callsign:hover,
.diploma-preview-callsign:focus,
.diploma-preview-callsign.is-resizing {
  outline:2px solid #e87514;
  outline-offset:8px;
}

.diploma-resize-handle {
  position:absolute;
  right:-17px;
  bottom:-17px;
  width:15px;
  height:15px;
  box-sizing:border-box;
  border:2px solid #fff;
  border-radius:50%;
  background:#e87514;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
  cursor:nwse-resize;
  touch-action:none;
  z-index:5;
}

.diploma-resize-handle::after {
  content:"";
  position:absolute;
  inset:-7px;
}

.diploma-position-preview {
  cursor:crosshair;
}

@media(max-width:700px) {
  .diploma-visual-toolbar-heading {
    display:block;
  }

  .diploma-visual-status {
    display:inline-block;
    margin-top:9px;
  }

  .diploma-visual-buttons .btn {
    flex:1 1 auto;
  }
}