/**
 * Legacy Styles - Sky Canal de Denuncias
 * Estilos extraídos del aplicativo legacy Laravel 5.5 + Bootstrap 3
 * Para uso en Laravel 12 con Tailwind CSS 4
 */

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
  /* Colores de marca Sky Airline */
  --sky-purple: #671e75;
  --sky-purple-hover: #9d0bb9;
  --sky-pink: #fe0197;
  --sky-pink-hover: #d70099;
  --sky-green: #26de00;
  --sky-border: #ADAFAF;
  --sky-border-light: #e7eaec;
  --sky-text: #4c4e52;
  --sky-bg-light: #f8f8f8;

  /* Colores adicionales */
  --sky-danger: #f4516c;
  --sky-warning: #ffb822;
  --sky-info: #36a3f7;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
@font-face {
  font-family: 'Metric-Bold';
  src: local('Metric-Bold'), url('/fonts/Metric-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Metric';
  src: local('Metric-Regular'), url('/fonts/Metric-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Metric-Semibold';
  src: local('Metric-Semibold'), url('/fonts/Metric-Semibold.otf') format('opentype');
}

body {
  font-family: 'Metric', 'Roboto', sans-serif;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.skyfuente {
  color: var(--sky-purple);
}

.skyfondo {
  background: var(--sky-purple);
}

/* ============================================
   LAYOUT Y ESTRUCTURA
   ============================================ */
/* .row definition moved to GRID SYSTEM section */

.principal {
  display: block;
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  z-index: 100000;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
}

.preloader .status {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url('/loading.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -50px 0 0 -50px;
}

/* ============================================
   FORMULARIOS
   ============================================ */
.form-control {
  border-color: var(--sky-purple);
  border-radius: 0px !important;
}

.form-control:focus {
  background-color: #fcfdda;
  border-color: var(--sky-purple);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(103, 30, 117, 0.25);
}

.nota {
  font-weight: 300;
  font-size: 12px;
  text-align: justify;
  color: #6c757d;
}

/* ============================================
   BOTONES
   ============================================ */
button {
  color: var(--sky-text) !important;
  border-color: var(--sky-border) !important;
  border-radius: 0px !important;
}

button:hover {
  color: #ffffff !important;
  background: var(--sky-purple) !important;
}

button:focus {
  color: #ffffff !important;
  background: var(--sky-purple) !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--sky-purple);
  border-color: var(--sky-purple);
}

.btn-primary:hover {
  background-color: var(--sky-purple-hover) !important;
  border-color: var(--sky-purple-hover) !important;
}

#registrardenuncia,
.regdenuncia {
  background: var(--sky-pink) !important;
  color: #ffffff !important;
  border-color: var(--sky-pink) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  white-space: normal;
}

#registrardenuncia:hover,
.regdenuncia:hover {
  background: var(--sky-pink-hover) !important;
}

#politicas {
  background: var(--sky-pink) !important;
  color: #ffffff !important;
  border-color: var(--sky-pink) !important;
  padding-top: 15px;
  padding-bottom: 15px;
  white-space: normal;
}

#politicas:hover {
  background: var(--sky-pink-hover) !important;
}

.volver {
  padding-top: 15px;
  padding-bottom: 15px;
}

.botonseleccionado {
  color: #fff;
  background-color: var(--sky-green) !important;
  border-color: var(--sky-green) !important;
}

.botontab {
  font-weight: 600;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 15px 20px;
  text-align: left;
  display: block;
  width: 100%;
  white-space: normal;
  border: 1px solid var(--sky-purple);
  color: var(--sky-purple);
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 5px;
  transition: all 0.3s;
}

.botontab:hover {
  background-color: var(--sky-purple);
  color: #fff !important;
  text-decoration: none;
}

.botontab.botonseleccionado {
  color: #fff !important;
  background-color: var(--sky-green) !important;
  border-color: var(--sky-green) !important;
}

.btn-success {
  color: #fff !important;
}

/* ============================================
   ENLACES
   ============================================ */
a {
  color: var(--sky-pink);
  text-decoration: underline;
}

a:hover {
  color: var(--sky-pink-hover);
}

.text-primary {
  color: var(--sky-purple) !important;
}

/* ============================================
   TIMELINE
   ============================================ */
.timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 0px;
  padding-bottom: 20px;
}

