:root {
  --te-bg-1: #eef3f8;
  --te-bg-2: #dfe8f3;
  --te-ink: #1f2a37;
}

html,
body {
  height: 100%;
}

body {
  color: var(--te-ink);
}

.te-viewport {
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 10% 20%, rgba(13, 110, 253, 0.08), transparent 55%),
    radial-gradient(900px 700px at 85% 15%, rgba(25, 135, 84, 0.08), transparent 55%),
    linear-gradient(135deg, var(--te-bg-1), var(--te-bg-2));
}

.te-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  padding: 1.25rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 992px) {
  .te-card {
    padding: 1.5rem;
  }
}

.te-logo-wrap {
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 1rem;
}

.te-overline {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(31, 42, 55, 0.7);
}

.te-subtitle {
  font-weight: 600;
}

.te-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(18px 18px at 30% 35%, rgba(255, 255, 255, 0.85), transparent 60%),
    linear-gradient(135deg, rgba(25, 169, 214, 0.95), rgba(11, 107, 122, 0.88));
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
}

.te-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11, 107, 122, 0.7);
  display: inline-block;
}

/* Action cards */
.te-action-card {
  --te-accent-rgb: 25, 169, 214;

  text-decoration: none;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease,
    background-color 160ms ease;
}

.te-action-card .card-body {
  padding: 1.1rem;
  min-height: 122px;
}

.te-action-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--te-ink);
}

.te-action-desc {
  font-size: 0.9rem;
  color: rgba(31, 42, 55, 0.75);
}

.te-action-cta {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(31, 42, 55, 0.85);
}

@media (max-width: 575.98px) {
  .te-action-card .card-body {
    min-height: 0;
  }
}

.te-action-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: rgba(var(--te-accent-rgb), 0.55);
}

.te-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.10);
  border-color: rgba(15, 23, 42, 0.16);
}

.te-action-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.25rem rgba(var(--te-accent-rgb), 0.25),
    0 16px 30px rgba(2, 6, 23, 0.10);
}

.te-action-primary {
  --te-accent-rgb: 25, 169, 214;
  background:
    radial-gradient(420px 240px at 30% 10%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(135deg, rgba(25, 169, 214, 0.22), rgba(11, 107, 122, 0.14));
  border-color: rgba(25, 169, 214, 0.28);
}

.te-action-outline-primary {
  --te-accent-rgb: 25, 169, 214;
  background: rgba(25, 169, 214, 0.07);
  border-color: rgba(25, 169, 214, 0.18);
}

.te-action-outline-secondary {
  --te-accent-rgb: 108, 117, 125;
  background: rgba(108, 117, 125, 0.08);
  border-color: rgba(108, 117, 125, 0.18);
}

.te-action-outline-danger {
  --te-accent-rgb: 220, 53, 69;
  background: rgba(220, 53, 69, 0.07);
  border-color: rgba(220, 53, 69, 0.20);
}

.te-action-terciary {
  --te-accent-rgb: 25, 135, 84;
  background:
    radial-gradient(420px 240px at 30% 10%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(135deg, rgba(25, 135, 84, 0.22), rgba(11, 107, 122, 0.14));
  border-color: rgba(25, 135, 84, 0.28);
}

.te-action-primary .te-action-title,
.te-action-primary .te-action-desc,
.te-action-primary .te-action-cta {
  color: rgba(17, 24, 39, 0.92);
}

.te-cursor-pointer {
  cursor: pointer;
}

/* Login */
.te-auth-header {
  position: relative;
  z-index: 1;
}

.te-auth-logo {
  max-height: 56px;
  height: auto;
}

@media (min-width: 992px) {
  .te-auth-logo {
    max-height: 64px;
  }
}

.te-auth-card {
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
}

.te-auth-kicker {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgba(31, 42, 55, 0.75);
}

.te-auth-notice {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72);
}

.te-auth-notice-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25, 169, 214, 0.12);
  border: 1px solid rgba(25, 169, 214, 0.18);
  color: rgba(8, 55, 69, 0.85);
}

.te-font-btn 
{
    font-size: 1rem !important;
}

/* Stepper (Registro) */
.te-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.te-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.55);
}

.te-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(31, 42, 55, 0.70);
  background: rgba(31, 42, 55, 0.06);
}

.te-step-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(31, 42, 55, 0.75);
}

.te-step.is-active {
  border-color: rgba(25, 169, 214, 0.25);
  background: rgba(25, 169, 214, 0.08);
}

.te-step.is-active .te-step-circle {
  background: rgba(25, 169, 214, 0.20);
  color: rgba(8, 55, 69, 0.90);
}

.te-step.is-active .te-step-label {
  color: rgba(8, 55, 69, 0.90);
}

.te-step.is-complete {
  border-color: rgba(25, 135, 84, 0.22);
  background: rgba(25, 135, 84, 0.07);
}

.te-step.is-complete .te-step-circle {
  background: rgba(25, 135, 84, 0.16);
  color: rgba(15, 23, 42, 0.85);
}

@media (max-width: 575.98px) {
  .te-stepper {
    grid-template-columns: 1fr;
  }
}

/* Drag & Drop */
.te-dropzone {
  position: relative;
  border-radius: 0.9rem;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.55);
  padding: 0.9rem;
  min-height: 160px;
  cursor: pointer;
  overflow: hidden;
}

.te-dropzone.is-dragover {
  border-color: rgba(25, 169, 214, 0.55);
  background: rgba(25, 169, 214, 0.08);
}

