/* =============================================
   style.css — Estilos globales del proyecto
   Variables, reset, tipografía, inputs, botones
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables globales ── */
:root {
  --primary:        #FF1A1A;
  --primary-dark:   #D90429;
  --primary-light:  #e74c3c;
  --primary-bg:     #fdf3f2;

  --sidebar-bg:     #FF1A1A;
  --sidebar-hover:  rgba(255,255,255,0.12);
  --sidebar-w:      260px;

  --bg:             #f5f6fa;
  --surface:        #ffffff;
  --border:         #e8eaed;
  --text-main:      #1a1d23;
  --text-muted:     #7a8394;
  --text-light:     #b0b8c8;

  --status-red:       #e74c3c;
  --status-red-bg:    #fdecea;
  --status-orange:    #f39c12;
  --status-orange-bg: #fef6e4;
  --status-green:     #27ae60;
  --status-green-bg:  #e8f8ee;
  --status-pink:      #8e44ad;
  --status-pink-bg:   #f3eafd;

  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 2px 12px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.10);

  --font-head: 'Nunito', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Bootstrap 5 overrides */
  --bs-primary:          #FF1A1A;
  --bs-primary-rgb:      192, 57, 43;
  --bs-border-radius:    var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-font-sans-serif:  'DM Sans', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-bg:          var(--bg);
  --bs-body-color:       var(--text-main);
  --bs-border-color:     var(--border);
  --bs-box-shadow:       var(--shadow);
  --bs-box-shadow-sm:    var(--shadow);
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../img/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ── Inputs y campos de formulario ── */
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  background: rgba(255,255,255,0.95);
  font-size: 1rem;
  outline: none;
  transition: 0.3s;
  font-family: inherit;
}

.campo textarea { resize: vertical; }
.campo select   { cursor: pointer; }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(192,57,43,0.12);
}

.input-file {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  background: white;
  cursor: pointer;
}

.input-file::file-selector-button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  margin-right: 12px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}

.input-file::file-selector-button:hover { background: var(--primary-dark); }

.archivo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.archivo-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

#nombre_archivo {
  margin-left: 15px;
  color: var(--text-muted);
}

/* ── Botón principal global ── */
.boton_enviar {
  width: 180px;
  padding: 14px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  color: white;
  cursor: pointer;
  transition: 0.3s;
  margin: 0 auto;
  display: block;
}

.boton_enviar:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  background: var(--primary-light);
}

/* ── Botones de exportar ── */
.boton-exportar {
  width: 220px;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  color: white !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.boton-exportar:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  color: white !important;
}

.btn-excel-custom { background: #198754; }
.btn-excel-custom:hover { background: #2ea46a; }

.btn-pdf-custom { background: var(--primary); }
.btn-pdf-custom:hover { background: var(--primary-light); }

/* ── Enlaces ── */
.enlaces { text-align: center; }

.enlaces a {
  display: block;
  font-size: 0.95rem;
  color: #444;
  text-decoration: none;
  margin-top: 12px;
  transition: 0.3s;
}

.enlaces a:hover { color: #4f7cff; }

/* ── Bootstrap btn-primary override ── */
.btn-primary {
  --bs-btn-bg:                 var(--primary);
  --bs-btn-border-color:       var(--primary);
  --bs-btn-hover-bg:           var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg:          var(--primary-dark);
  --bs-btn-focus-shadow-rgb:   192, 57, 43;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(192,57,43,0.28);
  transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(192,57,43,0.35);
}

/* ── Bootstrap badge override ── */
.badge { font-weight: 700; letter-spacing: 0.03em; }

/* ── Bootstrap list-group override ── */
.list-group-item { border-color: var(--border); }
.list-group-item.active {
  background-color: var(--primary);
  border-color: var(--primary);
}


.btn-cancelar-contrato {
    background: transparent;
    border: none;
    color: #e53935;
    cursor: pointer;
    font-size: 16px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.btn-cancelar-contrato:hover {
    background: #ffebee;
}

.modal-cancelar {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-cancelar-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-cancelar-box h3 {
    color: #e53935;
    margin-bottom: 12px;
}
.modal-cancelar-box p {
    color: #555;
    font-size: 15px;
    margin-bottom: 24px;
}
.modal-cancelar-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.btn-cancelar-confirmar {
    background: #e53935;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-cancelar-confirmar:hover {
    background: #b71c1c;
}
.btn-cancelar-cerrar {
    background: #f4f4f4;
    color: #333;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-cancelar-cerrar:hover {
    background: #e0e0e0;
}