.timeline .li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
}

.statuspaso {
  padding: 10px 150px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
}

.statuspaso h4 {
  font-weight: 600;
}

.statuspaso:before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  transition: all 200ms ease-in;
}

.li.complete .statuspaso {
  border-top: 2px solid var(--sky-green);
}

.li.complete .statuspaso:before {
  background-color: var(--sky-green);
  border: none;
  transition: all 200ms ease-in;
}

.li.complete .statuspaso h4 {
  color: var(--sky-green);
}

.li.actual .statuspaso {
  border-top: 2px solid var(--sky-purple);
}

.li.actual .statuspaso:before {
  background-color: var(--sky-purple);
  border: none;
  transition: all 200ms ease-in;
}

.li.actual .statuspaso h4 {
  color: var(--sky-purple);
}

/* ============================================
   ACORDEÓN
   ============================================ */
.tipodenuncia {
  background: var(--sky-purple);
  color: #ffffff !important;
  font-weight: 600;
  text-align: left;
  border-bottom-color: #ffffff !important;
  padding-right: 0px;
  white-space: normal;
}

.m-accordion__item-head.tipodenuncia {
  background-color: var(--sky-purple) !important;
  color: #ffffff !important;
}

.m-checkbox.m-checkbox--state-success>span {
  border: 1px solid var(--sky-green);
  background: white;
}

.m-checkbox.m-checkbox--state-success>input:checked~span {
  border: 1px solid var(--sky-green);
  background: white;
}

.m-checkbox.m-checkbox--state-success>span:after {
  border: solid var(--sky-green);
}

/* ============================================
   CONTENIDO DE DENUNCIA
   ============================================ */
.contenidodenuncialg {
  display: table-cell;
}

.contenidodenuncialg>img {
  max-width: 75px;
}

.contenidodenuncia {
  text-align: center;
  display: table-caption;
}

.contenidodenuncia>img {
  max-width: 150px;
}

/* ============================================
   FAQ
   ============================================ */
.faq {
  padding: 15px 0;
  border-bottom: solid 1px #e8e8e8;
}

.faq a {
  font-size: 16px;
  cursor: pointer;
  color: var(--sky-pink) !important;
}

.faq a:focus {
  color: var(--sky-green);
}

/* ============================================
   ARCHIVOS ADJUNTOS
   ============================================ */
.file-box {
  float: left;
  width: 150px;
}

.file {
  border: 1px solid var(--sky-border-light);
  padding: 0;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
  margin-right: 20px;
}

.file .icon {
  padding: 15px 10px;
  text-align: center;
}

.file .icon i {
  font-size: 60px;
  color: #dadada;
}

.file .icon,
.file .image {
  height: 100px;
  overflow: hidden;
}

.file .file-name {
  padding: 10px;
  background-color: var(--sky-bg-light);
  border-top: 1px solid var(--sky-border-light);
  font-size: 14px;
}

/* ============================================
   MULTIFILE UPLOAD
   ============================================ */
.MultiFile-label {
  padding: 6px;
}

.BoderMultiFile {
  border: solid 1px var(--sky-border);
  padding: 15px;
}

/* ============================================
   SELECT2
   ============================================ */
.select2-selection--single {
  height: 37px !important;
  border-radius: 0px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 17px;
}

.has-error .select2-selection--single {
  border-color: #f34235;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--sky-pink) !important;
}

.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--sky-purple);
}

.select2-container--default .select2-results__option.select2-results__option--highlighted {
  color: #ffffff;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  width: 100%;
  background: var(--sky-purple);
  padding: 25px;
  color: #fff;
  left: 0;
  bottom: 0;
  display: block;
}

