@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

:root{
  --sidebar-bg:#d3ffeb;
  --sidebar-hover:#24c27b;
  --body-bg:#fff;
  --text-color:#000;
  --link-color:#000;
  --table-bg:#fff;
  --table-alt-bg:#f0f0f0;
  --table-border:#ccc;
  --form-bg:#fff;
  --radius:10px;
  --gap:1rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(36,194,123,.35);
}

body{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  margin:0;
  padding:20px;
  background:var(--body-bg);
  color:var(--text-color);
  margin-left:0;
  animation:fadein .3s;
}

.text-muted,
.text-secondary{
  color:#555 !important;
}

@keyframes fadein{
  from{opacity:0;}
  to{opacity:1;}
}

.sidebar{
  width:220px;
  background:var(--sidebar-bg);
  padding:20px 10px;
  position:fixed;
  top:0;
  bottom:0;
  overflow-y:auto;
  transition:width .2s;
}
.menu-toggle{
  position:fixed;
  top:10px;
  left:10px;
  z-index:1001;
  display:block;
}
.sidebar .logo{
  height:40px;
  width:auto;
  max-width:100%;
  display:block;
  margin:0 auto 20px auto;
}
.sidebar .subtitle{
  color:var(--link-color);
  text-align:center;
  margin-bottom:20px;
  font-weight:bold;
}
.sidebar .nav-link{
  color:var(--link-color);
}
.sidebar .nav-link:hover{
  background:var(--sidebar-hover);
  color:var(--text-color);
}
.sidebar .nav-link.active{
  background:var(--sidebar-hover);
  color:var(--text-color);
  font-weight:600;
}
.sidebar .menu-section{
  margin-bottom:20px;
}
.sidebar .menu-section:last-child{
  margin-bottom:0;
}
.sidebar .dropdown-menu{
  position:static;
  float:none;
  background:none;
  border:0;
  padding-left:15px;
}
.sidebar .dropdown-toggle::after{
  margin-left:4px;
}

#adminMenu{
  width:220px;
  background:var(--sidebar-bg);
}
#adminMenu .offcanvas-body{
  padding:20px 10px;
}
#adminMenu .nav-link{
  color:var(--link-color);
}
#adminMenu .nav-link:hover{
  background:var(--sidebar-hover);
  color:var(--text-color);
}

body{
  transition:margin-left .2s;
}

@media(min-width:768px){
  body{margin-left:220px;}
  #sidebar{width:220px;transform:none!important;visibility:visible!important;}
  #sidebar.collapsed{width:60px;}
  #sidebar.collapsed .subtitle,
  #sidebar.collapsed .nav-link span,
  #sidebar.collapsed .offcanvas-header .btn-close{display:none;}
  #sidebar .offcanvas-header .btn-close{display:none;}
  body.sidebar-collapsed{margin-left:60px;}
}

h1{
  margin-bottom: 20px;
}

table{
  border-collapse: collapse;
  width: 100%;
  background: var(--table-bg);
}

th,td{
  border: 1px solid var(--table-border);
  padding: 8px;
  text-align: left;
}

tr:nth-child(even){
  background: var(--table-alt-bg);
}

.button{
  background: #007bff;
  color: #fff;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 5px;
}

form{
  background: var(--form-bg);
  padding: 20px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

form label{
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#addShot{
  margin-top: 10px;
}

.drop-zone{
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.drop-zone.dragover{
  background:#e9ecef;
  border-color:var(--sidebar-hover);
}
.drop-zone input{
  display:none;
}
.drop-zone .progress{
  height:6px;
  margin-top:10px;
}
.dz-text{
  font-size:0.9em;
  color:#555;
}


.thumb{
  margin-bottom: 10px;
}

.thumb img{
  display: block;
  margin-bottom: 4px;
  max-width: 100%;
  border: 1px solid #ccc;
  cursor:pointer;
}

.report-org{
  text-align:center;
  font-weight:bold;
  margin:10px 0;
}

.report-title{
  font-size:1.2em;
  margin:10px 0;
}

.report-details{
  margin:10px 0;
  white-space:pre-wrap;
}

.report-shot{
  text-align:center;
  margin-bottom:15px;
}

.report-shot img{
  width:100%;
  height:auto;
  border:1px solid #ccc;
  max-width:660px;
  cursor:pointer;
}

/* Imagenes de captura */
.shot-img{
  display:block;
  height:auto;
  max-width:660px;
  width:auto;
  border:1px solid #ccc;
  margin:0 auto 10px auto;
}

.report-footer{
  text-align:center;
  font-size:1.1em;
  margin-top:20px;
  border-top:4px solid #000;
  padding-top:10px;
}
.report-footer .result{
  font-weight:bold;
}
.report-footer .result i{
  font-size:1.2em;
  margin-right:4px;
  vertical-align:-2px;
}

.page-break{
  page-break-after:always;
  border:0;
  margin:20px 0;
}

.print-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  border-bottom:4px solid #000;
  padding-bottom:10px;
}
.print-header img{
  height:40px;
}

.login-page{
  margin-left:0;
}

.login-wrapper{
  max-width:420px;
  margin:60px auto;
  background:#fff;
  padding:30px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.login-logo{
  display:block;
  margin:0 auto 20px auto;
  max-width:200px;
}

@media (max-width: 600px){
  body{
    margin-left:0;
    padding-left:0;
  }
}


@media print{
  @page{ size: Letter; margin:20mm; }
  body{ margin:0; background:var(--body-bg); }
  .sidebar, .button{ display:none; }
}
.drag-handle{cursor:move;font-size:1.2em;}

.auto-grow{
  overflow:hidden;
  resize:none;
}

.table-minimal th,
.table-minimal td{
  border:0;
  border-bottom:1px solid var(--table-border);
  padding:6px;
}

.table-minimal tbody tr{
  cursor:pointer;
}
.table-minimal tbody tr:hover{
  background:var(--table-alt-bg);
}

.details-wrap{
  padding:10px;
  background:var(--table-alt-bg);
}

/* Tabs de organizaciones */
.nav-tabs-organizations{
  display:flex;
  justify-content:center;
}
.nav-tabs-organizations.fixed-bottom{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index:1030;
  background:var(--table-bg);
}
.nav-tabs-organizations .nav-link{
  color:var(--text-color);
  border:0;
  border-top:3px solid var(--table-border);
  margin-right:4px;
}
.nav-tabs-organizations .nav-link.active{
  color:var(--text-color);
  border-top-color:var(--sidebar-hover);
  font-weight:bold;
}

/* Test result icons */
.result-icon{
  color:var(--sidebar-hover);
}
body{padding-bottom:60px;}

/* Kanban dashboard */
.kanban-column{
  background: var(--table-bg);
  padding: 10px;
  border-radius: 6px;
  min-height: 200px;
}
.kanban-card{
  background: var(--form-bg);
  border:1px solid var(--table-border);
  border-radius:4px;
  padding:8px;
  margin-bottom:10px;
}

.card{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.btn:focus,
.form-control:focus{
  box-shadow:var(--focus);
}

.btn-primary{
  background-color: var(--sidebar-hover);
  border-color: var(--sidebar-hover);
}

.btn-primary:hover,
.btn-primary:focus{
  background-color: #1ca06d;
  border-color: #1ca06d;
}

.theme-icons{
  display:flex;
  justify-content:space-around;
}

.theme-icons .nav-link{
  font-size:1.4rem;
  padding:0.25rem;
}

.theme-icons .nav-link.active{
  background:var(--sidebar-hover);
  color:var(--text-color);
}