.te-dropzone.has-file {
  border-style: solid;
  overflow-y: auto;
}

.te-dropzone-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.te-dropzone-body {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.15rem;
  color: rgba(31, 42, 55, 0.78);
}

.te-dropzone-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25, 169, 214, 0.12);
  border: 1px solid rgba(25, 169, 214, 0.18);
  color: rgba(8, 55, 69, 0.85);
  margin-bottom: 0.35rem;
}

.te-dropzone-title {
  font-weight: 700;
}

.te-dropzone-subtitle {
  font-size: 0.9rem;
  color: rgba(31, 42, 55, 0.65);
}

.te-dropzone-meta {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: rgba(31, 42, 55, 0.65);
}

.te-dropzone-preview {
  display: none;
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 0.75rem;;
}

.te-dropzone.has-file .te-dropzone-body {
  display: none;
}

.te-dropzone.has-file .te-dropzone-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.te-dropzone-clear {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: none;
}

.te-dropzone.has-file .te-dropzone-clear {
  display: inline-flex;
}

.te-dropzone-file-name {
  font-size: 0.85rem;
  color: rgba(31, 42, 55, 0.75);
}

.te-dropzone.te-dropzone-is-invalid {
  border: 1px solid var(--bs-danger);
}

tr.colorInfo > * {
    background-color: #A6D3F3 !important;
}

tr.colorSuccess > * {
  background-color: #85D894 !important;
}

tr.colorDanger > * {
    background-color: #F5917F !important;
}

tr.colorAceptado > * {
    background-color: #2DB2B0 !important;
}

tr.colorValidar > * {
    background-color: #e8e973 !important;
}

.aceptado {
    color: #2DB2B0 !important;
}

.danger{
    background-color: #f5917f !important;
}

.devuelto {
    color: #ce8383 !important;
}

.pendiente {
    color: #75c0e0 !important;
}

.validar {
    color: #e8e973 !important;
}

.corregir {
    color: #ED765D !important;
}

.listo {
    color: #72C55B !important;
}

tr.aceptado > * {
    color: #2DB2B0 !important;
}

tr.danger > * {
    background-color: #f5917f !important;
}

tr.devuelto > * {
    color: #ce8383 !important;
}

tr.pendiente > * {
    color: #75c0e0 !important;
}

tr.validar > * {
    color: #e8e973 !important;
}

tr.corregir > * {
    color: #ED765D !important;
}

tr.listo > * {
    color: #72C55B !important;
}

.split-0 {
    height: 400px;
    overflow-y: scroll;
}

.split-1 {
    height: 400px;
    overflow-y: scroll;
}

.split {
    display: flex !important;
    flex-direction: row !important;
}

.gutter {
    background-color: #eee !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
}

    .gutter.gutter-horizontal {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==') !important;
        cursor: col-resize !important;
    }


.photoviewer-stage {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .85) !important;
    border: none;
}

.photoviewer-header .photoviewer-toolbar {
    background-color: rgba(0, 0, 0, .5) !important;
}

.photoviewer-footer {
    bottom: 10px;
}

    .photoviewer-footer .photoviewer-toolbar {
        background-color: rgba(0, 0, 0, .5) !important;
        border-radius: 5px;
    }

.photoviewer-header,
.photoviewer-footer {
    background-color: rgba(0, 0, 0, .5) !important;
    pointer-events: none;
}

.photoviewer-title {
    color: #ccc;
}

.photoviewer-button {
    color: #ccc;
    pointer-events: auto;
}

.photoviewer-footer .photoviewer-button:hover {
    color: white;
}


/* CONTENEDOR */
#commentList {
    display: flex;
    flex-direction: column;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    background: #f4f6f9;
}

/* MENSAJE */
.comment {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

    /* IZQUIERDA (TÚ) */
    .comment.me {
        align-items: flex-start;
    }

    /* DERECHA (OTROS) */
    .comment.other {
        align-items: flex-end;
    }

/* HEADER */
.comment-header {
    font-size: 11px;
    margin-bottom: 4px;
    max-width: 75%;
}

/* Alineación header */
.comment.me .comment-header {
    text-align: left;
}

.comment.other .comment-header {
    text-align: right;
}

/* AUTOR */
.comment-author {
    font-weight: 600;
    color: #374151;
}

/* FECHA */
.comment-date {
    margin-left: 6px;
    color: #9ca3af;
}

/* BURBUJA */
.comment-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 75%;
    line-height: 1.4;
    position: relative;
    font-size: 14px;
}

/* TÚ (izquierda) */
.comment.me .comment-bubble {
    background: #e5e7eb;
    color: #111827;
}

/* OTROS (derecha) */
.comment.other .comment-bubble {
    background: #3b82f6;
    color: white;
}

/* COLITA IZQUIERDA */
.comment.me .comment-bubble::after {
    content: "";
    position: absolute;
    left: -6px;
    top: 10px;
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #e5e7eb transparent transparent;
}

/* COLITA DERECHA */
.comment.other .comment-bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 10px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #3b82f6;
}

.colorInfo {
    background-color: #A6D3F3 !important;
}

.colorEnviado {
    background-color: #e8e973 !important;
}

.colorAceptado {
    background-color: #2DB2B0 !important;
}

.cursor{
    cursor:pointer;
}

.list-group-item:hover {
    background: #3c4b64;
    color: #fff;
}

::-moz-selection {
    background-color: #ffeb3b;
    color: #000;
}

::selection {
    background-color: #ffeb3b;
    color: #000;
}