* {
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: radial-gradient(
    circle at 30% 15%,
    #6f9be0 0%,
    #2e5a9c 60%,
    #0c1f3d 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding-bottom: 44px; /* deja libre el alto de la taskbar fija */
}

.hidden {
  display: none;
}

/* ---------- Snap de ventanas a mitad de pantalla (estilo KDE) ---------- */
.kde-snap-overlay {
  position: fixed;
  top: 0;
  width: 50%;
  height: calc(100vh - 44px);
  background: rgba(79, 159, 216, 0.18);
  border: 2px solid rgba(79, 159, 216, 0.55);
  border-radius: 8px;
  pointer-events: none;
  z-index: 9000;
  box-sizing: border-box;
  animation: kde-snap-aparecer 0.12s ease;
}
.kde-snap-overlay.kde-snap-lado-izquierda { left: 0; }
.kde-snap-overlay.kde-snap-lado-derecha  { right: 0; left: auto; }
.kde-snap-overlay.hidden { display: none; }
@keyframes kde-snap-aparecer {
  from { opacity: 0; transform: scaleX(0.92); }
  to   { opacity: 1; transform: scaleX(1); }
}
.kde-ventana-snap-animando {
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease !important;
}

/* ---------- Carcasa del telefono ---------- */
.cuerpo-telefono {
  position: relative;
  width: 360px;
  background: linear-gradient(
    135deg,
    #f6f6f6 0%,
    #d2d2d2 35%,
    #aaaaaa 65%,
    #dcdcdc 100%
  );
  border: 1px solid #888;
  border-radius: 30px;
  padding: 14px 18px 16px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  text-align: center;
}

.asa-superior {
  display: flex;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #c9c9c9, #9c9c9c);
  border: 1px solid #888;
  border-radius: 999px;
  width: 130px;
  margin: 0 auto 10px;
  padding: 3px 8px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.asa-superior.agarrando {
  cursor: grabbing;
}

.btn-flotante {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  background: linear-gradient(180deg, #f0f0f0, #c2c2c2);
  border: 1px solid #999;
  border-radius: 4px;
  color: #555;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.btn-flotante:active {
  transform: translateY(1px);
}
.btn-minimizar {
  right: 40px;
  font-size: 14px;
  font-weight: bold;
}
.punto-asa {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fefefe, #8c8c8c);
  border: 1px solid #777;
}

/* ---------- Pantalla LCD ---------- */
.pantalla-lcd {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #d2deb8, #aebb8e);
  border: 2px solid #6f7a57;
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  padding: 8px 10px;
  font-family: "Courier New", Courier, monospace;
  color: #1c2b12;
  min-height: 76px;
}
.lcd-linea-espera {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.18); border-radius: 2px;
  padding: 2px 6px; margin-bottom: 4px;
  font-size: 10px; letter-spacing: 0.4px; color: #1c2b12;
}
.lcd-dnd {
  text-align: center;
  background: rgba(180,0,0,.18);
  border-radius: 2px;
  padding: 2px 6px; margin-bottom: 4px;
  font-size: 10px; font-weight: bold; letter-spacing: 1.5px;
  color: #cc0000;
  animation: lcd-dnd-pulso 2s ease-in-out infinite;
}
@keyframes lcd-dnd-pulso {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.lcd-linea-espera .lcd-le-num { flex: 1; font-weight: bold; font-size: 11px; }
.lcd-linea-espera .lcd-le-badge {
  background: #a04000; color: #ffe0b0;
  border-radius: 2px; padding: 1px 4px; font-size: 9px; font-weight: bold;
}
.lcd-status,
.lcd-subtexto,
.lcd-display {
  position: relative;
  z-index: 1;
}
.lcd-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lcd-subtexto {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.85;
}
.lcd-display {
  font-size: 20px;
  letter-spacing: 2px;
  margin-top: 4px;
  min-height: 24px;
}

.input-lcd {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid #6f7a57;
  color: #1c2b12;
  font-family: "Courier New", Courier, monospace;
  padding: 7px;
  text-align: center;
}

.btn-login {
  margin-top: 14px;
  width: 100%;
  background: linear-gradient(180deg, #7fe08a, #2fa83f);
  border: 1px solid #1f7a2b;
  border-radius: 18px;
  color: #06320c;
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-login:active {
  transform: translateY(1px);
}

/* ---------- Fila de navegacion / marca ---------- */
.fila-navegacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.btn-nav {
  width: 26px;
  height: 22px;
  background: linear-gradient(180deg, #f0f0f0, #c2c2c2);
  border: 1px solid #999;
  border-radius: 4px;
  color: #555;
  cursor: not-allowed;
}
.marca-telefono {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  color: #4a4a4a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.marca-telefono span {
  color: #2fa83f;
}
.btn-panel-lateral {
  width: auto;
  height: auto;
  min-width: 64px;
  white-space: normal;
  line-height: 1.25;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.2px;
  color: #2fa83f;
  padding: 4px 6px;
  cursor: pointer;
}
.btn-panel-lateral:active {
  transform: translateY(1px);
}

/* ---------- Fila de funciones ---------- */
.fila-funciones {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 10px;
}
.btn-funcion {
  flex: 1;
  background: linear-gradient(180deg, #f2f2f2, #c4c4c4);
  border: 1px solid #999;
  border-radius: 5px 5px 3px 3px;
  color: #555;
  font-size: 8.5px;
  font-weight: bold;
  letter-spacing: 0.3px;
  padding: 6px 0;
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-funcion:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}
.btn-funcion.btn-funcion-activo {
  background: linear-gradient(180deg, #f5a623, #d4830a);
  border-color: #b06a00;
  color: #fff;
}

/* ── Panel de transferencia XFER (mismo estilo que directorio telefónico) ── */
.xfer-dialogo {
  display: none; /* JS lo pone a flex al abrir y lo posiciona junto al phone */
  position: fixed;
  z-index: 10010;
  width: 300px;
  flex-direction: column;
}
.xfer-btn-ok {
  background: linear-gradient(180deg,#2a6a2a,#1a4a1a);
  color: #90e090;
}
.xfer-btn-ok:hover { background: linear-gradient(180deg,#336633,#1e5c1e); }
#xfer-lista tr.xfer-fila-sel { background: rgba(0,0,0,.15); font-weight: bold; }

/* ---------- Zona central: laterales + teclado ---------- */
.zona-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.columna-lateral {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.icono-llamada,
.icono-lateral {
  font-size: 14px;
}

.btn-llamada {
  min-width: 62px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #000;
}
.btn-llamada:active {
  transform: translateY(1px);
}
.btn-llamada-verde {
  border-color: #1f7a2b;
  color: #06320c;
}
.btn-llamada-roja {
  border-color: #8a1f1f;
  color: #fff;
}

.slider-led-grupo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.led-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 7px;
  height: 70px;
}
.led-seg {
  flex: 1;
  border-radius: 1px;
}
/* Off */
.led-seg[data-zona="r"] { background: #2a0000; }
.led-seg[data-zona="y"] { background: #1a1400; }
.led-seg[data-zona="g"] { background: #001800; }
/* On */
.led-seg[data-zona="r"].on { background: #ff2020; box-shadow: 0 0 4px #ff2020; }
.led-seg[data-zona="y"].on { background: #ffe000; box-shadow: 0 0 4px #ffe000; }
.led-seg[data-zona="g"].on { background: #20ff20; box-shadow: 0 0 4px #20ff20; }
.slider-volumen {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 18px;
  height: 70px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.slider-roja::-webkit-slider-runnable-track {
  /* Banda coloreada de 6px centrada en el track de 18px usando gradiente */
  background: linear-gradient(90deg,
    transparent calc(50% - 3px),
    #ff4444 calc(50% - 3px),
    #8a1f1f calc(50% + 3px),
    transparent calc(50% + 3px));
  border-radius: 3px;
}
.slider-gris::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,
    transparent calc(50% - 3px),
    #cfcfcf calc(50% - 3px),
    #6b6b6b calc(50% + 3px),
    transparent calc(50% + 3px));
  border-radius: 3px;
}
.slider-roja::-moz-range-track {
  background: linear-gradient(90deg,
    transparent calc(50% - 3px),
    #ff4444 calc(50% - 3px),
    #8a1f1f calc(50% + 3px),
    transparent calc(50% + 3px));
  border-radius: 3px;
}
.slider-gris::-moz-range-track {
  background: linear-gradient(90deg,
    transparent calc(50% - 3px),
    #cfcfcf calc(50% - 3px),
    #6b6b6b calc(50% + 3px),
    transparent calc(50% + 3px));
  border-radius: 3px;
}
.slider-volumen::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 5px;
  background: linear-gradient(90deg, #bbb 0%, #fff 45%, #bbb 100%);
  border: 1px solid #555;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.slider-volumen::-moz-range-thumb {
  width: 18px;
  height: 5px;
  background: linear-gradient(90deg, #bbb 0%, #fff 45%, #bbb 100%);
  border: 1px solid #555;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#btn-hangup:disabled {
  background: #888 !important;
  border-color: #555 !important;
  color: #bbb !important;
  cursor: not-allowed;
  opacity: 0.55;
}
#btn-action:disabled {
  background: #999 !important;
  border-color: #666 !important;
  color: #ccc !important;
  cursor: not-allowed;
  opacity: 0.55;
}

.grid-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 190px;
}
.btn-num {
  background: linear-gradient(
    180deg,
    #fafafa 0%,
    #d4d4d4 55%,
    #c2c2c2 100%
  );
  border: 1px solid #999;
  border-radius: 10px;
  color: #222;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 0 5px;
  cursor: pointer;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-num:active {
  background: linear-gradient(180deg, #c2c2c2, #e8e8e8);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
  transform: translateY(1px);
}
.sub-letra {
  display: block;
  font-size: 7.5px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #777;
  margin-top: 1px;
}

/* ---------- Fila inferior ---------- */
.fila-inferior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
.btn-inferior {
  flex: 1;
  background: linear-gradient(180deg, #f2f2f2, #c4c4c4);
  border: 1px solid #999;
  border-radius: 14px;
  color: #555;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.2;
  padding: 8px 0;
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-inferior-activo {
  opacity: 1;
  cursor: pointer;
}
.btn-inferior-activo:active {
  transform: translateY(1px);
}
.btn-inferior-muteado {
  background: linear-gradient(180deg, #ff8b8b, #d62f2f);
  border-color: #8a1f1f;
  color: #fff;
}
.btn-clear {
  flex: 1;
  background: linear-gradient(180deg, #444, #111);
  border: 1px solid #000;
  border-radius: 14px;
  color: #ccc;
  font-size: 10px;
  font-weight: bold;
  padding: 8px 0;
  cursor: pointer;
}
.btn-clear:active {
  transform: translateY(1px);
}

.marca-inferior {
  margin-top: 12px;
  font-size: 9px;
  color: #666;
}
.marca-inferior strong {
  color: #333;
}

#vista-phone {
  z-index: 2;
}

/* ---------- Panel de marcacion rapida ---------- */
.panel-marcacion-rapida {
  position: fixed;
  z-index: 10; /* el JS lo eleva dinámicamente al mostrarse */
  width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: left 0.4s ease;
}
.panel-marcacion-rapida.hidden {
  display: none;
}
.panel-marcacion-rapida .fila-navegacion,
.btn-esconder-marcacion {
  flex: 0 0 auto;
}
.panel-marcacion-rapida .fila-navegacion {
  justify-content: center;
}
.lista-marcacion-rapida {
  margin-top: 10px;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.tabla-marcacion-rapida {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
}
.tabla-marcacion-rapida th:first-child,
.tabla-marcacion-rapida td:first-child {
  width: 32%;
}
.tabla-marcacion-rapida thead th {
  position: sticky;
  top: 0;
  background: #aebb8e;
  text-align: left;
  text-transform: uppercase;
  font-size: 10px;
  padding: 4px 6px;
  border-bottom: 1px solid #6f7a57;
}
.tabla-marcacion-rapida tbody tr {
  cursor: pointer;
}
.tabla-marcacion-rapida tbody tr:hover {
  background: rgba(0, 0, 0, 0.08);
}
.tabla-marcacion-rapida td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(111, 122, 87, 0.4);
  overflow-wrap: break-word;
  word-break: break-word;
}
.btn-esconder-marcacion {
  margin-top: 12px;
  width: 100%;
}

/* ---------- Taskbar (look and feel KDE Plasma / Breeze) ---------- */
.kde-taskbar.hidden {
  display: none;
}
.kde-taskbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: rgba(33, 36, 39, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.45);
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
  z-index: 1000;
  user-select: none;
}

.kde-btn-inicio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.kde-btn-inicio:hover {
  background: rgba(255, 255, 255, 0.08);
}
.kde-btn-inicio.activo {
  background: rgba(61, 174, 233, 0.28);
}
.kde-icono-inicio {
  display: block;
}

.kde-taskbar-ventanas {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kde-ventana-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: 150px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(61, 174, 233, 0.5);
  border-radius: 5px;
  color: #eff0f1;
  font-size: 12px;
  padding: 0 10px;
  cursor: pointer;
}
.kde-ventana-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.kde-ventana-btn.hidden {
  display: none;
}
.kde-ventana-btn.kde-ventana-btn-activa {
  background: rgba(61, 174, 233, 0.32);
  border-color: rgba(61, 174, 233, 0.9);
}
.kde-ventana-btn.kde-ventana-btn-minimizada {
  background: rgba(243, 156, 18, 0.18);
  border-color: rgba(243, 156, 18, 0.6);
  color: #f3c98c;
}
.kde-ventana-titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kde-reloj {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 6px;
  color: #eff0f1;
  cursor: pointer;
  margin-left: auto;
}
.kde-reloj:hover {
  background: rgba(255, 255, 255, 0.08);
}
.kde-reloj-hora {
  font-size: 13px;
  font-weight: 600;
}
.kde-reloj-fecha {
  font-size: 10px;
  opacity: 0.7;
}

/* ---------- Menu de inicio (estilo Kickoff) ---------- */
.kde-menu-inicio {
  position: fixed;
  left: 6px;
  bottom: 50px;
  width: 220px;
  background: rgba(40, 44, 48, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 1001;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.kde-menu-inicio.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.kde-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #eff0f1;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.kde-menu-item:hover {
  background: rgba(61, 174, 233, 0.28);
}
.kde-menu-icono {
  width: 20px;
  font-size: 15px;
  text-align: center;
}

/* ---------- Submenu anidado (estilo "Aplicaciones" del Kickoff de KDE) ---------- */
.kde-menu-item-con-submenu {
  position: relative;
}
.kde-menu-flecha {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.7;
}
.kde-submenu {
  position: absolute;
  left: 100%;
  bottom: 0;
  min-width: 200px;
  background: rgba(40, 44, 48, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.55);
  padding: 6px;
  margin-left: 6px;
  display: none;
}
.kde-submenu.visible {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* ---------- Calendario del reloj (estilo Plasma) ---------- */
.kde-calendario {
  position: fixed;
  right: 6px;
  bottom: 50px;
  width: 230px;
  background: rgba(40, 44, 48, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 10px;
  z-index: 1001;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  color: #eff0f1;
}
.kde-calendario.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.kde-cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kde-cal-titulo {
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}
.kde-cal-nav {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #eff0f1;
  font-size: 15px;
  cursor: pointer;
}
.kde-cal-nav:hover {
  background: rgba(255, 255, 255, 0.1);
}

.kde-cal-dias-semana,
.kde-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.kde-cal-dias-semana span {
  font-size: 10px;
  opacity: 0.6;
  padding-bottom: 4px;
}
.kde-cal-grid {
  row-gap: 2px;
}
.kde-cal-celda {
  font-size: 11px;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.kde-cal-celda:hover {
  background: rgba(255, 255, 255, 0.12);
}
.kde-cal-celda-puntos {
  display: flex;
  gap: 2px;
  height: 5px;
}
.kde-cal-celda-punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.kde-cal-celda-seleccionada {
  outline: 1px solid #3daee9;
}
.kde-cal-celda-fuera {
  opacity: 0.35;
}
.kde-cal-celda-hoy {
  background: #3daee9;
  color: #fff;
  font-weight: 600;
}
.kde-cal-hoy {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #eff0f1;
  font-size: 11px;
  padding: 5px 0;
  cursor: pointer;
}
.kde-cal-hoy:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Ventanas de aplicacion (decoracion estilo Breeze/KDE) ---------- */
.kde-ventana {
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 240px;
  background: #eff0f1;
  border: 1px solid #1b1e20;
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 5;
}
.kde-ventana.hidden {
  display: none;
}
.kde-ventana.kde-ventana-maximizada {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 44px) !important;
  border-radius: 0;
}

.kde-ventana-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 6px 0 10px;
  background: linear-gradient(180deg, #4d4d4d, #303030);
  color: #d6d6d6;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.kde-ventana-barra.agarrando {
  cursor: grabbing;
}
.kde-ventana-barra.kde-ventana-activa {
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
}
.kde-ventana-barra-icono {
  font-size: 13px;
}
.kde-ventana-barra-titulo {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kde-ventana-barra-botones {
  display: flex;
  gap: 4px;
}
.kde-ventana-btn-deco {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 3px;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
}
.kde-ventana-btn-deco:hover {
  background: rgba(255, 255, 255, 0.22);
}
.kde-ventana-btn-cerrar:hover {
  background: #e0413d;
  color: #fff;
}

.kde-ventana-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  font-size: 13px;
  color: #232629;
}

.kde-ventana-resize {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background-image:
    linear-gradient(135deg, transparent 0 40%, #9a9a9a 40% 46%, transparent 46% 100%),
    linear-gradient(135deg, transparent 0 65%, #9a9a9a 65% 71%, transparent 71% 100%);
}
.kde-ventana-maximizada .kde-ventana-resize {
  display: none;
}

/* ---------- Formulario CRUD: Editar Marcacion Rapida ---------- */
.form-marcacion-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.form-marcacion-admin input[type="text"] {
  flex: 1 1 140px;
  padding: 6px 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 13px;
}
.form-marcacion-admin button {
  padding: 6px 14px;
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#btn-cancelar-edicion-marcacion-admin {
  border-color: #999;
  background: linear-gradient(180deg, #e8e8e8, #c4c4c4);
  color: #333;
}

.tabla-marcacion-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tabla-marcacion-admin th {
  text-align: left;
  text-transform: uppercase;
  font-size: 10px;
  color: #555;
  padding: 4px 6px;
  border-bottom: 1px solid #b6b8ba;
}
.tabla-marcacion-admin td {
  padding: 5px 6px;
  border-bottom: 1px solid #dcdcdc;
}
.tabla-marcacion-admin button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
}
.tabla-marcacion-admin button:hover {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
}

/* ---------- Ventana Reportes (CDR de Issabel, asteriskcdrdb) ---------- */
.form-reportes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
}
.form-reportes label {
  display:     flex;
  align-items: center;
  gap:         4px;
}
/* span dentro de label actúa como texto de etiqueta */
.form-reportes label > span {
  white-space: nowrap;
}
.form-reportes input[type="date"] {
  padding: 5px 6px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 12px;
}
.form-reportes button {
  padding: 6px 14px;
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#btn-grafico-reportes {
  border-color: #2e8b57;
  background: linear-gradient(180deg, #4cb87a, #2e8b57);
  margin-left: auto;
}

.tabla-reportes {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tabla-reportes th {
  text-align: left;
  text-transform: uppercase;
  font-size: 10px;
  color: #555;
  padding: 4px 6px;
  border-bottom: 1px solid #b6b8ba;
  white-space: nowrap;
}
.tabla-reportes td {
  padding: 5px 6px;
  border-bottom: 1px solid #dcdcdc;
  white-space: nowrap;
}
.tabla-reportes td.estado-answered {
  color: #2e8b57;
  font-weight: 600;
}
.tabla-reportes td.estado-no-answer,
.tabla-reportes td.estado-busy,
.tabla-reportes td.estado-failed,
.tabla-reportes td.estado-congestion {
  color: #c0392b;
  font-weight: 600;
}

#tabla-reportes_wrapper,
#tabla-rep-banco_wrapper,
#tabla-rep-frases_wrapper {
  font-size: 12px;
}
#tabla-reportes_wrapper .dt-buttons .dt-button,
#tabla-rep-banco_wrapper .dt-buttons .dt-button,
#tabla-rep-frases_wrapper .dt-buttons .dt-button {
  padding: 5px 10px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

/* ── Tabs de Reportes ── */
.rep-ventana-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}
.rep-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  background: rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.rep-tab {
  padding: 5px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rep-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rep-tab-activo {
  background: rgba(40,44,48,0.97);
  color: #fff;
  border-color: rgba(255,255,255,0.1);
}
.rep-panel {
  flex: 1;
  overflow: auto;
  padding: 8px 10px 10px;
}

/* ── Totales rápidos ── */
.rep-totales {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  font-size: 12px;
}
.rep-total-item { color: rgba(255,255,255,0.75); }
.rep-total-item strong { color: #fff; }
.rep-total-ok strong { color: #5db858; }
.rep-total-no strong { color: #e06c75; }

/* ── Formularios con labels en columna (texto arriba + control abajo) ── */
.rep-form-banco {
  align-items: flex-end;   /* alinea todo por la base del control */
}
.rep-form-banco label {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            3px;
}
.rep-form-banco label > span {
  font-size: 11px;
  color:     rgba(255,255,255,0.65);
  line-height: 1;
}
.rep-form-banco label > select,
.rep-form-banco label > input[type="date"] {
  font-size: 12px;
  padding:   4px 6px;
}

/* Contenedor de botones de acción — siempre alineado a la base */
.rep-form-acciones {
  display:     flex;
  align-items: center;
  gap:         6px;
  align-self:  flex-end;   /* baja al nivel del borde inferior de los controles */
}

/* Botones de descarga — igual estilo que Buscar pero diferenciado */
.rep-btn-dl {
  padding:     6px 12px;
  font-size:   12px;
  font-weight: 600;
  border:      1px solid #2f7cb8;
  border-radius: 3px;
  background:  linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color:       #fff;
  cursor:      pointer;
  white-space: nowrap;
  transition:  opacity 0.15s;
}
.rep-btn-dl:hover { opacity: 0.85; }

@media (prefers-color-scheme: light) {
  .rep-form-banco label > span { color: rgba(0,0,0,0.5); }
}

/* Modo claro */
@media (prefers-color-scheme: light) {
  .rep-tab { color: rgba(0,0,0,0.5); }
  .rep-tab:hover { background: rgba(0,0,0,0.06); color: #000; }
  .rep-tab-activo { background: #fff; color: #000; border-color: #ccc; }
  .rep-totales { background: rgba(0,0,0,0.04); }
  .rep-total-item { color: #333; }
  .rep-total-item strong { color: #000; }
  .rep-tabs { background: rgba(0,0,0,0.06); border-color: #ccc; }
}

.form-reportes-grafico {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-tipo-grafico {
  padding: 6px 14px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.btn-tipo-grafico.activo {
  border-color: #2f7cb8;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
  font-weight: 600;
}

/* ---------- Fondo de escritorio (wallpaper, solo visible tras login) ---------- */
.kde-fondo-escritorio {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Ventana Configuracion ---------- */
.kde-config-cuerpo {
  display: flex;
  padding: 0;
  gap: 0;
}
.kde-config-sidebar {
  flex: 0 0 180px;
  background: #e3e4e5;
  border-right: 1px solid #c7c8ca;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kde-config-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #232629;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.kde-config-sidebar-item:hover {
  background: rgba(61, 174, 233, 0.18);
}
.kde-config-sidebar-item.activo {
  background: rgba(61, 174, 233, 0.32);
  font-weight: 600;
}
.kde-config-contenido {
  flex: 1 1 auto;
  padding: 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kde-config-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}
.kde-config-panel.hidden {
  display: none;
}
.kde-config-barra-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.kde-config-barra-acciones button {
  padding: 6px 14px;
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.kde-config-ayuda {
  font-size: 11px;
  color: #666;
}
.kde-wallpaper-miniaturas {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  padding: 10px;
  background: #fff;
  border: 1px solid #c7c8ca;
  border-radius: 4px;
}
.kde-wallpaper-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.kde-wallpaper-wrap:hover .kde-wallpaper-btn-borrar { opacity: 1; }
.kde-wallpaper-btn-borrar {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px; line-height: 20px; text-align: center;
  cursor: pointer; padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.kde-wallpaper-btn-borrar:hover { background: #c0392b; }
.kde-wallpaper-miniatura {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: block;
}
.kde-wallpaper-miniatura:hover {
  border-color: #b6d8ee;
}
.kde-wallpaper-miniatura.seleccionada {
  border-color: #2f7cb8;
}
.kde-config-barra-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  padding-bottom: 10px;
  margin-top: 4px;
}
.kde-config-barra-botones button {
  padding: 7px 18px;
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#btn-aplicar-wallpaper:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kde-config-campo-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
}
.kde-estado-texto {
  font-size: 12px;
  color: #444;
  min-height: 16px;
}
.kde-estado-texto.error {
  color: #c0392b;
}
.kde-config-barra-botones button:last-child {
  border-color: #999;
  background: linear-gradient(180deg, #e8e8e8, #c4c4c4);
  color: #333;
}
.kde-btn-peligro {
  border-color: #a33 !important;
  background: linear-gradient(180deg, #d9534f, #a33) !important;
  color: #fff !important;
}
.kde-correo-cuentas-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.kde-correo-cuentas-encabezado h4 {
  margin: 0;
}
.kde-correo-cuentas-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
.kde-correo-cuenta-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.kde-correo-cuenta-fila:hover {
  background: rgba(61, 174, 233, 0.12);
}
.kde-correo-cuenta-fila.activa {
  background: rgba(61, 174, 233, 0.28);
  border-color: #3daee9;
}
.kde-correo-cuenta-fila-correo {
  font-weight: 600;
  color: #232629;
}
.kde-correo-cuenta-fila-nombre {
  color: #777;
  font-size: 11px;
}
.kde-fila-lista-btn-eliminar {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #a33;
  padding: 2px 5px;
  border-radius: 3px;
}
.kde-fila-lista-btn-eliminar:hover {
  color: #fff;
  background: #a33;
}
.kde-correo-cuenta-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #c7c8ca;
  padding-top: 12px;
}
.kde-correo-cuenta-form.hidden {
  display: none;
}
.kde-correo-carpetas-sync-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #c7c8ca;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
}
.kde-correo-carpetas-sync-lista label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

/* ---------- Ventana Explorador de Archivos (estilo Dolphin) ---------- */
.kde-explorador-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}
.kde-explorador-menu-barra {
  display: flex;
  gap: 2px;
  padding: 3px 6px;
  background: #eff0f1;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
}
.kde-explorador-menu-item {
  position: relative;
}
.kde-explorador-menu-item > button {
  padding: 5px 10px;
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
}
.kde-explorador-menu-item > button:hover {
  background: rgba(61, 174, 233, 0.18);
}
.kde-explorador-menu-desplegable {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: #eff0f1;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  padding: 4px;
  min-width: 170px;
}
.kde-explorador-menu-desplegable.hidden {
  display: none;
}
.kde-explorador-menu-desplegable button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 12px;
  color: #232629;
  border-radius: 3px;
  cursor: pointer;
}
.kde-explorador-menu-desplegable button:hover {
  background: rgba(61, 174, 233, 0.22);
}
.kde-explorador-menu-desplegable button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.kde-explorador-principal {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}
.kde-explorador-arbol {
  flex: 0 0 170px;
  overflow-y: auto;
  background: #f3f4f5;
  padding: 6px 4px;
  font-size: 12px;
}
.kde-explorador-contenido {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kde-arbol-nodo-fila {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.kde-arbol-nodo-fila:hover {
  background: rgba(61, 174, 233, 0.18);
}
.kde-arbol-nodo-fila.seleccionado {
  background: rgba(61, 174, 233, 0.32);
}
/* Nodos raiz de cuenta en el arbol unificado de Correo (clave compuesta
   "cuenta:<id>") -- distinguidos del resto sin necesitar una clase de JS
   aparte, ya que dataset.clave ya identifica el tipo de nodo. */
.kde-arbol-nodo-fila[data-clave^="cuenta:"] {
  font-weight: 600;
}
.kde-arbol-nodo-flecha {
  width: 12px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 9px;
  color: #555;
}
.kde-arbol-nodo-hijos {
  margin-left: 14px;
}
.kde-arbol-nodo-hijos.hidden {
  display: none;
}
.kde-arbol-nodo-insignia {
  margin-left: auto;
  flex: 0 0 auto;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 9px;
  min-width: 14px;
  text-align: center;
}
.kde-modal-propiedades-caja {
  width: 320px;
}
.kde-propiedades-contenido {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #333;
}
.kde-propiedades-fila {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.kde-propiedades-fila strong {
  color: #666;
  font-weight: 600;
}

/* ---------- Ventana Lector PDF (envuelve el visor oficial de pdf.js) ---------- */
.kde-pdf-cuerpo {
  display: flex;
  padding: 0;
}
.kde-pdf-iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Ventana Visor de Imagenes ---------- */
.kde-imagenes-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}
.kde-imagenes-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #e3e4e5;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
}
.kde-imagenes-toolbar button {
  padding: 6px 12px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-imagenes-toolbar button:hover {
  background: #f2f2f2;
}
.kde-imagenes-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.kde-imagenes-toolbar button.hidden {
  display: none;
}
.kde-imagenes-zoom-valor {
  font-size: 12px;
  color: #444;
  min-width: 42px;
  text-align: center;
}
.kde-imagenes-lienzo {
  flex: 1 1 auto;
  /* "auto" (con scrollbars) se sacó a propósito: flex centrado +
     overflow:auto tiene un problema conocido cuando el contenido crece
     desde el centro (como hace un transform:scale) -- el scroll resultante
     queda asimétrico y no alcanza a mostrar todo el sobrante de arriba/abajo
     aunque la barra aparezca. En vez de pelear con eso, se navega la
     imagen agrandada solo arrastrándola (ver _panX/_panY en script.js), sin
     scrollbars de por medio. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b2b2b;
}
.kde-imagenes-lienzo img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.1s ease;
  cursor: grab;
}
.kde-imagenes-lienzo img.kde-imagenes-arrastrando {
  /* Sin esto, el arrastre se siente "atrasado" -- la transicion (pensada
     para que el zoom con los botones se vea suave) hace que la imagen
     persiga al mouse en vez de seguirlo al instante mientras se arrastra. */
  transition: none;
  cursor: grabbing;
}
.kde-explorador-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #e3e4e5;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
}
.kde-explorador-toolbar button {
  padding: 6px 12px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-explorador-toolbar button:hover {
  background: #f2f2f2;
}
.kde-explorador-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.kde-explorador-breadcrumb {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #232629;
  overflow: hidden;
}
.kde-explorador-breadcrumb span {
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.kde-explorador-breadcrumb span:hover {
  background: rgba(61, 174, 233, 0.18);
}
.kde-explorador-breadcrumb span.arrastrando-sobre {
  background: rgba(61, 174, 233, 0.4);
}
.kde-explorador-grid {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 12px;
  background: #fff;
  position: relative;
}
.kde-explorador-rectangulo-seleccion {
  position: absolute;
  border: 1px solid #2f7cb8;
  background: rgba(61, 174, 233, 0.18);
  pointer-events: none;
  z-index: 10;
}
.kde-explorador-rectangulo-seleccion.hidden {
  display: none;
}
.kde-explorador-item {
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  text-align: center;
}
.kde-explorador-item:hover {
  background: rgba(61, 174, 233, 0.12);
}
.kde-explorador-item.seleccionado {
  background: rgba(61, 174, 233, 0.28);
}
.kde-explorador-item.arrastrando-sobre {
  background: rgba(61, 174, 233, 0.45);
  outline: 2px dashed #2f7cb8;
}
.kde-explorador-item-icono {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.kde-explorador-item-icono img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.kde-explorador-item-nombre {
  font-size: 11px;
  color: #232629;
  word-break: break-word;
  max-width: 88px;
}
.kde-explorador-item-nombre input {
  width: 80px;
  font-size: 11px;
  padding: 1px 2px;
}
.kde-explorador-grid.hidden { display: none; }
.kde-explorador-lista {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
}
.kde-explorador-lista.hidden { display: none; }
.kde-explorador-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kde-explorador-tabla thead th {
  position: sticky;
  top: 0;
  background: #eff0f1;
  border-bottom: 1px solid #c7c8ca;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  color: #444;
  user-select: none;
}
.kde-explorador-tabla thead th.kde-explorador-col-tamano,
.kde-explorador-tabla thead th.kde-explorador-col-fecha {
  text-align: right;
}
.kde-explorador-fila {
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  user-select: none;
}
.kde-explorador-fila:hover { background: #f0f5fb; }
.kde-explorador-fila.seleccionado { background: rgba(61, 174, 233, 0.22); }
.kde-explorador-fila.arrastrando-sobre { background: rgba(61, 174, 233, 0.4); }
.kde-explorador-col-nombre {
  padding: 5px 10px;
  display: table-cell;
  align-items: center;
  gap: 6px;
  min-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  width: 60%;
}
.kde-explorador-fila-icono {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 6px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.kde-explorador-fila-miniatura {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
}
.kde-explorador-col-tamano {
  padding: 5px 10px;
  text-align: right;
  white-space: nowrap;
  color: #555;
  width: 90px;
}
.kde-explorador-col-fecha {
  padding: 5px 10px;
  text-align: right;
  white-space: nowrap;
  color: #555;
  width: 160px;
}
.kde-explorador-lista-vacio {
  padding: 40px;
  text-align: center;
  color: #888;
  font-size: 13px;
}
.kde-explorador-vista-botones {
  display: flex;
  gap: 0;
}
.kde-explorador-vista-botones button {
  padding: 5px 9px !important;
  border-radius: 0 !important;
  border-right-width: 0 !important;
  font-size: 14px !important;
}
.kde-explorador-vista-botones button:first-child { border-radius: 3px 0 0 3px !important; }
.kde-explorador-vista-botones button:last-child  { border-radius: 0 3px 3px 0 !important; border-right-width: 1px !important; }
.kde-explorador-vista-botones button.kde-vista-activa {
  background: #d0e8f7 !important;
  border-color: #7bbde0 !important;
  color: #1a5f88;
}
.kde-explorador-barra-busqueda {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f8f9fa;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
}
.kde-explorador-barra-busqueda.hidden { display: none; }
.kde-explorador-barra-busqueda input {
  flex: 1 1 auto;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 12px;
  outline: none;
}
.kde-explorador-barra-busqueda input:focus { border-color: #3daee9; box-shadow: 0 0 0 2px rgba(61,174,233,0.2); }
.kde-explorador-barra-busqueda button {
  padding: 4px 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #555;
}
.kde-explorador-barra-busqueda button:hover { background: #f2f2f2; }

/* ---------- Ventana Office (editor real via Collabora Online / WOPI) ---------- */
.kde-office-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
}
.kde-office-vacio {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #2b2b2b;
  color: #ddd;
  overflow: hidden;
}
.kde-office-vacio-nuevo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  min-width: 240px;
  border-right: 1px solid #444;
}
.kde-office-vacio p {
  margin: 0 0 6px;
  font-size: 13px;
}
.kde-office-vacio button {
  padding: 10px 18px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  min-width: 200px;
}
.kde-office-vacio button:hover {
  background: #f2f2f2;
}
.kde-office-recientes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
  overflow-y: auto;
  gap: 6px;
}
.kde-office-recientes p {
  margin: 0 0 8px;
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kde-office-recientes-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kde-office-reciente-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  color: #ddd;
  transition: background 0.12s;
}
.kde-office-reciente-item:hover {
  background: #3a3a3a;
}
.kde-office-reciente-nombre {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kde-office-reciente-ruta {
  font-size: 11px;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.kde-office-recientes.hidden { display: none; }
.kde-office-cargando,
.kde-office-error {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b2b2b;
  color: #ddd;
  font-size: 13px;
  padding: 20px;
  text-align: center;
}
.kde-office-error {
  color: #f5b7b1;
  flex-direction: column;
  gap: 12px;
}
.kde-office-error button {
  padding: 6px 16px;
  border: 1px solid #888;
  border-radius: 3px;
  background: #3a3a3a;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-office-error button:hover {
  background: #474747;
}
.kde-office-iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: none;
}
/* Estas 4 clases fijan su propio "display" (flex o block via width/height),
   con la misma especificidad que ".hidden" (una sola clase) -- sin este
   override gana la regla declarada despues en la cascada (esta misma) y
   ".hidden" deja de ocultar nada aunque classList.contains("hidden") sea
   true. Mismo patron ya usado en .kde-ventana.hidden/.kde-ventana-btn.hidden. */
.kde-office-vacio.hidden,
.kde-office-cargando.hidden,
.kde-office-error.hidden,
.kde-office-iframe.hidden {
  display: none;
}
.kde-office-banner-lento {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(40, 40, 40, 0.95);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  z-index: 20;
}
.kde-office-banner-lento.hidden {
  display: none;
}
.kde-office-banner-lento button {
  padding: 5px 12px;
  border: 1px solid #888;
  border-radius: 3px;
  background: #fff;
  color: #232629;
  font-size: 12px;
  cursor: pointer;
}
.kde-office-banner-lento button[data-rol="btn-banner-cerrar"] {
  padding: 5px 8px;
  background: transparent;
  color: #fff;
  border-color: #777;
}

/* ---------- Menu contextual (clic derecho, estilo Dolphin) ---------- */
.kde-menu-contextual {
  position: fixed;
  z-index: 5000;
  background: #eff0f1;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  padding: 4px;
  min-width: 170px;
}
.kde-menu-contextual.hidden {
  display: none;
}
.kde-menu-contextual button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 12px;
  color: #232629;
  border-radius: 3px;
  cursor: pointer;
}
.kde-menu-contextual button:hover {
  background: rgba(61, 174, 233, 0.22);
}

/* ---------- Vista previa del dia en el mini-calendario de la taskbar ---------- */
.kde-cal-dia-preview {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 8px;
}
.kde-cal-dia-preview.hidden {
  display: none;
}
.kde-cal-dia-preview-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.kde-cal-dia-preview-cabecera button {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 4px;
  color: #eff0f1;
  cursor: pointer;
  font-size: 13px;
}
.kde-cal-dia-preview-cabecera button:hover {
  background: rgba(255, 255, 255, 0.22);
}
.kde-cal-dia-preview-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}
.kde-cal-dia-preview-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.kde-cal-dia-preview-item:hover {
  background: rgba(255, 255, 255, 0.14);
}
.kde-cal-dia-preview-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.kde-cal-dia-preview-hora {
  opacity: 0.7;
  flex: 0 0 auto;
}
.kde-cal-dia-preview-vacio {
  font-size: 11px;
  opacity: 0.6;
  text-align: center;
  padding: 6px 0;
}

/* ---------- Modal de evento (compartido por el mini-calendario y la app Calendario) ---------- */
.kde-modal-evento {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kde-modal-evento.hidden,
.kde-modal-evento-campo.hidden {
  display: none;
}
.kde-modal-evento-caja {
  background: #eff0f1;
  border-radius: 8px;
  padding: 20px;
  width: 380px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kde-modal-evento-caja h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #232629;
}
.kde-modal-evento-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #444;
}
.kde-modal-evento-campo input,
.kde-modal-evento-campo select,
.kde-modal-evento-campo textarea {
  padding: 6px 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.kde-modal-evento-campo input,
.kde-modal-evento-campo select {
  /* Sin esto, un <select> queda mas delgado que un <input> aunque ambos
     tengan el mismo padding -- el navegador le da una altura de linea base
     distinta por defecto a cada tipo de control. No se aplica a textarea:
     ese debe poder crecer mas alla de una sola linea (ver el comentario de
     mas abajo sobre su max-height y el ResizeObserver que lo acompaña). */
  height: 32px;
}
.kde-modal-evento-campo textarea {
  /* Tope duro: el navegador respeta max-width/max-height incluso al
     arrastrar la manija de resize nativa del textarea, asi que esto por si
     solo ya garantiza que nunca puede crecer mas alla de lo que la caja del
     modal (max-width:90vw/max-height:90vh) podria llegar a contener -- el
     ResizeObserver en script.js se encarga de que la caja crezca CON el
     textarea en vez de solo evitar que se salga. */
  max-width: calc(90vw - 40px);
  max-height: 60vh;
}
.kde-modal-evento-fila {
  display: flex;
  gap: 10px;
}
.kde-modal-evento-fila .kde-modal-evento-campo {
  flex: 1 1 0;
}
.kde-evento-colores {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.kde-evento-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.kde-evento-color-swatch.seleccionado {
  border-color: #232629;
}
.kde-modal-evento-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.kde-modal-evento-botones button {
  padding: 7px 16px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-btn-guardar-evento {
  border-color: #2f7cb8 !important;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8) !important;
  color: #fff !important;
  font-weight: 600;
}
.kde-btn-eliminar-evento {
  border-color: #c0392b !important;
  background: linear-gradient(180deg, #e57368, #c0392b) !important;
  color: #fff !important;
  margin-right: auto;
}
.kde-evento-alarmas-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kde-evento-alarma-fila {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kde-evento-alarma-fila select {
  flex: 1 1 auto;
  padding: 5px 6px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 12px;
}
.kde-evento-alarma-fila button {
  padding: 4px 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}
.kde-btn-agregar-alarma {
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  margin-top: 2px;
}

/* ---------- Notificaciones flotantes de alarma (estilo KDE Plasma) ---------- */
#notificaciones-alarma {
  /* Anclado exactamente donde aparece el mini-calendario de la taskbar
     (.kde-calendario: right:6px; bottom:50px) -- asi la notificacion sale
     "encima del calendario de la taskbar", igual que las notificaciones de
     KDE Plasma aparecen justo encima del reloj/bandeja del sistema, no en
     una esquina arbitraria de la pantalla. Como solo "bottom" esta fijo, el
     stack de tarjetas crece hacia arriba al agregarse mas, no se superpone
     con la taskbar. */
  position: fixed;
  right: 6px;
  bottom: 50px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
}
.kde-notificacion-alarma {
  background: #fdfdfd;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  border-left: 5px solid #3daee9;
  padding: 10px 12px;
  font-size: 12px;
  color: #232629;
  animation: kde-notificacion-entrada 0.18s ease-out;
}
@keyframes kde-notificacion-entrada {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.kde-notificacion-alarma-titulo {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kde-notificacion-alarma-titulo::before {
  content: "⏰";
}
.kde-notificacion-alarma-hora {
  color: #666;
  margin-bottom: 4px;
}
.kde-notificacion-alarma-descripcion {
  color: #444;
  margin-bottom: 8px;
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kde-notificacion-alarma-botones {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.kde-notificacion-alarma-botones button {
  padding: 4px 10px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}
/* Notificación de llamada entrante — borde y botones especiales */
.kde-notificacion-llamada {
  border-left-color: #22bb55;
  animation: kde-notificacion-llamada-pulso 0.8s ease-in-out infinite alternate,
             kde-notificacion-entrada 0.18s ease-out;
}
@keyframes kde-notificacion-llamada-pulso {
  from { box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
  to   { box-shadow: 0 6px 28px rgba(34,187,85,0.55); }
}
/* Ocultar el ::before de la notificación de llamada (no es alarma de reloj) */
.kde-notificacion-llamada .kde-notificacion-alarma-titulo::before { content: ""; display: none; }
/* Botón del teléfono en la taskbar parpadeando durante llamada entrante */
.kde-ventana-btn-llamada {
  animation: kde-taskbar-llamada-pulso 0.55s ease-in-out infinite alternate !important;
  border-color: #22bb55 !important;
  color: #22bb55 !important;
}
@keyframes kde-taskbar-llamada-pulso {
  from { background: rgba(34,187,85,0.12); box-shadow: none; }
  to   { background: rgba(34,187,85,0.40); box-shadow: 0 0 8px rgba(34,187,85,0.6); }
}
.kde-notif-llamada-contestar {
  background: #1a7a1a !important;
  color: #fff !important;
  border-color: #1a7a1a !important;
  font-weight: 600;
}
.kde-notif-llamada-contestar:hover { background: #22a022 !important; }
.kde-notif-llamada-rechazar {
  background: #7a1a1a !important;
  color: #fff !important;
  border-color: #7a1a1a !important;
}
.kde-notif-llamada-rechazar:hover { background: #a02222 !important; }

.kde-notif-cerrar-todas {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #c45;
  border-radius: 5px;
  background: #fff0f2;
  color: #c22;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.kde-notif-cerrar-todas:hover { background: #fde; }
.kde-menu-copiar-mover {
  position: fixed;
  z-index: 99999;
  background: #eff0f1;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  padding: 4px;
  min-width: 155px;
}
.kde-menu-copiar-mover button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  color: #232629;
  border-radius: 3px;
  cursor: pointer;
}
.kde-menu-copiar-mover button:hover { background: rgba(61,174,233,0.22); }

/* ---------- Ventana app Calendario ---------- */
.kde-calapp-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}
.kde-calapp-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #e3e4e5;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.kde-calapp-toolbar button {
  padding: 6px 12px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-calapp-toolbar button:hover {
  background: #f2f2f2;
}
.kde-calapp-titulo-periodo {
  font-size: 13px;
  font-weight: 600;
  color: #232629;
  text-transform: capitalize;
  min-width: 160px;
}
.kde-calapp-vistas {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: #fff;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  padding: 2px;
}
.kde-calapp-btn-vista {
  border: none !important;
  background: transparent !important;
}
.kde-calapp-btn-vista.activo {
  background: #2f7cb8 !important;
  color: #fff;
}
.kde-calapp-btn-nuevo {
  border-color: #2e8b57 !important;
  background: linear-gradient(180deg, #4cb87a, #2e8b57) !important;
  color: #fff !important;
  font-weight: 600;
}
.kde-calapp-contenido {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px;
  background: #fff;
}

.kde-calapp-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kde-calapp-mes-dia-semana {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  color: #777;
  padding-bottom: 4px;
}
.kde-calapp-mes-celda {
  min-height: 70px;
  min-width: 0; /* sin esto, un evento con texto largo (white-space:nowrap)
                   empuja el min-content de esta celda como item de grid y
                   distorsiona el ancho de toda la columna -- el ellipsis de
                   .kde-calapp-mes-evento-chip nunca llega a activarse porque
                   la celda jamas se reduce por debajo del texto. */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kde-calapp-mes-celda:hover {
  background: #f7fbff;
}
.kde-calapp-mes-celda-fuera {
  opacity: 0.4;
}
.kde-calapp-mes-celda-hoy {
  border-color: #2f7cb8;
  background: #eaf4fb;
}
.kde-calapp-mes-celda-seleccionada {
  outline: 2px solid #2f7cb8;
}
.kde-calapp-mes-celda-numero {
  font-size: 12px;
  font-weight: 600;
}
.kde-calapp-mes-celda-eventos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
}
.kde-calapp-mes-evento-chip {
  font-size: 9px;
  color: #fff;
  border-radius: 2px;
  padding: 1px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kde-calapp-mes-evento-mas {
  font-size: 9px;
  color: #777;
}

.kde-calapp-detalle-dia {
  margin-top: 14px;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}
.kde-calapp-detalle-dia-titulo {
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 8px;
}

.kde-calapp-semana-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.kde-calapp-semana-columna {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  min-height: 200px;
  min-width: 0; /* mismo motivo que .kde-calapp-mes-celda: sin esto un titulo
                   largo distorsiona el ancho de la columna del grid. */
  display: flex;
  flex-direction: column;
}
.kde-calapp-semana-columna-cabecera {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 1px solid #e0e0e0;
  text-transform: capitalize;
  cursor: pointer;
}
.kde-calapp-semana-columna-cabecera:hover {
  background: #f7fbff;
}
.kde-calapp-semana-columna-lista {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kde-calapp-evento-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.kde-calapp-evento-item:hover {
  filter: brightness(0.92);
}
.kde-calapp-evento-item-hora {
  font-weight: 600;
  flex: 0 0 auto;
}
.kde-calapp-evento-item-titulo {
  flex: 1 1 auto;
  min-width: 0; /* item de flex en fila: sin esto, min-width:auto usa el
                   ancho del texto sin cortar como minimo y el ellipsis
                   nunca se activa. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kde-calapp-dia-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
}
.kde-calapp-vacio {
  color: #777;
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
}

.kde-calapp-anio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.kde-calapp-anio-mes {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
}
.kde-calapp-anio-mes-titulo {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 6px;
  cursor: pointer;
}
.kde-calapp-anio-mes-titulo:hover {
  color: #2f7cb8;
}
.kde-calapp-anio-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: 9px;
  text-align: center;
}
.kde-calapp-anio-dia {
  padding: 2px 0;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.kde-calapp-anio-dia:hover {
  background: #f0f0f0;
}
.kde-calapp-anio-dia-fuera {
  opacity: 0.3;
  cursor: default;
}
.kde-calapp-anio-dia-hoy {
  background: #2f7cb8;
  color: #fff;
}
.kde-calapp-anio-dia-evento::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-evento, #2f7cb8);
}

/* ---------- Ventana Correo (cliente IMAP/SMTP) ---------- */
.kde-correo-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}
.kde-correo-cuerpo.arrastrando-sobre,
.kde-redactar-cuerpo.arrastrando-sobre,
.kde-ventana-cuerpo.arrastrando-sobre,
.kde-office-cuerpo.arrastrando-sobre {
  outline: 2px dashed #2f7cb8;
  outline-offset: -2px;
  background: rgba(61, 174, 233, 0.08);
}
.kde-explorador-grid.arrastrando-sobre {
  outline: 2px dashed #2f7cb8;
  outline-offset: -4px;
  background: rgba(61, 174, 233, 0.06);
}
.kde-correo-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #e3e4e5;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.kde-correo-toolbar button {
  padding: 6px 12px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-correo-toolbar button:hover {
  background: #f2f2f2;
}
.kde-correo-busqueda {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #eff0f1;
  border-bottom: 1px solid #c7c8ca;
  flex: 0 0 auto;
  flex-wrap: wrap;
  font-size: 12px;
}
.kde-correo-busqueda.hidden {
  display: none;
}
.kde-correo-busqueda input[type="text"] {
  padding: 5px 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 12px;
  width: 150px;
}
.kde-correo-busqueda label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kde-correo-busqueda input[type="date"] {
  padding: 4px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 12px;
}
.kde-correo-busqueda-checkbox {
  white-space: nowrap;
}
.kde-correo-busqueda button {
  padding: 6px 12px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-correo-principal {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}
.kde-correo-arbol {
  flex: 0 0 170px;
  overflow-y: auto;
  background: #f3f4f5;
  padding: 6px 4px;
  font-size: 12px;
}
.kde-correo-divisor {
  flex: 0 0 5px;
  cursor: col-resize;
  background: #c7c8ca;
  position: relative;
}
.kde-correo-divisor:hover,
.kde-correo-divisor.kde-correo-divisor-activo {
  background: #3daee9;
}
.kde-correo-lista {
  flex: 0 0 280px;
  overflow-y: auto;
  background: #fff;
}
.kde-correo-mensaje-item {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.kde-correo-mensaje-item:hover {
  background: rgba(61, 174, 233, 0.12);
}
.kde-correo-mensaje-item.seleccionado {
  background: rgba(61, 174, 233, 0.28);
}
.kde-correo-mensaje-de {
  font-size: 12px;
  color: #232629;
}
.kde-correo-mensaje-item.no-leido .kde-correo-mensaje-de,
.kde-correo-mensaje-item.no-leido .kde-correo-mensaje-asunto {
  font-weight: 700;
}
.kde-correo-mensaje-asunto {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kde-correo-mensaje-fecha {
  font-size: 11px;
  color: #888;
}
.kde-correo-mensaje-carpeta {
  font-size: 11px;
  color: #3daee9;
}
.kde-correo-lista-vacio,
.kde-correo-vista-vacio {
  padding: 30px 16px;
  text-align: center;
  color: #888;
  font-size: 12px;
}
.kde-correo-vista {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #fff;
  padding: 16px 20px;
}
.kde-correo-vista-cabecera {
  border-bottom: 1px solid #e3e4e5;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.kde-correo-vista-asunto {
  font-size: 16px;
  font-weight: 700;
  color: #232629;
  margin-bottom: 6px;
}
.kde-correo-vista-meta {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}
.kde-correo-vista-cuerpo {
  font-size: 13px;
  color: #232629;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.kde-correo-vista-cuerpo iframe {
  width: 100%;
  min-height: 300px;
  border: none;
}
.kde-correo-vista-adjuntos {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e3e4e5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kde-correo-invitacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #eef7fc;
  border: 1px solid #3daee9;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 12px;
}
.kde-correo-invitacion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kde-correo-invitacion-titulo {
  font-weight: 700;
  color: #232629;
}
.kde-correo-invitacion-fecha {
  color: #555;
}
.kde-correo-invitacion-botones {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.kde-correo-invitacion-botones button {
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.kde-correo-invitacion-botones button.kde-correo-invitacion-aceptar {
  border: 1px solid #2f7cb8;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
}
.kde-correo-invitacion-botones button.kde-correo-invitacion-descartar {
  border: 1px solid #b6b8ba;
  background: #fff;
}
.kde-correo-adjunto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
}
.kde-correo-adjunto-chip:hover {
  background: #e6e6e6;
}

/* Panel de Configuracion > Correo */
.kde-correo-config-columnas {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.kde-correo-config-columna {
  flex: 1 1 260px;
  min-width: 240px;
}
.kde-correo-config-columna h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #444;
}

/* Ventana de Redactar correo (multi-instancia, mismo comportamiento que
   cualquier otra ventana de aplicacion) */
.kde-redactar-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
}
.kde-redactar-campos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
.kde-redactar-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
  border-bottom: 1px solid #e3e4e5;
  padding: 3px 0;
}
.kde-redactar-campo input {
  flex: 1 1 auto;
  border: none;
  font-size: 13px;
  padding: 3px 2px;
  background: transparent;
}
.kde-redactar-campo input:focus {
  outline: none;
  background: rgba(61, 174, 233, 0.08);
}
.kde-redactar-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 4px 2px;
  flex-wrap: wrap;
}
.kde-redactar-toolbar button {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #d6d7d8;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-redactar-toolbar button:hover {
  background: #f0f0f0;
}
.kde-redactar-toolbar button.activo {
  background: rgba(61, 174, 233, 0.3);
  border-color: #2f7cb8;
}
.kde-redactar-separador {
  width: 1px;
  height: 20px;
  background: #d6d7d8;
  margin: 0 4px;
}
.kde-redactar-editable {
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid #d6d7d8;
  border-radius: 3px;
  padding: 10px;
  font-size: 13px;
  color: #232629;
  background: #fff;
  min-height: 220px;
}
.kde-redactar-editable:focus {
  outline: none;
  border-color: #2f7cb8;
}
.kde-redactar-editable img {
  max-width: 100%;
}
.kde-correo-firma {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.kde-redactar-firma-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid #d6d7d8;
  border-radius: 3px;
  background: #fff;
}
.kde-correo-firma-editable {
  flex: none;
  min-height: 90px;
  border: none;
  border-top: 1px solid #d6d7d8;
  border-radius: 0;
}
.kde-redactar-barra-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.kde-redactar-barra-botones button {
  padding: 7px 16px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-redactar-barra-botones button:hover {
  background: #f2f2f2;
}
.kde-redactar-adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}
.kde-redactar-adjunto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 11px;
}
.kde-redactar-adjunto-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: #a33;
  padding: 0;
}

/* Ventana "Ver correo" (doble clic en la lista) */
.kde-vercorreo-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}

/* Responder/Reenviar rapido directo en la cabecera de la vista previa */
.kde-correo-vista-acciones-rapidas {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.kde-correo-vista-acciones-rapidas button {
  padding: 5px 12px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-correo-vista-acciones-rapidas button:hover {
  background: #f2f2f2;
}

/* Modal de filtros de correo */
.kde-modal-filtros-caja {
  width: 460px;
  max-height: 85vh;
  overflow-y: auto;
}
.kde-modal-filtros-caja h4 {
  margin: 14px 0 4px 0;
  font-size: 13px;
  color: #444;
  border-top: 1px solid #e3e4e5;
  padding-top: 10px;
}
.kde-filtros-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.kde-filtro-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: #f5f5f5;
  border-radius: 3px;
  font-size: 11px;
  color: #333;
}
.kde-filtro-fila button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: #a33;
  padding: 0 4px;
  flex: 0 0 auto;
}

/* ---------- Notas adhesivas en el fondo de escritorio ---------- */
/* La capa cubre toda la pantalla pero no intercepta clics (pointer-events:
   none) -- solo las tarjetas individuales los reciben -- para no bloquear
   el clic derecho sobre el resto del fondo. z-index 2: por encima del
   fondo de escritorio (0) pero por debajo de CUALQUIER ventana, que arranca
   en 11 (ver zIndexTopeVentanas en script.js) y solo sube desde ahi. */
.kde-capa-notas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.kde-nota-adhesiva {
  position: absolute;
  width: 220px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  font-size: 12px;
  color: #2b2b22;
}
.kde-nota-adhesiva[data-color="amarillo"] { background: #fff3a0; }
.kde-nota-adhesiva[data-color="verde"] { background: #c4f0a8; }
.kde-nota-adhesiva[data-color="azul"] { background: #aee0f5; }
.kde-nota-adhesiva[data-color="rosado"] { background: #f7c0d8; }
.kde-nota-adhesiva[data-color="naranja"] { background: #ffd2a0; }
.kde-nota-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0;
  cursor: default;
  user-select: none;
}
.kde-nota-adhesiva.kde-nota-editando .kde-nota-cabecera {
  cursor: move;
}
.kde-nota-titulo-texto {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.kde-nota-titulo-texto[contenteditable="true"] {
  cursor: text;
  outline: none;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  white-space: normal;
}
.kde-nota-cabecera-botones {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.kde-nota-cabecera-botones button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  padding: 1px 3px;
  opacity: 0.7;
}
.kde-nota-cabecera-botones button:hover {
  opacity: 1;
}
.kde-nota-cuerpo {
  flex: 1 1 auto;
  padding: 8px;
  overflow-y: auto;
  word-wrap: break-word;
}
.kde-nota-cuerpo[contenteditable="true"] {
  outline: none;
  cursor: text;
}
.kde-nota-adhesiva:not(.kde-nota-editando) .kde-nota-cuerpo {
  pointer-events: none;
}

/* Barra de formato compartida (notas adhesivas y editor de la app) */
.kde-formato-barra {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
}
.kde-formato-barra button {
  border: 1px solid #b6b8ba;
  background: #fff;
  border-radius: 3px;
  width: 24px;
  height: 22px;
  cursor: pointer;
  font-size: 12px;
}
.kde-formato-barra button:hover {
  background: #e3e4e5;
}
.kde-nota-adhesiva .kde-formato-barra {
  padding: 3px 6px 0;
}
.kde-nota-adhesiva .kde-formato-barra button {
  width: 20px;
  height: 18px;
  font-size: 10px;
}
.kde-nota-adhesiva:not(.kde-nota-editando) .kde-formato-barra {
  display: none;
}

.kde-nota-colores {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.kde-nota-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.kde-nota-color-swatch.seleccionado {
  border-color: #232629;
}
.kde-modal-nota-caja {
  width: 420px;
}
.kde-nota-cuerpo-editable {
  min-height: 140px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
  outline: none;
}

/* ---------- App "Sticky Notes" (administrador de notas) ---------- */
.kde-sticky-app-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.kde-sticky-app-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: #eff0f1;
  border-bottom: 1px solid #cfd0d2;
  flex: 0 0 auto;
}
.kde-sticky-app-toolbar button {
  padding: 6px 10px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-sticky-app-toolbar button:hover {
  background: #e3e4e5;
}
.kde-sticky-app-lista {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  align-content: start;
  background: #fff;
}
.kde-sticky-app-tarjeta {
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kde-sticky-app-tarjeta-titulo {
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kde-sticky-app-tarjeta-extracto {
  font-size: 11px;
  color: #555;
  flex: 1 1 auto;
  max-height: 60px;
  overflow: hidden;
}
.kde-sticky-app-tarjeta-botones {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.kde-sticky-app-tarjeta-botones button {
  flex: 1 1 auto;
  padding: 4px 6px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #f5f5f5;
  font-size: 10px;
  cursor: pointer;
}
.kde-sticky-app-tarjeta-botones button:hover {
  background: #e3e4e5;
}
.kde-sticky-app-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: #777;
  padding: 30px 0;
  font-size: 12px;
}

/* ---------- Selector de archivo (navega el almacenamiento del Explorador
   desde otra app, ej. el editor de texto tipo Kate) ---------- */
.kde-selector-archivo-caja {
  width: 460px;
}
.kde-selector-archivo-ruta {
  font-size: 11px;
  color: #555;
  padding: 4px 0;
  border-bottom: 1px solid #d4d4d4;
}
.kde-selector-archivo-ruta button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #2b73af;
  font-size: 11px;
  padding: 0 2px;
}
.kde-selector-archivo-lista {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.kde-selector-archivo-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 12px;
}
.kde-selector-archivo-fila:hover {
  background: rgba(61, 174, 233, 0.18);
}
.kde-selector-archivo-fila.seleccionada {
  background: rgba(61, 174, 233, 0.32);
}

/* ---------- Editor de texto tipo Kate ---------- */
.kde-editor-texto-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.kde-editor-texto-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #eff0f1;
  border-bottom: 1px solid #cfd0d2;
  flex: 0 0 auto;
}
.kde-editor-texto-toolbar button {
  padding: 6px 10px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.kde-editor-texto-toolbar button:hover {
  background: #e3e4e5;
}
.kde-editor-texto-estado {
  margin-left: auto;
  font-size: 11px;
  color: #777;
}
.kde-editor-texto-area {
  flex: 1 1 auto;
  border: none;
  outline: none;
  resize: none;
  padding: 10px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  background: #1e1e1e;
  color: #e0e0e0;
}

/* ---------- Reproductor de Video (estilo VLC) ---------- */
.kde-reproductor-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #1a1a1a;
}
.kde-reproductor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #2d2d2d;
  border-bottom: 1px solid #111;
  flex: 0 0 auto;
}
.kde-reproductor-toolbar button {
  padding: 5px 10px;
  border: 1px solid #555;
  border-radius: 3px;
  background: #3d3d3d;
  color: #ddd;
  font-size: 12px;
  cursor: pointer;
}
.kde-reproductor-toolbar button:hover {
  background: #4f4f4f;
}
.kde-reproductor-nombre {
  font-size: 12px;
  color: #aaa;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.kde-reproductor-pantalla {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
  overflow: hidden;
}
.kde-reproductor-pantalla.arrastrando-sobre {
  outline: 3px dashed #2f7cb8;
  outline-offset: -3px;
  background: #001a30;
}
.kde-reproductor-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #666;
}
.kde-reproductor-placeholder-icono {
  font-size: 56px;
  line-height: 1;
  filter: grayscale(1) opacity(0.4);
}
.kde-reproductor-placeholder-texto {
  font-size: 14px;
}
.kde-reproductor-placeholder button {
  padding: 7px 16px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #333;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
}
.kde-reproductor-placeholder button:hover {
  background: #444;
}
.kde-reproductor-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.kde-reproductor-controles {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #2d2d2d;
  border-top: 1px solid #111;
  flex: 0 0 auto;
}
.kde-reproductor-btn-control {
  background: none;
  border: none;
  color: #ccc;
  font-size: 16px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding: 0;
  flex: 0 0 auto;
}
.kde-reproductor-btn-control:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.kde-reproductor-tiempo {
  font-size: 11px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.kde-reproductor-progreso {
  flex: 1 1 auto;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #555;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.kde-reproductor-progreso::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4f9fd8;
  cursor: pointer;
}
.kde-reproductor-progreso::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4f9fd8;
  border: none;
  cursor: pointer;
}
.kde-reproductor-vol-icono {
  font-size: 15px;
  cursor: pointer;
  color: #aaa;
  flex: 0 0 auto;
  line-height: 1;
}
.kde-reproductor-vol-icono:hover {
  color: #fff;
}
.kde-reproductor-volumen {
  width: 64px;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #555;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  flex: 0 0 auto;
}
.kde-reproductor-volumen::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
  cursor: pointer;
}
.kde-reproductor-volumen::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
  border: none;
  cursor: pointer;
}
/* Pantalla completa: el video llena todo -- los controles ya no son visibles
   en FS (el navegador tiene sus propios controles en fullscreen) */
.kde-reproductor-pantalla:fullscreen {
  background: #000;
}
.kde-reproductor-pantalla:fullscreen .kde-reproductor-video {
  width: 100vw;
  height: 100vh;
}
/* Contrarrestar la especificidad igual entre los flex containers nuevos y
   .hidden — sin esto el display:flex de abajo sobreescribe display:none
   de .hidden porque aparece mas tarde en el archivo. */
.kde-reproductor-controles.hidden,
.kde-reproductor-placeholder.hidden,
.kde-reproductor-video.hidden {
  display: none;
}

/* ---------- Rama "NEXTCLOUD" del arbol del Explorador ---------- */
/* Icono redondo (no el emoji-en-texto que usan las carpetas locales) para
   que la cuenta de Nextcloud se distinga a simple vista de una carpeta
   normal, como en cualquier gestor de archivos real con un origen de red
   montado -- #0082c9 es el azul de marca real de Nextcloud. */
.kde-icono-nextcloud-redondo {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0082c9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}

/* ---------- Terminal (estilo PuTTY: SSH/Telnet) ---------- */
.kde-terminal-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #232629;
  position: relative;
}
.kde-terminal-conexion {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #eff0f1;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
.kde-terminal-conexion h3 {
  margin: 0;
  font-size: 14px;
  color: #232629;
}
.kde-terminal-cargando {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 13px;
}
.kde-terminal-cargando.hidden,
.kde-terminal-conexion.hidden {
  display: none;
}
.kde-terminal-iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: none;
}
.kde-terminal-iframe.hidden {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   CLIENTE SFTP (estilo FileZilla)
   ══════════════════════════════════════════════════════════ */

.kde-sftp-cuerpo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

/* ── Barra de conexión ── */
.kde-sftp-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 8px 5px;
  background: var(--kde-barra-bg, #2b2d31);
  border-bottom: 1px solid #1a1c1f;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.kde-sftp-campo {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #aaa;
  gap: 2px;
  flex: 1 1 120px;
}
.kde-sftp-campo input {
  background: #1e2025;
  border: 1px solid #444;
  color: #e8e8e8;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  outline: none;
}
.kde-sftp-campo input:focus { border-color: #5b9bd5; }
.kde-sftp-campo-angosto { flex: 0 0 70px; }
.kde-sftp-campo-angosto input { width: 60px; }
.kde-sftp-toolbar-botones {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  padding-bottom: 0;
}
.kde-sftp-toolbar-botones button {
  background: #3a5a8a;
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.kde-sftp-toolbar-botones button:hover { background: #4a6aaa; }
.kde-sftp-toolbar-botones button[data-rol="btn-desconectar"] { background: #7a3030; }
.kde-sftp-toolbar-botones button[data-rol="btn-desconectar"]:hover { background: #943030; }
.kde-sftp-toolbar-botones button[data-rol="btn-guardar-conexion"] {
  background: #3a5a3a;
  padding: 4px 7px;
  font-size: 14px;
}
.kde-sftp-toolbar-botones button[data-rol="btn-guardar-conexion"]:hover { background: #4a6a4a; }

/* ── Conexiones guardadas ── */
.kde-sftp-guardadas {
  background: #23252a;
  border-bottom: 1px solid #333;
  padding: 4px 8px;
  flex-shrink: 0;
  max-height: 90px;
  overflow-y: auto;
}
.kde-sftp-guardadas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.kde-sftp-guardada-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #2e3036;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 11px;
}
.kde-sftp-guardada-item:hover { background: #3a3d45; border-color: #5b9bd5; }
.kde-sftp-guardada-nombre { color: #e8e8e8; font-weight: 600; }
.kde-sftp-guardada-info { color: #999; }
.kde-sftp-guardada-borrar {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.kde-sftp-guardada-borrar:hover { color: #e05555; }

/* ── Paneles de archivos ── */
.kde-sftp-paneles {
  display: flex;
  flex: 1 1 0;
  overflow: hidden;
  gap: 0;
}
.kde-sftp-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  overflow: hidden;
  min-width: 200px;
}
.kde-sftp-panel-desconectado { opacity: 0.55; pointer-events: none; }
.kde-sftp-divisor-vertical {
  width: 4px;
  background: #1a1c1f;
  flex-shrink: 0;
  cursor: col-resize;
}
.kde-sftp-panel-cabecera {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #1e2025;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}
/* Selector de fuente Local / Nextcloud */
.kde-sftp-fuente-tabs {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.kde-sftp-fuente-tab {
  background: #2b2d31;
  border: 1px solid #444;
  color: #aaa;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.kde-sftp-fuente-tab:hover { background: #3a3d45; color: #ddd; }
.kde-sftp-fuente-tab.activo {
  background: #264d7a;
  border-color: #5b9bd5;
  color: #fff;
}
.kde-sftp-fuente-tab.hidden { display: none; }

.kde-sftp-panel-titulo { color: #ccc; font-size: 12px; font-weight: 600; }
.kde-sftp-ruta-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}
.kde-sftp-ruta-bar button {
  background: #2b2d31;
  border: 1px solid #444;
  color: #ccc;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.kde-sftp-ruta-bar button:hover:not(:disabled) { background: #3a3d45; }
.kde-sftp-ruta-bar button:disabled { opacity: 0.4; cursor: default; }
.kde-sftp-ruta-texto {
  color: #aaa;
  font-size: 11px;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── Lista de archivos (tabla) ── */
.kde-sftp-lista {
  flex: 1 1 0;
  overflow-y: auto;
  background: #1a1c1f;
}
.kde-sftp-lista.arrastrando-sobre {
  outline: 2px dashed #5b9bd5;
  outline-offset: -2px;
}
.kde-sftp-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kde-sftp-tabla thead th {
  position: sticky;
  top: 0;
  background: #23252a;
  color: #999;
  font-weight: 600;
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid #333;
  white-space: nowrap;
  user-select: none;
}
.kde-sftp-tabla tbody tr {
  cursor: default;
  user-select: none;
}
.kde-sftp-tabla tbody tr:hover { background: #2a2d33; }
.kde-sftp-tabla tbody tr.seleccionado { background: #264d7a; }
.kde-sftp-tabla tbody tr.seleccionado:hover { background: #2e5a8a; }
.kde-sftp-tabla td {
  padding: 3px 8px;
  color: #d8d8d8;
  border-bottom: 1px solid #22242a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.kde-sftp-tabla td.kde-sftp-nombre { max-width: 200px; }
.kde-sftp-tabla td.kde-sftp-tamano { color: #aaa; text-align: right; min-width: 60px; }
.kde-sftp-tabla td.kde-sftp-tipo { color: #888; min-width: 55px; }
.kde-sftp-tabla td.kde-sftp-fecha { color: #888; min-width: 120px; }
.kde-sftp-icono { margin-right: 4px; }
.kde-sftp-vacio { color: #666; text-align: center; padding: 12px; font-style: italic; }
.kde-sftp-sin-conexion {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #555;
  font-size: 13px;
  font-style: italic;
}

/* ── Log de transferencias ── */
.kde-sftp-log {
  flex-shrink: 0;
  height: 80px;
  overflow-y: auto;
  background: #111315;
  border-top: 1px solid #2a2d33;
  padding: 4px 8px;
  font-size: 11px;
  font-family: monospace;
}
.kde-sftp-log-linea { color: #bbb; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.kde-sftp-log-linea.error { color: #e06060; }
.kde-sftp-log-progreso { display: flex; flex-direction: column; gap: 3px; }
.kde-sftp-estado-ok   { color: #6dbb6d; }
.kde-sftp-estado-error { color: #e06060; }

/* Divisor redimensionable entre paneles y log */
.kde-sftp-resize-log {
  height: 6px;
  background: #2a2d33;
  border-top: 1px solid #4a4d55;
  border-bottom: 1px solid #4a4d55;
  cursor: ns-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}
.kde-sftp-resize-log:hover,
.kde-sftp-resize-log.arrastrando { background: #3a5a8a; }

/* Barra de progreso indeterminada para transferencias */
.kde-sftp-barra-progreso {
  height: 4px;
  background: #2a2d33;
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.kde-sftp-barra-fill {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, transparent, #5b9bd5, transparent);
  border-radius: 2px;
  animation: kde-sftp-progress 1.4s ease-in-out infinite;
}
@keyframes kde-sftp-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}


/* ── VENTANA ROLES Y USUARIOS ─────────────────────────────────────────────── */
/* Usa el mismo sidebar+contenido que Configuración (.kde-config-*), sin estilos extra en el cuerpo */

/* Formulario inline de roles */
.roles-admin-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.roles-admin-form-fila {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.roles-admin-form-fila input[type="text"] {
  flex: 1 1 120px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  font-size: 12px;
  color: #232629;
}
.roles-admin-form-fila input[type="text"]:focus { border-color: #4f9fd8; outline: none; }
.roles-admin-form-fila input[type="text"][readonly] { background: #f0f0f0; color: #888; }
.roles-admin-form-fila input[type="color"] {
  width: 36px; height: 28px; padding: 2px;
  border: 1px solid #b6b8ba; border-radius: 3px;
  background: #fff; cursor: pointer; flex-shrink: 0;
}
.roles-admin-form-botones {
  display: flex;
  gap: 6px;
}
.roles-admin-form-botones button {
  padding: 5px 14px;
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.roles-admin-form-botones button:hover { background: linear-gradient(180deg, #5aaee8, #3a8cc8); }
#btn-cancelar-rol-admin {
  border-color: #999;
  background: linear-gradient(180deg, #e8e8e8, #c4c4c4);
  color: #333;
}
#btn-cancelar-rol-admin:hover { background: linear-gradient(180deg, #f0f0f0, #d0d0d0); }

/* Tablas compartidas entre las tres pestañas */
.tabla-roles-admin {
  width: 100%; border-collapse: collapse; font-size: 12px; color: #232629;
}
.tabla-roles-admin thead th {
  text-align: left; text-transform: uppercase;
  font-size: 10px; color: #555; padding: 4px 6px;
  border-bottom: 1px solid #b6b8ba;
  background: #fff; position: sticky; top: 0; z-index: 1;
}
.tabla-roles-admin tbody tr { border-bottom: 1px solid #dcdcdc; }
.tabla-roles-admin tbody tr:hover { background: #f0f4fa; }
.tabla-roles-admin td { padding: 5px 6px; vertical-align: middle; }
.tabla-roles-admin td button {
  border: none; background: transparent;
  cursor: pointer; font-size: 13px; padding: 2px 5px;
}
.tabla-roles-admin td button:hover { background: rgba(0,0,0,0.07); border-radius: 3px; }
.roles-admin-count { color: #888; text-align: right; font-size: 11px; }
.roles-admin-ext   { color: #2f7cb8; font-family: monospace; font-size: 11px; }
.roles-admin-desc  { color: #555; font-size: 11px; max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badges de color */
.roles-admin-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.roles-admin-badge-sm {
  margin-left: 6px; padding: 1px 7px;
  font-size: 10px; vertical-align: middle;
}

/* Select de asignación de rol */
.roles-admin-select {
  background: #fff; border: 1px solid #b6b8ba; border-radius: 3px;
  color: #232629; padding: 3px 6px; font-size: 11px; cursor: pointer;
}
.roles-admin-select:focus { border-color: #4f9fd8; outline: none; }

/* ── Pestaña Aplicaciones ── */
.roles-admin-apps-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid #dcdcdc; flex-wrap: wrap;
}
.roles-admin-apps-toolbar label { font-size: 12px; color: #232629; display: flex; align-items: center; gap: 6px; }
.roles-admin-apps-toolbar button {
  padding: 5px 14px;
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.roles-admin-apps-toolbar button:hover { background: linear-gradient(180deg, #5aaee8, #3a8cc8); }

.roles-admin-apps-lista {
  flex: 1 1 auto; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  align-content: flex-start; padding-top: 8px;
}
.roles-admin-apps-hint {
  font-size: 12px; color: #888; font-style: italic; grid-column: 1 / -1;
}
.roles-admin-apps-hint.error { color: #c0392b; }
.roles-admin-app-item {
  display: flex; align-items: center; gap: 6px;
  background: #f5f6f7; border: 1px solid #dcdcdc; border-radius: 4px;
  padding: 6px 10px; cursor: pointer; font-size: 12px; color: #232629;
  user-select: none; min-width: 0;
}
.roles-admin-app-item:hover { background: #e8f0fa; border-color: #4f9fd8; }
.roles-admin-app-item input[type="checkbox"] { margin: 0; cursor: pointer; }
.roles-admin-app-icono { font-size: 16px; }

/* ── ALTA DISPONIBILIDAD ──────────────────────────────────────────────────── */
.altadisp-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.altadisp-panel.hidden { display: none; }

/* ── TRAZABILIDAD ─────────────────────────────────────────────────────────── */
.traza-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  gap: 0;
}

/* Barra de filtros */
.traza-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-bottom: 1px solid #dcdcdc;
  background: #f5f6f7;
  flex-shrink: 0;
}
.traza-filtro-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #555;
  font-weight: 600;
}
.traza-filtro-texto { flex: 1 1 160px; }
.traza-input, .traza-select {
  background: #fff;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  color: #232629;
  padding: 4px 7px;
  font-size: 12px;
}
.traza-input:focus, .traza-select:focus { border-color: #4f9fd8; outline: none; }
.traza-filtro-botones {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding-bottom: 1px;
}
/* Base compartida para todos los botones de Trazabilidad */
.traza-btn-buscar,
.traza-btn-limpiar,
.traza-btn-borrar,
.traza-btn-cancelar-sel,
.traza-btn-confirmar-borrar {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  height:       28px;
  padding:      0 14px;
  border-radius: 3px;
  font-size:    12px;
  font-weight:  600;
  line-height:  1;
  cursor:       pointer;
  white-space:  nowrap;
}

.traza-btn-buscar {
  border:     1px solid #2f7cb8;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
}
.traza-btn-buscar:hover { background: linear-gradient(180deg, #5aaee8, #3a8cc8); }

.traza-btn-limpiar {
  border:     1px solid #7a7a8a;
  background: linear-gradient(180deg, #7a7a8a, #5a5a6a);
  color: #fff;
}
.traza-btn-limpiar:hover { background: linear-gradient(180deg, #8a8a9a, #6a6a7a); }

.traza-btn-borrar {
  border:     1px solid #b03030;
  background: linear-gradient(180deg, #e85050, #c03030);
  color: #fff;
}
.traza-btn-borrar:hover { background: linear-gradient(180deg, #f06060, #d04040); }

.traza-btn-cancelar-sel {
  border:      1px solid #999;
  background:  linear-gradient(180deg, #e8e8e8, #c4c4c4);
  color:       #333;
  font-weight: normal;
}
.traza-btn-cancelar-sel:hover { background: linear-gradient(180deg, #f0f0f0, #d0d0d0); }

.traza-btn-confirmar-borrar {
  border:     1px solid #b03030;
  background: linear-gradient(180deg, #e85050, #c03030);
  color:      #fff;
}
.traza-btn-confirmar-borrar:hover { background: linear-gradient(180deg, #f06060, #d04040); }
.traza-th-chk, .traza-td-chk { width: 28px; text-align: center; padding: 4px 2px !important; }
#traza-cuerpo tr[data-id] { transition: background 0.1s; }
#traza-cuerpo tr[data-id]:has(.traza-chk-fila:checked) { background: rgba(58,155,233,0.18) !important; }

/* Tabla */
.traza-tabla-wrap {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
}
.traza-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #232629;
}
.traza-tabla thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  text-transform: uppercase;
  font-size: 10px;
  color: #555;
  padding: 5px 8px;
  border-bottom: 1px solid #b6b8ba;
  background: #f5f6f7;
  white-space: nowrap;
}
.traza-tabla tbody tr { border-bottom: 1px solid #ececec; }
.traza-tabla tbody tr:hover { background: #f0f4fa; }
.traza-tabla td { padding: 5px 8px; vertical-align: middle; }
.traza-td-fecha, .traza-td-hora { white-space: nowrap; font-family: monospace; }
.traza-td-hora  { color: #555; }
.traza-td-ext   { color: #2f7cb8; font-family: monospace; }
.traza-td-usuario { font-weight: 600; }
.traza-td-accion { max-width: 220px; }
.traza-td-detalle { color: #555; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.traza-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

/* Pie */
.traza-pie {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 11px;
  color: #888;
  border-top: 1px solid #dcdcdc;
  background: #f5f6f7;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   GESTOR VOSK
═══════════════════════════════════════════════════════════════════ */

.vosk-admin-cuerpo { padding: 0; }

/* Barra superior — mismo estilo que kde-config-barra-acciones */
.vosk-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #c7c8ca;
  background: #e3e4e5;
  flex-shrink: 0;
}
.vosk-btn-aplicar {
  padding: 5px 14px;
  background: linear-gradient(180deg,#4f9fd8,#2f7cb8);
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.vosk-btn-aplicar:hover { background: linear-gradient(180deg,#5aaee8,#3a8cc8); }
.vosk-btn-preview {
  padding: 5px 12px;
  background: linear-gradient(180deg,#f5f6f7,#e0e1e2);
  border: 1px solid #b0b1b2;
  border-radius: 3px;
  color: #232629; font-size: 12px; cursor: pointer;
}
.vosk-btn-preview:hover { background: linear-gradient(180deg,#fff,#e8e9ea); }
.vosk-status {
  font-size: 12px; color: #555;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vosk-status-ok    { color: #27ae60; font-weight: 600; }
.vosk-status-error { color: #c0392b; font-weight: 600; }

/* Layout split */
.vosk-split { display: flex; min-height: 0; }

/* Panel izquierdo — mismo estilo que kde-config-sidebar */
.vosk-lista-panel {
  width: 220px;
  min-width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #c7c8ca;
  background: #e3e4e5;
  overflow: hidden;
}
.vosk-lista-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid #c7c8ca;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vosk-btn-nueva {
  padding: 2px 8px;
  background: linear-gradient(180deg,#4f9fd8,#2f7cb8);
  border: 1px solid #2f7cb8;
  border-radius: 3px;
  color: #fff; font-size: 11px; cursor: pointer;
}
.vosk-btn-nueva:hover { background: linear-gradient(180deg,#5aaee8,#3a8cc8); }
.vosk-lista { flex: 1; overflow-y: auto; }
.vosk-lista-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid #d0d1d2;
  background: transparent;
  color: #232629;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.vosk-lista-item:hover { background: rgba(61,174,233,0.18); }
.vosk-lista-item.seleccionado { background: rgba(61,174,233,0.32); font-weight: 600; color: #232629; }
.vosk-lista-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vosk-lista-ext {
  font-size: 11px;
  color: #2f7cb8; background: #ddeefa;
  padding: 1px 6px; border-radius: 10px;
  margin-left: 4px; flex-shrink: 0;
}

/* Panel derecho: formulario — mismo fondo blanco que kde-config-contenido */
.vosk-form-panel {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  padding: 16px;
}
.vosk-placeholder {
  color: #aaa; font-size: 14px; text-align: center;
  padding: 60px 20px; line-height: 1.8;
}

/* Formulario */
.vosk-form { max-width: 640px; }
.vosk-form-fila {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.vosk-form-fila label {
  font-size: 11px; font-weight: 600;
  color: #555; text-transform: uppercase; letter-spacing: 0.04em;
}
.vosk-form-fila small { font-size: 11px; color: #888; }
.vosk-form-fila code { font-family: monospace; color: #2f7cb8; }
.vosk-form-fila input[type="text"] {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #c7c8ca;
  border-radius: 3px;
  color: #232629; font-size: 13px;
  outline: none;
}
.vosk-form-fila input[type="text"]:focus { border-color: #4f9fd8; box-shadow: 0 0 0 2px rgba(79,159,216,0.18); }

/* Tags de variantes */
.vosk-variantes-fila { gap: 6px; }
.vosk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 36px;
  padding: 6px;
  background: #f5f6f7;
  border: 1px solid #c7c8ca;
  border-radius: 3px;
}
.vosk-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ddeefa;
  border: 1px solid #b0d4f0;
  border-radius: 12px;
  padding: 2px 8px 2px 10px;
}
.vosk-tag-texto { font-size: 12px; color: #1a5a8a; }
.vosk-tag-x {
  background: none; border: none;
  color: #aaa; font-size: 11px; cursor: pointer; padding: 0;
  line-height: 1;
}
.vosk-tag-x:hover { color: #c0392b; }
.vosk-add-variante { display: flex; gap: 6px; }
.vosk-add-variante input[type="text"] {
  flex: 1;
  padding: 5px 10px;
  background: #fff; border: 1px solid #c7c8ca;
  border-radius: 3px; color: #232629; font-size: 12px; outline: none;
}
.vosk-add-variante input:focus { border-color: #4f9fd8; }
.vosk-btn-add-var {
  padding: 5px 12px;
  background: linear-gradient(180deg,#4f9fd8,#2f7cb8);
  border: 1px solid #2f7cb8; border-radius: 3px;
  color: #fff; font-size: 14px; cursor: pointer;
}
.vosk-btn-add-var:hover { background: linear-gradient(180deg,#5aaee8,#3a8cc8); }

/* Botones de acción del form */
.vosk-form-acciones {
  display: flex; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #dcdcdc;
  margin-top: 8px;
}
.vosk-btn-guardar {
  padding: 6px 18px;
  background: linear-gradient(180deg,#4f9fd8,#2f7cb8);
  border: 1px solid #2f7cb8; border-radius: 3px;
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.vosk-btn-guardar:hover { background: linear-gradient(180deg,#5aaee8,#3a8cc8); }
.vosk-btn-eliminar {
  padding: 6px 16px;
  background: linear-gradient(180deg,#e85050,#c03030);
  border: 1px solid #b03030; border-radius: 3px;
  color: #fff; font-size: 12px; cursor: pointer;
}
.vosk-btn-eliminar:hover { background: linear-gradient(180deg,#f06060,#d04040); }

/* ── Panel Operadora (FOP2-style) ──────────────────────────────────────────── */
.po-cuerpo {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  padding: 0;
}
.po-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; flex-shrink: 0;
  border-bottom: 1px solid #d0d0d0;
  background: linear-gradient(180deg,#f0f0f0,#e4e4e4);
}
.po-buscar {
  flex: 1; padding: 4px 8px; font-size: 12px;
  border: 1px solid #b8b8b8; border-radius: 3px;
  background: #fff;
}
.po-btn-refresh {
  padding: 3px 9px; font-size: 15px; line-height: 1;
  border: 1px solid #b8b8b8; border-radius: 3px;
  background: linear-gradient(180deg,#fff,#e8e8e8);
  cursor: pointer; color: #444;
}
.po-btn-refresh:hover { background: linear-gradient(180deg,#fff,#d8d8d8); }
.po-estado-conexion { font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.po-estado-ok    { color: #1a6e1a; }
.po-estado-error { color: #a00; }

/* Fila intermedia: grid de extensiones + columna de trunks */
.po-body {
  flex: 1; display: flex; overflow: hidden;
}
.po-grid {
  flex: 1; overflow-y: auto;
  padding: 0;
}
/* Modo plano (sin grupos): tarjetas en grid directo */
.po-grid-plano {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px; padding: 10px;
  align-content: start;
}

.po-tarjeta {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 6px; padding: 8px 10px;
  cursor: default; position: relative;
  transition: box-shadow .15s;
  min-width: 0;
}
.po-tarjeta:hover { box-shadow: 0 2px 8px rgba(0,0,0,.13); }

/* Borde izquierdo por estado */
.po-tarjeta.po-estado-libre       { border-left: 3px solid #28a745; }
.po-tarjeta.po-estado-en_llamada  { border-left: 3px solid #dc3545; }
.po-tarjeta.po-estado-timbrando   { border-left: 3px solid #ffc107; }
.po-tarjeta.po-estado-en_espera   { border-left: 3px solid #fd7e14; }
.po-tarjeta.po-estado-ocupado     { border-left: 3px solid #dc3545; }
.po-tarjeta.po-estado-desconectado{ border-left: 3px solid #aaa; background: #f9f9f9; }
.po-tarjeta.po-estado-desconocido { border-left: 3px solid #ccc; }

.po-tarjeta-header {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
}
.po-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.po-dot-libre        { background: #28a745; }
.po-dot-en_llamada   { background: #dc3545; }
.po-dot-timbrando    { background: #ffc107; animation: po-pulse .85s infinite; }
.po-dot-en_espera    { background: #fd7e14; }
.po-dot-ocupado      { background: #dc3545; }
.po-dot-desconectado { background: #b0b0b0; }
.po-dot-desconocido  { background: #ccc; }

@keyframes po-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .55; }
}

.po-ext {
  font-weight: 700; font-size: 13px; color: #222;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-badge {
  font-size: 8.5px; font-weight: 700; padding: 1px 4px;
  border-radius: 3px; text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap; flex-shrink: 0;
}
.po-badge-libre        { background: #d4edda; color: #155724; }
.po-badge-en_llamada   { background: #f8d7da; color: #721c24; }
.po-badge-timbrando    { background: #fff3cd; color: #856404; }
.po-badge-en_espera    { background: #fde8d0; color: #803f00; }
.po-badge-ocupado      { background: #f8d7da; color: #721c24; }
.po-badge-desconectado { background: #e2e3e5; color: #6c757d; }
.po-badge-desconocido  { background: #e2e3e5; color: #6c757d; }

.po-nombre {
  font-size: 11px; color: #555;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 3px;
}
.po-detalle { font-size: 10px; color: #444; line-height: 1.5; }
.po-contra  { font-weight: 500; }
.po-dur     { color: #888; font-size: 9px; }
.po-grabando-ind {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 3px; padding: 1px 5px;
  background: rgba(200,0,0,.08); border: 1px solid rgba(200,0,0,.2);
  border-radius: 3px; font-size: 9px; font-weight: 700; color: #c00;
  animation: po-grabando-pulse 1.5s ease-in-out infinite;
}
@keyframes po-grabando-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}

.po-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; border-top: 1px solid #d0d0d0;
  background: #f4f4f4;
}
.po-leyenda {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 5px 10px;
  font-size: 10px; color: #555;
}
.po-leyenda-item {
  display: flex; align-items: center; gap: 4px;
}
.po-btn-config {
  flex-shrink: 0; margin: 4px 8px;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  border: 1px solid #b0b0b0; border-radius: 3px;
  background: linear-gradient(180deg,#fff,#e0e0e0);
  cursor: pointer; color: #333; white-space: nowrap;
}
.po-btn-config:hover { background: linear-gradient(180deg,#fff,#cfcfcf); }

@media (prefers-color-scheme: dark) {
  .po-toolbar { background: linear-gradient(180deg,#3a3a3a,#2e2e2e); border-bottom-color: #444; }
  .po-buscar  { background: #2a2a2a; border-color: #555; color: #ddd; }
  .po-btn-refresh { background: linear-gradient(180deg,#444,#353535); border-color: #555; color: #ccc; }
  .po-tarjeta { background: #2d2d2d; border-color: #444; }
  .po-tarjeta.po-estado-desconectado { background: #262626; }
  .po-ext     { color: #eee; }
  .po-nombre  { color: #aaa; }
  .po-detalle { color: #bbb; }
  .po-dur     { color: #888; }
  .po-grabando-ind { background: rgba(255,60,60,.1); border-color: rgba(255,60,60,.3); color: #f66; }
  .po-badge-libre        { background: #1a3a25; color: #7fc896; }
  .po-badge-en_llamada   { background: #3a1a1a; color: #e88a8a; }
  .po-badge-timbrando    { background: #3a3000; color: #ddb84c; }
  .po-badge-en_espera    { background: #3a2000; color: #e0a060; }
  .po-badge-ocupado      { background: #3a1a1a; color: #e88a8a; }
  .po-badge-desconectado { background: #333; color: #888; }
  .po-footer  { background: #282828; border-top-color: #444; }
  .po-leyenda { color: #aaa; }
  .po-btn-config { background: linear-gradient(180deg,#444,#353535); border-color: #555; color: #ccc; }
  .po-btn-config:hover { background: linear-gradient(180deg,#4a4a4a,#3a3a3a); }
  .po-estado-ok { color: #5cb85c; }
}

/* Menú contextual del Panel Operadora */
.po-tarjeta-accionable { cursor: context-menu; }
.po-tarjeta[draggable="true"] { cursor: grab; }
.po-tarjeta[draggable="true"]:active { cursor: grabbing; }
.po-tarjeta.po-drag-origen { opacity: 0.4; }
.po-seccion-grupo.po-drag-sobre { outline: 2px dashed #0078d4; outline-offset: -2px; }

.po-ctx-menu {
  position: fixed; z-index: 99999;
  background: #fff;
  border: 1px solid #b0b0b0;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  min-width: 180px;
  padding: 4px 0;
  font-size: 12px;
  user-select: none;
}
.po-ctx-header {
  padding: 5px 12px 4px;
  font-weight: 600; color: #444; font-size: 11px;
}
.po-ctx-subheader {
  padding: 0 12px 4px;
  color: #777; font-size: 10px;
}
.po-ctx-sep {
  height: 1px; background: #e0e0e0; margin: 3px 0;
}
.po-ctx-item {
  display: block; width: 100%;
  padding: 6px 14px; text-align: left;
  background: none; border: none;
  font-size: 12px; cursor: pointer; color: #222;
}
.po-ctx-item:hover { background: #e8f0fe; }
.po-ctx-danger     { color: #c0392b; }
.po-ctx-danger:hover { background: #fde8e8; color: #922; }

@media (prefers-color-scheme: dark) {
  .po-ctx-menu       { background: #2d2d2d; border-color: #555; }
  .po-ctx-header     { color: #bbb; }
  .po-ctx-subheader  { color: #888; }
  .po-ctx-sep        { background: #444; }
  .po-ctx-item       { color: #ddd; }
  .po-ctx-item:hover { background: #3a3f55; }
  .po-ctx-danger     { color: #e57373; }
  .po-ctx-danger:hover { background: #3d2020; }
}

/* ── Columna de Trunks ───────────────────────────────────────── */
.po-trunks-col {
  width: 185px; flex-shrink: 0;
  border-left: 1px solid #d0d0d0;
  display: flex; flex-direction: column;
  overflow: hidden; background: #f9f9f9;
}
.po-trunks-cabecera {
  padding: 6px 10px; font-size: 11px; font-weight: 700;
  border-bottom: 1px solid #d0d0d0; background: #efefef;
  letter-spacing: .04em; color: #333; flex-shrink: 0;
}
.po-trunks-lista {
  flex: 1; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 5px;
}
.po-trunk-vacio {
  font-size: 11px; color: #aaa; text-align: center;
  padding: 20px 4px; line-height: 1.6;
}
.po-trunk-card {
  border: 1px solid #ddd; border-radius: 5px;
  padding: 6px 8px; background: #fff;
  font-size: 11px; transition: box-shadow .15s;
}
.po-trunk-card:hover { box-shadow: 0 1px 5px rgba(0,0,0,.1); }
.po-trunk-activo {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220,53,69,.15);
}
.po-trunk-top {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
}
.po-trunk-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ccc; flex-shrink: 0;
}
.po-trunk-dot-activo { background: #dc3545; animation: po-pulse .85s infinite; }
.po-trunk-nombre { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-trunk-badge {
  background: #dc3545; color: #fff;
  border-radius: 10px; padding: 1px 5px;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.po-trunk-meta   { display: flex; align-items: center; gap: 5px; margin-bottom: 1px; }
.po-trunk-tipo   { font-size: 9px; background: #e0e0e0; color: #555; border-radius: 3px; padding: 1px 4px; font-weight: 600; flex-shrink: 0; }
.po-trunk-estado { font-size: 10px; }
.po-trunk-ok   { color: #1a6e1a; }
.po-trunk-off  { color: #888; }
.po-trunk-err  { color: #a00; }
.po-trunk-warn { color: #856404; }
.po-trunk-srv  { font-size: 10px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.po-trunk-llamada {
  margin-top: 3px; padding: 2px 4px;
  background: rgba(220,53,69,.07); border-radius: 3px;
  font-size: 10px; color: #444;
  display: flex; align-items: center; gap: 3px;
}
.po-trunk-dur   { color: #888; font-size: 9px; }
.po-trunk-mas   { background: transparent; color: #888; font-style: italic; }

@media (prefers-color-scheme: dark) {
  .po-trunks-col     { background: #252525; border-left-color: #444; }
  .po-trunks-cabecera { background: #2e2e2e; border-bottom-color: #444; color: #ddd; }
  .po-trunk-card     { background: #2a2a2a; border-color: #3a3a3a; }
  .po-trunk-activo   { border-color: #e55; box-shadow: 0 0 0 2px rgba(220,53,69,.25); }
  .po-trunk-nombre   { color: #eee; }
  .po-trunk-tipo     { background: #3a3a3a; color: #aaa; }
  .po-trunk-off      { color: #666; }
  .po-trunk-srv      { color: #666; }
  .po-trunk-llamada  { background: rgba(220,53,69,.12); color: #ccc; }
  .po-trunk-dur      { color: #666; }
  .po-trunk-vacio    { color: #555; }
}

/* ── Grupos en el Panel Operadora ────────────────────────────── */
.po-seccion-grupo {
  border: 2px solid #c0c0c0;
  border-radius: 6px;
  margin: 8px 8px 0;
  overflow: hidden;
}
.po-seccion-sin-grupo {
  border-color: #d0d0d0;
  background-color: transparent !important;
}
.po-seccion-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  font-size: 11px; font-weight: 600;
}
.po-seccion-titulo { letter-spacing: .03em; }
.po-seccion-conteo {
  font-size: 10px; font-weight: normal;
  background: rgba(0,0,0,.10); border-radius: 10px;
  padding: 1px 6px; color: #555;
}
.po-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 6px; padding: 8px;
}
/* La última sección no tiene margen inferior extra */
.po-seccion-grupo:last-child { margin-bottom: 8px; }

@media (prefers-color-scheme: dark) {
  .po-seccion-grupo    { border-color: #555; }
  .po-seccion-cabecera { background: rgba(255,255,255,.05); border-bottom-color: rgba(255,255,255,.08); }
  .po-seccion-conteo   { background: rgba(255,255,255,.10); color: #aaa; }
  .po-seccion-sin-grupo { border-color: #444; }
}

/* ── Ventana Configuración Panel Operadora ───────────────────── */
.po-cfg-cuerpo {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.po-cfg-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid #c8c8c8;
  background: #f0f0f0;
}
.po-cfg-tab {
  padding: 7px 20px; font-size: 12px; font-weight: 600;
  border: none; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; color: #555;
}
.po-cfg-tab:hover { background: #e4e4e4; }
.po-cfg-tab-activo { border-bottom-color: #0078d4; color: #0078d4; background: #fff; }

.po-cfg-panel {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 10px;
}
.po-cfg-acciones { margin-bottom: 8px; }
.po-cfg-btn-nuevo {
  padding: 5px 14px; font-size: 12px;
  border: 1px solid #0078d4; border-radius: 3px;
  background: #0078d4; color: #fff; cursor: pointer; font-weight: 600;
}
.po-cfg-btn-nuevo:hover { background: #005ea6; }

/* Formulario inline */
.po-cfg-form-grupo {
  border: 1px solid #d0d0d0; border-radius: 5px;
  padding: 10px 12px; margin-bottom: 10px;
  background: #fafafa;
}
.po-cfg-form-fila {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 7px;
}
.po-cfg-form-fila label { width: 70px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.po-cfg-form-fila input[type="text"] { flex: 1; padding: 4px 8px; font-size: 12px; border: 1px solid #b8b8b8; border-radius: 3px; }
.po-cfg-form-fila input[type="color"] { width: 50px; height: 28px; border: 1px solid #b8b8b8; border-radius: 3px; cursor: pointer; }
.po-cfg-form-acciones { display: flex; gap: 8px; margin-top: 5px; }
.po-cfg-btn-guardar {
  padding: 4px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid #28a745; border-radius: 3px;
  background: #28a745; color: #fff; cursor: pointer;
}
.po-cfg-btn-guardar:hover { background: #1e7e34; }
.po-cfg-btn-cancelar {
  padding: 4px 14px; font-size: 12px;
  border: 1px solid #aaa; border-radius: 3px;
  background: #e8e8e8; color: #333; cursor: pointer;
}
.po-cfg-btn-cancelar:hover { background: #d8d8d8; }

/* Lista de grupos */
.po-cfg-lista-grupos { display: flex; flex-direction: column; gap: 4px; }
.po-cfg-fila-grupo {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px;
  border: 1px solid #e0e0e0; background: #fafafa;
  font-size: 12px;
}
.po-cfg-fila-grupo:hover { background: #f0f0f0; }
.po-cfg-muestra-color { width: 20px; height: 20px; border-radius: 3px; border: 1px solid #ccc; flex-shrink: 0; }
.po-cfg-nombre-grupo  { flex: 1; font-weight: 600; }
.po-cfg-orden-grupo   { font-size: 11px; color: #777; }
.po-cfg-btn-editar, .po-cfg-btn-eliminar {
  padding: 2px 8px; font-size: 11px;
  border: 1px solid #b0b0b0; border-radius: 3px;
  background: #f0f0f0; cursor: pointer; white-space: nowrap;
}
.po-cfg-btn-editar:hover  { background: #e0e0e0; }
.po-cfg-btn-eliminar:hover { background: #fde8e8; border-color: #c0392b; color: #c0392b; }
.po-cfg-vacio { font-size: 12px; color: #888; padding: 12px 0; }

/* Pestaña Asignar A */
.po-cfg-asignar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: #555;
}
.po-cfg-asignar-msg { font-size: 11px; color: #1a6e1a; margin-right: 6px; }
.po-cfg-tabla-asignar {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.po-cfg-fila-asignar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; border-radius: 3px;
  border-bottom: 1px solid #eee; font-size: 12px;
}
.po-cfg-fila-asignar:hover { background: #f8f8f8; }
.po-cfg-ext-numero { width: 50px; font-weight: 700; flex-shrink: 0; }
.po-cfg-ext-nombre { flex: 1; color: #555; }
.po-cfg-sel-grupo  {
  flex-shrink: 0; padding: 3px 6px; font-size: 12px;
  border: 1px solid #c0c0c0; border-radius: 3px;
  background: #fff; min-width: 140px;
}

@media (prefers-color-scheme: dark) {
  .po-cfg-tabs      { background: #2e2e2e; border-bottom-color: #444; }
  .po-cfg-tab       { color: #bbb; }
  .po-cfg-tab:hover { background: #3a3a3a; }
  .po-cfg-tab-activo { background: #1e1e1e; color: #5ba4f5; border-bottom-color: #5ba4f5; }
  .po-cfg-form-grupo { background: #2a2a2a; border-color: #444; }
  .po-cfg-form-fila input[type="text"] { background: #1e1e1e; border-color: #555; color: #ddd; }
  .po-cfg-fila-grupo { background: #2a2a2a; border-color: #444; }
  .po-cfg-fila-grupo:hover { background: #333; }
  .po-cfg-btn-editar, .po-cfg-btn-eliminar { background: #3a3a3a; border-color: #555; color: #ccc; }
  .po-cfg-btn-editar:hover  { background: #444; }
  .po-cfg-btn-eliminar:hover { background: #3d2020; border-color: #c0392b; color: #e88; }
  .po-cfg-fila-asignar  { border-bottom-color: #3a3a3a; }
  .po-cfg-fila-asignar:hover { background: #2d2d2d; }
  .po-cfg-ext-nombre { color: #aaa; }
  .po-cfg-sel-grupo  { background: #2a2a2a; border-color: #555; color: #ddd; }
  .po-cfg-asignar-msg { color: #5cb85c; }
  .po-cfg-vacio { color: #666; }
}

/* ── Extensiones banco en Panel Operadora Configuración ────────────────────── */

.po-cfg-form-banco {
  background: var(--color-bg-panel, #f8f9fa);
  border: 1px solid #d0d8e0;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.po-cfg-form-banco .po-cfg-form-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.po-cfg-form-banco .po-cfg-form-fila label { min-width: 170px; font-size: .82rem; color: #555; }
.po-cfg-form-banco .po-cfg-form-fila input[type="text"],
.po-cfg-form-banco .po-cfg-form-fila input[type="number"],
.po-cfg-form-banco .po-cfg-form-fila input[type="tel"],
.po-cfg-form-banco .po-cfg-form-fila input[type="file"] {
  flex: 1; padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: .85rem;
}
.po-cfg-audio-subir-area { flex-wrap: wrap; gap: 6px; }
.po-cfg-audio-subir-area label { flex: 0 0 170px; }
.po-cfg-audio-subir-area input[type="text"] { width: 140px; flex: none; }
.po-cfg-audio-actual { font-size: .83rem; color: #444; font-style: italic; }
.po-cfg-audio-msg { font-size: .8rem; color: #555; }
.po-cfg-form-msg { font-size: .82rem; margin-left: 8px; }
.po-cfg-msg-error { color: #c0392b; }
.po-cfg-msg-warn  { color: #e67e22; }
.po-cfg-form-acciones { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.po-cfg-btn-danger { background: #f8d7da; color: #c0392b; border-color: #e8a0a0; }
.po-cfg-btn-danger:hover { background: #f5c2c7; }

.po-cfg-lista-bancos { margin-top: 4px; }
.po-cfg-fila-banco {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid #eee;
  font-size: .84rem;
}
.po-cfg-fila-banco:hover { background: #f5f8fc; }
.po-cfg-banco-ext   { min-width: 50px; font-weight: 600; color: #0078d4; }
.po-cfg-banco-nombre { flex: 1; }
.po-cfg-banco-num   { min-width: 100px; font-family: monospace; color: #555; }
.po-cfg-banco-audio { min-width: 130px; font-size: .78rem; color: #777; }
.po-cfg-error { color: #c0392b; padding: 8px; }

/* ── Gestión de Usuarios ───────────────────────────────────────────────────── */

.usu-cuerpo {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.usu-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid #ddd; flex-shrink: 0;
}
.usu-btn-nuevo {
  padding: 5px 12px; border: 1px solid #0078d4; border-radius: 4px;
  background: #0078d4; color: #fff; cursor: pointer; font-size: .85rem; white-space: nowrap;
}
.usu-btn-nuevo:hover { background: #006bc4; }
.usu-buscar {
  flex: 1; max-width: 300px; padding: 5px 10px;
  border: 1px solid #ccc; border-radius: 4px; font-size: .85rem;
}
.usu-tabla-wrap {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}
.usu-tabla {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.usu-tabla th {
  position: sticky; top: 0; background: var(--color-bg-panel, #f0f2f5);
  padding: 7px 10px; text-align: left; font-weight: 600;
  border-bottom: 2px solid #d0d8e0; font-size: .82rem; color: #333;
}
.usu-tabla td { padding: 6px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.usu-tabla tr:hover td { background: #f5f8fc; }
.usu-th-ext  { width: 80px; }
.usu-td-ext  { font-weight: 600; color: #0078d4; }
.usu-th-acc  { width: 70px; }
.usu-td-acciones { display: flex; gap: 6px; }
.usu-btn-editar, .usu-btn-eliminar {
  border: 1px solid #ccc; border-radius: 4px; padding: 2px 7px;
  cursor: pointer; font-size: .82rem; background: #f5f5f5;
}
.usu-btn-editar:hover   { background: #e8f0fe; border-color: #0078d4; color: #0078d4; }
.usu-btn-eliminar:hover { background: #fde8e8; border-color: #c0392b; color: #c0392b; }
.usu-cargando, .usu-vacio, .usu-error { padding: 20px; text-align: center; color: #888; }
.usu-error { color: #c0392b; }

/* Modal formulario */
.usu-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.usu-modal {
  background: var(--color-bg-window, #fff);
  border-radius: 8px; padding: 20px 24px;
  min-width: 420px; max-width: 560px; width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.usu-modal-titulo {
  font-size: 1rem; font-weight: 700; margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 1px solid #ddd;
}
.usu-form-fila {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.usu-form-fila label { min-width: 140px; font-size: .83rem; color: #444; }
.usu-form-fila input[type="text"],
.usu-form-fila input[type="number"],
.usu-form-fila select {
  flex: 1; padding: 5px 9px; border: 1px solid #ccc; border-radius: 4px; font-size: .85rem;
}
.usu-form-fila-pwd input[type="text"] { flex: 1; }
.usu-btn-sugerir {
  padding: 4px 10px; border: 1px solid #0078d4; border-radius: 4px;
  background: #e8f0fe; color: #0078d4; cursor: pointer; font-size: .82rem; white-space: nowrap;
}
.usu-btn-sugerir:hover { background: #d0e4fc; }
.usu-form-acciones { display: flex; gap: 10px; margin-top: 14px; }
.usu-btn-guardar {
  padding: 6px 18px; border: none; border-radius: 4px;
  background: #0078d4; color: #fff; cursor: pointer; font-size: .85rem;
}
.usu-btn-guardar:hover:not(:disabled) { background: #006bc4; }
.usu-btn-guardar:disabled { opacity: .6; cursor: not-allowed; }
.usu-btn-cancelar {
  padding: 6px 14px; border: 1px solid #ccc; border-radius: 4px;
  background: #f5f5f5; cursor: pointer; font-size: .85rem;
}
.usu-btn-cancelar:hover { background: #e8e8e8; }
.usu-form-msg { font-size: .82rem; margin-top: 8px; min-height: 18px; }
.usu-msg-error { color: #c0392b; }
.usu-msg-warn  { color: #e67e22; }

@media (prefers-color-scheme: dark) {
  .po-cfg-form-banco { background: #2a2a2a; border-color: #444; }
  .po-cfg-form-banco .po-cfg-form-fila label { color: #aaa; }
  .po-cfg-form-banco .po-cfg-form-fila input { background: #1e1e1e; border-color: #555; color: #ddd; }
  .po-cfg-audio-actual { color: #bbb; }
  .po-cfg-fila-banco { border-bottom-color: #3a3a3a; }
  .po-cfg-fila-banco:hover { background: #2d2d2d; }
  .po-cfg-banco-ext { color: #5ba4f5; }
  .po-cfg-banco-num { color: #aaa; }
  .po-cfg-banco-audio { color: #888; }

  .usu-toolbar { border-bottom-color: #3a3a3a; }
  .usu-tabla th { background: #2a2a2a; color: #ccc; border-bottom-color: #444; }
  .usu-tabla td { border-bottom-color: #3a3a3a; }
  .usu-tabla tr:hover td { background: #2a2a2a; }
  .usu-btn-editar, .usu-btn-eliminar { background: #2e2e2e; border-color: #555; color: #ccc; }
  .usu-modal { background: #1e1e1e; }
  .usu-modal-titulo { border-bottom-color: #444; color: #ddd; }
  .usu-form-fila label { color: #aaa; }
  .usu-form-fila input, .usu-form-fila select { background: #2a2a2a; border-color: #555; color: #ddd; }
  .usu-btn-cancelar { background: #2e2e2e; border-color: #555; color: #ccc; }
  .usu-buscar { background: #2a2a2a; border-color: #555; color: #ddd; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   APP GRABACIONES
   ══════════════════════════════════════════════════════════════════════════════ */

.grab-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #dcdcdc;
  background: #f5f6f7;
  flex-shrink: 0;
}
.grab-filtro-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #555;
  font-weight: 600;
}
.grab-filtro-texto { flex: 1 1 160px; }
.grab-input {
  background: #fff;
  border: 1px solid #b6b8ba;
  border-radius: 3px;
  color: #232629;
  padding: 4px 7px;
  font-size: 12px;
}
.grab-input:focus { border-color: #4f9fd8; outline: none; }

.grab-filtro-botones {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding-bottom: 1px;
}
.grab-btn-buscar,
.grab-btn-limpiar {
  display:      inline-flex;
  align-items:  center;
  height:       28px;
  padding:      0 14px;
  border-radius: 3px;
  font-size:    12px;
  font-weight:  600;
  cursor:       pointer;
}
.grab-btn-buscar {
  border:     1px solid #2f7cb8;
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  color: #fff;
}
.grab-btn-buscar:hover { background: linear-gradient(180deg, #5aaee8, #3a8cc8); }
.grab-btn-limpiar {
  border:     1px solid #7a7a8a;
  background: linear-gradient(180deg, #7a7a8a, #5a5a6a);
  color: #fff;
}
.grab-btn-limpiar:hover { background: linear-gradient(180deg, #8a8a9a, #6a6a7a); }

.grab-estado {
  padding: 4px 12px;
  font-size: 11px;
  color: #555;
  background: #f9f9f9;
  border-bottom: 1px solid #e8e8e8;
  min-height: 22px;
  flex-shrink: 0;
}

.grab-tabla-wrap {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
}
.grab-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.grab-tabla thead th {
  position: sticky;
  top: 0;
  background: #f0f0f0;
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid #ccc;
  white-space: nowrap;
}
.grab-tabla tbody tr:hover td { background: #f0f6ff; }
.grab-tabla td {
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.grab-td-centro { text-align: center; color: #888; padding: 20px !important; }
.grab-td-error  { color: #c00; }
.grab-td-fecha  { white-space: nowrap; }
.grab-td-ext    { font-weight: 700; color: #2f7cb8; }
.grab-td-dur,
.grab-td-tam    { white-space: nowrap; text-align: right; }
.grab-td-destino { color: #333; }
.grab-td-nombre  { font-family: monospace; font-size: 11px; color: #666; }
.grab-td-acciones { white-space: nowrap; text-align: center; }

.grab-btn-play {
  background: linear-gradient(180deg, #4f9fd8, #2f7cb8);
  border: 1px solid #2f7cb8;
  color: #fff;
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 4px;
}
.grab-btn-play:hover { opacity: 0.85; }
.grab-btn-dl {
  background: linear-gradient(180deg, #7a7a8a, #5a5a6a);
  border: 1px solid #5a5a6a;
  color: #fff;
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.grab-btn-dl:hover { opacity: 0.85; }

.grab-tr-player td {
  background: #eaf4ff;
  padding: 6px 12px;
}
.grab-audio-ctrl {
  width: 100%;
  height: 32px;
}

/* Botón RECORD activo (grabando) */
#btn-record.btn-funcion-activo {
  background: #c00 !important;
  color: #fff !important;
  animation: grab-pulsar 1.2s ease-in-out infinite;
}
@keyframes grab-pulsar {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Dark mode grabaciones */
@media (prefers-color-scheme: dark) {
  .grab-filtros    { background: #2a2a2a; border-bottom-color: #444; }
  .grab-filtro-item { color: #aaa; }
  .grab-input      { background: #1e1e1e; border-color: #555; color: #ddd; }
  .grab-estado     { background: #252525; border-bottom-color: #3a3a3a; color: #aaa; }
  .grab-tabla-wrap { background: #1e1e1e; }
  .grab-tabla thead th { background: #2a2a2a; color: #ccc; border-bottom-color: #444; }
  .grab-tabla tbody tr:hover td { background: #2a3a4a; }
  .grab-tabla td   { border-bottom-color: #333; color: #ccc; }
  .grab-td-ext     { color: #5ba4f5; }
  .grab-td-destino { color: #ccc; }
  .grab-td-nombre  { color: #888; }
  .grab-td-centro  { color: #666; }
  .grab-tr-player td { background: #1a2a3a; }
}