/* Estilos generales */
.mr-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.mr-header {
  text-align: center;
  margin-bottom: 40px;
}

.mr-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
}

.mr-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* Estilos de formularios */
.mr-form {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.mr-form-group {
  margin-bottom: 25px;
}

.mr-form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #333;
}

.mr-form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mr-form-control:focus {
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  outline: none;
}

.mr-form-control.error {
  border-color: #d63638;
}

.mr-form-text {
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}

/* Estilos de servicios */
.mr-services {
  margin-bottom: 30px;
}

.mr-service-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr auto;
  gap: 15px;
  align-items: start;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 15px;
}

.mr-service-name input {
  width: 100%;
}

.mr-service-description textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

.mr-service-price input {
  width: 100%;
  text-align: right;
}

.mr-service-actions {
  display: flex;
  align-items: center;
}

.mr-remove-service {
  padding: 8px 12px;
  background-color: #d63638;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.mr-remove-service:hover {
  background-color: #b32d2e;
}

.mr-add-service {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #2271b1;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.2s;
}

.mr-add-service:hover {
  background-color: #135e96;
}

/* Estilos de vista previa */
.mr-preview {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.mr-preview h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px;
  text-align: center;
}

.mr-preview-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.mr-preview-header p {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.mr-preview-header strong {
  color: #666;
}

.mr-preview-services h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px;
}

.mr-preview table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.mr-preview th,
.mr-preview td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.mr-preview th {
  font-weight: 600;
  color: #333;
  background-color: #f8f9fa;
}

.mr-preview tfoot td {
  font-weight: 600;
  background-color: #f8f9fa;
}

/* Estilos de acciones */
.mr-preview-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.mr-preview-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.mr-generate-pdf {
  background-color: #2271b1;
  color: #fff;
}

.mr-generate-pdf:hover {
  background-color: #135e96;
}

.mr-send-email {
  background-color: #00a32a;
  color: #fff;
}

.mr-send-email:hover {
  background-color: #008a20;
}

.mr-print {
  background-color: #f0f0f1;
  color: #333;
}

.mr-print:hover {
  background-color: #dcdcde;
}

/* Estilos de alertas */
.mr-alert {
  padding: 15px 20px;
  margin-bottom: 30px;
  border-radius: 4px;
  font-size: 16px;
  display: none;
}

.mr-alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.mr-alert-error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

/* Estilos de carga */
.mr-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #2271b1;
  border-radius: 50%;
  animation: mr-spin 1s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes mr-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Estilos responsivos */
@media screen and (max-width: 768px) {
  .mr-container {
    padding: 15px;
  }

  .mr-form {
    padding: 20px;
  }

  .mr-service-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mr-preview-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mr-preview-actions {
    flex-direction: column;
  }

  .mr-preview-actions button {
    width: 100%;
  }

  .mr-preview table {
    display: block;
    overflow-x: auto;
  }
}