/* ============================================
   PORTLET
   ============================================ */
.m-portlet .m-portlet__body {
  color: var(--sky-text) !important;
}

/* ============================================
   BADGES
   ============================================ */
.m-badge--primary {
  background-color: var(--sky-purple) !important;
  color: #ffffff;
}

.m-badge--danger {
  background-color: var(--sky-danger);
  color: #ffffff !important;
}

.m-badge--success {
  background-color: var(--sky-green);
  color: #ffffff !important;
}

.m-badge--warning {
  background-color: var(--sky-warning);
  color: #ffffff !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }

  .timeline .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }

  .timestamp {
    width: 100px;
  }

  .statuspaso:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}

@media (max-width: 768px) {
  .timeline {
    flex-direction: column;
  }

  .info-tabs {
    flex-direction: column;
  }

  .form-label {
    text-align: left !important;
  }

  .col-md-5.text-right {
    text-align: left !important;
  }
}

/* ============================================
   COLUMNAS INLINE (Legacy Bootstrap 3)
   ============================================ */
/* ============================================
   GRID SYSTEM (Flexbox Replacement for Bootstrap 3)
   ============================================ */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

[class^="col-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/* ============================================
   UTILIDADES
   ============================================ */
/* ============================================
   Metronic & Legacy Overrides
   ============================================ */
.m-grid.m-grid--root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.m-header {
  background-color: var(--sky-purple);
  height: 70px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.m-container--fluid {
  width: 100%;
  padding-right: 30px;
  padding-left: 30px;
  margin-right: auto;
  margin-left: auto;
}

.m-stack.m-stack--ver {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

.m-brand__logo img {
  height: 50px;
}

.m-header__title-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: 20px;
  line-height: 40px;
  /* Align with logo height */
}

/* Fix for body overrides */
body {
  background-color: #f4f5f8 !important;
}

.card {
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-header {
  border-radius: 0 !important;
}

/* Timeline alignment */
.timeline {
  justify-content: center;
}

/* =====================================================
   Bootstrap utility classes missing from Tailwind
   ===================================================== */

/* Text colors */
.text-danger  { color: #dc3545 !important; }
.text-success { color: #28a745 !important; }
.text-warning { color: #ffc107 !important; }
.text-muted   { color: #6c757d !important; }

/* Typography */
.small, small { font-size: 0.875em; }

/* Display utilities */
.d-block  { display: block !important; }
.d-flex   { display: flex !important; }
.d-none   { display: none !important; }
.d-inline { display: inline !important; }

/* Alert components */
.alert {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-bottom: 16px;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffc107;
}

/* col-sm-* grid (same breakpoints as col-md-* for simplicity) */
.col-sm-1  { float: left; width: 8.333333%; padding-right: 15px; padding-left: 15px; }
.col-sm-2  { float: left; width: 16.666667%; padding-right: 15px; padding-left: 15px; }
.col-sm-3  { float: left; width: 25%; padding-right: 15px; padding-left: 15px; }
.col-sm-4  { float: left; width: 33.333333%; padding-right: 15px; padding-left: 15px; }
.col-sm-5  { float: left; width: 41.666667%; padding-right: 15px; padding-left: 15px; }
.col-sm-6  { float: left; width: 50%; padding-right: 15px; padding-left: 15px; }
.col-sm-7  { float: left; width: 58.333333%; padding-right: 15px; padding-left: 15px; }
.col-sm-8  { float: left; width: 66.666667%; padding-right: 15px; padding-left: 15px; }
.col-sm-9  { float: left; width: 75%; padding-right: 15px; padding-left: 15px; }
.col-sm-10 { float: left; width: 83.333333%; padding-right: 15px; padding-left: 15px; }
.col-sm-11 { float: left; width: 91.666667%; padding-right: 15px; padding-left: 15px; }
.col-sm-12 { float: left; width: 100%; padding-right: 15px; padding-left: 15px; }