/* Modern UI styles (dark theme) for Incidencias UI */
:root { --bg:#0b2a3b; --panel:#141419; --text:#e6e6ea; --muted:#a9a9b8; --primary:#7c3aed; --primary-2:#22d3ee; --danger:#ef4444; --ok:#10b981; --border:#262630; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  /* Fondo: imagen + overlay teal, fijo y a pantalla completa */
  background-color:var(--bg);
  /* Quitamos imagen inexistente para evitar 404; mantenemos overlay gradiente */
  background-image: linear-gradient(rgba(11,120,132,.55), rgba(11,120,132,.55));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;gap:10px;align-items:center;margin-bottom:18px}
.nav a{color:var(--text);text-decoration:none;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,#191922,#12121a)}
.nav a:hover{border-color:#33334a;transform:translateY(-1px)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:0 10px 20px rgba(0,0,0,.35)}
.title{font-size:18px;margin:0 0 12px}
.tabs{display:flex;gap:8px;margin:6px 0 14px}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:linear-gradient(180deg,#1f2430,#141824);color:#e6e6ea;cursor:pointer}
.tab.active{background:linear-gradient(180deg,#5b21b6,#3b0764);border-color:#3b0764}
.tab:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.pane.hidden{display:none}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
label{display:block;font-weight:600;margin-bottom:6px;color:var(--muted)}
input, select, textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0f0f14;color:var(--text)}
textarea{min-height:100px}
.readonly{opacity:.8;pointer-events:none}

/* Buttons */
.btn{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,#191922,#12121a);color:var(--text);cursor:pointer}
.btn:hover{border-color:#33334a;transform:translateY(-.5px)}
.btn.secondary{background:linear-gradient(180deg,#1f2430,#141824)}
.btn.success{background:linear-gradient(180deg,#065f46,#064e3b);border-color:#064e3b}
.btn.danger{background:linear-gradient(180deg,#7f1d1d,#450a0a);border-color:#450a0a}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal.hidden{display:none}
.modal-dialog{background:var(--panel);border:1px solid var(--border);border-radius:14px;max-width:520px;width:95%;padding:18px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.modal-title{margin:0 0 8px;font-size:16px}
.modal-text{color:var(--text);margin:8px 0 12px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
.btn{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:10px;border:1px solid var(--border);cursor:pointer;color:#fff;background:linear-gradient(180deg,#5b21b6,#3b0764)}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:linear-gradient(180deg,#1f2937,#0b1020)}
.btn.success{background:linear-gradient(180deg,#0f766e,#064e3b)}
.btn.danger{background:linear-gradient(180deg,#b91c1c,#7f1d1d)}
.flex{display:flex;gap:10px;align-items:center}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.table th{color:#c9c9d7;font-weight:700;background:#0f0f14;position:sticky;top:0}
.img-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:#0f0f14}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;border:1px solid var(--border);font-weight:600}
.badge.warning{background:#2b2835;color:#facc15}
.badge.danger{background:#33212b;color:#fecaca}
.badge.ok{background:#17322c;color:#a7f3d0}
.badge.app-teams{background:linear-gradient(180deg,#6b6fb4,#4e528f);color:#fff;border-color:#4e528f}
.badge.app-onedrive{background:linear-gradient(180deg,#0a84d0,#0869b7);color:#fff;border-color:#0869b7}
.badge.app-sharepoint{background:linear-gradient(180deg,#0b8b79,#086b63);color:#fff;border-color:#086b63}
.badge.app-outlook{background:linear-gradient(180deg,#0078d4,#0a66c2);color:#fff;border-color:#0a66c2}
.badge.app-office{background:linear-gradient(180deg,#d83b01,#a23201);color:#fff;border-color:#a23201}
.badge.app-pc{background:linear-gradient(180deg,#00bcf2,#0899d0);color:#fff;border-color:#0899d0}
.muted{color:var(--muted)}
.input-inline{display:flex;gap:8px}
.visually-hidden-file{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#btnAttachLabel{min-width:160px}
#btnInlineViewImage{min-width:140px}
.footer{margin-top:18px;color:var(--muted)}
.toast{position:fixed;bottom:20px;right:20px;background:#11111a;color:#fff;padding:10px 12px;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.4)}

/* Password visibility toggle */
.password-field{position:relative}
.password-field input{padding-right:40px}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.password-toggle:hover{color:var(--text)}

/* Image modal should fit content (image) while respecting viewport */
#imageModal .modal-dialog{width:fit-content;max-width:95vw;padding:12px}
#imageModal .modal-text{margin:0}

/* --- Spectacular theme enhancements (overrides) --- */
body{
  background-size: 400% 400%, cover;
  background-position: 0% 50%, center;
  animation: bgWave 26s ease infinite;
}
@keyframes bgWave { 0%{background-position:0% 50%, center} 50%{background-position:100% 50%, center} 100%{background-position:0% 50%, center} }

.card{background:rgba(20,20,25,.65)!important;backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);border-radius:16px;box-shadow:0 18px 36px rgba(0,0,0,.45);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 28px 60px rgba(0,0,0,.55);border-color:#33334a}

.btn{padding:10px 14px;border-radius:12px;display:inline-flex;gap:8px;align-items:center;box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.5);filter:brightness(1.06)}
.btn.success{box-shadow:0 0 0 0 rgba(34,211,238,0)}
.btn.success:hover{box-shadow:0 0 0 8px rgba(34,211,238,.15)}

.table{overflow:hidden;border-radius:12px}
.table th,.table td{padding:12px}
.table tbody tr{transition:background-color .2s ease}
.table tbody tr:hover{background-color:rgba(31,36,48,.35)}

.badge{position:relative;overflow:hidden}
.badge::after{content:"";position:absolute;left:-20%;top:0;height:100%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0));transform:skewX(-20deg);animation:shine 3s ease-in-out infinite}
@keyframes shine{0%{left:-20%}50%{left:80%}100%{left:-20%}}

input:focus, select:focus, textarea:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 4px rgba(34,211,238,.18)}

.toast{transform:translateY(20px);opacity:0;animation:toastIn .35s ease forwards}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Scrollbar refined */
*{scrollbar-width:thin;scrollbar-color:#33334a #0b2a3b}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b2a3b}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#33334a,#1f2430);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3278ff,#1f2430)}